vue使用之过滤器、生命周期、钩子函数、axios、计算监听属性和响应式数据的说明
vue使用之过滤器、生命周期、钩子函数、axios、计算监听属性和响应式数据的说明
1 过滤器filter
1.1 过滤器的使用
作用:文本数据格式化。
vue没有提供过滤器,需要使用过滤器,首先需要自己定义一个过滤器,过滤器用于格式化文本的输出, 比如对时间进行格式化 数字的格式化。
/*
// 1. 先定义一个过滤器
// 2. 使用一个过滤器
// 过滤器可以在插值表达式中使用
// | 在linux操作系统中叫做管道符
// {{ msg | myFilter }}
*/
// 定义过滤器
// 参数1: 过滤器的名字
// 参数2: 过滤的逻辑
// Vue.filter('过滤器的名字', function() {})
// input就是需要过滤的内容
Vue.filter('myFilter', function (input) {
console.log(input)
return input.toUpperCase()
})
例子如下(过滤时间):
<body>
<div id="app">
<h1>{{date | dateFilter('YYYY-MM-DD')}}</h1>
<h1>{{date | dateFilter('HH:mm:ss')}}</h1>
<h1>{{date | dateFilter}}</h1>
</div>
<script src="vue.js"></script>
<script src="./node_modules/moment/moment.js"></script>
<script>
Vue.filter('dateFilter', (input, format) => {
format = format || 'YYYY-MM-DD HH:mm:ss'
// 方式1: 可以获取年月日时分秒 格式化
// moment() 表示当前时间
// moment(date): 表示一个指定的时间
// format:表示格式化
return moment(input).format(format)
})
var vm = new Vue({
el: '#app',
data: {
msg: 'hello vue',
date: new Date()
}
})
</script>
</body>
1.2 全局过滤器与局部过滤器
1.通过全局方式创建的过滤器,在任何一个vue实例中都可以使用。
// 创建全局过滤器, 全局过滤器在所有的vue实例中都能使用
Vue.filter('myFilter', function (input) {
return '111'
})
2.局部过滤器是在某一个vue实例的内容创建的,只在当前实例中起作用。
// 局部过滤器: 只有在当前vue实例中才能使用的过滤器
var vm = new Vue({
el: '#app',
// 提供数据
data: {
msg: 'hello vue'
},
methods: {
},
// 提供过滤器
filters: {
// 一个局部过滤器
myFilter: function (input) {
return input.toUpperCase()
}
}
})
2 生命周期与钩子函数
2.1 生命周期
简单说:一个实例从开始到最后消亡所经历的各种状态,就是一个组件的生命周期。
组件生命周期函数的定义:从组件被创建,到组件挂载到页面上运行,再到页面关闭组件被卸载,这三个阶段总是伴随着组件各种各样的事件,那么这些事件,统称为组件的生命周期函数!
生命周期和钩子函数的关系图如下:
2.2 钩子函数
- 生命周期的钩子函数:框架提供的函数,能够让开发人员的代码,参与到组件的生命周期中。也就是说,通过钩子函数,就可以控制组件的行为
- 注意:vue再执行过程中会自动调用
生命周期钩子函数
,我们只需要提供这些钩子函数即可 - 注意:钩子函数的名称都是固定的!!
<body>
<div id="app">
<p>{{msg}}</p>
</div>
<script src="vue.js"></script>
<script>
// beforeXXX
// XXXed
var vm = new Vue({
el: '#app',
data: {
msg: 'hello vue'
},
beforeCreate() {
// 在初始化数据之前调用, vm中没有data中的数据
console.warn('beforeCreate钩子函数')
console.warn(this.msg)
},
created() {
// 在数据初始化后执行的钩子函数
console.warn('created钩子函数')
console.warn(this.msg)
},
beforeMount() {
// 在页面渲染之前, 此时DOM结构还没有渲染成对应的数据
console.warn('beforeMount钩子函数')
var div = document.getElementById('app')
console.warn(div.innerHTML)
},
mounted() {
console.warn('mounted钩子函数')
var div = document.getElementById('app')
console.warn(div.innerHTML)
},
beforeUpdate() {
// 在页面渲染之前, 此时DOM结构还没有渲染成对应的数据
console.warn('beforeUpdate钩子函数')
var div = document.getElementById('app')
console.warn(div.innerHTML)
},
updated() {
console.warn('updated钩子函数')
var div = document.getElementById('app')
console.warn(div.innerHTML)
},
beforeDestroy() {
// 在页面渲染之前, 此时DOM结构还没有渲染成对应的数据
console.warn('beforeDestroy钩子函数')
},
destroyed() {
// 在页面渲染之前, 此时DOM结构还没有渲染成对应的数据
console.warn('destoryed钩子函数')
},
})
</script>
</body>
3 axios的使用
vue自身没有提供发送ajax请求的工具。
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
- 安装:
npm i -S axios
<body>
<script src="./node_modules/axios/dist/axios.js"></script>
<script>
// 发送get请求
// .then:成功的时候需要执行的逻辑
axios.get('http://localhost:9999/getBrandList')
.then(function (res) {
console.log(res.data)
})
// get请求和post请求
// axios.get('http://localhost:9999/getBrandInfo?id=2')
// .then(res => {
// console.log(res.data)
// }).catch(err => {
// console.log('接口失败了', err)
// })
// axios.post('http://localhost:9999/addBrand', {
// name: '奇瑞',
// desc: 'qq',
// time: new Date()
// }).then(res => {
// console.log(res.data)
// })
</script>
</body>
4 有关数据监听和计算的属性
4.1 监视数据变化 - watch
- 概述:
watch
是一个对象,键是需要观察的表达式,值是对应回调函数。 - 作用:当表达式的值发生变化后,会调用对应的回调函数完成响应的监视操作
<body>
<div id="app">
<input type="text" v-model='msg'><span>{{tips}}</span>
<p>{{msg}}----{{name}}</p>
</div>
<script src="vue.js"></script>
<script>
// 每次msg改变的时候, 都喊一下 666
// 想要监听某个数据的变化, 需要使用 watch 监听,监视
var vm = new Vue({
el: '#app',
// 提供vue的数据
data: {
msg: '',
name: 'zs',
tips: ''
},
// 提供方法的
methods: {
},
// 过滤器
filters: {
},
// 监听vue实例的属性的变化
// 如果msg长度是3-6位,提示校验通过
// 如果msg长度不是,校验不通过
watch: {
// 只要msg发生了改变,就会执行function
// newVal: 修改后的值 oldVal: 修改前的值
msg: function (newVal, oldVal) {
if (newVal.length >= 3 && newVal.length <= 6) {
this.tips = '校验通过'
} else {
this.tips = '校验不通过'
}
}
}
})
</script>
</body>
监听一个复杂对象:
1.监视对象的时候,需要加上deep: true;为了发现对象内部值的变化,可以在选项参数中指定 deep: true。
2.immediate 属性,立马进行监听
watch: {
// 如果想要监听复杂类型,需要使用到watch完整形态
// key: 需要监听的属性
// 值: 是一个对象
msg: function (value) {
console.log('监听到内容了', value)
},
car: {
handler: function (value) {
console.log('监听到了car的变化', value)
},
// 如果需要监听一个对象,必须指定deep为true。 除了监听本对象,还会监听对象中的属性
deep: true,
// 页面加载,会立即监听一次
immediate: true
},
list: {
handler: function (value) {
console.log('监听到了没', value)
},
deep: true
}
}
4.2 计算属性
计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值。
<body>
<div id="app">
<input type='number' v-model="n1"> +
<input type="number" v-model="n2"> =
<span>{{ sum }}</span>
<p>{{reverse}}</p>
</div>
<script src="vue.js"></script>
<script>
// 计算属性也是一个属性,和data中提供的属性类似
var vm = new Vue({
el: '#app',
data: {
msg: 'hello vue',
n1: 0,
n2: 0
},
// 用于给vue提供数据的, 提供的数据是计算属性
// 计算属性 : 这个属性的值是根据其他数据计算而来的
// 计算属性: key: 提供的计算的属性名
// 计算属性: 值 是一个函数,这个函数里面就是计算的逻辑, 返回值就是计算属性的值
// 计算属性:当依赖的数据发生了改变的时候,计算属性自动重新计算一次,值跟着就发生了改变
computed: {
sum: function () {
return +this.n1 + +this.n2
},
reverse: function () {
return this.msg.split('').reverse().join('')
}
}
})
// 如果没有一个新的属性,只需要监听已经存在的某个属性的变化,变化了需要做某件事情,使用watch
// 如果需要提供一个新的属性,并且这个属性依赖于其他的一些属性计算而来的,应该使用computed
</script>
</body>
计算属性的完整形态:
/*
计算属性依赖于缓存设计的
当计算属性依赖的属性发生了改变的时候,计算属性就会重新计算,并且会把结果缓存起来
*/
computed: {
fullName: {
get() {
console.log('我是计算属性的get方法')
return this.firstName + ' ' + this.lastName
},
set(value) {
this.firstName = value.split(' ')[0]
this.lastName = value.split(' ')[1]
}
}
}
4 响应式数据的说明
4.1 动态添加的数据是无效的以及$set的使用
data中的数据一定要先声明,再使用,动态给对象添加的属性不是响应式的。
<div id="app">
<p>{{person.name}}---{{person.age}}---{{person.gender}}</p>
</div>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
person: {
name: 'zs',
age: 18
}
}
})
</script>
// 动态给data中添加的数据是无效的
// 在vue实例创建的时候,会把data中的数据绑定到vm上,所以data中的数据是响应的
// 但是动态绑定的数据不是响应是的。
vm.person.gender = '男'
如果想要动态绑定数据,并且是响应式的,需要使用vm.$set方法:
this.$set(this.person, 'gender', '男')
4.2 异步DOM更新以及$nextTick的说明
在vue中数据发生了改变,DOM中的数据也会跟着发生改变,但是这个过程是异步的。
vue的数据发生改变之后,DOM不会立即更新,会等到下一次渲染工作执行的时候才会更新DOM。
目的:为了提高渲染的性能.
clickFn () {
// 数据变化了, view中的内容也要跟着变
this.msg = '你好啊,vue1'
this.msg = '你好啊,vue2'
this.msg = '你好啊,vue3'
this.msg = '你好啊,vue4'
this.msg = '你好啊,vue5'
// 为什么:DOM操作是非常消耗性能的,简单DOM的操作能够提升我们的性能,如果每次操作数据,都立即更新DOM,无疑性能会非常的低,所以vue中会等待数据都修改完成
let result = document.querySelector('p').innerHTML
console.log(result)
}
$nextTick
方法会在DOM更新之后执行
// 在实际开发中,有可能需要在数据改变之后,获取到更新之后的DOM数据
// 这个时候可以使用 $nextTick函数
// 当vue更新完DOM后,会自动调用$nextTick函数,确保在这个函数中可以获取到DOM结构是最新的
this.$nextTick(function() {
let result = document.querySelector('p').innerHTML
console.log(result)
})