目录:
1. 生命周期:
- beforecreate : 一般使用场景是在加 loading事件的时候
- created:处于loading结束后,还做一些初始化,实现函数自执行(data数据已经初始化,但是DOM结构渲染完成,组件没有加载)。在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
- beforemount:处于组件创建完成,但未开始执行操作
- mounted :处于发起后端请求,获取数据,配合路由钩子执行操作(DOM渲染完成,组件挂载完成 )。在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。mounted 是生命周期方法之一,会在对应生命周期时执行。
- beforeupdate:处于数据更新前
- updated:处于数据更新后
- beforeDestroy:当前组件还在的时候,想删除组件
- destroyed :当前组件已被销毁,清空相关内容
2. data: (存储数据)
示例:
var data = { a: 1 }
// 直接创建一个实例
var vm = new Vue({
data: data
})
vm.a // => 1
vm.$data === data // => true
// Vue.extend() 中 data 必须是函数
var Component = Vue.extend({
data: function () {
return { a: 1 }
}
})
我们常用的UI库是使用的Vue.extend,所以data我们应该用函数:
data: function () {
return { a: 1 }
}
3. methods: (函数方法一般都写再这里)
methods 是Vue实例对象上绑定的方法,供当前Vue组件作用域内使用,未调用不会执行,只执行逻辑,返回值可有可无。
methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法,或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
注意:不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例,this.a 将是 undefined。
示例:
var vm = new Vue({
data: { a: 1 },
methods: {
plus: function () {
this.a++
}
}
})
vm.plus()
vm.a // 2
4. computed:(计算属性)
支持缓存,只有依赖数据发生变化时,才会重新进行计算函数;
计算属性内不支持异步操作;
计算属性的函数中都有一个 get(默认具有,获取计算属性)和 set(手动添加,设置计算属性)方法;
计算属性是自动监听依赖值的变化,从而动态返回内容。
5. watch:(侦听属性)
不支持缓存,只要数据发生变化,就会执行侦听函数;
侦听属性内支持异步操作;
侦听属性的值可以是一个对象,接收 handler 回调,deep,immediate 三个属性;
监听是一个过程,在监听的值变化时,可以触发一个回调,并做一些其他事情。
6. components: (引用组件名字的存储地方)
<script>
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "Home",
components: {
HelloWorld,
},
};
</script>
7. vue中的data为什么是一个函数,而不是一个对象
- JavaScript中的对象是引用类型的数据,当多个实例引用同一个对象时,只要一个实例对这个对象进行操作,其他实例中的数据也会发生变化。
- 而在Vue中,我们更多的是想要复用组件,那就需要每个组件都有自己的数据,这样组件之间才不会相互干扰。
- 所以组件的数据不能写成对象的形式,而是要写成函数的形式。数据以函数返回值的形式定义,这样当我们每次复用组件的时候,就会返回一个新的data,也就是说每个组件都有自己的私有数据空间,它们各自维护自己的数据,不会干扰其他组件的正常运行。
8.Ant Design of Vue页面结构
<template>
<!-- html 页面内容 -->
<test></test>
</template>
<script>
// 引入的其它文件的属性
import { } from ''
// 引入的其它文件的组件
import Tset from "./test/test";
export default {
// 这个页面的名字
name: "TextName",
// 引用组件名字的存储地方
components: {
Test
}
// 页面上的data数据,一定要用函数
data () {
return {
test: ''
}
},
// 计算属性,有缓存
computed: {},
// 侦听属性,没有缓存
watch: {},
// 生命周期函数,dom前的数据,其它的生命周期函数以此类推。
created () {},
// 方法,函数方法一般写在这里
methods: {}
}
</script>
<style scoped>
/* css样式 */
</style>