Login
芋圆社区 > 编程 > Vue > Vue组件例子

Vue组件例子

935
0
2021-06-20
2022-05-17
Hey、小怪兽

  • • 这是官方文档的例子
  • • 该组件名就是app.component的第一个参数,也就是'my-component-name'
  • • 组件名命名的时候,遵循W3C的规范自定义组件名:也就是字母全小写且必须包含一个连字符,可以避免与当前以及未来的HTML元素发生冲突
const app = Vue.createApp({...})

app.component('my-component-name', {
  /* ... */
})
  • • 下面是我的例子,点击button会修改Mark为Joe
<body>
    <div id="vue-app">
        <greeting></greeting>
    </div>
    <script src="app.js"></script>
</body>
Vue.component("greeting", {
    template: `
    <p>{{ name }}你好
        <button @click="changeName">修改姓名</button>
    </p>
    `,
    data: function () {
        return {
            name: "Mark"
        }
    },
    methods: {
        changeName: function () {
            this.name = "Joe";
        }
    }
})

var one = new Vue({
    el: "#vue-app",
})

上一篇:Vue中v-for的例子

下一篇:Vue的双向绑定例子

Message Board
回复
回复内容不允许为空
留言字数要大于2,小于200!
提交成功,5s后刷新页面!
编程导航

Vetur 和 Volar

Vue中v-for的例子

Vue组件例子

Vue的双向绑定例子

Copyright © 2020 芋圆社区

Powered by 浙ICP备2020039309号-1

此页面不支持夜间模式!

已进入夜间模式!

已进入普通模式!

搜索框不允许为空

签到成功!经验+5!芋圆币+2!

签到失败!今日已签到!

需要登录社区账号才可以进入!

复制成功
寄,页面未加载完成或页面无锚点