zoukankan      html  css  js  c++  java
  • vue 组件 组件2

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Title of page</title>
    </head>
    <body>
    <div id="example">
    <my-component></my-component>
    </div>
    <div id="example-2">
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    <simple-counter></simple-counter>
    </div>


    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    <script >
    var Child = {
    template: '<div>A custom component!</div>'
    }
    // 注册
    // Vue.component('my-component', {
    // template: Child
    // })

    // 创建根实例
    new Vue({
    el: '#example',
    components: {
    // <my-component> 将只在父组件模板中可用
    'my-component': Child
    }
    })
    var data = { counter: 0 }

    Vue.component('simple-counter', {
    template: '<button v-on:click="counter += 1">{{ counter }}</button>',
    // 技术上 data 的确是一个函数了,因此 Vue 不会警告,
    // 但是我们却给每个组件实例返回了同一个对象的引用
    data: function () {
    return {
    counter: 0
    }
    }
    })

    new Vue({
    el: '#example-2'
    })
    </script>
    </html>

  • 相关阅读:
    FJ省队集训DAY3 T1
    FJ省队集训DAY2 T2
    FJ省队集训DAY2 T1
    FJ省队集训DAY1 T1
    POJ 1225 Substrings
    BZOJ 2732 射箭
    Light OJ 1314 Names for Babies
    SPOJ220 Relevant Phrases of Annihilation
    POJ3683 Falsita
    ES6 常用语法
  • 原文地址:https://www.cnblogs.com/dianzan/p/8504047.html
Copyright © 2011-2022 走看看