表单修饰符、自定义指令、计算属性、侦听器、过滤器、生命周期
文章目录
- Vue 的常用特性
- 一、表单基本操作
-
- 表单修饰符
- 二、自定义指令
-
- Vue.directive 注册全局指令
- 自定义指令局部指令 directives
- 三、计算属性 computed
-
- 计算属性与方法的区别
- 四、侦听器 watch
-
- 注册表单验证案例
- 五、过滤器
-
- 过滤器中传递参数
- 六、生命周期
Vue 的常用特性
一、表单基本操作
通过v-model
- 获取单选框中的值
- 获取复选框中的值
复选框checkbox这种的组合时 data 中的 值 我们要定义成数组 否则无法实现多选 - 获取下拉框和文本框中的值
表单修饰符
.number转换为数值
注意点：- 当开始输入非数字的字符串时，因为Vue无法将字符串转换成数值
- 所以属性值将实时更新成相同的字符串。即使后面输入数字，也将被视作字符串
.trim自动过滤用户输入的首尾空白字符
只能去掉首尾的 不能去除中间的空格.lazy将input事件切换成change事件
.lazy修饰符延迟了同步更新属性值的时机，即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上- 在失去焦点 或者 按下回车键时才更新
二、自定义指令
Vue.directive 注册全局指令
注意点：
- 在自定义指令中如果以驼峰命名的方式定如
Vue.directive('focusA',function(){}) - 在HTML中使用的时候只能通过
v-focus-a来使用 el为绑定的 DOM 元素binding为自定义的函数形参，通过 自定义属性 传递过来的值存在binding.value里面
<input type="text" v-a='msg'>
<script>
Vue.directive('a', {
inserted: function (el, binding) {
el.style.backgroundColor = binding.value.qwe
}
})
script>
自定义指令局部指令 directives
- 局部指令，需要定义在
directives的选项，用法和全局用法一样 - 局部指令只能在当前组件里面使用
- 当全局指令和局部指令同名时以局部指令为准
let vm = new Vue({
el: '#box',
data: {
msg: {
}
},
methods: {
},
directives: {
color: {
inserted: function (el, binding) {
el.style.backgroundColor = binding.value.qwe
}
}
}
})
三、计算属性 computed
- 使用计算属性可以让模板更加的简洁
- 计算属性是基于它们的响应式依赖进行缓存的，就是基于 data 的数据来计算的，data 数据改变，计算结果也改变
- computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化
<body>
<div id="box">
<div>{
{msg}}div>
<div>{
{msg.split('').reverse().join('')}}div>
<div>{
{reverseString}}div>
div>
<script src="./vue.js">script>
<script>
let vm = new Vue({
el: '#box',
data: {
msg: '远近渔'
},
computed: {
// reverseString 这个是我们自己定义的名字
reverseString: function () {
// 当data 中的值改变的时候
// reverseString 会自动发生计算
// 这里一定要有return
// 否则调用 reverseString 的时候无法拿到结果
return this.msg.split('').reverse().join('')
}
},
methods: {
},
directives: {
}
})
script>
body>
计算属性与方法的区别
- 计算属性
computed是基于他们的依赖进行缓存的
- 当多次调用
reverseString的时候只要data里面的num值不改变他会把第一次计算的结果直接返回
直到data中的num值改变，计算属性才会重新发生计算
- 方法
methods不存在缓存
- 调用
methods中的方法的时候，他每次会重新调用
四、侦听器 watch
- 使用
watch来响应数据的变化 - 一般用于异步或者开销较大的操作
- watch 中的属性一定是
data中已经存在的数据 - 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听
<body>
<div id="box">
<div>
<span>名：span>
<span>
<input type="text" v-model='aName'>
span>
div>
<div>
<span>姓：span>
<span>
<input type="text" v-model='bName'>
span>
div>
<div>{
{abName}}div>
div>
<script type="text/javascript" src="./vue.js">script>
<script type="text/javascript">
let vm = new Vue({
el: '#box',
data: {
aName: '远近渔',
bName: '渔渔子',
abName: '远近渔 渔渔子'
},
methods: {
},
computed: {
},
watch: {
// val 是 aName 的最新值
aName: function (val) {
this.abName = `${ val} ${ this.bName}`
},
bName: function (val) {
this.abName = `${ this.aName} ${ val}`
}
},
directives: {
}
})
script>
body>
注册表单验证案例
<body>
<div id="box">
<div>
<span>用户名：span>
<span>
<input type="text" name="" id="" v-model.lazy='a'>
span>
<span>{
{b}}span>
div>
div>
<script type="text/javascript" src="./vue.js">script>
<script type="text/javascript">
let vm = new Vue({
el: '#box',
data: {
a: '',
b: ''
},
methods: {
checkName: function (a) {
let that = this
// 调用接口，但是可以使用定时任务的方式模拟接口调用
setTimeout(function () {
if(a == 'admin') {
that.b = '存在'
} else {
that.b = '111'
}
}, 2000)
}
},
computed: {
},
watch: {
a: function (val) {
// 调用后台接口验证
this.checkName(val)
this.b = 'loading......'
}
},
directives: {
}
})
script>
body>
五、过滤器
- 格式化数据，比如将字符串格式化为首字母大写，格式化日期
- 过滤器可以用在两个地方：双花括号插值和v-bind表达式
- 过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示
- 支持级联操作
- 过滤器不改变
data，只是改变渲染的结果，并返回过滤后的版本
Vue.filter ('过滤器名称', function () {
// 过滤器业务逻辑
})
<body>
<div id="box">
<input type="text" v-model='msg'>
<div v-cloak>{
{msg | a | b}}div>
<div>{
{msg | ccc}}div>
<div :abc='msg | a'>div>
div>
<script src="./vue.js">script>
<script>
// 自定义过滤器
Vue.filter('a', function (val) {
return `${ val.charAt(0).toUpperCase()}${ val.slice(1)}`
});
Vue.filter('b', function (val) {
return `${ val.charAt(0).toLowerCase()}${ val.slice(1)}`
});
let vm = new Vue({
el: '#box',
data: {
msg: ''
},
// 全局过滤器
filters: {
ccc: function (val) {
return `${ val.charAt(0).toUpperCase()}${ val.slice(1)}`
}
},
methods: {
},
computed: {
},
watch: {
},
directives: {
}
})
script>
body>
过滤器中传递参数
第一个形参接受的是元素的值，后面才接收传参
<body>
<div id="box">
<div>{
{date | a('yyyy-MM-dd')}}div>
div>
<script src="./vue.js">script>
<script>
Vue.filter('a', function (val, arg) {
if (arg == 'yyyy-MM-dd') {
var ret = ''
ret += `${ val.getFullYear()}-${ val.getMonth()+1}-${ val.getDate()}`
return ret
}
})
let vm = new Vue({
el: '#box',
data: {
date: new Date()
},
filters: {
},
methods: {
},
computed: {
},
watch: {
},
directives: {
}
})
script>
body>
六、生命周期
就是 Vue 实例从创建到销毁的过程
这些过程中会伴随着一些函数的 自调用，我们称这些函数为 钩子函数
| 挂载 | 初始化相关属性 |
|---|---|
| beforeCreate | |
| created | |
| beforeMount | |
| mounted | 一旦此函数触发就代表初始化完成了 |
| 更新 | 元素或组件的变更操作 |
|---|---|
| beforeUpdate | 数据更新时调用，发生在虚拟DOM打补丁之前，页面上数据还是旧的 |
| updated | 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子，页面上数据已经替换成最新的 |
| 销毁 | 销毁相关属性 |
|---|---|
| beforeDestroy | 实例销毁之前调用 |
| destroyed | 实例销毁后调用 |