根组件与根标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>根组件</title>
</head>
<body>
<div id="app">
<h1>{{ title }}</h1>
<p>{{ title }}</p>sdfsdaf
sdfasdafsda
sdafsda
sdafsad
sdafsdaf
fsdaf
</div>
<div id="main"></div>
</body>
<script src="js/vue.js"></script>
<script>
// template就是一个组件的html实体代码块
new Vue({
el: '#app',
data: {
title: '根组件'
},
// template模板，书写html代码块
// 根组件也可以添加template模板，但是建议直接使用挂载点
// 每个组件的template模板中只能解析一个(第一个)根标签
template: `
<!--<div></div>-->
<div id="home">
<h1>{{ title }}</h1>
<p>{{ title }}</p>
<i>{{ title }}</i>
</div>
<div>
{{ title }}
</div>
`
});
// 只要是被new出来的vue实例都是根组件，所以一个vue单页面项目中只需要出现一次new创建的vue实例
new Vue({
el: '#main'
})
</script>
</html>
局部组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>根组件</title>
</head>
<body>
<div id="app">
<!--<localTag></localTag>-->
<!--资源出现在哪个模板，该资源就由该模板的拥有者提供-->
<!--++++组件不能绑定系统事件，但可以绑定自定义事件++++-->
<abc @mouseenter="abcEnter">{{ info }}</abc>
<abc></abc>
</div>
<div id="main">
<local-tag></local-tag>
</div>
<!--<div class="localTag">-->
<!--<h2>我是局部组件</h2>-->
<!--<p style="color: red;">我是局部组件的文本解释</p>-->
<!--<p @click="btnClick">我被点击了 {{ num }} 下</p>-->
<!--<hr>-->
<!--</div>-->
</body>
<script src="js/vue.js"></script>
<script>
// 局部组件
// 子组件的资源有自身提供
var localTag = {
// 挂载点是根组件的独有特性
// el: '.localTag',
// 子组件必须拥有自身template
template: `
<div id="localTag">
<h2>我是局部组件</h2>
<p style="color: red;">我是局部组件的文本解释</p>
<p @click="btnClick">我被点击了 {{ num }} 下</p>
<hr>
</div>
`,
// 子组件的data为方法的返回值字典,调用方法的目的是创建局部作用域，防止数据同步
data: function () {
return {
num: 0
}
},
methods: {
btnClick: function () {
this.num++
}
}
};
// 如果想在页面中看见子组件，需要在根组件中使用该子组件
// 如果根组件要使用局部子组件，需要提前注册
new Vue({
el: '#app',
data: {
info: "message"
},
components: {
abc: localTag,
},
methods: {
abcEnter: function () {
console.log('abc被悬浮了')
}
}
});
new Vue({
el: '#main',
components: {
// 在页面中才有 <local-tag></local-tag>
// localTag: localTag
// 'localTag': localTag
// 'local-tag': localTag 后面的localTag对应的是局部组件，推荐使用这种或者下面的简写方式
localTag
}
})
</script>
</html>
局部组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>根组件</title>
</head>
<body>
<div id="app">
<!--<localTag></localTag>-->
<!--资源出现在哪个模板，该资源就由该模板的拥有者提供-->
<!--++++组件不能绑定系统事件，但可以绑定自定义事件++++-->
<abc @mouseenter="abcEnter">{{ info }}</abc>
<abc></abc>
</div>
<div id="main">
<local-tag></local-tag>
</div>
<!--<div class="localTag">-->
<!--<h2>我是局部组件</h2>-->
<!--<p style="color: red;">我是局部组件的文本解释</p>-->
<!--<p @click="btnClick">我被点击了 {{ num }} 下</p>-->
<!--<hr>-->
<!--</div>-->
</body>
<script src="js/vue.js"></script>
<script>
// 局部组件
// 子组件的资源有自身提供
var localTag = {
// 挂载点是根组件的独有特性
// el: '.localTag',
// 子组件必须拥有自身template
template: `
<div id="localTag">
<h2>我是局部组件</h2>
<p style="color: red;">我是局部组件的文本解释</p>
<p @click="btnClick">我被点击了 {{ num }} 下</p>
<hr>
</div>
`,
// 子组件的data为方法的返回值字典,调用方法的目的是创建局部作用域，防止数据同步
data: function () {
return {
num: 0
}
},
methods: {
btnClick: function () {
this.num++
}
}
};
// 如果想在页面中看见子组件，需要在根组件中使用该子组件
// 如果根组件要使用局部子组件，需要提前注册
new Vue({
el: '#app',
data: {
info: "message"
},
components: {
abc: localTag,
},
methods: {
abcEnter: function () {
console.log('abc被悬浮了')
}
}
});
new Vue({
el: '#main',
components: {
// 在页面中才有 <local-tag></local-tag>
// localTag: localTag
// 'localTag': localTag
// 'local-tag': localTag 后面的localTag对应的是局部组件，推荐使用这种或者下面的简写方式
localTag
}
})
</script>
</html>
全局组件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全局组件</title>
</head>
<body>
<div id="app">
<global-tag></global-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 全局组件与局部组件的不同点：全局组件不用注册
// 全局组件用Vue.component()来声明定义，两个参数
// 第一个为组件名，第二个为组件内容
Vue.component('globalTag', {
template: `
<div>
<h2>我是全局组件</h2>
<p style="color: red;">我是全局组件的文本解释</p>
<p @click="btnClick">我被点击了 {{ num }} 下</p>
<hr>
</div>
`,
data: function() {
return {
num: 1
}
},
// computed: {
// num: function() {
// return 1
// }
// },
methods: {
btnClick: function () {
this.num++
}
}
});
new Vue({
el: '#app',
data: {
}
})
</script>
</html>
组件间的通信
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>组件间的通信</title>
</head>
<body>
<div id="app">
<tag :super_msg="msg" @own_method="receiveInfo"></tag>
<p>{{ temp_info }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 父组件数据传递给子组件，通过自定义属性绑定的方式
// 子组件数据传递给父组件，通过自定义事件的发送
Vue.component('tag', {
props: ['super_msg'],
template: `
<div>
<h2 @click="sendInfo">{{ super_msg }}</h2>
</div>
`,
data: function () {
return {
info: '子级的信息'
}
},
methods: {
sendInfo: function () {
this.$emit('own_method', this.info)
}
}
});
new Vue({
el: '#app',
data: {
msg: '父级的数据',
temp_info: ''
},
methods: {
receiveInfo: function (info) {
this.temp_info = info
}
}
})
</script>
</html>
