（1）什么是VUE
是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
（2）模板语法
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：
例子：
<!--模板渲染--> <div id="app"> <!--显示 Hello Vue.js!--> <p>{{ message }}</p> </div> <script> //启用VUE渲染 var app = new Vue({ el: ‘#app‘,//渲染id为app的标签 data: { message: ‘Hello Vue.js!‘ } }) </script>
（3）双向绑定
vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。
在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：
例子：
<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> <script> new Vue({ el: ‘#app‘, data: { message: ‘China is the champion!‘ } }) </script>
效果图：
（4）VUE事件语法
常用事件 v-on，以click为例，所有的v-on都可以简写为@，比如说v-click可以简写为@click
例子：
<div id="app"> <!-- dianwo是下面定义的方法名 --> <button @click="dianwo">aaa</button> </div> <script> var app = new Vue({ el: ‘#app‘, data: { }, // 定义方法 methods: { dianwo : function(res){ // 点击后在控制台输出"22" console.log("22") } } }) </script>
效果图：