1、class 与 style 绑定

1.1 理解

在应用界面中, 某个(些)元素的样式是变化的
class/style 绑定就是专门用来实现动态样式效果的技术

1.2 class 绑定

写法:class="xxx" xxx可以是字符串、对象、数组。
字符串写法适用于：类名不确定，要动态获取。
表达式是字符串: 'classA'
数组写法适用于：要绑定多个样式，个数不确定，名字也不确定。
表达式是数组: ['classA', 'classB']
对象写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
表达式是对象: {classA:isA, classB: isB}

1.3 style绑定

:style="{fontSize: xxx}"其中xxx是动态值。
:style="{ color: activeColor, fontSize: fontSize + 'px' "

fontSize是动态值
:style="[styleObj,styleObj2]"其中a、b是样式对象。

1.4 代码示例

<body>
	<!-- 准备好一个容器-->
	<div id="root">
		<!-- 绑定class样式--字符串写法，适用于：样式的类名不确定，需要动态指定 -->
		<div class="basic" :class="mood" @click="changeMood">{{name}}</div> <br /><br />

		<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定、名字也不确定 -->
		<div class="basic" :class="classArr">{{name}}</div> <br /><br />

		<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用 -->
		<div class="basic" :class="classObj">{{name}}</div> <br /><br />

		<!-- 绑定style样式--表达式写法 -->
		<div class="basic" :style=" {fontSize: fontSize + 'px'}">{{name}}</div> <br /><br />
		<!-- 绑定style样式--对象写法 -->
		<div class="basic" :style="styleObj ">{{name}}</div> <br /><br />
		<!-- 绑定style样式--数组写法 -->
		<div class="basic" :style="styleArr">{{name}}</div>
		<div class="basic" :style="[styleObj,styleObj2]">{{name}}</div>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false

	const vm = new Vue({
		el: '#root',
		data: {
			name: '东方青云',
			mood: 'normal',
			classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
			classObj: {
				atguigu1: false,
				atguigu2: false,
			},
			fontSize: 40,
			styleObj: {
				fontSize: '40px',
				color: 'red',
			},
			styleObj2: {
				backgroundColor: 'orange'
			},
			styleArr: [
				{
					fontSize: '40px',
					color: 'blue',
				},
				{
					backgroundColor: 'gray'
				}
			]
		},
		methods: {
			changeMood() {
				const arr = ['happy', 'sad', 'normal']
				const index = Math.floor(Math.random() * 3)
				this.mood = arr[index]
			}
		},
	})
</script>

2、条件渲染

2.1 v-if

写法：

v-if="表达式"
v-else-if="表达式"
v-else="表达式"

适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。

2.2 v-show

写法：v-show="表达式"

适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

2.3 注意事项

备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。

2.4 代码示例

<!-- 准备好一个容器-->
		<div id="root">
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
			<!-- 使用v-show做条件渲染 -->
			<!-- <h2 v-show="false">欢迎来到{{name}}</h2> -->
			<!-- <h2 v-show="1 === 1">欢迎来到{{name}}</h2> -->

			<!-- 使用v-if做条件渲染 -->
			<!-- <h2 v-if="false">欢迎来到{{name}}</h2> -->
			<!-- <h2 v-if="1 === 1">欢迎来到{{name}}</h2> -->

			<!-- v-else和v-else-if -->
			<!-- <div v-if="n === 1">Angular</div>
			<div v-else-if="n === 2">React</div>
			<div v-else-if="n === 3">Vue</div>
			<div v-else>哈哈</div> -->

			<!-- v-if与template的配合使用 -->
			<!-- template不会改变dom结构，在渲染完后会自动销毁 -->
			<template v-if="n === 1">
				<h2>你好</h2>
				<h2>东方青云</h2>
				<h2>北京</h2>
			</template>

		</div>
		</body>

	<script type="text/javascript">
		Vue.config.productionTip = false

		const vm = new Vue({
			el:'#root',
			data:{
				name:'东方青云',
				n:0
			}
		})
	</script>

3、列表渲染

3.1 基本列表

v-for指令:

用于展示列表数据
语法：v-for="(item, index) in xxx" :key="yyy"
可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）

代码示例：

<!-- 
	<!-- 准备好一个容器-->
	<div id="root">
		<!-- 遍历数组 -->
		<h2>人员列表（遍历数组）</h2>
		<ul>
			<li v-for="(p,index) in persons" :key="index">
				{{p.name}}-{{p.age}}
			</li>
		</ul>

		<!-- 遍历对象 -->
		<h2>汽车信息（遍历对象）</h2>
		<ul>
			<li v-for="(value,k) in car" :key="k">
				{{k}}-{{value}}
			</li>
		</ul>

		<!-- 遍历字符串 -->
		<h2>测试遍历字符串（用得少）</h2>
		<ul>
			<li v-for="(char,index) of str" :key="index">
				{{char}}-{{index}}
			</li>
		</ul>

		<!-- 遍历指定次数 -->
		<h2>测试遍历指定次数（用得少）</h2>
		<ul>
			<li v-for="(number,index) of 5" :key="index">
				{{index}}-{{number}}
			</li>
		</ul>
	</div>

	<script type="text/javascript">
		Vue.config.productionTip = false

		new Vue({
			el: '#root',
			data: {
				persons: [
					{ id: '001', name: '张三', age: 18 },
					{ id: '002', name: '李四', age: 19 },
					{ id: '003', name: '王五', age: 20 }
				],
				car: {
					name: '奥迪A8',
					price: '70万',
					color: '黑色'
				},
				str: 'hello'
			}
		})
	</script>

3.2 key的原理

3.2.1 虚拟DOM中key的作用：

key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,
随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

3.2.2 对比规则：

旧虚拟DOM中找到了与新虚拟DOM相同的key：
①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM
旧虚拟DOM中未找到与新虚拟DOM相同的key
创建新的真实DOM，随后渲染到到页面。

3.2.3 用index作为key可能会引发的问题：

若对数据进行：逆序添加、逆序删除等破坏顺序操作:
会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
如果结构中还包含输入类的DOM
会产生错误DOM更新 ==> 界面有问题。

3.2.4 开发中如何选择key?

最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示 , 使用index作为key是没有问题的。

3.3 列表过滤

实现效果：

watch实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表过滤</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <li v-for="(p,index) of filPerons" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data() {
                return {
                    keyWord: '',
                    persons: [
                        { id: '001', name: '马冬梅', age: 19, sex: '女' },
                        { id: '002', name: '周冬雨', age: 20, sex: '女' },
                        { id: '003', name: '周杰伦', age: 21, sex: '男' },
                        { id: '004', name: '温兆伦', age: 22, sex: '男' }
                    ],
                    filPerons: []

                }
            },
            // watch实现
            watch: {
                keyWord: {
                    immediate: true,
                    handler(val) {
                        this.filPerons = this.persons.filter(item => {
                            return item.name.indexOf(val) !== -1
                        })
                    }
                }
            }
        })

    </script>
</body>

</html>

computed实现：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表过滤</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <li v-for="(p,index) of filPerons" :key="index">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data() {
                return {
                    keyWord: '',
                    persons: [
                        { id: '001', name: '马冬梅', age: 19, sex: '女' },
                        { id: '002', name: '周冬雨', age: 20, sex: '女' },
                        { id: '003', name: '周杰伦', age: 21, sex: '男' },
                        { id: '004', name: '温兆伦', age: 22, sex: '男' }
                    ],
                }
            },
            computed: {
                filPerons() {
                    return this.persons.filter(item => {
                        return item.name.indexOf(this.keyWord) !== -1
                    })
                }
            }
        })

    </script>
</body>

</html>

3.4 列表排序

对上述案例进行改进，添加一点新功能
实现效果：

实现代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表排序</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <button @click="typeSort=1">年龄降序</button>
        <button @click="typeSort=2">年龄升序</button>
        <button @click="typeSort=0">原顺序</button>
        <ul>
            <li v-for="(p,index) of filPerons" :key="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false
        new Vue({
            el: '#root',
            data() {
                return {
                    keyWord: '',
                    persons: [
                        { id: '001', name: '马冬梅', age: 19, sex: '女' },
                        { id: '002', name: '周冬雨', age: 22, sex: '女' },
                        { id: '003', name: '周杰伦', age: 21, sex: '男' },
                        { id: '004', name: '温兆伦', age: 25, sex: '男' }
                    ],
                    typeSort: 0
                }
            },
            computed: {
                filPerons() {
                    const arr = this.persons.filter(item => {
                        return item.name.indexOf(this.keyWord) !== -1
                    })
                    if (this.typeSort) {
                        arr.sort((a, b) => {
                            return this.typeSort === 1 ? b.age - a.age : a.age - b.age
                        })
                    }
                    return arr
                }
            }
        })

    </script>
</body>

</html>

3.5 Vue数据监测

Vue监视数据的原理：

vue会监视data中所有层次的数据。
如何监测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要监测的数据。
(1).对象中后追加的属性，Vue默认不做响应式处理
(2).如需给后添加的属性做响应式，请使用如下API（两种API都可以）：
Vue.set(target，propertyName/index，value)
vm.$set(target，propertyName/index，value)

注： target：目标对象，propertyName/index：属性名或索引号，value：值

如何监测数组中的数据？

通过包裹数组更新元素的方法实现，本质就是做了两件事：
(1).调用原生对应的方法对数组进行更新。
(2).重新解析模板，进而更新页面。
在Vue修改数组中的某个元素一定要用如下方法：
1.使用这些API: push()、pop()、shift()、unshift()、splice()、sort()、reverse()
这些方法都会改变原数组

2.Vue.set() 或 vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！

我们来使用这些方法做个小案例：
实现效果：
代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据监测</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <style>
        button {
            padding: 8px 10px;
            margin: 5px;
        }
    </style>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <h1>学生信息</h1>
        <button @click="student.age++">年龄+1岁</button> <br />
        <button @click="addSex">添加性别属性，默认值：男</button> <br />
        <button @click="student.sex = '女' ">修改性别</button> <br />
        <button @click="addFriend">在列表首位添加一个朋友</button> <br />
        <button @click="updateFirstFriendName">修改第一个朋友的名字为：念心</button> <br />
        <button @click="addHobby">添加一个爱好</button> <br />
        <button @click="updateHobby">修改第一个爱好为：健身</button> <br />
        <button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br />
        <h3>姓名：{{student.name}}</h3>
        <h3>年龄：{{student.age}}</h3>
        <h3 v-if="student.sex">性别：{{student.sex}}</h3>
        <h3>爱好：</h3>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
        <h3>朋友们：</h3>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

        const vm = new Vue({
            el: '#root',
            data: {
                student: {
                    name: 'tom',
                    age: 18,
                    hobby: ['抽烟', '喝酒', '烫头'],
                    friends: [
                        { name: 'jerry', age: 35 },
                        { name: 'tony', age: 36 }
                    ]
                }
            },
            methods: {
                addSex() {
                    // Vue.set(this.student,'sex','男')//第一种写法
                    this.$set(this.student, 'sex', '男')//第二种写法
                },
                addFriend() {
                    // this.student.friends.unshift({ name: '东方青云', age: '88' })//第一种写法
                    this.student.friends.splice(0,0,{ name: '东方青云', age: '88' })//第二种写法
                },
                updateFirstFriendName() {
                    // this.student.friends[0].name = '念心'//第一种写法
                    // Vue.set(this.student.friends[0],'name','念心')//第二种写法
                    this.$set(this.student.friends[0], 'name', '念心')//第三种写法
                },
                addHobby() {
                    this.student.hobby.push('学习')
                },
                updateHobby() {
                    // this.student.hobby.splice(0,1,'健身')//第一种写法
                    // Vue.set(this.student.hobby,0,'健身')//第二种写法
                    this.$set(this.student.hobby, 0, '健身')//第三种写法
                },
                removeSmoke() {
                    this.student.hobby = this.student.hobby.filter(item => {
                        return item !== '抽烟'
                    })
                }
            }
        })
    </script>
</body>

</html>

4、收集表单数据

1、若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
2、若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
3、若：<input type="checkbox"/>
3.1 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
3.2 配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组

备注：
v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收集表单数据</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="root">
        <form @submit.prevent="demo">
            账号：<input type="text" v-model.trim="userInfo.account"> <br /><br />
            密码：<input type="password" v-model="userInfo.password"> <br /><br />
            年龄：<input type="number" v-model.number="userInfo.age"> <br /><br />
            性别：
            男<input type="radio" name="gender" v-model="userInfo.gender" value="男">
            女<input type="radio" name="gender" v-model="userInfo.gender" value="女"> <br /><br />
            爱好：
            学习<input type="checkbox" v-model="userInfo.hobby" value="study">
            打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
            吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
            <br /><br />
            所属校区
            <select v-model="userInfo.city">
                <option value="">请选择校区</option>
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="深圳">深圳</option>
                <option value="武汉">武汉</option>
            </select>
            <br /><br />
            其他信息：
            <textarea v-model.lazy="userInfo.other"></textarea> <br /><br />
            <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
            <button>提交</button>
        </form>
    </div>
    <script>
        new Vue({
            el: '#root',
            data() {
                return {
                    userInfo: {
                        account: '',
                        password: '',
                        age: '',
                        gender: '',
                        hobby: [],
                        city: '北京',
                        other: '',
                        agree: ''
                    }
                }
            },
            methods: {
                demo() {
                    document.write(JSON.stringify(this.userInfo))
                }
            }
        })
    </script>
</body>

</html>

5、过滤器

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
1. 注册过滤器：全局Vue.filter(name,callback) 或局部 new Vue{filters:{}}
2. 使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"

备注：
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据

代码示例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js"></script>
</head>

<body>
    <div id="root">
        <h1>显示格式化后的时间</h1>
        <!-- 计算属性实现 -->
        <h3>现在的时间是：{{time1}}</h3>
        <!-- 方法实现 -->
        <h3>现在的时间是：{{time2()}}</h3>
        <!-- 过滤器实现 -->
        <h3>现在的时间是：{{time | time3}}</h3>
        <!-- 过滤器传参 -->
        <h3>现在的时间是：{{time | time3('YYYY_MM_DD') }}</h3>
        <h3>现在的时间是：{{time | time3('YYYY_MM_DD') | mySlice}}</h3>
    </div>
    <script>
        //全局过滤器
        Vue.filter('mySlice', function (value) {
            return value.slice(0, 4)
        })
        new Vue({
            el: '#root',
            data() {
                return {
                    time: new Data()
                }
            },
            // 计算属性实现
            computed: {
                time1() {
                    return dayjs(this.time).format(('YYYY-MM-DD HH:mm:ss'))
                }
            },
            // 方法实现
            methods: {
                time2() {
                    return dayjs(this.time).format(('YYYY-MM-DD HH:mm:ss'))
                }
            },
            //局部过滤器，如果定义为局部过滤器，其他的vue实例不能访问
            filters: {
                time3(value, str = 'YYYY-MM-DD HH:mm:ss') {
                    return dayjs(value).format(str)
                }
            }
        })
    </script>
</body>

</html>

6、内置指令

对之前学过的内置指令做个统计：
我们学过的指令：
1. v-bind : 单向绑定解析表达式, 可简写为 :xxx
2. v-model : 双向数据绑定
3. v-for : 遍历数组/对象/字符串
4. v-on : 绑定事件监听, 可简写为@
5. v-if : 条件渲染（动态控制节点是否存存在）
6. v-else-if:条件渲染（动态控制节点是否存存在）
7. v-else : 条件渲染（动态控制节点是否存存在）
8. v-show : 条件渲染 (动态控制节点是否展示)

6.1 v-text指令

作用：向其所在的节点中渲染文本内容，如果有标签则会当作文本渲染。
与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

代码示例：

<!-- 准备好一个容器-->
	<div id="root">
		<div>你好，{{name}}</div>
		<div v-text="name"></div>
		<div v-text="str"></div>
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

	new Vue({
		el: '#root',
		data: {
			name: '东方青云',
			str: '<h3>你好啊！</h3>'
		}
	})
</script>

6.2 v-html指令

作用：向指定节点中渲染包含html结构的内容。
与插值语法的区别：
(1).v-html会替换掉节点中所有的内容，{{xx}}则不会。
(2).v-html可以识别html结构。

严重注意：v-html有安全性问题！！！！
(1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
2).一定要在可信的内容上使用v-html，不要用在用户提交的内容上！

6.3 v-cloak指令

v-cloak指令（没有值）：

本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

代码示例：

		<style>
			[v-cloak]{
				display:none;
			}
		</style>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2 v-cloak>{{name}}</h2>
		</div>
		<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
	</body>
	
	<script type="text/javascript">
		console.log(1)
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				name:'东方青云'
			}
		})
	</script>

6.4 v-once指令

v-once所在节点在初次动态渲染后，就视为静态内容了。
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

代码示例：

<!-- 准备好一个容器-->
		<div id="root">
			<h2 v-once>初始化的n值是:{{n}}</h2>
			<h2>当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
		
		new Vue({
			el:'#root',
			data:{
				n:1
			}
		})
	</script>

6.5 v-pre指令

跳过其所在节点的编译过程。
可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

代码示例：

<!-- 准备好一个容器-->
		<div id="root">
			<h2 v-pre>Vue其实很简单</h2>
			<h2 >当前的n值是:{{n}}</h2>
			<button @click="n++">点我n+1</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		new Vue({
			el:'#root',
			data:{
				n:1
			}
		})
	</script>

7、自定义指令

一、定义语法：

(1).局部指令：
new Vue({directives:{指令名:配置对象} 或directives{指令名:回调函数}})
(2).全局指令：
Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)
二、配置对象中常用的3个回调：

(1)bind：指令与元素成功绑定时调用。
(2)inserted：指令所在元素被插入页面时调用。
(3)update：指令所在模板结构被重新解析时调用。
三、备注：

1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
四、小案例
- 需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
- 需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

代码示例：

	<!-- 准备好一个容器-->
	<div id="root">
		<h2>{{name}}</h2>
		<h2>当前的n值是：<span v-text="n"></span> </h2>
		<!-- <h2>放大10倍后的n值是：<span v-big-number="n"></span> </h2> -->
		<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
		<button @click="n++">点我n+1</button>
		<hr/>
		<input type="text" v-fbind:value="n">
	</div>
</body>

<script type="text/javascript">
	Vue.config.productionTip = false

	//定义全局指令
	/* Vue.directive('fbind',{
		//指令与元素成功绑定时（一上来）
		bind(element,binding){
			element.value = binding.value
		},
		//指令所在元素被插入页面时
		inserted(element,binding){
			element.focus()
		},
		//指令所在的模板被重新解析时
		update(element,binding){
			element.value = binding.value
		}
	}) 
	 Vue.directive('big', (element, binding) => {
	 element.innerText = binding.value * 10
	})
	*/

	new Vue({
		el: '#root',
		data: {
			name: '东方青云',
			n: 1
		},
		directives: {
			//big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
			/* 'big-number'(element,binding){
				// console.log('big')
				element.innerText = binding.value * 10
			}, */
			// element：所绑定的dom元素节点
			// binding：绑定对象
			big(element, binding) {
				console.log('big', this) //注意此处的this是window
				// console.log('big')
				element.innerText = binding.value * 10
			},
			fbind: {
				//指令与元素成功绑定时（一上来）
				bind(element, binding) {
					element.value = binding.value
				},
				//指令所在元素被插入页面时
				inserted(element, binding) {
					element.focus()
				},
				//指令所在的模板被重新解析时
				update(element, binding) {
					element.value = binding.value
				}
			}
		}
	})

</script>