vue 自定义组件 

<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      
</head>
<body>
      <!-- 什么是组件？ 拥有专属的HTML,CSS,JS和数据的页面独立区域
           为什么？重用
           何时用？只要发现页面中有一个区域可能被反复使用，都要定义成组件

           创建：每个组件都是一个缩微的 new Vue()
           使用组件：组件在html中其实就是一个可重用的标签而已。组件名就是就是标签名。所以组件起名不要驼峰命名！因为HTML标签不区分大小写。可用-分隔多个单词
            new Vue()必须写，因为是new Vue扫描页面时，发现不认识的标签，才会去加载自定义的组件
            加载时：会用组件的template中的HTML模板片段，代替不认识的标签。
            template必须有一个父元素包裹

           Vue.conponent('组件名',{
                 tempalte:``,                模板，放着html片段
                 data(){
                     return {//调用一次data(),返回一个新的return
                           //模型变量
                     }
                 },
                 methods:{},
                 watch:{  },
                 computed:{},
                 created(){},
                 mounted(){},
           })
            new Vue({
               el:"#app"
         })   

      -->

      <!-- 自定义组件 -->
      <div id="app">
            <counter></counter><br>
            <counter></counter><br>
            <counter></counter><br>
      </div>
      <script src="vue2.js"></script>

      <script>
   
       Vue.component('counter',{
            template:`<div>  <button @click=change(-1)>-</button><span>{{n}}</span><button @click=change(+1)>+</button> </div>`,
            data(){
                  return{
                        n:1
                  }
            },
            methods:{
                  change(i){
                        this.n+=i
                  }
            }
      })

      new Vue({
            el:"#app"
       })   
      </script>

</body>
</html>

 

posted @ 2019-08-19 19:12  javascript9527  阅读(373)  评论(0)    收藏  举报