组件
'''1.根组件：new Vue()创建的组件，一般不明确自身的模板，模板就采用挂载点2.局部组件: local_component = {}2.全局组件： Vue.component({})''''''1.一个组件就是一个vue实例2.组件具有自身的template3.组件的模板只能有一个根标签4.子组件的data具有作用域，以达到组件的复用，每个组件的数据独有'''
变量声明的关键字
'''没有关键字：全局作用域var：没有块级，有局部作用域let：有块级，有局部作用域const：有块级，有局部作用域，是常量'''
局部组件
第三步
<div id="app">
<!--html代码不区分大小写，该名字使用子组件是不合法的命名-->
<!--<localTag></localTag>-->
<!--<local></local>-->
<!--组件的复用-->
<local-tag></local-tag>
<local-tag></local-tag>
</div>
<script>
第一步
var localTag =
{
template: '<div class="local" style="color: orange" @click="btnAction">{{ name }}组件</div>'
,
// 子组件的数据与方法由子组件自身提供
data:
function () {
return {
name: '局部'
}
},
methods: {
btnAction: function () {
alert('你丫点我了'
)
}
}
};
第二步
new Vue({
el: "#app"
,
components: {
// local: localTag
// 'local-tag':localTag
// localTag: localTag,
// 1.js的驼峰命名(localTag)对应的是html的连接命名(local-tag)
// 2.key与value的变量名一致，可以简写
localTag
}
});
</script>
全局组件
<div id="app">
<global-tag></global-tag>
<global-tag></global-tag>
</div>
<script>
Vue.component('global-tag'
, {
template: '<div @click="btnClick">{{ name }}组件被点了{{ n }}下</div>'
,
// 组件被复用一次，就会产生一个新的局部作用域，使用一套数据
data:
function(){
return {
n: 0
,
name: "全局"
}
},
methods: {
btnClick: function () {
this.n += 1
}
}
});
new Vue({
el: "#app"
})
</script>
转载于:https://www.cnblogs.com/98WDJ/p/10870567.html
相关资源：JAVA上百实例源码以及开源项目
