中太建设集团股份有限公司网站北京工程工程建设交易信息网站
Vue生命周期
思考：什么时候可以发送初始化渲染请求？（越早越好）什么时候可以开始操作dom？（至少dom得渲染出来）
Vue生命周期：就是一个Vue实例从创建 到 销毁 的整个过程。
生命周期四个阶段：① 创建 ② 挂载 ③ 更新 ④ 销毁
1.创建阶段：创建响应式数据
2.挂载阶段：渲染模板
3.更新阶段：修改数据，更新视图
4.销毁阶段：销毁Vue实例
Vue生命周期钩子
Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→ 让开发者可以在【特定阶段】运行自己的代码
工程化开发和脚手架
1.开发Vue的两种方式
核心包传统开发模式：基于html / css / js 文件，直接引入核心包，开发 Vue
工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue
工程化开发模式优点
提高编码效率，比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等
工程化开发模式问题：
* webpack配置**不简单**
* **雷同**的基础配置
* 缺乏**统一的标准**
为了解决以上问题，所以我们需要一个工具，生成标准化的配置
基本介绍：
Vue CLI 是Vue官方提供的一个**全局命令工具**
可以帮助我们**快速创建**一个开发Vue项目的**标准化基础架子**。【集成了webpack配置】
好处：
1.开箱即用，零配置
2.内置babel等工具
3.标准化的webpack配置
使用步骤：
1.全局安装（只需安装一次即可） yarn global add @vue/cli 或者 npm i @vue/cli -g
2.查看vue/cli版本： vue --version
3.创建项目架子：**vue create project-name**(项目名不能使用中文)
4.启动项目：**yarn serve** 或者 **npm run serve**(命令不固定，找package.json)
项目目录介绍和运行流程
虽然脚手架中的文件有很多，目前咱们只需人事三个文件即可
1. main.js 入口文件
2. App.vue App根组件
3. index.html 模板文件
scoped解决样式冲突
1.默认情况
写在组件中的样式会 "全局生效*"→ 因此很容易造成多个组件之间的样式冲突问题。
1. 全局样式: 默认组件中的样式会作用到全局，任何一个组件中都会受到此样式的影响
2. 局部样式: 可以给组件加上**scoped** 属性,可以**让样式只作用于当前组件
2.scoped原理
1.当前组件内标签都被添加data-v-hash值的属性
2.css选择器都被添加 [data-v-hash值] 的属性选择器
最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到
data必须是一个函数
1、data为什么要写成函数
一个组件的 data*选项必须是一个函数。目的是为了：保证每个组件实例，维护独立的一份数据对象。
每次创建新的组件实例，都会新**执行一次data 函数**，得到一个新对象。
组件通信
1.什么是组件通信？
组件通信，就是指组件与组件之间的数据传递
组件的数据是独立的，无法直接访问其他组件的数据。
想使用其他组件的数据，就需要组件通信
父子通信流程
父---->子
* 父组件通过 **props** 将数据传递给子组件
* 子组件利用 **$emit** 通知父组件修改更新步骤：
1.给子组件以添加属性的方式传值
2.子组件内部通过props接收
3.模板中直接使用 props接收的值
子---->父
子向父传值步骤
1. $emit触发事件，给父组件发送消息通知
2. 父组件监听$emit触发的事件
3. 提供处理函数，在函数的性参中获取传过来的参数
props校验
1.思考
组件的props可以乱传吗
2.作用
为组件的 prop 指定**验证要求**，不符合要求，控制台就会有**错误提示** → 帮助开发者，快速发现错误
3.语法
类型校验
非空校验
默认值
自定义校验props: {校验的属性名: {type: 类型, // Number String Boolean ...required: true, // 是否必填default: 默认值, // 默认值validator (value) {// 自定义校验逻辑return 是否通过校验}} },
<script>
export default {// 完整写法（类型、默认值、非空、自定义校验）props: { w: {type: Number,//required: true,default: 0,validator(val) {// console.log(val)if (val >= 100 || val <= 0) {console.error('传入的范围必须是0-100之间')return false} else {return true}},},},
}
</script>注意
1.default和required一般不同时写（因为当时必填项时，肯定是有值的）
2.default后面如果是简单类型的值，可以直接写默认。如果是复杂类型的值，则需要以函数的形式return一个默认值
props&data、单向数据流
1.共同点
都可以给组件提供数据
2.区别
data 的数据是**自己**的 → 随便改
prop 的数据是**外部**的 → 不能直接改，要遵循 **单向数据流**
3.单向数据流
父级props 的数据更新，会向下流动，影响子组件。这个数据流动是单向的
非父子通信
代码示例
EventBus.js
import Vue from 'vue'
const Bus = new Vue()
export default BusBaseA.vue(接受方)
<template><div class="base-a">我是A组件（接收方）<p>{{msg}}</p> </div>
</template><script>
import Bus from '../utils/EventBus'
export default {data() {return {msg: '',}},
}
</script><style scoped>
.base-a {width: 200px;height: 200px;border: 3px solid #000;border-radius: 3px;margin: 10px;
}
</style>BaseB.vue(发送方)
<template><div class="base-b"><div>我是B组件（发布方）</div><button>发送消息</button></div>
</template><script>
import Bus from '../utils/EventBus'
export default {
}
</script><style scoped>
.base-b {width: 200px;height: 200px;border: 3px solid #000;border-radius: 3px;margin: 10px;
}
</style>App.vue
<template><div class="app"><BaseA></BaseA><BaseB></BaseB> </div>
</template><script>
import BaseA from './components/BaseA.vue'
import BaseB from './components/BaseB.vue'
export default {components:{BaseA,BaseB}
}
</script><style></style>
ref和$refs
1.作用
利用ref 和 $refs 可以用于 获取 dom 元素 或 组件实例
2.特点：
查找范围 → 当前组件内(更精确稳定)
3.语法
1.给要获取的盒子添加ref属性
<div ref="chartRef">我是渲染图表的容器</div>2.获取时通过 $refs获取 this.\$refs.chartRef 获取
mounted () {console.log(this.$refs.chartRef) }
注意
之前只用document.querySelect('.box') 获取的是整个页面中的盒子
自定义指令
1.指令介绍
* 内置指令：**v-html、v-if、v-bind、v-on**... 这都是Vue给咱们内置的一些指令，可以直接使用
* 自定义指令：同时Vue也支持让开发者，自己注册一些指令。这些指令被称为**自定义指令**每个指令都有自己各自独立的功能
2.自定义指令
概念：自己定义的指令，可以**封装一些DOM操作**，扩展额外的功能
3.自定义指令语法
全局注册
//在main.js中 Vue.directive('指令名', {"inserted" (el) {// 可以对 el 标签，扩展额外功能el.focus()} })局部注册
//在Vue组件的配置项中 directives: {"指令名": {inserted () {// 可以对 el 标签，扩展额外功能el.focus()}} }注意：在使用指令的时候，一定要**先注册**，**再使用**，否则会报错使用指令语法： v-指令名。如：<input type="text" v-focus/>**注册**指令时**不用**加**v-前缀**，但**使用时**一定要**加v-前缀
插槽
作用：让组件内部的一些 结构 支持 自定义需求: 将需要多次显示的对话框, 封装成一个组件问题：组件的内容部分， 不希望写死 ，希望能使用的时候 自定义 。怎么办？
路由
Vue中路由： 路径 和 组件 的 映射 关系
声明式导航
需求：实现导航高亮效果vue-router 提供了一个全局组件 router-link (取代 a 标签)① 能跳转 ，配置 to 属性指定路径( 必须 ) 。 本质还是 a 标签 ， to 无需 #② 能高亮， 默认就会提供 高亮类名 ，可以直接设置高亮样式
