Vue2.0笔记——常用指令

该指令用于数据的双向绑定，即通过input text文本框，和Vue进行双向的显示。
一般用于表单元素。
只需要这样编写挂载目标：

    
    文本框的内容为:{{message}}

Vue实例的内容跟上节一样不用变。
通过对文本框的输入，Vue实例会自动解析并绑定到{{message}}进行渲染。

v-model为Vue的内部指令，到后面我们是可以指令的。

该指令，顾名思义，使用来循环的。
我们通过，手动编写和循环介绍:
1.首先在Vue实例的data选项中建立数组

data:{    arr:['51CTO','走着路','Vue','v-for']}

2.然后再div中编写

    
        
51CTO博客
        
走着路
        
Vue
        
v-for
    
    
    
        {{val}}    

ol是手动写的有序列表，下面的ul是我们通过v-for指令的无序列表。运行可看到显示成功。
但如果想要索引和值，那么修改:

{{key}}={{val}}

即可,注意，括号里val在前，而模板显示时时，key在前。需注意。

用于绑定事件的,类似onclick,onblur等等。
用法：v-on:事件="函数"
既然使用事件，那么就要有一个新的选项methods来制定方法。
例如：

    点击方法，sayHi    鼠标经过

然后，打开控制台，点击按钮，控制台就会显示HelloWorld，点击多次，前面会有数字显示次数。
此外还可以通过对象语法来编写事件:

此方式可以一次定义多个事件，在Vue实例的mothods选项中如平常一样编写。

v-on指令可以简写为@

用于只绑定一次

{{message}}{{message}}

尽管v-model绑定message如何更改，message值总会变，但是h2通过v-once指令，它却只能显示一次，即'HelloWorld'这个初始绑定。而h3却始终动态渲染。

其余常用的v-if,v-show在 条件渲染 中介绍
v-bind在 Class与Style绑定 中介绍