Vue基础-生命周期/组件/Vue CLI安装/ref属性/props配置/mixin混入

生命周期

创建前: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;

  1. 对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)
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容