过滤器
过滤器是vue中用于处理文本内容的工具,它在使用时,通过差值表达是内部的书写,进行过滤器的设置。
书写格式/语法
在书写过滤器时,在差值表达是的内部通过使用管道符
|
,对文本与过滤器进行分割,例如在处理类名时。
<p :class=" title | active "></p>
- 在使用的时候管道符号后是方法名,是书写在data里面的filter选项里面,结构如下
const app = new Vue({
.....,
filters: {
active () {
// 具体处理内容,在通过return返回出去
}
}
})
- 在使用过滤器的时,需要接受一个参数,这个参数内部的内容就是元素内部本身的内容,对元素本身的内容进行处理,处理结束,再将返回出去
<body>
<div id="app">
<p>{{title | filterA}}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
Vue.filter('filterA',function(value){
console.log(value);
return value = "title"
})
const app = new Vue({el:'#app',data:{ title:"java-Script"},})
</script>
- 过滤器在也就可以对一个数据进行多次处理,处理的顺序就是从前往后进行处理
<li>{{ title | activeA | activeB }}</li>
计算属性
计算属性computed
,之所以被称为计算属性,是因为在使用时,通过调用属性的形式去使用,直接在视图上访问当前计算属性名称,就会执行对应的函数,而且计算属性的最大优点就是具有缓存功能。
当有多个地方都需要使用相同的处理去处理用一个数据,第一个地方使用时,计算属性就会进行处理,在第二个地方使用时,使用的是缓存的结果,并不是重新执行计算属性处理之后的结果,当数据发生变化,会重新计算一次,之后使用的都是缓存的执行结果。
计算属性仅适用于计算操作
书写格式/语法
<li> {{ resa }} </li>
const app = new Vue({
...... ,
computed: {
resa () {
// 处理程序
}
}
})
- 计算属性中的get与set方法
computed: {
filt: { // 在对某一个值操作时,需要使用get与set方法,那么他的值,就要使用对象的方式进行书写
get () {
// 逻辑处理
},
set (newValue) {
// 逻辑处理
}
}
}
- get的方法的作用是,当计算属性被访问时触发。
- set的方法的作用是,需要修改或者是赋值时,需要使用set方法,在使用时内部需要接收一个参数,这个参数就是当你赋值的时候的那个值,被传递过来,然后进行处理
侦听器
侦听器watch
,作用就是监听实例上的数据变化,根据变化,做出指定的操作。
书写格式/语法
const app = new Vue({
....,
data: {
value: ''
},
watch: {
value (new, ode) {
// 逻辑代码
}
}
})
- 在书写侦听器的时候,data里面定义的属性名,可以是侦听器方法名,对哪一个属性进行监听,就可以将属性名设置成侦听器方法名
- 方法接收的两个值,分别是新的值与原来的值
- 操作对象
在操作对象时,需要更改侦听器内部方法的解构,并且内部是需要设置deep = true
,才可以侦听对象内部属性的变化
书写格式/语法
const app = new Vue({
.......,
watch: {
obj:{
deep: true,
handler (newValue, oldValue) {
// 逻辑代码
}
}
}
})
- 操作数组
操作数组时,无需设置deep属性,并且在对数组内部值修改时,只能使用数组的方法操作数组,不能操作数组的下标以及length
属性。
书写格式/语法
const app = new Vue({
.......,
watch:{
arr (newValue, oldValue) {
// 逻辑代码
}
}
})
操作数组与对象注意点
在操作数组类型与对象类型时,需要修改内部的属性,如果需要对比之前的值,进行操作,需要注意,在操作是他们内部的参数的值是相同的,在做相等判断时,值是相同的,没办法进行比较,所以在操作数组与对象的时候,只需要书写一个参数即可。
生命周期
vuejs的声明周期就指的事vue实例的声明周期,就是从vue实例创建到这个实例销毁的过程,就是vue的生命周期。
created声明周期函数(重要)
选项的作用,但实例创建完毕后进行调用,内部的内容就会执行,内部不推荐书写大段的逻辑代码。推荐以下方式进行书写,他的作用一般是向后台请求数据,并且在实例创建完毕后,向后台请求数据,存储到定义好的属性里。
书写格式/语法
const app = new Vue({
......,
created: {
this.loadList()
},
methods:{
loadList () {
// 逻辑处理
}
}
})