一.计算属性
我们从之前的学习中可以看出,我们可以在模板语法中添加功能,从而改变我们的页面,但是,如果我们在模板语法中添加太多的功能,会使得我们的模板语法显得臃肿,在java,c, python的学习当中,我们会定义一个函数来解决我们主函数臃肿的问题,在这里,我们使用计算属性也非常的类似,但计算属性与方法又有不同之处,我们后面会介绍。
看一个实例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "../js/vue.js"></script>
</head>
<body>
<div id = "app">
<p>Original message: {
{
message}}</p>
<p>Reversed message: {
{
ReversedMessage}}</p>
</div>
<script type = "text/javascript">
const app = new Vue({
el:"#app",
data:{
message:"Hello World!",
},
computed:{
ReversedMessage:function(){
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>
输出结果如下:
二.计算属性与方法
我们从上面的例子看到,计算属性与我们常用的方法十分的类似,那为什么我们要有计算属性呢。实际上,它们还是有一定的区别。在上面的例子当中,如果我们的message没有改变,那么下一次我们相应ReversedMessage的时候,计算属性就会立刻返回之前的结果,而我们常用的方法要重新执行我们的函数。
三.监听事件
我们可以通过添加监听事件来观察我们的属性值是否发生了变化。
还是上面的例子,不过我们添加一个监听事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "../js/vue.js"></script>
</head>
<body>
<div id = "app">
<p>Original message: {
{
message}}</p>
<p>Reversed message: {
{
ReversedMessage}}</p>
</div>
<script type = "text/javascript">
const app = new Vue({
el:"#app",
data:{
message:"Hello World!",
},
computed:{
ReversedMessage:function(){
return this.message.split('').reverse().join('');
}
},
watch:{
message:function(val){
console.log("监听事件触发");
console.log(val);
}
}
})
</script>
</body>
</html>
我们看到,当我们的属性值发生改变的时候,我们的监听事件触发了。