vue学习-组件

vue组件作用

某一类功能代码的集合，在Vue中，你就可以认为，我们看到的每一个页面就是一个组件

四种写法

第一种:先定义，再注册，再使用    <div id="app">        <login></login>    </div>    //1.定义组件    var loginComponent = Vue.extend({    //组件的模版，模版里面写的就是组件的html代码    template:'<div>用户名:<input type="text" placeholder="请求输入用户名"></div>'    })    //2.注册    Vue.component('login',loginComponent)    //3.创建vm    var vm = new Vue({        el:"#app"    })

第二种:定义注册一步到位，再使用(推荐使用）    <div id="app">        <login></login>    </div>    //1,定义&注册写成一步    Vue.component('login',{    //组件的模版，模版里面写的就是组件的html代码    template:'<div><span @click="loginClick">{{message}}</span></div>',    //数据绑定    data:function(){        return {            message:"Hello 组件"          }      },      methods:{          loginClick:function(){              console.log("---起飞吧---")          }      }  })     //3.创建vm     var vm = new Vue({         el:"#app"     })

第三种:都是对组件中template的内容优化（模板单独写出来）    像template    <script id="templateId" type="text/html">        <div><span>{{message}}</span></div>    </script>    Vue.component('login',{    //组件的模版，模版里面写的就是组件的html代码    template:'#templateId',    data:function(){         return {             message:"Hello 组件 第四种"         }     }  })

注意点:    1、在定义我们组件，必须给它一个根元素    2、在组件内部template模板定义Model，data必须是一个函数，并且函数内部必须要返回一个对象         (理解:模板要的数据,就在组件内部进行数据定义,通过{{}}来获取)        参考方法2