路飞-计算、监听、分隔符
监听、计算、分隔符
delimiters 分隔符
作用是可以自己定制vue被识别的模板语言符号， 比如jinja2的模板语言默认使用{{变量名}}，我们的vue默认也使用{{变量名}}就会有冲突，可以通过自定义delimiters分隔符号来解决这类问题。
<div id='app'>
${ msg } // 现在这种格式${变量名}可以被识别，原来默认识别的是{{变量名}}
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'message'
},
delimiters: ['${', '}']
})
</script>
computed 计算
应用场景：一般用在computed用来解决一个变量值依赖一个或多个变量值
// computed内部书写方法 - 管理可以监听多个变量的方法
// 1）方法名 可以直接作为变量被渲染，值为方法的返回值
// 2) 在方法名被渲染后(在页面中使用了)，方法内部的所有变量都会被监听
详细代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p>
姓：<input type="text" v-model="last_name">
</p>
<p>
名：<input type="text" v-model="first_name">
</p>
<p>
姓名：{{ full_name }}
</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
last_name: '',
first_name: '',
},
// computed内部书写方法 - 管理可以监听多个变量的方法
// 1）方法名 可以直接作为变量被渲染，值为方法的返回值
// 2) 在方法名被渲染后(在页面中使用了)，方法内部的所有变量都会被监听
// 3）一般用在computed用来解决一个变量值依赖一个或多个变量值
computed: {
full_name () {
return this.last_name + ' ' + this.first_name;
}
}
})
</script>
</html>
watch 监听
应用场景：watch用来解决多个变量值依赖一个变量值，或者一个变量改变想触发的功能，
// watch内部书写方法 - 管理 监听绑定的属性(提前要存在) 的方法
// 1） 方法名 被监听的变量名(属性)
// 2) 在方法名被渲染后，方法名代表的属性值改变，绑定的方法就会被调用
// 3) 返回值没有任何意义
详细代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>监听属性</title>
</head>
<body>
<div id="app">
<p>
姓名：<input type="text" v-model="full_name">
</p>
<p>
姓：<input type="text" v-model="last_name">
</p>
<p>
名：<input type="text" v-model="first_name">
</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
full_name: '',
last_name: '',
first_name: '',
},
// watch内部书写方法 - 管理 监听绑定的属性(提前要存在) 的方法
// 1）方法名 被监听的变量名(属性)
// 2) 在方法名被渲染后，方法名代表的属性值改变，绑定的方法就会被调用
// 3）watch用来解决多个变量值依赖一个变量值
watch: {
full_name () {
console.log('被调用了');
// full_name变量值改变，要完成的任何逻辑都可以书写在此方法中
let name = this.full_name.split(' ');
this.last_name = name[0];
this.first_name = name[1];
}
}
})
</script>
</html>
watch 深度监听
data:{
a:1,
b:{
c:1
}
},
watch:{
a(val, oldVal){//普通的watch监听
console.log("a: "+val, oldVal);
},
b:{//深度监听，可监听到对象、数组的变化
handler(val, oldVal){
console.log("b.c: "+val.c, oldVal.c);
},
deep:true //true 深度监听
}
}
