前端：Vue学习-2

- 1. vue的生命周期
- 2. 工程化开发和脚手架Vue CLI
- - 2.1 组件化开发
  - 2.2 scoped解决样式冲突
  - 2.3 data是一个函数
  - 2.4 组件通信
  - 2.5 非父子通信- event bus事件，provide&inject
- 3.v-model原理->实现父子组件双向绑定
- 4. sync 修饰符->实现父子组件双向绑定
- 5. ref 和 $refs
- 6. Vue异步更新，$nextTick

1. vue的生命周期

Vue的生命周期，一个Vue实例从创建到销毁的整个过程。
生命周期的四个阶段为：创建、挂载、更新、销毁

创建阶段，把数据转化为响应式数据；
挂载阶段，渲染模板；
更新阶段，数据修改，更新视图；
销毁阶段

Vue生命周期函数（钩子函数）
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vue2</title><script src="../vue2.js"></script>
</head>
<body><div id="app"><input type="text" v-model.number="count"><h4>{{count}}</h4></div><script>const app = new Vue({el:'#app',data:{count:100},beforeCreate(){console.log('before Create',this.count);},created(){console.log('created',this.count);},// 创建阶段beforeMount(){console.log('beforeMount',document.querySelector('h4').innerText);},mounted(){console.log('mounted', document.querySelector('h4').innerText);},// 挂载阶段beforeUpdate(){console.log('beforeUpdate', document.querySelector('h4').innerText);},updated(){console.log('updated', document.querySelector('h4').innerText);},// 更新阶段beforeDestroy(){console.log('beforeDestory');console.log('清除一些vue以外的资源占用，比如定时器等');},destroyed(){console.log('destoryed');}//销毁阶段})</script>
</body>
</html>

请添加图片描述

2. 工程化开发和脚手架Vue CLI

安装脚手架的命令，前提是本地电脑上已经安装nodejs，安装命令为：

npm install @vue/cli -g
// 全局安装
vue --version
// 查看安装的版本

在这里插入图片描述
创建vue项目为：

vue create 项目名

启动项目命令为：

// 首先需要cd到当前项目目录下
cd 项目名
npm run serve   // 启动项目

在这里插入图片描述

这个项目文件结构为：node_modules-第三方包目录，public-放html文件的目录，src-源代码目录，package.json-项目配置文件，jsconfig.json-js配置文件。。。src有个main.js文件，为项目的核心文件

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false// vue实例化
new Vue({// render: h => h(App),render:(createElement)=>{return createElement(App)}
}).$mount('#app')

2.1 组件化开发

一个页面可以拆分为一个个组件，每个组件可以拥有自己独立的结构、样式、行为，结构下有且只能有一个根元素。使样式支持less语法，需要安装less，npm命令为：

npm install less-loader

组件注册：局部注册、全局注册
局部注册，在components目录下新建“.vue”文件，文件命名采用大驼峰命名。然后在这个新建的vue文件下输入组件的三个组成部分，分别为结构、样式和行为。在App.vue根组件引入这个组件，并进行组测，然后就可以在根组件中使用这个组件了。

<script>
import Com from './components/Com.vue'export default {name: 'App',components: {Com:Com}
}
</script>

全局注册，在main.js中进行全局注册，==所有组件内均可以使用该组件 ==。

import Com from './components/Com.vue'Vue.component('Com',Com)
// 进行全局注册，对应的组件名，组件对象

2.2 scoped解决样式冲突

写在组件中的样式会全局生效，因此会造成多个组件之间的样式冲突。可以给组件的样式标签添加scoped属性，可以让样式只作用于当前组件。
在这里插入图片描述
加上scoped属性。

<style scoped>.com-1{width: 200px;height: 40px;background-color: red;}
</style>

在这里插入图片描述
实现原理：加上scoped之后，不同组件的标签元素上会自动添加上自定义属性“data-一个hash值”。

2.3 data是一个函数

一个组件的data选项必须使一个函数，可以保证每个组件实例，维护独立的一份数据对象。 每次创建新的组件实例，都会重新执行一次data函数，得到一个新对象。
Com组件：

<template><div class="com-1"><button @click="fn(-1)">-1</button>{{count}}<button @click="fn(1)">+1</button></div>
</template><script>
export default {name:'Com',data(){return{count:1}},methods:{fn(p){this.count += p;}}
}
</script><style scoped></style>

<template><div id="app"><Com></Com><br><Com></Com><br><Com></Com></div>
</template>

请添加图片描述

2.4 组件通信

父、子组件通信，父组件通过props将数据传递给子组件。在父组件中给子组件添加动态属性，属性值为父组件中的数据。在子组件中使用props来接收父组件传递来的数据。如果在子组件中想要修改这个父组件中的数据，可以通过this.$emit(‘父组件中传递的动态函数名’,要修改的值)
父组件：

<template><div id="app"><p>{{title}}</p><Com :count1="count" @changeCount="fn" @changeTitle="fn1"></Com></div>
</template>
<script>
export default {name: 'App',data(){return{count:1,title:'hello world!'}},methods:{fn(){this.count ++;},fn1(newTitle){this.title = newTitle;}}
}
</script>
<style>
</style>

子组件：

<template><div class="com-1"><p>{{count1}}</p><button @click="fn1">修改</button><br><button @click="fn2">修改名称</button></div>
</template><script>
export default {name:'Com',props:['count1'],methods:{fn1(){this.$emit('changeCount');},fn2(){this.$emit('changeTitle','hello Vue！');}}
}
</script><style></style>

请添加图片描述
可以传递任意数量的prop，传递任意类型的prop。

props校验
校验有类型校验、非空校验、默认值、自定义校验
类型校验如下：

props:{校验的属性名:类型
}
// 类型可以为Number、String、Boolean、

完整的校验为：

props:{校验的属性名:{type:类型,required:true,  // 是否必填default:默认值,validator(value){// 逻辑return 是否通过校验// return true或false}}
}

prop和data的区别
共同点：都可以给组件提供数据
区别：data的数据是组件本身的，可以随便改；prop的数据是外部的，不能直接改，要遵循单向数据流。

2.5 非父子通信- event bus事件，provide&inject

event bus事件
适用于兄弟组件。新建工具js文件，js文件代码如下：

import Vue from 'vue'const bus = new Vue();export default bus

在BaseA组件接收方代码如下：

<template><div>我是BaseA组件<p>{{count}}</p></div>
</template><script>
import bus from '../utils/bus'export default {name:'BaseA',data(){return {count:1}},created(){bus.$on('changeCount',(count)=>{this.count = count;})}
}
</script><style scoped>div{width: 200px;height: 100px;border: 1px solid black;}
</style>

BaseB组件发送方代码如下：

<template><div>我是组件BaseB <br><button @click="fn">修改组件BaseA中的值</button></div>
</template><script>
import bus from '../utils/bus'
export default {name:'BaseB',methods:{fn(){bus.$emit('changeCount',12);}}
}
</script><style scoped>div{width: 200px;height: 100px;border: 1px solid black;}
</style>

运行结果：
请添加图片描述
在组件接收方中通过bus.$on对事件进行监听，组件发送方通过bus.$emit使组件接收方中事件进行触发。这是一个一对多的关系，即一个发送方组件，可以有多个接收方组件进行监听。

provide&inject
跨层级共享数据，适用于祖孙组件，在祖先组件中使用provide进行数据共享，在子或孙组件中使用inject进行接收。需要注意的是如果数据是简单类型，那么为非响应式的；如果数据是复杂类型，那么为响应式的。
祖先组件代码如下：

import BaseS from './components/BaseS.vue'export default {name: 'App',data(){return{color:'red',person:{name:'liuze'}}},components:{BaseS},provide(){return{person:this.person,color:this.color}},methods:{fn(){this.color = 'blue';this.person.name = 'lz';}}
}

孙子组件代码如下：

<template><div class="son-s">孙子组件<p>{{color}}{{person.name}}</p></div>
</template><script>
export default {name:'BaseSS',inject:['color','person']
}
</script><style scoped>.son-s{border: 1px solid black;width: 100px;height: 100px;}
</style>

运行结果：
请添加图片描述

3.v-model原理->实现父子组件双向绑定

v-model本身是一个语法糖，应用在输入框上，就是value属性和input事件的合写。
数据变，视图跟着变“:value”；视图变，数据跟着变“@input”。

<input type="text" :value="val" @input="val = $event.target.value">

请添加图片描述

父子组件不能直接使用v-model的，因为v-model是双向数据绑定，而子组件是无法直接修改父组件中的数据的。如果要使用v-model，那么在子组件中对父组件中数据进行修改就必须使用“:value”及“input”，即 props:{value}和this.$emit(‘input’,更新的数据)。
具体例子为：v-model原理:父组件、子组件使用v-model

4. sync 修饰符->实现父子组件双向绑定

可以实现子组件与父组件数据的双向绑定，简化代码。prop属性名，可以自定义，非固定为value。使用场景，封装弹框类的基础组件。本质上就是 :属性名和@update:属性名合写；如下的弹框父子组件如下：

<template><div class="diag" v-show="visible"><button @click="fn">X</button></div>
</template><script>
export default {props:{visible:Boolean},methods:{fn(){this.$emit('update:visible',false);}}
}
</script><style>.diag{width: 200px;height: 100px;border: 1px solid black;background-color: red;position: relative;}.diag button{position: absolute;top: 2px;right: 2px;width: 20px;height: 20px;line-height: 20px;text-align: center;}
</style>

<template><div id="app"><button @click="fn">取消修改</button><Diag :visible.sync="isShow" ></Diag></div>
</template>
<script>
import Diag from './components/Diag.vue'export default {name: 'App',components:{Diag},data(){return{isShow:false}},methods:{fn(){this.isShow = true;}}
}
</script>
<style scoped>
</style>

运行结果：
请添加图片描述

5. ref 和 $refs

利用ref和$refs可以用于获取dom元素或组件实例，查找范围为当前组件内。(如果dom进行查找，当其他组件和当前组件有同一个类名时，并且其他组件在当前组件前面进行渲染，那么此时就会出现dom找到的标签元素为其他组件内的。)

获取dom，在目标标签上添加ref属性
适当时机，通过this.$refs.xxx，获取目标标签

<div ref="div_1"></div>this.$refs.div_1
// 获取上述这个div标签

<template><div id="app"><div ref="div_1">哈哈</div></div>
</template>
<script>export default {name: 'App',data(){return{isShow:false}},methods:{fn(){this.isShow = true;}},mounted(){console.log(this.$refs.div_1);}
}
</script>
<style scoped>
</style>

运行结果：
在这里插入图片描述
如果要获取组件实例，直接在组件实例的标签上添加属性ref，之后就可以通过this.$refs.xxx获取这个组件，返回的是一个Vue组件对象，通过==this.$refs.xxx.组件方法()==调用这个组件下的方法。

6. Vue异步更新，$nextTick

下述是异步更新实例，因为Vue是异步更新的，所有点击编辑按钮之后，输入框并不会出现聚焦，所有需要使用到$nextTick

<template><div id="app"><div v-if="isShow"><span>{{v}}</span><button @click="edit">编辑</button></div><div v-else><input type="text" v-model="v" ref="inp"><button @click="save">保存</button></div></div>
</template>
<script>export default {name: 'App',data(){return{isShow:true,v:'北京'}},methods:{edit(){this.isShow = false;this.$nextTick(()=>{this.$refs.inp.focus();});},save(){this.isShow = true;}}
}
</script>
<style scoped>#app{width: 100px;height: 100px;margin: 20px auto;}
</style>