一、初识VUE
二、再识VUE-MVVM
三、VUE数据代理
四、VUE事件处理
五、VUE计算属性
六、Vue监视属性
七、VUE过滤器
七、VUE内置指令
九、VUE组件
三大步骤
- 定义组件(创建组件)
- 注册组件
- 使用组件(写组件标签)
一、定义组件
- 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
区别如下：
- el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
- data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
- 备注：使用template可以配置组件结构。
二、注册组件
- 局部注册：靠new Vue的时候传入components选项
- 全局注册：靠Vue.component(‘组件名’,组件)
三、使用组件
<module1></module1>
关于组件名
- 一个单词组成：
第一种写法(首字母小写)：module1
第二种写法(首字母大写)：Module1 - 多个单词组成：
第一种写法(kebab-case命名)：my-module1
第二种写法(CamelCase命名)：MyModule1 (需要Vue脚手架支持)
(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。
关于组件标签
- 第一种写法：
- 第二种写法：
不用使用脚手架时，会导致后续组件不能渲染。
简写
- const module1 = Vue.extend(options) 可简写为：const module1= options
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>VUE组件</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<h1>
{{ msg }}
</h1>
<!--3、使用组件-->
<module1></module1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
//1、创建组件
//简写 Vue.extend({
const module1 = {
template:
`
<div>
<h1>{{ module1Name }}</h1>
<button @click="showName">module1Name</button>
</div>
`,
data() {
return {
module1Name: '组件1'
}
},
methods: {
showName() {
alert(this.module1Name)
}
}
}
//2、注册组件-全局注册 就代表所有的vm都可以用
//Vue.component('module1',module1)
new Vue({
el:'#root',
data:{
msg:'111'
},
//2、注册组件-局部注册
components:{
module1
}
})
</script>
</body>
</html>
组件的嵌套
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>VUE组件</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<h1>
{{ msg }}
</h1>
<!--3、使用组件-->
<module2></module2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
//1、创建组件
//简写 Vue.extend({
const module1 = {
template:
`
<div>
<h1>{{ module1Name }}</h1>
</div>
`,
data() {
return {
module1Name: '组件1'
}
}
}
const module2 = {
template:
`
<div>
<!--子组件注册给哪个父组件，就嵌套在哪个副组件里面--->
<module1></module1>
<h1>{{ module2Name }}</h1>
</div>
`,
data() {
return {
module2Name: '组件2'
}
},
//组件嵌套
components: {
module1
}
}
//2、注册组件-全局注册 就代表所有的vm都可以用
//Vue.component('module1',module1)
new Vue({
el:'#root',
data:{
msg:'111'
},
//2、注册组件-局部注册
components:{
module2
}
})
</script>
</body>
</html>