Vue实例
new Vue (options)就是构造一个Vue的实例
- 把Vue的实例命名为vm是尤雨溪的习惯，我们可以沿用
- vm对象封装了对视图的所有操作，包括数据读写、事件绑定、DOM更新
- vm的构造函数是Vue，按照ES6的说法，vm所属的类是Vue
- options是new Vue的参数，一般称之为选项 或者构造选项
本文将研究第一个问号 即构造选项options
options里面有什么
截屏2022-08-20 09.34.47.png
第一类属性：数据
data 数据
props 属性
computed 计算属性 //被计算出来的
methods 方法，用来定义方法的
watch 观察 //当data变化时做某些事情就用watch
propsData //很少用,单元测试会用
第二类属性：DOM
el 挂载点 //你要用你的模版替换页面上的哪一块，你的挂载点
template //你的HTML内容。着重讲语法v-if、v-for
render 渲染 //⚠️注意template和render只能二选一！
//template是给完整版用的，render是给非完整版用的。一起用必然有一个会失效！
生命周期钩子
生命周期：在vue的创建，挂载，使用，销毁过程中，会有许多事件，这些事件就被统称为生命周期函数，也叫作生命周期钩子。
beforeCreate 创建之前
created 创建之后
beforeMount
mounted 挂载之后
beforeUpdate
updated 更新之后
activated
deactivated
beforeDestroy
destroyed 失败之后
errorCaptured
lifecycle.png
第四类属性：资源
directives 指令
filters 过滤器 //尽量不去用，用methods代替
components 组件
//如果要在一个文件引用另一个Vue的文件就用组建。Demo.vue就叫组件,英文名叫components。
第五类属性：组合
parent
mixins 混入
extends 扩展
provide 提供
inject 注入
入门属性
el —挂载点 与$mount有替代关系
new Vue({
el: '#app',//挂载在app这个元素上
render: h => h(Demo)
})
等价于
const vm = new Vue({
render: h => h(Demo)
})
vm.$mount('#app')
data —外部数据 支持对象和函数 优先使用函数
假设如果有两个组件共用内部数据data，当其中一个改变时另一个也会变，因为它们引用的是同一个data。函数会阻止两个组件共用data的问题。
methods — 事件处理函数或者普通函数
事件处理函数: 写到一个@click或keypress或者任何事件作为它的处理函数
//HTML里有个button
<button @click="add">+1</button><!--写在页面里的视图-->
------------
methods: {
add() {
this.n += 1
}
}
methods代替 filter
const vm = new Vue({
data() {
return {
array: [1, 2, 3, 4, 5, 6, 7, 8]
}
},
template: `
<div>
{{ filter(array) }}<!--求数组的偶数-->
</div>
`,
methods: {
filter(array) {
return array.filter(i => i % 2 === 0)
}
}
})
或者：
const vm = new Vue({
data() {
return {
array: [1, 2, 3, 4, 5, 6, 7, 8]
}
},
template: `
<div>
{{ filter() }}<!--求数组的偶数-->
</div>
`,
methods: {
filter() {
return this.array.filter(i => i % 2 === 0)
}
}
})
components —组件
方法一：
import Demo from './Demo.vue'
//引入组件
const vm = new Vue({
components:{
Origami : Demo // 取一个名字 后面是组件
},
template: `
<div>
<Origami/> //在模版中加入这个组件
</div>
`,
}
方法二：
Vue.component('Demo2', {
template:`
<div>demo2</div>
`
})
const vm = new Vue({
template: `
<div>
<Demo2/> //在模版中加入这个组件
</div>
`,
}
四个钩子
1.created 实例出现在内存中
2.mounted 实例出现在页面中
3.updated 实例更新了
4.destroyed 实例消亡了
const vm = new Vue({
data() {
return {
n: 0
}
},
template:`
<div class="red">
{{ n }}
<button @click="add">+1</button><!--写在页面里的视图-->
</div>
`
created() {
console.log('出现在内存中，没有出现在页面中')
},
mounted() {
console.log('我已出现在页面中')
},
updated() {
console.log('更新了')
console.log(this.n)
},
methods: {
add() {
this.n += 1
},
},
}
})
destroyed需要格外注意：
要在外部引入一个组件：
import Demo2 from './Demo2.vue'
new Vue({
data: {
visible: true
},
components: {Demo2},
template: `
<div>
<button @click="toggle">toggle</button>
<hr>
<Demo2 v-if="visible===true"/>
</div>
`,
methods: {
toggle() {
this.visible = !this.visible
}
},
// render: h => h(Demo2)
}).$mount('#app')
写出实例消失在页面的办法
在被引入的组件中补充destroyed
destroyed() {
console.log('从页面中消失了')
},
网友评论