vue的基础使用

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 - 输入首尾空格过滤