重庆新闻头条今天/济南网络优化网站
目录
一、收集表单数据
1.1 收集表单数据
1.2 简单案例练习
二、内置指令
2.1 v-text指令
2.2 v-html指令
2.3 v-cloak指令
2.4 v-once指令
2.5 v-pre指令
2.6 自定义指令
2.6.1 定义语法
2.6.2 配置对象中常用的3个回调
一、收集表单数据
1.1 收集表单数据
若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值
若：<input type="checkbox"/>
- 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，即收集到布尔值）
- 配置input的value属性
- v-model的初始值是非数组，那么收集到的就是checked（勾选 or 未勾选，即收集到布尔值）
- v-model的初始值是数组，那么收集到的就是value组成的数组
备注：v-model的三个修饰符;
- lazy：失去焦点再收集数据
- number：输入字符串转为有效的数字
- trim：输入首尾空格过滤
1.2 简单案例练习
<div class="root"><form @submit.prevent="demo">账号：<input type="text" v-model.trim="userInfo.username" /><br /><br />密码：<input type="password" v-model="userInfo.password" /><br /><br />年龄：<input type="number" v-model.number="userInfo.age" /><br /><br />性别： 男<input type="radio" v-model="userInfo.sex" value="male" />女<inputtype="radio"v-model="userInfo.sex"value="female"/><br /><br />爱好： 吃<input type="checkbox" v-model="userInfo.hobby" value="eat" />睡<input type="checkbox" v-model="userInfo.hobby" value="sleep" />玩<inputtype="checkbox"v-model="userInfo.hobby"value="play"/><br /><br />所属地区：<select v-model="userInfo.city"><option value="">请选择所在地区</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="shenzhen">深圳</option><option value="fujian">福建</option></select><br /><br />其他信息：<textarea v-model.lazy="userInfo.other"></textarea><br /><br /><input type="checkbox" v-model="userInfo.agree" />阅读并接受<ahref="javascript:;">《用户协议》</a><button>提交</button></form></div></body><script>Vue.config.productionTip = false;new Vue({el: ".root",data: {userInfo: {username: "",password: "",age: "",sex: "",hobby: [],city: "",other: "",agree: "",},},methods: {demo() {console.log(JSON.stringify(this.userInfo));},},});</script>二、内置指令
2.1 v-text指令
- 作用：向其所在的节点中渲染文本内容
- 与插值语法的区别：v-test会替换掉节点中的内容，{{xxx}}则不会
<body><div class="root"><div>hello, {{name}}</div><div v-text="name">hello,</div></div></body><script>Vue.config.productionTip = false;new Vue({el: ".root",data: {name: "world",},});</script>2.2 v-html指令
（1）作用：向指定节点中渲染包含html解构的内容
（2）与插值语法的区别：
- v-html会替换掉节点中的所有内容，{{xxx}}则不会
- v-html可以识别html结构
（3）注意：v-html有安全性问题
- 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击（跨站脚本攻击）
- 一定要在可信的内容上使用v-html，永远不要用在户提交的内容上
2.3 v-cloak指令
- 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
- 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
<style>[v-cloak] {display: none;}</style>2.4 v-once指令
- v-once所在的节点在初次渲染后，就视为静态内容了
- 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
2.5 v-pre指令
- 跳过其所在节点的编译过程
- 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译
2.6 自定义指令
2.6.1 定义语法
（1）局部指令
new Vue({directives:{指令名:配置对象}})或者
new Vue({directives{指令名:回调函数},}); new Vue({// 精简写法directives:{指令名(element,bingding){}}// 正常写法// directive:{// 指令名:function(){}// }});（2）全局指令
Vue.directive(指令名,配置对象);或者
Vue.directive(指令名,回调函数);2.6.2 配置对象中常用的3个回调
- bind: 指令与元素成功绑定时调用
- inserted: 指令所在的元素被插入页面时调用
- update: 指令所在模板结构被重新解析时调用
注意：
- 指令定义时不加v-，但使用时要加v-
- 指令名如果是多个单词，要使用kebab-case命名方式，不要camelCase命名
局部指令 -- 配置对象
new Vue({directives: {// 使用kebab-case命名方式'指-令名': {bind(element, binding) {},inserted(element, binding) {},update(element, binding) {},},},});全局指令 -- 配置对象
Vue.directive("指令名", {bind(element, binding) {},inserted(element, binding) {},update(element, binding) {},});局部指令 -- 回调函数
new Vue({directives:{指令名(element,bingding){}}全局指令 -- 回调函数
Vue.directive("指令名", function (element, binding) {});