指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
v-cloak
v-cloak指令用于解决插值表达式的“闪动”问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>解决插值表达式的“闪动”问题</title>
<script src="js/vue.js"></script>
<style>
/* 1.添加样式 [v-cloak]{display:none;} */
[v-cloak]{display:none;}
</style>
</head>
<body>
<div id="app">
<!-- 2. 在插值表达式所在的标签中添加v-cloak指令 -->
<h1 v-cloak>{{message}}</h1>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
原理：先隐藏，替换好值之后显示最终的值。在数据渲染完场之后，v-cloak 属性会被自动去除， v-cloak一旦移除也就是没有这个属性了，属性选择器就选择不到该标签，也就是对应的标签会变为可见。
v-text、v-html、v-pre、v-once
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>插值指令</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--
v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
-->
<div v-text="message"></div>
<!--
使用v-html指令插入，会将数据解析为HTML。
可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上
-->
<div v-html="title"></div>
<!-- v-pre 显示原始信息跳过编译过程 -->
<div v-pre>{{message}}</div>
<!-- v-once执行一次性的插值【当数据改变时，插值处的内容不会继续更新】 -->
<div v-once>{{message}}</div>
</div>
<script>
//2.创建一个Vue的实例
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
title:'<h2>你好 Vue</h2>',
}
})
</script>
</body>
</html>
运行结果：
v-if、v-else-if、v-else
v-if 指令用于条件性地渲染一块内容，Vue会根据表达式的值的真假条件来渲染元素。
v-else是搭配 v-if 使用，v-else元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。类似 JS 的 if … else。
v-else-if充当v-if的else-if块，可以链式的使用多次。 类似JS的 if … else if … else。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>条件渲染</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<p>
成绩等级：
<span v-if="score<=100 && score>=90">A</span>
<span v-else-if="score<90 && score>=80">B</span>
<span v-else-if="score<80 &&score>=60">C</span>
<span v-else-if="score<60 && score>=0">D</span>
<span v-else>非法</span>
</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
score:100
}
});
</script>
</body>
</html>
v-show
v-show的用法与v-if类似，不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1 v-show="ok">Hello!</h1>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
ok:false//true
}
});
</script>
</body>
</html>
v-if VS v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-for
v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，item 则是被迭代的数组元素的别名。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>v-for迭代数组</h1>
<ul>
<!-- 索引(index)从零开始 -->
<li v-for="(item,index) in todos">
{{name}}{{index+1}}：{{item}}
</li>
</ul>
<h1>v-for迭代对象</h1>
<ul>
<!--
value:值
key:键名
index：索引
-->
<li v-for="(value, key,index)in object">
{{ value }}
</li>
</ul>
<h1>v-for迭代整数</h1>
<ul>
<li v-for="n in 10">
{{ n }}
</li>
</ul>
<!-- -->
<h1>在 < template > 上使用 v-for</h1>
<ul>
<template v-for="(item,index) in todos">
<li> {{name}}{{index+1}}：{{item}}</li>
<li>-------------------</li>
</template>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name:'任务',
todos: [
'学习JavaScript',
'学习Vue'
],
object: {
studentno: '2020370001',
studentname: '张三',
sex: '男'
}
}
});
</script>
</body>
</html>
运行结果：
当Vue用 v-for 正在更新已渲染过的元素列表时，它默认使用“就地复用”策略。如果数据项的顺序被改变，Vue将不会移动DOM元素来匹配数据项的改变，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。
为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。key属性的类型只能为 string或者number类型。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id='app'>
<p v-for="item in list">
<input type="checkbox" />
{{item.id}}--{{item.name}}
</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [{
id: 1,
name: '张三'
},
{
id: 2,
name: '李四'
}]
}
});
//模拟数据改变
setTimeout('vm.list.unshift({id:3,name:"王五"})', 8000);
</script>
</body>
</html>
运行结果：
为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。key属性的类型只能为 string或者number类型。
<p v-for="item in list" :key="item.id">
<input type="checkbox" />
{{item.id}}--{{item.name}}
</p>
注意：不推荐v-for和v-if同时用在同一个元素上。因当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级。这意味着 v-if 将分别重复运行于每个 v-for 循环中。
v-bind
v-bind指令用于动态地绑定一个或多个属性。
在开发的时候，有时候我们的属性不是写死的，有可能是根据我们的一些数据动态地决定的，比如图片标签（<img>）的src属性，我们可能从后端请求了一个包含图片地址的数据，需要将地址动态的绑定到src上面，这时就不能简单的将src写死。v-bind指令主要用于属性绑定。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />6
<title>动态绑定属性</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 完整语法 -->
<img v-bind:src="imageSrc" />
<!-- 缩写 -->
<img :src="imageSrc" />
</div>
<script>
//2.创建一个Vue的实例
var app = new Vue({
el: '#app',
data: {
imageSrc: './img/1.jpg'
}
})
</script>
</body>
</html>
运行结果：
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。class和style都是属性，所以可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
1. v-bind绑定class
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="./js/vue.js"></script>
<style>
.textColor {color: white; background:#CCC;}
.textSize { font-size: 30px;font-weight: bold;}
.box{border:1px dashed #000; margin: 20px auto;}
</style>
</head>
<body>
<div id="app">
<!-- 如果绑定的是一个对象,则键为对应的类名,值为对应data中的数据 -->
<p v-bind:class="{ textColor: isColor }">对象语法</p>
<!--
1.可以在对象中传入更多属性来动态切换多个 class。
2.v-bind:class 指令也可以与普通的 class 属性共存。
-->
<div class="box" v-bind:class="{ textColor: isColor, textSize: isSize }">对象语法</div>
<!-- v-bind 中支持绑定一个数组 数组中classA和 classB 对应为data中的数据 -->
<div class="box" v-bind:class="[textColor, textSize]">数组语法</div>
<!-- 如果想根据条件切换列表中的class，可以用三目运算 -->
<div class="box" v-bind:class="[isColor==true?textColor:textSize]">数组语法</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
isColor: true,
isSize: false,//不渲染，注意看下面的截图
textColor:'textColor',
textSize:'textSize'
}
});
</script>
</body>
</html>
运行结果：
绑定对象和绑定数组的区别
绑定对象的时候，对象的属性即要渲染的类名，对象的属性值对应的是data中的数据。
绑定数组的时候数组里面存的是data 中的数据。
2. v-bind绑定style
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>绑定style</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- v-bind:style的对象语法十分直观————看着非常像 CSS，
但其实是一个 JavaScript 对象。 CSS 属性名可以用
驼峰式 (camelCase)或短横线分隔 (kebab-case，记得用引号括起来) 来命名 -->
<p v-bind:style="{ color: fontColor, fontSize: fontSize }">对象语法</p>
<!-- v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上 -->
<p v-bind:style="[fontColorObj, fontSizeObj]">数组语法</p>
</div>
<script>
var vm=new Vue({
el: '#app',
data: {
fontColor: 'red',
fontSize: '12px',
fontColorObj:{
color:'white',
background:'blueviolet'
},
fontSizeObj:{
'font-size':'30px',
'font-weight':'bold'
}
}
})
</script>
</body>
</html>
运行结果：
v-on（事件处理）
Vue.js提供了事件处理机制，可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。通常情况下需要编写监听事件、事件处理方法、内联事件处理器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车数量（事件处理）</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
数量：
<!-- 通过v-on来给元素绑定事件 -->
<!-- <input type="button" value="+" @click="num--"/>
num--能将num值改变，但是不推荐这么写-->
<!-- 开发中许多事件处理逻辑会更为复杂，所以直接把JavaScript 代码写在v-on指令中是不可行的。因此v-on还可以接收一个需要调用的方法名称 -->
<input type="button" value="-" v-on:click="del" />
<!-- 如果需要传递参数，就需要内联 JavaScript 语句,这种方式称为内联事件处理器，在内联事件处理器中的方法中可以使用特殊的变量$event把它传入方法，以此来访问原生的DOM事件。必须作为最后一个参数显示传递，并且事件对象的名称必须是$event-->
<input type="text" v-model:value="num" v-on:focusout ="change(num,$event)" size="1">
<!-- v-on可以用@代替 -->
<input type="button" value="+" @click="add" />
</div>
<script>
var v3 = new Vue({
el: '#app',
data: {
num:1
},
methods: {
/* 例如当单击按钮时，数量减一，但是数量不可以小于等于0，所用我们就要写一些逻辑处理的代码。 */
del: function() {
// this在方法里指向当前 Vue 实例
if (this.num > 1) {
this.num--;
} else {
alert("数量不能小于1");
}
},
add:function(){
this.num++;
},
change: function(num,event) {
if (num < 1) {
this.num = 1;
}
console.log(event.target)//target 事件属性可返回事件的目标节点（触发该事件的节点）
}
}
})
</script>
</body>
</html>
1. 事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。
修饰符是由点开头的指令后缀来表示的。
| 事件修饰符 | 作用 |
|---|---|
| @ click.stop | 阻止单击事件继续传播 |
| @ submit.prevent | 提交事件不再重载页面 |
| @ click.stop.prevent | 修饰符可以串联，即阻止冒泡也阻止默认事件 |
| @ click.self | 只当在 event.target 是当前元素自身时触发处理函数 |
| @ click.once | 点击事件将只会触发一次（2.1.4新增） |
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
2. 按键修饰符
在监听键盘事件的时候，我们常常需要检测一些常用的键值（keyCode）。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。
| 按键修饰符（按键码的别名） |
|---|
| .enter(enter键) |
| .tab(tab键) |
| .delete (捕获“删除”和“退格”键) |
| .esc (取消键) |
| .space(空格键) |
| .up(上) |
| .down(下) |
| .left(左) |
| .right(右) |
3. 系统修饰键
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
| 系统修饰键(2.1.0 新增) |
|---|
| .ctrl |
| .alt |
| .shift |
| .meta |
4. 自定义按键修饰符别名
在Vue中可以通过config.keyCodes自定义按键修饰符别名。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>动态绑定属性</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法 -->
<input type="text" v-on:keydown.f5="prompt()">
</div>
<script>
Vue.config.keyCodes.f5 = 116;
let app = new Vue({
el: '#app',
methods: {
prompt: function() {
alert('我是 F5！');
}
}
});
</script>
</body>
</html>
v-model（双向数据绑定）
v-model 指令在表单控件元素上创建双向数据绑定。根据控件类型自动选取正确的方法来更新元素。负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
注意：v-model 会忽略所有表单元素的 value、checked、selected属性的初始值而总是将 Vue 实例的数据作为数据来源。应该通过 JavaScript 在组件的 data 选项中声明初始值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单输入绑定</title>
<style>
#app {margin: 0 auto;width: 880px;height: 610px;}
#app h2 {text-align: center;}
.left {width: 400px;float: left}
.form {margin-left: 30px;}
.right {width: 400px;float: right;border: 1px solid #000;}
.info {margin-left: 30px;line-height: 1.2em;}
</style>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>填写个人信息</h2>
<div class="left">
<div class="form">
<form>
<!-- 文本框 -->
<!-- trim修饰符可以过滤内容左右两边的空格。 -->
<p>姓名: <input type="text" name="user" v-model.trim="user"></p>
<p>
<!-- 单选按钮：单选按钮中被选择的单选按钮，通过v-model=”sex”自动绑定。 -->
性别:
<input type="radio" value="男" v-model="sex"><label>男</label>
<input type="radio" value="女" v-model="sex" checked><label>女</label>
</p>
<p>
<!-- 复选框：
两种情况：单个勾选框和多个勾选框。
单个勾选框：
v-model即为布尔值。
此时input的value并不影响v-model的值。
多个复选框：
当是多个复选框，因为可以选中多个，所以对应的data中的属性是一个数组。
当选中某一个时，就会将input的value添加到数组中。
-->
爱好:
<input type="checkbox" value="篮球" v-model="checkedNames">
<label>篮球</label>
<input type="checkbox" value="足球" v-model="checkedNames">
<label>足球</label>
<input type="checkbox" value="羽毛球" v-model="checkedNames">
<label>羽毛球</label>
<input type="checkbox" value="跑步" v-model="checkedNames">
<label>跑步</label>
</p>
<p>
<!--如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。
选择列表多选时，绑定到一个数组上。-->
<label>地址:</label>
<select name="city" v-model="address">
<option value="">请选择城市</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="杭州">杭州</option>
</select>
</p>
<p>
<!-- 文本域 -->
个人简介:<br />
<textarea v-model="profile" cols="50" rows="6">填写信息</textarea>
<!-- 在文本区域插值 (<textarea>{{ profile }}</textarea>) 并不会生效，应用 v-model 来代替。 -->
</p>
<p>
<!-- 但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。 -->
<input type="checkbox" v-model="toggle" v-bind:true-value="yes" v-bind:false-value="no" />
</p>
<div>
<input type="submit" value="提交">
<input type="reset" value="重置">
</div>
</form>
</div>
</div>
<div class="right">
<div class="info">
<p>姓名:{{user}}</p>
<p>性别:{{sex}}</p>
<p>爱好:<span v-if="checkedNames.length!=0">{{checkedNames}}</span></p>
<p>地址:{{address}}</p>
<p>个人简介:{{profile}}</p>
<p>{{toggle}}</p>
</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
user: '',
sex: '男',
checkedNames: [],
address: '',
profile: '',
toggle:'',
yes:'yes',
no:'no'
}
})
</script>
</body>
</html>
运行结果：
修饰符
- .lazy: 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。可以给v-model添加 lazy 修饰符，从而转变为使用 change 事件进行同步。
- .number：自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符
- .trim：自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符。
216
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
