Vue学习总结4

表单数据

若：< input type=“text” />，则v-model收集的是value值，用户输入的就是value值
若：< input type=“radio” />，则v-model收集的是value值，且要给标签配置value值
若：< input type=“checkbox” />，

	1.没有配置input的value属性，那么收集的就是checked（勾选or未勾选，布尔值）
	2.配置input的value属性：
		（1）v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，布尔值）
		（2）v-model的初始值是数组，那么收集的就是value组成的数组

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

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

过滤器

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

	1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
	2.使用过滤器：{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名"

备注：

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

内置指令

v-text：
	1.作用：向其所在的节点中渲染文本内容。
	2.与插值语法的区别：v-text会替换节点中的内容，{{xx}}则不会
v-html：
	1.作用：向指定节点中渲染包含html结构的内容。
	2.与插值语法的区别：
		（1）v-html会替换掉节点中所有的内容，{{xx}}则不会。
		（2）v-html可以识别html结构。
	3.严重注意：v-html有安全性问题！！！！
		(1)在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
		(2)一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
v-clock：
	1.本质是一个特殊属性。Vue实例创建完毕后接管容器，会删掉v-clock属性
	2.使用css配合v-clock可以解决网速慢时页面展示出{{xxx}}的问题
v-once：
	1.v-once所在节点在初次动态渲染后，就视为静态内容了
	2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
v-pre：
	1.跳过其所在节点的编译过程
	2.可利用他跳过：没有使用指令语法、没有使用插值语法的节点，可以加快编译

自定义指令：

一、定义语法：
	（1）局部指令：
			new Vue({
				directives:{指令名: 配置对象}
				//  directives{指令名: 回调函数}
			})
	（2）全局指令：
			Vue.directive(指令名, 配置对象)
			Vue.directive(指令名，回调函数)
二、配置对象中常用的3个回调
	（1）bind：指令与元素成功绑定时调用
	（2）inserted：指令所在元素被插入页面时调用
	（3）update：指令所在的模板结构被重新解构时调用
三、备注：
	1.指令定义时不加 v-，但使用时要加 v-；
	2.指令如果是多个单词，要使用 kebab-case 命名方式，不使用camelCase命名