Vuejs中methods和data属性的使用-木庄网络博客

本文摘自PHP中文网，作者藏色散人，侵删。

在本篇文章中，我们将给大家介绍如何在Vue JS中使用methods和data属性。

注，我们使用Vue cli生成项目。

创建我们的项目

让我们通过运行以下命令快速创建我们的vue项目。

1	`vue create vue-app`

以上命令将下载vue-app文件夹中所需的文件。

使用cd vue-app更改工作目录，然后使用你喜爱的代码编辑器打开项目文件夹。

在src文件夹中导航到App.vue文件并删除所有内容，然后用下面的代码替换。

App.vue

<template>
  <div>
    <h1>Hello Vuejs</h1>
  </div>
</template>
 
<script>
export default {};
</script>

data属性

在上面的代码中，我们将在<script>标签内导出默认的空对象，让我们将data属性添加到该空对象中。

<script>
export default {
   data:function(){
       return {
           title: "Vuejs"
       }
   }
};
</script>

data：data属性值是一个返回对象的匿名函数。该对象中的每个属性都被添加到Vue反应系统中，这样，如果我们更改了该属性值，那么vuejs将使用更新的数据重新呈现dom。

让我们使用{{}}双花括号将title属性添加到模板标记中。

App.vue

<template>
  <div>
    <h1>Hello {{title}}</h1>
  </div>
</template>
 
<script>
export default {
  data: function() {
    return {
      title: "Vuejs"
    };
  }
};
</script>

在Vuejs中，我们需要使用双花括号{{js expression}}来传递JavaScript表达式。

阅读剩余部分

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

￥83.86元 人民邮电出版社

本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者

转载请注明出处：木庄网络博客 » Vuejs中methods和data属性的使用

Vuejs中methods和data属性的使用

Vue.js 设计与实现基于Vue.js 3 深入解析Vue.js 设计细节

相关推荐

评论