1、
通过new的方式来得到了Vue的实例，在new通过一个对象来对Vue的实例配置（el，data）；
接触了双花括号(mustache/interpolation)的语法:可以读取变量的值 显示在调用的元素的innerHTML中。
2、双花括号
语法： <any>{{表达式}}</any>
作用：执行表达式，将表达式的结果 输出到当前调用元素的innerHTML中
3、指令
循环、选择判断、显示隐藏。。。
循环指令
语法1：
<any v-for=" tmp in 集合"></any>根据in关键词后的集合，去循环创建多个标签，
语法2：
<any v-for="(value,key) in 集合"></any>
选择指令
<any v-if="表达式"></any>
v-if指令 ： 根据表达式执行的结果的真假 来选择是否要挂载到DOM
v-else-if
v-else
3、Vue事件绑定
<any v-on:eventName="处理函数名字"></any>
通过v-on去给指定的事件绑定一个处理函数
注意事项：
方法在定义时，要放在Vue实例的methods属性
new Vue({
methods:{
handleClick:function(){
//做一些操作
}
}
})
事件绑定支持支持一种简写形式：
<button v-on:click="handleClick">clickme</button>
//通过@后边跟上事件的名字，和v-on:是一样的效果
<button @click="handleClick">clickme</button>
Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
v-on:submit.prevent="handleSubmit"4、Vue其它常用指令
v-bind
将变量中的值 通过 v-bind 绑定到元素指定的属性
img v-bind:src="myImage"
a v-bind:href="myLink"
v-bind:style='{backgroundColor:myBGColor}'
v-bind:class='{myRed:isRed}'
v-bind:disabled="!isValid"
v-bind也支持简写：a v-bind:href="myLink" ===》 a :href="myLink"
v-show
v-show="表达式" 根据表达式执行的结果的真假 来切换display显示还是隐藏
v-text
v-text='变量' 根据变量更新对应的文本内容
v-html
v-html="变量" 根据变量更新对应的innerHTML
...
5、Vue中的v-model
双向数据绑定：
方向1：data --> view
之前所接触的循环、判断、显示隐藏等指令，主要的功能是将数据 绑定到视图；
方式：①双花括号 ②常见的指令
方向2：view --》 data
将表单控件中 用户操作的 结果 绑定到 数据
方式：v-model
v-model指令本身就是一个双向数据绑定的指令：既可以将数据绑定到视图，又可以将视图中的结果绑定到数据。
修饰符：
.lazy - 取代 input 监听 change 事件（在输入完之后，失去焦点 再去更新）
.number - 输入字符串转为数字
.trim - 输入首尾空格过滤