vue的组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/vue-rute.js" ></script>
</head>
<body>
<div class="" id="myVue">
<my-component></my-component><!--全局组件创建方法一-->
<my-component1></my-component1><!--全局组件创建方法二-->
<my-component2></my-component2><!--局部组件-->
<div is="myComponent2"></div><!--局部组件别一种写法-->
</div>
</body>
<script type="text/javascript" charset="utf-8">
/*vue组件有全局组件和局部组件
* */
//全局组件创建方法有二（全局组件使用范围：可以在页面中任何位置使用）
//方法一
Vue.component("myComponent",{
template:"<div>{{firstData}}</div>",
data: function () {
return {
firstData: 'Walter1',
secondData: 'White1'
}
}
})
//方法二 Vue.extend()
var mycomponent=Vue.extend({
template:"<div>{{firstData}}</div>",
data: function () {
return {
firstData: 'Walter2',
secondData: 'White2'
}
}
})
Vue.component("myComponent1",mycomponent);
//new mycomponent().$mount('#myVue')//这种挂载方法也可以
/*注意点：
*
* */
//局部组件（局部组件使用范围：只能在定义它的el中使用）
var comp={
template:"<div>{{firstData}}</div>",
data: function () {
return {
firstData: 'Walter3',
secondData: 'White3'
}
}
}
var vm=new Vue({
el:"#myVue",
components:{
"myComponent2":comp
}
})
/*注意点：
* 1.全局组件必须写在Vue实例创建之前，才在该根元素下面生效；
* 2.模板里面第一级只能有一个标签；
* 3.驼峰命名，组件用”-“连接
* 4.局部组件属性名为components;
5.嵌套比较多，定义一个全局变量
6.在自定义组件时由于有些元素允许包含的元素有限制，例如<select>，
在这种情况下，可以使用<div is="myComponent2"></div>这种写法
*/
</script>
</html>
