文章目录
1.computed的用法
例子:
<div id="app">
{{msg}}
{{num}}
<!-- 写在methods里:带括号()-->
{{fn()}}
<!-- 写在computed里:不带括号-->
{{computedNum}}
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"双击",
num:6
},
methods:{
fn(){
return this.num
}
},
computed:{
computedNum(){
return this.num;
}
}
});
</script>
结果:
双击 6 6 6
2.computed和methods的用法与格式的异同
写在methods里:带括号()
写在computed里:不带括号
(计算属性可以当data用)
代码:
<div id="app">
{{msg}}
{{computedMsg}}
<button type="button" @click="fn">点击改变</button>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"hello",
},
methods:{
fn(){
this.msg="world"
}
},
computed:{
computedMsg(){
return this.msg.split('').reverse().join('');
}
}
});
</script>
结果:
点击前: hello olleh
点击后:world dlrow
3.监听属性watch的基本用法
用法详见:菜鸟官网
例子:
<div id="app">
<input type="text" v-model="msg"/>
{{copyMsg}}
</div>
<script>
new Vue({
el:"#app",
data:{
msg:'hello',
copyMsg:''
},
watch:{
msg:{
handler:"fn",//不是handle
immediate:true//文本框内容尚未改变时先输出一次"watching now...,",若是false则一开始不会输出,内容改变时才输出"watching now..."
}
},
methods:{
fn(value){
console.log("watching now...");
this.copyMsg=value;
}
}
});
</script>
结果:
实现了文本框内容和copyMsg双向绑定
总结:
1.watch的immediate属性: immediate:false在第一次绑定时不会执行监听函数,而immediate:true可以让第一次监听就执行
2.watch的handler方法: watch中需要具体执行的方法
设置immediate:true后,会先执行handler的方法
上例简化(常用写法):
new Vue({
el:"#app",
data:{
msg:'hello',
copyMsg:''
},
watch:{
msg(value){
console.log("watching...");
this.copyMsg=value;
}
}
});
4.deep
如果是监听的是对象类型,当手动修改对象的某个属性时,发现是无效的
这时候就需要deep
html:
<div id="app">
<p><input type="text" v-model='userinfo.firstname' placeholder="姓"></p>
<p><input type="text" v-model='userinfo.lastname' placeholder="名"></p>
<p><input type="text" v-model='userinfo.fullname' placeholder="全名"></p>
</div>
js:
var app = new Vue({
el: '#app',
data: {
userinfo: {
firstname: '',
lastname: '',
fullname: ''
}
},
// watch的深度监听
watch:{
// 先写深度监听的对象
userinfo:{
// 处理函数
handler(val) {
console.log('val',val)
this.userinfo.fullname = val.firstname +' ' +val.lastname
},
// 立即监听
immediate:true,
// 深度监听参数
deep:true
}
}
})
5.局部过滤器和全局过滤器
用来格式化数据,处理数据格式
理解:就是密码加密输出,
(常见:大小写转换)
例子:
<div id="app">
{{msg|upupup}} {{msg2|lowlowlow}}
</div>
<script>
//全局过滤器
Vue.filter('upupup', val => {
return val.toUpperCase();
})
new Vue({
el: "#app",
data: {
msg: "hello",
msg2: "World",
},
//局部过滤器
filters: {
lowlowlow: function(val) {
return val.toLowerCase()
}
}
});
</script>
注意格式:
全局过滤器:
*注意:是| 不是 ||
局部过滤器:
*注意:是filters不是filter6.
6.自定义指令
写法:
- 通过 Vue.directive() 函数注册一个全局指令
- 通过组件的 directives 属性,对该组件添加一个局部指令
注:上面的过滤器(filter)也可以总结为类似的语言
6.1.自定义全局指令v-red:
<h1 v-red>我是标题</h1>
Vue.directive('red', {
// 绑定元素的时候自动调用
inserted: function (el) {
console.log('el', el)
el.style.color = 'red'
}
})
6.2.自定义全局指令v-color(动态颜色)
<h1 v-color="'green'">我是标题2动态颜色</h1>
Vue.directive('color', {
inserted: (ele, binding) => {
ele.style.color = binding.value;
//此处的value是指v-color="value"中填入的颜色
}
})
6.3.以上是全局,自定义局部指令v-color:
directives: {
color: {//要自定义v-color,就在这里包一层color:{}
inserted: function(ele, binding) {
ele.style.color = binding.value;
}
}
6.4.自定义指令的拓展:定义一个复合指令 v-many_css
注:此处自定义指令名只能写成下划线many_css,不能写成驼峰名称manyCss,会报错
<div v-many_css>{{msg}}</div>
全局:
Vue.directive('many_css', {
inserted: function(ele) {
//就是在函数体里多写一些动态样式
ele.style.color = "white";
ele.style.backgroundColor = "blue";
ele.style.borderTop = "red solid 3px";
}
})
局部:
directives: {
many_css: {
inserted: function(ele) {
ele.style.color = "white";
ele.style.backgroundColor = "blue";
ele.style.borderTop = "red solid 3px";
}
}
}`
7.vue生命周期
1.生命周期的定义
在一个应用 创建到消亡阶段 在某一时刻 会自动调用的回调函数就叫做生命周期
2.有哪些生命周期
2.1.beforeCreate() 实例创建之前,内部:new操作符初始化
2.2.create() 实例创建之后,内部:new操作符初始化
这个阶段向服务器发送ajax请求,调用数据和方法
此处不能进行dom操作,因为渲染没有完全
console.log(document.getElementById('hh'))
2.3.beforeMount() dom渲染(挂载)之前
2.4.mounted() dom渲染(挂载)之后
这个阶段适合进行dom操作
2.5.beforedUpdate() 更新之前
数据和视图联系的数据,更新之前会自动调用
2.6.updated() 更新之后
数据和视图联系的数据,更新之后会自动调用
2.7.beforeDestroy() 销毁之前
2.8.destroyed() 销毁之后
跳转完页面:上移页面的无用变量或函数进行null赋值处理
新增:
actived() 组件激活时
deactived() 组件停用时