Vue入坑教程(二) - Vue的数据和方法
Vue中的数据和标签内容是双向绑定的，也就是说当定义的方法（函数）里的值改变时，在视图标签里的显示内容就会自动更新！这种技术大大简化了我们的开发成本，缩减了复杂的逻辑设计。
一、先来看看Vue中的数据
1、数据的定义
Vue中的数据是定义在Vue对象中的，用data：{ }声明数据变量：
new Vue({data:{name:"kdy",job:"软件工程师",},});
上述代码中，定义了两个变量，其中name初始化为 kdy、job初始化为 软件工程师。
2、数据的使用
Vue的数据定义后该如何使用？
Vue的使用分为两种情况：在视图标签中使用、在定义的方法中使用
（1）在视图标签中使用
在定义的标签中使用时，只需要在双大花括号中写入定义的变量就可以绑定数据。
例如使用我上面定义的name时，只需要：
<p>Name: {{ name }}</p>
此时，页面就会显示：
（2）在定义的方法中使用
在定义的方法中引用变量时，需要在变量前加 that. 例如：
methods:{greet: function(){return 'Good ' + ' ' + this.name + '!';}
}
此时，页面显示效果为：
当然，你可能疑问，标签中是怎么调用方法的，别急，往下看?
二、再来看看怎么定义和使用方法
当视图标签中的数据需要动态改变时，就需要用到方法来从后台获取或者处理数据。
1、方法的定义
Vue定义方法时，需要使用 methods:{ } 关键词：
methods:{greet: function(time){return 'Good ' + time + ' ' + this.name + '!';}
}
可以看到，在上面的方法中，使用 this.name 来调用前面定义的变量，该方法还定义了一个形参time 用来接收调用方法时传进来的参数。
2、方法的使用
在标签中使用时，只需要在双大花括号中写入定义的方法名就可以绑定该方法：
<h1>{{ greet('afternoon')}}</h1>
可以看到，上述调用方法时，向方法中传入了一个值 afternoon ，显示效果为：
三、完整代码
<html lang="en">
<head><meta charset="UTF-8"><title>Veu.jstitle><script src="https://cdn.jsdelivr.net/npm/vue">script>
head>
<body><div id="vue-app"><h1>{{ greet('afternoon')}}h1><p>Name: {{ name }}p><p>Job: {{ job }}p>div><script src="app.js">script>
body>
html>
// 实例化vue对象
new Vue({el:"#vue-app",data:{name:"kdy",job:"软件工程师",},methods:{greet: function(time){return 'Good ' + time + ' ' + this.name + '!';}}
});/*** el: element 需要获取的元素，一定是html的根容器元素* data: 用于数据的存储*/
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！