vue常用指令汇总

入门vue框架的学习过程中做了一些指令汇总的笔记，以防丢失同时也方便自己查找在这里记录一下。

1.v-html
用于输出html代码

2.v-bind
html 中元素的属性绑定：常用于动态绑定 class 和 style 以及 href 等

    
DOM 元素属性绑定
    
DOM 元素属性绑定

v-bind.png

如上：将这个元素节点的 title 属性和 Vue 实例的 message 属性绑定到一起。

3.v-if/v-else
用来判断是否加载html的DOM
如果条件为false，那么在生成的HTML语句中，条件为false的标签不会生成在代码中

    
现在你看到我了

    

4.v-show
调整css dispaly属性，根据条件来展示元素的

    
Hello!
  //条件为TRUE，输出
    
false!
  //条件为false，不输出
    
10大于5，输出!
   //条件为TRUE，输出
    
不大于10，不输出!
   //条件为false，不输出

v-if和v-show的区别
1.v-if 根据条件渲染，它会确保在切换过程中条件块内的组件销毁和重建
2.v-if如果在初始渲染时条件为假，则不会渲染条件块，直到条件变为真时，才会开始渲染条件块
3.v-show 不管初始条件是什么，元素总是会被渲染，只会根据条件的真假，在display:block 和display:none 之前切换

5.v-on
用于监听 DOM 事件，简写为：【 @ 】
监听按钮事件，并且对用户的输入进行响应

    
{{ message }}
    反转字符串

6.v-model
用于实现双向数据绑定用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

    
{{ message }}
    

7.v-text
v-text主要用来更新textContent，可以等同于JS的text属性

8.v-pre
v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译

    {{message}}  //这条语句不进行编译
    {{message}}

ps：最终仅显示第二个span的内容

9.v-cloak
这个指令是用来保持在元素上直到关联实例结束时进行编译

    

        {{message}}
    

在页面加载时会闪烁，先显示:

    {{message}}

然后才会编译为：

    hello world!

10.v-once
v-once关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能

This will never change:{{msg}}  //单个元素
//有子元素
    
comment
    
{{msg}}

  //组件

    
{{i}}

上面的例子中，msg、list即使产生改变，也不会重新渲染

11.v-for
用v-for指令根据遍历数组来进行渲染
有下面两种遍历形式

   //使用in，index是一个可选参数，表示当前项的索引
   //使用of

下面是一个例子，并且在v-for中，拥有对父作用域属性的完全访问权限

    

        {{parent}}-{{item.text}}
    

会被渲染为：

    
父作用域-文本1
    
父作用域-文本2

ps：当v-for和v-if同处于一个节点时，v-for的优先级比v-if更高。这意味着v-if将运行在每个v-for循环中

12.自定义指令
全局指令

    
页面载入时，input 元素自动获取焦点：
    

局部指令

  
页面载入时，input 元素自动获取焦点：
  

 

13.事件修饰符
.stop 阻止事件继续传播
.prevent 事件不再重载页面
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次
.passive 告诉浏览器你不想阻止事件的默认行为

...


...





...

14.按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

全部的按键别名：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

Do something