1.1 模块与组件、模块化与组件化
1.1.1 模块
- 了解:向外提供特定性能的
js
程序,个别就是一个js
文件 - 为什么:
js
文件很多很简单 - 作用:复用
js
,简化js
的编写,进步js
运行效率
1.1.2 组件
- 了解:用来实现部分 (特定) 性能成果的代码汇合(
html/css/js/image
…..) - 为什么:一个界面的性能很简单
- 作用:复用编码,简化我的项目编码,进步运行效率
1.1.3 模块化
当利用中的 js
都以模块来编写的,那这个利用就是一个模块化的利用。
1.1.4 组件化
当利用中的性能都是多组件的形式来编写的,那这个利用就是一个组件化的利用。
1.2 非单文件组件
1.2.1 阐明
- 模板编写没有提醒
- 没有构建过程,无奈将
ES6
转换成ES5
- 不反对组件的
CSS
- 真正开发中简直不必
1.2.2 根本应用
<!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> 根本应用 </title>
<script src="../js/vue.js"></script>
</head>
<body>
<!--
Vue 中应用组件的三大步骤:一、定义组件(创立组件)
二、注册组件
三、应用组件(写组件标签)
一、如何定义一个组件?应用 Vue.extend(options) 创立,其中 options 和 new Vue(options) 时传入的那个 options 简直一样,但也有点区别;区别如下:1.el 不要写,为什么?——— 最终所有的组件都要通过一个 vm 的治理,由 vm 中的 el 决定服务哪个容器。2.data 必须写成函数,为什么?———— 防止组件被复用时,数据存在援用关系。备注:应用 template 能够配置组件构造。二、如何注册组件?1. 部分注册:靠 new Vue 的时候传入 components 选项
2. 全局注册:靠 Vue.component('组件名', 组件)
三、编写组件标签:<school></school>
-->
<div id="root">
<!-- <h2> 学校名称:{{schoolName}}</h2>
<h2> 学校地址:{{schoolAddress}}</h2>
<h2> 学生姓名:{{studentName}}</h2>
<h2> 学生年龄:{{studentAge}}</h2> -->
<!-- 第三步:应用组件 -->
<xuexiao></xuexiao>
<hr></hr>
<student></student>
</div>
<div id="root2">
<xuexiao></xuexiao>
<hr></hr>
<student></student>
</div>
<script>
// 阻止 vue 在启动时生成生产提醒
Vue.config.productionTip = false
// 第一步:创立组件
const school = Vue.extend({
template: `
<div>
<h2> 学校名称:{{schoolName}}</h2>
<h2> 学校地址:{{schoolAddress}}</h2>
</div>`,
data() {
return {
schoolName: "厦门大学",
schoolAddress: "厦门",
}
}
})
// 第一步:创立组件
const student = Vue.extend({
template: `
<div>
<h2> 学生姓名:{{studentName}}</h2>
<h2> 学生年龄:{{studentAge}}</h2>
</div>`,
// 组件定义时,肯定不要写 el 配置项,因为最终所有的组件都要被一个 vm 治理,由 vm 决定服务于哪个容器
// el: "#rtoot",
data() {
return {
studentName: "李四",
studentAge: 22,
}
}
})
// 全局注册组件
Vue.component("xuexiao", school)
Vue.component("student", student)
new Vue({
el: "#root",
data: {
schoolName: "北京大学",
schoolAddress: "北京",
studentName: "张三",
studentAge: 18,
},
// 第二步:注册组件
components: {
xuexiao: school,
student
}
})
new Vue({
el: "#root2",
data: {}})
</script>
</body>
</html>
1.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> 几个留神点 </title>
<script src="../js/vue.js"></script>
</head>
<body>
<!--
几个留神点: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
-->
<div id="root">
<h2>{{message}}</h2>
<!-- 写法一:首字母小写 -->
<school></school>
<!-- 写法二:首字母大写 -->
<School></School>
<!-- 写法三 -->
<!-- 不必脚手架时,当应用多个组件,会导致后续组件不能渲染 -->
<school />
<school />
</div>
<script>
// 阻止 vue 在启动时生成生产提醒
Vue.config.productionTip = false
// 定义组件
// const school = Vue.extend({
// name: "MySchool",
// template: `
// <div>
// <h2> 学校名称:{{name}}</h2>
// <h2> 学校地址:{{address}}</h2>
// </div>
// `,
// data() {
// return {
// name: "北京大学",
// address: "北京"
// }
// }
// })
// 定义组件
const school = {
name: "MySchool",
template: `
<div>
<h2> 学校名称:{{name}}</h2>
<h2> 学校地址:{{address}}</h2>
</div>
`,
data() {
return {
name: "北京大学",
address: "北京"
}
}
}
new Vue({
el: "#root",
data: {message: "欢送学习 Vue!"},
// 注册组件
components: {school}
})
</script>
</body>
</html>
1.2.4 组件的嵌套
<!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> 组件的嵌套 </title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<!-- <h2>{{message}}</h2>
<hello></hello>
<school></school> -->
</div>
<script>
// 阻止 vue 在启动时生成生产提醒
Vue.config.productionTip = false
// 定义学生组件
const student = Vue.extend({
template: `
<div>
<h2> 学生名称:{{name}}</h2>
<h2> 学生年龄:{{age}}</h2>
</div>
`,
data() {
return {
name: "北京大学",
age: 20
}
}
})
// 定义组件
const school = Vue.extend({
name: "MySchool",
template: `
<div>
<h2> 学校名称:{{name}}</h2>
<h2> 学校地址:{{address}}</h2>
<student></student>
</div>
`,
data() {
return {
name: "北京大学",
address: "北京"
}
},
components: {student}
})
// 定义 hello 组件
const hello = Vue.extend({
template: `
<div>
<h2> Hello World </h2>
</div>
`,
})
const app = ({
template: `
<div>
<h2>{{message}}</h2>
<school></school>
<hello></hello>
</div>
`,
data() {
return {message: "欢送学习 Vue!"}
},
// 注册组件
components: {school, hello}
})
new Vue({
el: "#root",
template: `
<app></app>
`,
// data: {
// message: "欢送学习 Vue!"
// },
// 注册组件
components: {app}
})
</script>
</body>
</html>
1.2.5 VueComponent
<!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>VueComponent</title>
<script src="../js/vue.js"></script>
</head>
<body>
<!--
对于 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。-->
<div id="root">
<school></school>
</div>
<script>
// 阻止 vue 在启动时生成生产提醒
Vue.config.productionTip = false
// 定义 school 组件
const school = Vue.extend({
name: "school",
template:`
<div>
<h2> 学校名称:{{name}}</h2>
<h2> 学校地址:{{address}}</h2>
<button @click="showName"> 点我提醒学校名 </button>
</div>
`,
data(){
return {
name: "北京大学",
address: '北京'
}
},
methods: {showName(){
// 组件中的 this 是 VueComponent 实例
console.log('showName', this)
}
},
})
const test = Vue.extend({template: `<span>atguigu</span>`})
// 定义 hello 组件
const hello = Vue.extend({
template:`
<div>
<h2>{{msg}}</h2>
<test></test>
</div>
`,
data(){
return {msg: '你好啊!'}
},
components:{test}
})
console.log('@', school)
console.log('#', hello)
// false 阐明两个是不同的 VueComponent 实例
console.log(school === hello);
const vm = new Vue({
el: "#root",
data: { },
components: {school, hello}
})
</script>
</body>
</html>
1.2.6 内置关系
<!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> 一个重要的内置关系 </title>
<script src="../js/vue.js"></script>
</head>
<body>
<!--
1. 一个重要的内置关系:VueComponent.prototype.__proto__ === Vue.prototype
2. 为什么要有这个关系:让组件实例对象(vc)能够拜访到 Vue 原型上的属性、办法。-->
<div id="root">
<school></school>
<hello></hello>
</div>
<script>
// 阻止 vue 在启动时生成生产提醒
Vue.config.productionTip = false
// 定义 school 组件
const school = Vue.extend({
template: `
<div>
<h2> 学校名称:{{name}}</h2>
<h2> 学校地址:{{address}}</h2>
</div>
`,
data() {
return {
name: "北京大学",
address: "北京"
}
}
})
const hello = Vue.extend({
template: `
<div>
<h2>Hello World</h2>
</div>
`,
data() {return {}
}
})
console.log(school.prototype.__proto__ === Vue.prototype);
new Vue({
el: "#root",
data: { },
components: {school, hello}
})
// 定义一个构造函数
function Demo() {
this.a = 1
this.b = 2
}
const d = new Demo()
// 显示原型属性
console.log(Demo.prototype);
// 隐式原型属性高
console.log(d.__proto__);
console.log(Demo.prototype === d.__proto__);
Demo.prototype.x = 99
console.log(d.__proto__.x);
</script>
</body>
</html>
1.3 单文件组件
1.3.1 一个 .vue
文件的组成(3 个局部)
-
模板页面
<template> 页面模板 </template>
-
JS
模块对象<script> export default{data(){return{} }, methods:{}, computed:{}, components:{}} </script>
-
款式
<style> 款式定义 </style>
-
示例代码
<template> <div> <h2> 学生姓名:{{name}}}</h2> <h2> 学生年龄:{{age}}}</h2> </div> </template> <script> export default { name: "Student", data() { return { name: "张三", age: 18 } } } </script> <style> </style>
1.3.2 根本应用
-
引入组件
<script> import School from "./School.vue"; import Student from "./Student.vue"; export default { name: "App", components: { School, Student, }, }; </script>
-
应用组件标签
<template> <div> <School></School> <Student></Student> </div> </template>