目录
一、表单数据收集
1.v-model拓展
v-model.number转换为数字型
v-model.lazy懒加载,即目标失焦后才会存入数据
v-model.trim去除首尾空格
2.收集输入框数据
v-model='存储数据的属性名'
单行输入框和多行输入框是一样的
3.收集单选框数据
收集性别信息,单选框没有value一说,所以需要自己预先写好value,保存数据的属性填写对应value即可设置默认值
<div class="root">
男:<input type="radio" name="sex" v-model="StuInfo.sex" value="male">
女:<input type="radio" name="sex" v-model="StuInfo.sex" value="female">
</div>
<script>
const vm = new Vue({
el: '.root',
data: {
StuInfo: {
sex: 'female' //设置默认值为女
}
}
})
</script>
4.收集复选框数据
和单选框相似,注意:存储复选框数据的属性初始值必须是一个数组
<div class="root">
爱好:
学习<input type="checkbox" name="hobby" v-model="StuInfo.hobby" value="study">
游戏<input type="checkbox" name="hobby" v-model="StuInfo.hobby" value="game">
睡觉<input type="checkbox" name="hobby" v-model="StuInfo.hobby" value="sleep">
</div>
<script>
const vm = new Vue({
el: '.root',
data: {
StuInfo: {
hobby: [] //初始值应设为【】
}
}
})
</script>
5.收集选择框数据
数据绑定写在select标签上
<div class="root">
<select v-model="StuInfo.city">
<option value="">请选择城市</option>
<option value="chengdu">成都</option>
<option value="beijing">北京</option>
<option value="chongqing">重庆</option>
</select>
</div>
<script>
const vm = new Vue({
el: '.root',
data: {
StuInfo: {
city: ''
}
}
})
</script>
6.打包发出表单数据
使用JSON.stringfy(vm.StuInfo)
二、过滤器(Vue3已移除)
过滤器(Filters)是 vue 为开发者提供的功能,常用于文本的格式化。过滤器可以用在两个地方:插值表达式 和 v-bind 属性绑定。
过滤器应该被添加在 JavaScript 表达式的尾部,由“管道符”进行调用
调用过滤器:数据属性 | 过滤器名
过滤器要写返回值到value上
(1)局部过滤器
<div class="root">
<p>首字母大写:{{str | firstUpper}}</p>
</div>
<script>
const vm = new Vue({
el: '.root',
data: {
str: 'grizzily'
},
filters: {
firstUpper(value) {
return value[0].toUpperCase() + value.slice(1)
}
}
})
</script>
(2)全局过滤器
// 全局过滤器
Vue.filter('my-filter', function (value) {
// 返回处理后的值
})
三、更多Vue内置指令
1.v-text
特点:
(1)v-text=''name''和插值语法{{name}}作用相同
区别在于:v-text渲染该节点文本,会替换掉节点内原有的文本,而插值语法不会
2.v-html
特点:
(1)和插值语法的区别:v-html支持html结构的解析;v-html会替换掉节点内原有的文本
(2)v-html可能导致严重安全性问题**
在网页上直接动态渲染html,容易受到xss攻击!(cookie原理,cokie被非法获得从而用户信息被盗)
一定要在可信的地方使用v-html,不要在用户输入的地方使用
3.v-cloack
特点:
(1)本质是一个特殊属性,Vue实例创建完毕并接管容器后,该属性自动消失
(2)配合css使用属性选择器[v-cloak],可将网速过慢导致未解析的模板隐藏起来(display:none)
4.v-once
特点:
(1)只会解析有该属性的模板一次,后由动态节点变为静态节点
(2)以后数据的改变不会引起该结构的更新,可以优化性能
可用于某属性的初始值
5.v-pre
特点:
(1)会跳过所在节点的编译
(2)可利用它,跳过没有指令语法、插值语法的节点,加快编译速度
四、自定义指令
1.定义
(1)局部指令
const vm = new Vue({
el: '.root',
directives: {
// 自定义指令 函数型
// element:元素(真实dom);bindings:绑定对象v-demo
demo(element, bindings) {
// 内容
},
// 对象型
demo2: {
// 指令和元素成功绑定时调用
bind: {
//内容
},
// 指令所在元素被插入页面时调用
inserted: {
//内容
},
// 指令所在模板结构被重新解析时调用
update: {
//内容
}
}
}
})
(2)全局指令
Vue.directive('demo3', function (element, bindings) {
// 内容
})
Vue.directive('demo4', {
// 指令和元素成功绑定时调用
bind: {
//内容
},
// 指令所在元素被插入页面时调用
inserted: {
//内容
},
// 指令所在模板结构被重新解析时调用
update: {
//内容
}
})
2.注意
(1)有两种定义方式:对象型和函数型;对象型用于需要完成不同时期的动作时使用(bind,inserted,update)
(2)指令定义时不用加v-,使用时要加v-
(3)不能使用驼峰命名法,建议使用-将单词分隔开
注意定义指令时使用引号书写,例如'my-demo':{}或'my-demo'(){}
五、生命周期**
1.创建流程
(1)beforeCreate
初始化生命周期、事件,还未开始数据代理
此时无法通过vm访问到_data的数据和methods的方法
beforeCreate() {
console.log('beforeCreate')
}
(2)created
初始化数据监视、数据代理
此时可以通过vm访问到_data的数据和methods的方法
created() {
console.log('created')
}
2.挂载流程
(1)beforeMount
在此之前,Vue开始解析模板和生成虚拟DOM(存储在内存中),此时页面上还不能显示解析好的内容
beforeMount() {
console.log('beforeMount')
}
(2)mounted
在此之前将虚拟DOM转换为真实DOM插入到界面中
mounted() {
console.log('mouted')
}
3.更新流程
(1)beforeUpdate
此时,数据的新的,页面是旧的,未保持同步
beforeUpdate() {
console.log('beforeUpdate')
}
(2)updated
此时数据和界面都是新的,数据和页面保持同步
updated() {
console.log('updated')
}
4.销毁流程
(1)beforeDestroy
此时,vm中所有的_data、methods方法、指令等都可用,但更改数据后不会触发更新流程,一般在此阶段执行:关闭定时器、取消订阅、解绑自定义事件等收尾操作
beforeDestroy() {
console.log('beforeDestroy')
}
(2)destroyed
此时,数据监听、子组件、自定义事件监听被销毁,但原生事件不会被销毁
destroyed() {
console.log('destroyed')
}
5.注意事项
(1)常用的生命周期钩子:
1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等[初始化操作]
2.beforeDestroy: 清除定时器、解绑自定义事件、取消订阅消息等[收尾工作]
(2)关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息
2.销毁后自定义事件会失效,但原生DOM事件依然有效
3.一般不会在beforeDestroy操作数据,因为即便操作数据,也不会再触发更新流程了