常用内置指令
v-bind：
主要用于动态的绑定DOM元素属性，即属性值来自 Vue 中的 data 属性提供的相应的值。
例如：
<a v-bind:href="linkUrl">我是超链接</a>
new Vue({
data: {
linkUrl : "http://www.xxxx.com"
}
})
v-bind也可以简写为 : ，即上诉例子可以简写为
<a :href="linkUrl">我是超链接</a>
v-model：
我们可以使用 v-model 指令在<input>(<input> 标签有多种类型，如 button、select 等等)及 <textarea> 元素上进行双向数据绑定。但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
使用v-model可以实现数据的绑定，也就是说我们在输入框中输入什么数据，对应的<span>标签中就会显示什么数据。
具有 lazy、number、debounce（2.0 废除）。trim（2.0 新增）这些修饰符。
下面这个例子可以将你输入的内容实时的显示在页面上：
<!DOCTYPE html>
<html>
<head>
<title>v-model</title>
<meta charset="utf-8">
</head>
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="app">
<!-- 未使用 v-model 进行数据双向绑定 -->
<h1>未使用 v-model 进行数据双向绑定</h1>
<input type="text" name="">
<h2>{{ input1 }}</h2>
<hr>
<!-- 使用了 v-model 进行数据双向绑定 -->
<h1>使用了 v-model 进行数据双向绑定</h1>
<input type="text" name="" v-model="input2">
<h2>{{ input2 }}</h2>
</div>
<script type="text/javascript">
//定义数据
var data = {
input2 : ""
}
var vm = new Vue({
el: "#app",
data: data
});
</script>
</body>
</html>
运行效果如下：
v-model运行截图.png
v-if/v-else/v-show：
v-if/v-else/v-show 这三个指令主要用于根据条件展示对应的模板内容。
v-if 和 v-show 的主要区别就在于，v-if 在条件为 false 的情况下并不进行模板的编译，而 v-show 则会在模板编译好之后将元素隐藏掉。v-if 的切换消耗要比 v-show 高，但初始条件为 false 的情况下，v-if 的初始渲染要稍快。
v-for：
1．参数顺序变化
当包含参数 index 或 key 时，对象参数修改为（item, index）或（value, key），这样
与 JS Array 对象的新方法 forEach 和 map，以及一些对象迭代器（例如 lodash）的参数能保
持一致。
2．v-bind:key属性 track-by 被 v-bind ：key 代替，<div v-for="item in items" tranck-by="id"> 需要改写成 <div v-for="item in items" v-bind:key="item.id">。
３．n in 10v-for="n in 10" 中的 n 由原来的 0 ～ 9 迭代变成 1 ～ 10 迭代。
v-on：
主要用于事件的绑定。
<button v-on:click="func">提交<button>
或
<button @click="func">提交<button>
v-text：
v-text，参数类型为 String，作用是更新元素的 textContent。{{}} 文本插值本身也会
被编译成 textNode 的一个 v-text 指令。而与直接使用 {{}} 不同的是，v-text 需要绑定在某
个元素上，能避免未编译前的闪现问题。例如：
<span>{{msg}}</span> //可能出现编译闪现问题
<span v-text="msg"></span> //不会出现闪现问题
v-HTML：
v-HTML, 参数类型为 String，作用为更新元素的 innerHTML，接受的字符串不会进行
编译等操作，按普通 HTML 处理。同 v-text 类似，{{{}}} 插值也会编译为节点的 v-HTML
指令，v-HTML 也需要绑定在某个元素上且能避免编译前闪现问题。例如：
<span>{{HTML}}</span> //可能出现编译闪现问题
<div v-HTML="HTML"></div> //不会出现闪现问题
v-el/v-ref：
已弃用，统一使用 ref 属性标记元素或组件添加标记，然后通过this.$refs获取,示例如下：
<!DOCTYPE html>
<html>
<head>
<title>v-model</title>
<meta charset="utf-8">
</head>
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="app">
<div ref="test">hello vue !!!!!!!!</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
mounted:function (){
alert(this.$refs.test.innerText)
}
});
console.log(vm.$refs.test.innerText)
</script>
</body>
</html>
v-pre：
用来跳过编译这个元素和子元素，显示原始的{{}}Mustache标签，用来减少编译时间，例如：
<div>{{msg}}</div>
new Vue({
el: "#app",
data:{
msg: "test v-pre"
}
})
v-cloak：
v-cloak 指令相当于在元素上添加了一个 [v-cloak] 的属性，直到关联的实例结束编译。
官方推荐可以和 css 规则 [v-cloak]{ display :none } 一起使用，可以隐藏未编译的 Mustache
标签直到实例准备完毕。例如：
<div v-cloak>{{ msg }}</div>
v-once：
v-once 指令是 Vue.js 2.0 中新增的内置指令，用于标明元素或组件只渲染一次，即使随
后发生绑定数据的变化或更新，该元素或组件及包含的子元素都不会再次被编译和渲染。这样
就相当于我们明确标注了这些元素不需要被更新，所以 v-once 的作用是最大程度地提升了更
新行为中页面的性能，可以略过一些明确不需要变化的步骤。
示例：
<!DOCTYPE html>
<html>
<head>
<title>v-model</title>
<meta charset="utf-8">
</head>
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="app">
<div v-once>v-once：{{oncemsg}}</div>
<div>no v-once：{{msg}}</div>
</div>
<script type="text/javascript">
data = {
oncemsg: "test v-once",
msg: "hello vue!!!!"
}
var vm = new Vue({
el: "#app",
data: data,
mounted:function (){
this.oncemsg = "changed msg",
this.msg = "changed msg"
}
});
</script>
</body>
</html>
运行之后可以发现，加了v-once的msg并没有被改变值。
网友评论