Vue简单示例

最新推荐文章于 2024-12-12 14:49:33 发布

原创最新推荐文章于 2024-12-12 14:49:33 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #web #网页设计 #界面设计

Vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用Vue.js创建一个动态计数器组件，并展示了如何在应用程序中使用和组件化。通过实例演示了数据绑定、方法调用和模板语法。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue测试实例</title>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
        {{ message }}
    <runoob-a></runoob-a>
</div>
<script>
var runoobA = {
  methods: {
    count_add:function (num) {
        this.count = this.count + num
        return this.count;
    }
  },
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count_add(3)">
      点了 {{ count }} 次！
    </button>`
}

const app = Vue.createApp({
    data() {
        return {
            message: 'hello world!'
        }
    },
    components: {
        'runoob-a': runoobA
    }
})

app.mount('#app')
</script>
</body>
</html>