在本篇文章中，我们将给大家介绍如何在Vue JS中使用methods和data属性。
注，我们使用Vue cli生成项目。
创建我们的项目
让我们通过运行以下命令快速创建我们的vue项目。
立即学习“前端免费学习笔记（深入）”；
vue create vue-app
登录后复制
以上命令将下载vue-app文件夹中所需的文件。
使用cd vue-app更改工作目录，然后使用你喜爱的代码编辑器打开项目文件夹。
在src文件夹中导航到App.vue文件并删除所有内容，然后用下面的代码替换。
App.vue
export default {};Hello Vuejs
登录后复制
data属性
在上面的代码中，我们将在标签内导出默认的空对象，让我们将data属性添加到该空对象中。
export default { data:function(){ return { title: "Vuejs" } }};
登录后复制
data：data属性值是一个返回对象的匿名函数。该对象中的每个属性都被添加到Vue反应系统中，这样，如果我们更改了该属性值，那么vuejs将使用更新的数据重新呈现dom。
让我们使用{{}}双花括号将title属性添加到模板标记中。
App.vue
export default { data: function() { return { title: "Vuejs" }; }};Hello {{title}}
登录后复制
在Vuejs中，我们需要使用双花括号{{js expression}}来传递JavaScript表达式。
让我们使用以下命令启动开发服务器。
npm run serve
登录后复制
你看到我们的{{title}}被Vuejs替换了吗?
methods属性
让我们使用methods属性创建第一个方法。methods属性值也是一个对象。
export default { data: function() { return { title: "Vuejs" }; }, methods:{ welcomeMsg:function(){ return `Welcome to ${this.title} world` } }};
登录后复制
在上面的代码中，我们添加了一个返回字符串的welcomeMsg方法。
在methods内部，我们可以使用this.propertyname访问数据对象。
让我们在template标签中调用welcomeMsg方法。
Hello {{title}}
{{welcomeMsg()}}
登录后复制
以上就是Vuejs中methods和data属性的使用的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2731377.html
