Vuejs中methods和data属性的使用

Posted 2021-04-16 php中文网最新课程

源 / php中文网      源 / www.php.cn

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

(查看原文请点击本文末尾左下角：阅读原文)

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

创建我们的项目

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

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表达式。

让我们使用以下命令启动开发服务器。

npm run serve

你看到我们的{{title}}被Vuejs替换了吗?

methods属性

让我们使用methods属性创建第一个方法。methods属性值也是一个对象。

<script>

export default {

  data: function() {

    return {

      title: "Vuejs"

    };

  },

  methods:{

      welcomeMsg:function(){

          return `Welcome to ${this.title} world`

      }

  }

};

</script>

在上面的代码中，我们添加了一个返回字符串的welcomeMsg方法。

在methods内部，我们可以使用this.propertyname访问数据对象。

让我们在template标签中调用welcomeMsg方法。

<template>

  <div>

    <h1>Hello {{title}}</h1>

    <h2>{{welcomeMsg()}}</h2>

  </div>

</template>

-END-

声明：本文选自「 php中文网 」，搜索「 phpcnnew 」即可关注！

▼请点击下方：“阅读原文”，在线查看全部文章内容！