v-指令

v-cloak

[v-cloak] {
    display: none;
}

包含v-cloak属性的html标签在页面初始化时会被隐藏，在vue执行ready之后，v-cloak属性会被自动去除，此时对应的标签会变为可见。

v-text

        
{{msg}}
        

和插值表达式的实现效果是一样的
差别：
1．v-text是没有闪烁问题的
2．v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空
相同点：
都会把文本中的信息原样直接输出，不进行解析，v-html会对文本信息进行解析后输出

v-html

用于输出html代码

v-bind属性绑定

实现属性绑定，单向的数据绑定，用于输出html的属性值，也就是class、style还有href之类之类的属性，可以缩写为“：”，感觉这个和小程序那边的样式绑定很像，在web端是不支持数据直接绑定的，使用了vue框架之后，样式就可以在js中改变。v-bind后面的引号中可以书写js表达式。
书写规范 v-bind:数据名/属性名=’’

image.png

 
菜鸟教程
 

v-on事件绑定

用于绑定事件，进行处理，并且提供了事件修饰符来处理DOM事件细节
书写规范 v-on:click=’bap’;
常用的事件
.mouseover…
.click
可以简写为@
事件修饰符，在事件后面添加.修饰符，事件修饰符可串联 @click.stop=’’
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件监听器时使用事件捕获模式
.self 只当事件在该元素本身触发时触发回调（只有点击自己才执行）
.once 事件只能触发一次

v-model双向绑定

用于实现双向数据绑定，只能应用在表单元素中

 
{{ message }}

  //在输入框中输入文字后，在上面的行中同步显示

v-if

用于条件判断

还有相关的v-else，v-else-if

元素会直接在dom树中删除，如果只显示隐藏元素一次，最好使用v-if

v-show

感觉和其他平台的hidden相似

 
Hello!



new Vue({

 el: '#app',

 data: {

 ok: true

 }

})

元素并没有在dom树中去掉，只是隐藏，相当于display:none，当需要频繁的操作元素的显示和隐藏，最好使用v-show，可以提高性能。

v-for

v-for=”site in sites”

其中sites表示循环的对象，site就像item一样

也可以提供第二个参数作为键名，第三个参数作为索引，v-for=”(value,key,index) in object”

当循环数组的时候，语法为v-for=’(item,index) of list’

  

    

      {{ site.name }}
    
  


new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
}) 

v-for迭代对象：第一个参数表示值，第二个表示键名，第三个表示下标

  

    

     {{ index }}. {{ key }} : {{ value }}
    
  


new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})

在使用的时候最好绑定key值，可以提高性能，key值是不相同的，使用:key=’value’；key只接受string或者number
v-for迭代数字
v-for=’I in 100’