Login
  • 首页
  • 社规
  • 指南
  • 编程
  • 统计
  • 排行
  • 友链
  • 游戏
  • 生活
  • 追番
  • 留言
  • 归档
  • 进程
  • 审核
  • 图床
  • 工具
  • 自动
  • 图标
  • 监控
  • 版本
芋圆社区 > 编程 > Vue > Vue组件例子

Vue组件例子

263
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的双向绑定例子

Comment

Message Board

编程导航

Vue中v-for的例子

Vue组件例子

Vue的双向绑定例子

Copyright © 2020 芋圆社区

Powered by 浙ICP备2020039309号-1

此页面不支持夜间模式!

已进入夜间模式!

已进入普通模式!

搜索框不允许为空

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

签到失败!今日已签到!

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

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