No content

Initial release: February 2014 Author (original): Evan You Vue 2.0 release: September 2016 

“What if I could just extract the part that I really liked about Angular and build something really lightweight without all the extra concepts involved?” - 

Virtual DOM Component Based Methodology Props Build Environments vue-cli create-react-app Browser Devtools Router vue-router react-router Flux vuex redux Two-way data binding 

class MessageComponent extends Component { state { message: "" } handleMessageChange = (e) => { this.setState({ message: e.target.value }) } render() { return ( ); } } 

var Message = new Vue({ el: ’#message’, data: { message: ’’ } }); 

class MessageComponent extends Component { state { message: "" } handleMessageChange = (e) => { this.setState({ message: e.target.value }) } render() { return ( ); } } var Message = new Vue({ el: ’#message’, data: { message: ’’ } }); 

var Message = new Vue({ el: ’#message’, data: { message: ’’ }, created() {}, mounted() {}, computed: {}, methods: {} }); 

Templates!

{{ item.message }}

{{ item.message }}



Reactive State! “State” often relates to the data object in the Vue instance/components No need to call setState() - Data object is automatically reactive to the view 

No content

No content