[JS][Vue]学习记录之简单的组件化

Demo地址

首先准备这样一段js:

<script>
    Vue.component("tp",{
        //template内部只能有一个根标签
        template:'<p>{{name}}:这是我的组件' +
        '<button @click="say">改名字</button>' +
        '</p>',
        data:function () {
            return {
                name:'allen'
            }
        },
        methods:{
          say:function () {
              this.name = "marry";
          }
        }
    })
    new Vue({
       el:'#app1'
    });
    new Vue({
        el:'#app2'
    });
</script>

• 如果说我们有一些公用的方法或者属性,那么可以通过Vue.component来声明一个组件.
• 上面代码中的tp,是我们组件的一个别名,它的作用类似于一个html标签.
• template属性的作用是,添加一段业务需要实现的html语句,有一个注意点是:template内部只能有一个根标签,其他标签必须写在最外层标签内部.
• 这里的data变成了一个函数,返回的是一个对象,这样我们可以在template中就可以直接使用name属性.
• 添加方法也是同样的道理.

在html中:

<div id="app1">
    <tp></tp>
</div>

<div id="app2">
    <tp></tp>
</div>

• 这里我们直接调用tp这个别名,即可展示我们想展示的内容.
  完整代码在顶部的demo里.