vue从入门到精通
第二章. Vue组件化编程
2.1 模块与组件、模块化与组件化
2.2 非单文件组件
2.2.3 非单文件组件的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1.基本使用</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!--
Vue中使用组件的三大步骤:
一、定义组件(创建组件)
二、注册组件
三、使用组件(写组件标签)
一、如何定义一个组件?
使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别;
区别如下:
1.el不要写，为什么?
最终所有的组件都要经过一个vm的管理，由vm中的e1决定服务哪个容器。
2.data必须写成函数，为什么?
避免组件被复用时，数据存在引用关系。
备注:使用template可以配置组件结构。
二、如何注册组件?
1.局部注册:华new Vue的时候传入components选项2.全局注册:靠Vue.component('组件名',组件)
三、编写组件标签:
<school></school>
-->
<div id="root">
<h2>{{msg}}</h2>
<!-- 三、使用组件(写组件标签) -->
<school></school>
<hr>
<!-- 三、使用组件(写组件标签) -->
<student></student>
<student></student>
</div>
<div id="root2">
<hello></hello>
</div>
<script>
// 一、定义组件(创建组件)
const school = Vue.extend({
// 组件定义时，一定不要写el配置项,因为最终所有的组件都要被一个大哥vm管理，由vm大哥决定服务哪个容器
// el:'#root'
template:
`<div>
<h2>学校名称: {{schoolName}}</h2>
<h2>学校地址: {{address}}</h2>
<button @click="show">点我弹出学校名</button>
</div>`,
data(){
return {
schoolName:"尚硅谷",
address:"beijing"
}
},
methods:{
show(){
alert(this.schoolName)
}
}
})
const student = Vue.extend({
template:
`<div>
<h2>学生名称: {{studentName}}</h2>
<h2>学生地址:{{address}}</h2>
</div>`,
data(){
return {
studentName:"张三",
address:"nanjing"
}
}
})
const hello = Vue.extend({
template:`<div><h2>hello</h2></div>`
})
// 全局注册组件
Vue.component('hello', hello)
// 创建vm
new Vue({
el:"#root",
data:{
msg:"hello world"
},
// 二、注册组件(局部注册)
components:{
school:school,
student:student
}
})
new Vue({
el:'#root2'
})
</script>
</body>
</html>
2.2.4 组件的几个注意点
<!--
几个注意点:
1.关于组件名:
一个单词组成:
第一种写法(首字母小写):school
第二种写法(首字母大写):School
多个单词组成:
第一种写法(kebab-case命名)：my-school
第二种写法(CamelCase命名):MySchool（需要Vue脚手架支持)
备注:
(1).组件名尽可能回避HTML中已有的元素名称,例如:h2 H2都不行。
(2).可以使用name配置项指定组件在开发者工具中呈现的名字。
2.关于组件标签:|
第一种写法:<school></school>
第二种写法:<school/>
备注:
不用使用脚手架时，<school/>会导致后续组件不能渲染。
3.一个简写方式：
const school = Vue.extend(options) 可简写为const school = options
不过写不写都会调用Vue.extend()方法
-->
2.2.5 组件的嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1.基本使用</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<app></app>
</div>
<script>
// 一、定义组件(创建组件)
const student = Vue.extend({
template:
`<div>
<h2>学生名称: {{studentName}}</h2>
<h2>学生地址:{{address}}</h2>
</div>`,
data(){
return {
studentName:"张三",
address:"nanjing"
}
}
})
const school = Vue.extend({
template:
`<div>
<h2>学校名称: {{schoolName}}</h2>
<h2>学校地址: {{address}}</h2>
<student></student>
</div>`,
data(){
return {
schoolName:"尚硅谷",
address:"beijing"
}
},
// 在一个组件内部注册组件
components:{
student // 这个组件定义时要放在父组件的前面
}
})
const hello = Vue.extend({
template:"<h2> {{msg}} </h2>",
data(){
return {
msg:"hello world"
}
}
})
const app = Vue.extend({
template:
`
<div>
<school></school>
<hello></hello>
</div>
`,
components:{
school,
hello
}
})
// 创建vm
new Vue({
el:"#root",
// 二、注册组件(局部注册)
components:{
app
}
})
</script>
</body>
</html>
2.2.6 VueComponent对象
<!--
关于VueComponent:
1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，
即vue帮我们执行的:new VueComponent(options)。
3.特别注意:每次调用Vue.extend，返回的都是一个全新的VueComponent!!!!
4.关于this指向:
(1).组件配置中;
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】。
(2).new Vue(options)配置中:
data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】.
5.VueComponent的实例对象，以后简称vc（也可称之为:组件实例对象）。
Vue的实例对象,以后简称vm。I
-->
2.2.7 一个重要的内置关系
1.一个重要的内置关系：VueComponent.prototype.__proto__ == Vue.prototype
2.为什么要有这个关系：让组件实例瑞星(vc)可以访问到Vue原型上的属性、方法。
2.3 单文件组件
单文件组件文件构成：
- index.html
- main.js
- App.vue
- School
- Student
由于在main.js里面使用了import语法，此语法浏览器暂时不支持，因此运行时会报错
Uncaught SyntaxError: Cannot use import statement outside a module (at main.js:1:1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="root">
<App></App>
</div>
<script src="../js/vue.js"></script>
<script src="./main.js"></script>
</body>
</html>
import App from "./App.vue"
new Vue({
el:"#root",
components:{App}
})
<template>
<div>
<!-- 使用组件 -->
<School></School>
<Student></Student>
</div>
</template>
<script>
// 引入组件
import School from "./School.vue";
import Student from "./Student.vue";
export default {
name: "App",
// 注册组件
components: {
School,
Student
}
};
</script>
<style>
</style>
// 组件结构
<template>
<div class="demo">
<h2>学生姓名: {{ name }}</h2>
<h2>学生年龄: {{ age }}</h2>
<student></student>
</div>
</template>
// 组件交互相关代码
<script>
// export default School = Vue.extend({
// name: "School", // 给组件配置名字
// data() {
// return {
// schoolName: "尚硅谷",
// address: "beijing",
// };
// },
// });
export default {
name: "Student", // 给组件配置名字
data() {
return {
name: "张三",
age: 18,
};
},
};
</script>
// 组件的样式
<style>
.demo {
background-color: skyblue;
}
</style>
// 组件结构
<template>
<div class="demo">
<h2>学校名称: {{ schoolName }}</h2>
<h2>学校地址: {{ address }}</h2>
<student></student>
</div>
</template>
// 组件交互相关代码
<script>
// export default School = Vue.extend({
// name: "School", // 给组件配置名字
// data() {
// return {
// schoolName: "尚硅谷",
// address: "beijing",
// };
// },
// });
export default {
name: "School", // 给组件配置名字
data() {
return {
schoolName: "尚硅谷",
address: "beijing",
};
},
};
</script>
// 组件的样式
<style>
.demo {
background-color: skyblue;
}
</style>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
