苏州网站建设公司哪个好大型网站 中小型网站

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 Bus

BaseA.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 无需 #

② 能高亮， 默认就会提供 高亮类名 ，可以直接设置高亮样式