2018-09-20

1，VUE组件

简介：组件（Component）是 Vue.js 最强大的功能之一。
作用：组件可以扩展 HTML 元素，封装可重用的代码。
2，VUE写法
组件也分为两种：
1，全局组件:
举例：

    <html lang="en">
      <head>
      <meta charset="UTF-8">
    <title>Document</title>
</head>
  <body>
     <div id='app'>

   <my-component></my-component>  
   <my-component></my-component>  
   <my-component></my-component>  
   <my-component></my-component>  
   <my-component></my-component>  
   <ul>
       <li></li>
   </ul>
  
       </div>
        <script src='js/vue.js'></script>
        <script>
          //全局：
        Vue.component('my-component',{
            template:`
              <ul>
               <li></li>
              </ul>

            `
        })
    
        new Vue({
            el:'#app',
                }
            }
        })

    </script>
</body>
</html>

2，局部组件：
实例：

  <div id="app">
    <runoob></runoob>
    </div>

  <script>
  var Child = {
    template: '<h1>自定义组件!</h1>'
  }

    // 创建根实例
    new Vue({
    el: '#app',
    components: {
      // <runoob> 将只在父模板可用
      'runoob': Child
    }
  })
  </script>

2，组件的简单运用·

例如：使用vue组件来做一个点击事件，点击时弹出 hello world

   <html lang="en">
          <head>
          <meta charset="UTF-8">
      <title>Document</title>
  </head>
  <body>
     <div id='app'>
     <my-component></my-component>
     </div>
      <script src='js/vue.js'></script>
      <script>
         Vue.component("my-component",{
             template:`
                  <div>
                      <h1>{{msg}}</h1>
                      <button @click='alt'>按钮</button>
                  </div>
                  `,
             data:function(){
               return{
                   msg:'dcgf'
                   }
             },
             methods:{
                 alt:function(){
                     alert(‘hello,world’) 
                 }
           }
         })
             new Vue({
             el:'#app',
               
         })
      </script>
  </body>
  </html>

2018-09-20

推荐阅读更多精彩内容