目录

1. 收集表单元素

2. 过滤器

3. 内置指令

3.1 v-text 指令

3.2 v-html 指令

3.3 v-cloak 指令（无值）

3.4 v-once指令

3.5 v-pre 指令

4. 自定义指令 （面试常问）

4.1 函数式

4.2 对象式

4.3 总结

---

1. 收集表单元素

 ，则v-model收集的是value值，用户输入的就是value值。

，则v-model收集的是value值，且要给标签配置不同value值。设置相同name属性

：v-model 的值需要相同，设置不同的value 值，并把v-model 的值设置为数组形式，不能设为字符串！

1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）

2.配置input的value属性:

        (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）

        (2)v-model的初始值是数组，那么收集的的就是value组成的数组

备注：v-model的三个修饰符：

• lazy：失去焦点再收集数据
• number：输入字符串转为有效的数字
• trim：输入首尾空格过滤

2. 过滤器

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

本质是个函数，传入一个参数，有返回值

语法：

            1.注册过滤器：Vue.filter(name,callback) 或 new Vue { filters : { } }

            2.使用过滤器：{{ xxx | 过滤器名}}  或  v-bind : 属性 = " xxx | 过滤器名 "

  <h3>现在是：{{time | timeFormater}}h3>

<script>
			//局部过滤器
			filters:{
				timeFormater(value,str='YYYY年MM月DD日 HH:mm:ss'){
					// console.log('@',value)
					return dayjs(value).format(str)
				}
			}
script>

		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})

备注：

1.过滤器也可以接收额外参数、多个过滤器也可以串联：

• 如果是  {{  time | timeFormater('year'')  }} , 过滤器的第一个参数是time，year是第二个参数;如果第二参数有值就用第二个参数，如果没有值就用第一个参数
• 多个过滤器可以串联使用，如 {{ A|  B | C }} 是将A的值给B，再将B的值给C

2.并没有改变原本的数据, 是产生新的对应的数据

• 局部过滤器是filters，可以写多个；全局过滤器是filfter 只能一个个写 

3. 内置指令

• v-bind: 单向绑定解析表达式，可简写为：xxx
• v-model：双向数据绑定
• v-for：遍历数组/对象/字符串
• v-on：绑定事件监听，可写简写@
• v-if / v-lese：条件渲染（控制节点是否存在）
• v-show ：条件渲染：（动态控制节点是否展示）

3.1 v-text 指令

v-text 可以渲染本文内容，不解析html 标签

与插值语法的区别： v-text 会替换掉本文内容，{{ xxx }}不会

与插值语法 {{ }}} 效果相同，更建议写插值语法跟简单方便，灵活

3.2 v-html 指令

作用：可解析html标签并渲染在页面上

缺点：安全性问题，在网站上动态渲染html是很危险的，容易导致xss（跨站脚本）攻击，一定要在可信的内容上使用v-html，千万千万不要在用户提交的内容上使用

cookie 原理：携带用户名密码请求网站，登录成功跳转个人中心 +k1:v1 k2:v2; 浏览器上会有很多网站的cookie；cookie 是很重要的，可以记录你的用户名和密码

3.3 v-cloak 指令（无值）

本质是一个特殊的属性，vue 实例创建完毕后会接管容器后，会删除v-cloak属性

使用 css（[v-cloak]:{dispaly: none;}）可以解决网速慢时页面展现出 {{ xxx }}的问题

3.4 v-once指令

所在节点在初次静态渲染后，就视为静态内容了

以后数据的改变不会引起v-once 所在结构的更新，可以用于优化性能

3.5 v-pre 指令

跳在所在节点的编译过程

可利用跳过没有使用插值语法的节点，会加班编译，提高效率

4. 自定义指令 （面试常问）

4.1 函数式

用的时候用 v-xxx；定义时用 xxx；

函数式写法简单；对象式写法复杂，但是可以处理细节问题

自定义函数调用时：

• 指令与元素成功绑定时；
• 指令所在的模板发生解析（data 内容发生改变）时

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
		<div id="root">
			<h2>当前的n值是：<span v-text="n">span> h2>
			
			<h2>放大10倍后的n值是：<span v-big="n">span> h2>
			<button @click="n++">点我n+1button>
		div>
	body>
	<script type="text/javascript">
		new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				n:1
			},
			directives:{
				big(element,binding){
					console.log('big',this) //注意此处的this是window
					element.innerText = binding.value * 10
				},
			}
		})
		
	script>

4.2 对象式

对象式有vue 的生命周期钩子函数

函数式只有两个生命周期钩子： bind、update

需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。
		<div id="root">
			<input type="text" v-fbind:value="n">
		div>
	body>
	<script type="text/javascript">
	new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				n:1
			},
			directives:{
				fbind:{
					//指令与元素成功绑定时（一上来）
					bind(element,binding){
						element.value = binding.value
					},
					//指令所在元素被插入页面时
					inserted(element,binding){
						element.focus()
					},
					//指令所在的模板被重新解析时
					update(element,binding){
						element.value = binding.value
					}
				}
			}
		})
	script>

4.3 总结

1. 多个单词组成命名：定义用 v-a-b ；使用时用 ‘a-b’, 不要用camelCase命名。

2. 自定义指令的 this 是指向 windows

3. 分为局部指令 directives 和全局指令 directive （注意两个单词写法不一样哦~）

(1).局部指令：

            new Vue({                                                

              directives : { 指令名 : 配置对象 / 回调函数 } 

            })      

(2).全局指令：

              Vue.directive ( 指令名 , 配置对象 /回调函数 ) 

4. 配置对象中常用的3个回调：

      (1).bind：指令与元素成功绑定时调用。

      (2).inserted：指令所在元素被插入页面时调用。

      (3).update：指令所在模板结构被重新解析时调用