目录
一、收集表单数据
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" />
女<input
type="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" />
玩<input
type="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" />阅读并接受<a
href="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) {});