生命周期
创建前:beforeCreate
无法通过vm访问到data中的数据、methods中的方法。
//挂载流程
beforeCreate() {
console.log('beforeCreate')
},
创建完毕:created
可以通过vm访问到data中的数据、methods中配置的方法.
created() {
console.log('created')
},
挂载前:beforeMount
1.页面呈现的是未经Vue编译的DOM结构
2.所有对DOM的操作,最终都不奏效。
beforeMount() {
console.log('beforeMount')
},
挂载完毕:mounted
1.页面中呈现的是经过Vue编译的DOM;
- 对DOM的操作均有效(尽可能验免)至此初始化过程结束,一般在此进行;开启定枊器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作。
mounted() {
console.log('mounted')
},
更新前:beforeUpdate
数据是新的,但页面是旧的,即:页面尚未和数据保持同步。
//更新流程
beforeUpdate() {
console.log('beforeUpdate')
},
更新完毕:updated
数据是新的,页面也是新的,即:页面和数据保持同步。
updated() {
console.log('updated')
},
销毁前:beforeDestroy
vm中所有的:data、methods、指令等等,都处于可用状态,马上要执行销毁过程,一般在此阶段:关闭定时器、取消订阅消息、解绑自定义事件等收尾操作。
//销毁流程
beforeDestroy() {
console.log('beforeDestroy')
},
销毁完毕:destroyed
destroyed() {
console.log('destroyed')
}
Vue3生命周期:https://www.jianshu.com/p/09860b452335
组件
1、模块:向外提供特定功能的js程序,一般就是一个js 文件:
作用: 复用js, 简化js 的编写,提高js 运行效率。
2、组件:用来实现局部(特定)功能效果的代码集合(htmI/css/js/image...)
作用: 复用编码,简化项目编码,提高运行效率
一、创建组件:
const schoolExtend = Vue.extend({
name:'s2',//组件名称,暴露给开发者工具
template: `
<div>
<h2>学校名称:{{schoolName}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
`,
data() {
return {
schoolName: '山东大学',
address: '山大北路'
}
},
})
const studentExtend = Vue.extend({
template: `
<div>
<h2>学生姓名:{{studentName}}</h2>
<h2>学生年龄:{{age}}</h2>
</div>
`,
data() {
return {
studentName: '李四',
age: 18
}
},
})
二:注册组件
局部注册
new Vue({
el: '#root',
components: {
school: schoolExtend,
student: studentExtend
}
})
全局注册
Vue.component('student', studentExtend)
三、编写组件标签
<school></school>
<student></student>
组件嵌套
第一步:创建子组件
const studentExtend = Vue.extend({
name: 's2',
template: `
<div>
<h2>学生姓名:{{studentName}}</h2>
<h2>学生年龄:{{age}}</h2>
</div>
`,
data() {
return {
studentName: '李四',
age: 18
}
},
})
第二步:创建父组件,并且在父组件中注册子组件,同时在父组件template中添加子组件
const schoolExtend = Vue.extend({
name: 's1',
template: `
<div>
<h2>学校名称:{{schoolName}}</h2>
<h2>学校地址:{{address}}</h2>
<student></student>
</div>
`,
data() {
return {
schoolName: '山东大学',
address: '山大北路'
}
},
components: {
student: studentExtend
}
})
最后父组件标签
<school></school>
组件嵌套也可以实现组件管理,可以把多个组件放进一个父组件容器中管理
例如:
const app = Vue.extend({
template: `
<div>
<school></school>
<student></student>
</div>
`,
components: {
//如果属性和值相同可以简写
school,
student
}
})
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()
配置中:data
函数、methods
中的函数、watch
中的函数、computed
中的函数它们的this
均是【Vue实例对象】。
5、VueComponent
的实例对象,以后简称vc
(也可称之为:组件实例对象);
Vue
的实例对象,以后简称vm
。
6、一个重要的内置关系:VueComponent.prototype.__proto__=== Vue.prototype
,可以让组件实例对象(vc)可以访问到Vue原型上的属性、方法。
创建Vue脚手架(Vue CLI)
Vue脚手架是Vue官方提供的标准化开发工具;
首先,安装脚手架前先把镜像修改为淘宝镜像,否则下载非常慢
1、查看当前镜像:
npm config get registry
2、修改为淘宝镜像:
npm config set registry https://registry.npmmirror.com/
二,安装脚手架
npm install -g @vue/cli
三,创建项目
vue create hello
注意项目名称不能包含大写字母
四,运行项目
npm run serve
ref属性
1.被用来给元素或子组件注册引用信息(id的替代者)
2.应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)
3.使用方式:
<h2 ref="h2">学校名称:{{ schoolName }}</h2>
<h2 ref="title">学校地址:{{ address }}</h2>
<button @click="showDoM" ref="btn">点我</button>
console.log(this.$refs.title)//<h2>学校地址:山大北路</h2>
console.log(this.$refs.btn)//<button>点我</button>
props配置
1、基本用法
//传值
<Student name="张三" age=18 />
//接收
props:['name','age']
//使用
<h2>学生姓名:{{ name }}</h2>
<h2>学生年龄:{{ age }}</h2>
2、如果需要进行计算,age传:age
,:
后的是表达式,例如:
<Student name="张三" :age="18"/>
<h2>学生年龄:{{ age + 1 }}</h2>
3、props还可以限制类型
限制了类型,传值必须传对应类型
props:{
name:String,
age:Number
}
更高级的写法,可以指定类型、是否必传、默认值
props:{
name:{
type:String,
default:"名字"
},
age:{
type:Number,
required:true
}
}
注意:外部传入的值,Vue是不建议修改的, 如果修改会报错,如确需修改,重新用一个变量接收进行修改。
另外Vue3 props: https://www.jianshu.com/p/73a8cdcef253
mixin混入
可以把多个组件共用的配置提取成一个混入对象
创建js文件
export const hunhe = {
methods: {
showName(){
alert(this.schoolName)
}
},
}
引入
import { hunhe } from '@/mixin'
mixins:[hunhe]
另外还可以全局定义:
从main.js
引入
import { hunhe } from './mixin'
Vue.mixin(hunhe)