Vue基本概念

好处 开发快速高效 占有率高,企业开发都在使用 薪资高

Vue是什么

vue是一个渐进式JavaScript框架
渐进式 : 按需添加功能, 逐渐集成
框架 : 自己的语法规则 , 对项目的侵入性较大, 如果选择了框架最好不要更换框架, 否则需要重构
库 : 方法和属性的集合 , 对项目的侵入性较小, 可以随意搭配其他库使用, 也可以随意添加或删除

开发模式 : 工程化开发模式 — 依赖webpack打包

脚手架

脚手架是一套官方提供的标准模板 好处: 开箱即用, webpack零配置

用法
1. 安装全局包
yarn global add @vue/cli
2. 创建项目
vue create 项目名

主要入口文件
main.js
打包的入口文件
App.vue
被引入到 main.js 中
根组件
index.html
最终打包的结果会插入到 #app 处

单 Vue 文件开发
JS 作用域独立
组件化开发
style 配合 scoped 实现样式作用域独立

脚手架项目配置文件 — 根目录下 vue.config.js

脚手架结构

打包入口关系 :main.js 入口文件, 引入了 App.vue 文件, 挂载到 index.html 的 #app 处 (直接替换)

指令

本质是html标签的自定义属性

插值表达式

作用:将表达式的结果插入到当前位置
用法 : {{ 表达式 }}
定义vue的数据变量 :
data() {
return {
变量名: 变量值
}
}

v-on 绑定事件

1.语法
v-on:事件类型=”事件处理函数”
简写 @事件类型=”事件处理函数”
2.事件修饰符
单击
.stop 阻止冒泡
.prevent 阻止默认行为
.enter 监听enter键
键盘
.enter 按回车键触发
.esc 按esc键触发
3.this指向
具名函数 : this指向vue实例
箭头函数 : this指向window (不推荐)
4.事件对象
有传参 : 需要手动传入 $event @事件类型=”事件处理函数(参数,$event)”
无传参 : 第一个形参接收事件对象

v-bind 让原生属性使用vue的数据

1.语法
标准写法 : v-bind:原生属性 = “值”
简写 : :原生属性 = “值”

1. 动态class

   :class = “ { 类名:布尔值,类名:布尔值 }” — 布尔值为true 生效,否则不生效
   注意: 如果类名有 - , 则需要用引号包裹 ‘类-名 ‘

2. 动态style

   :style = “{ css属性名:css属性值 }”

v-if/v-show 控制元素的显示隐藏

1.语法
v-show = “布尔值”
单分支： v-if=”条件语句”
双分支： v-else
多分支: v-else-if=”条件语句”
2.区别
v-show 操作的是 display : none
v-if 之间创建或移除 DOM 元素( v-if 还可以搭配 else 使用)

v-for 循环渲染标签

1.语法
v-for=”(item, index) in 数组” :key=”index”
item 和 index 只能在 v-for 的范围内使用

key的作用 :

v-for 的更新检测
数组修改会导致页面更新, 但分以下三种情况:
1 修改原数组会更新页面
2 如果没有修改原数组, 可以将新数组覆盖到原数组上造成更新
3 直接通过索引修改数组的元素不会造成页面更新, 但 this.$set 可以修改指定的元素

v-for 就地复用
Vue 在修改数组后, 会尽可能的复用原来的标签, 减少 DOM 操作, 进行更新

虚拟 DOM 存储了节点信息的 js 对象
存储了 DOM 关键信息的 js 对象
作用 : 减少了DOM 操作 , 提高渲染性能

key
无key — 尽可能的就地服用
key是索引 — 同样尽可能就地服用
key是id — 根据 key 进行比对,找出差异进行更新
注意 : id不能重复 , 必须是字符串或数字
有 id 使用id , 没 id 用索引

v-model 双向绑定

(1)作用 ： 双向数据绑定
a. 表单元素的值进行了修改，这个变量的值也会跟着修改
b. 这个变量的值进行了修改，表单元素的值也会跟着修改
(2)语法： v-model=”变量名”
(3)注意点：
a. v-model只能用于表单元素
b. 变量名要定义在data对象中

只能在表单元素上 下拉框 — 绑定在 select 标签上 复选框 绑定的数据是数组 — 将复选框的 value 值添加到数组中 绑定的数据是非数组 — 绑定的是复选框的 checked 属性

计算属性

1.计算属性作用 : 解决复杂逻辑数据渲染问题
* 应用 ： 如果某一个数据在渲染的时候，需要经过复杂的计算得到，就应该用计算属性。
2.计算属性语法 :
2.1 声明： 在vue实例的computed对象中声明一个函数 （函数名就是计算属性名）
2.2 在函数中return 返回值（计算属性值）

//写法一 :函数写法。 此时默认只有get,没有set
fullName(){}
//写法二: 对象写法。
fullName:{  get(){}, set(value){} }  //* 计算属性的set方法一定要用形参接收计算属性的值

3.计算属性注意点 :
(1)计算属性必须在computed对象中声明函数
(2)计算属性函数一定要有返回值
4.计算属性原理特点 : 缓存机制
(1)当我们第一次使用计算属性的时候，vue会调用一次函数。之后会把函数返回值放入缓存中。
(2)当下一次再使用计算属性的时候，vue不会调用函数，而是直接从缓存读取（效率极高）
(3)只有当计算属性内部的数据变化的之后，vue才会重新调用计算属性得到新的返回值，并放入缓存

侦听器 — 监听属性 watch

侦听 data / computed 数据的变化

语法 :

//简单类型 基本用法
watch: {
  要侦听的数据(newVal, oldVal) {
  }
}
//复杂类型 深度监听
watch: {
  要侦听的数据: {
    deep: true, // 开启深度侦听
    handler(newVal, oldVal) {
    }
  }
}

vue 组件

是一个可复用的 Vue 实例 , 封装了 html / css / js 好处: 相互独立 — 组件之间互不影响 复用性高 扩展性高 可维护性高

组件的使用
1.封装组件 : 一个 vue 文件就是一个组件
2.引入组件
a.全局引入并注册 — 在任何组件都能使用
在 main.js 中 引入: import 组件名 from ‘ ./component/组件对象 ‘
注册: Vue.component( ‘组件名’ , 组件对象 )
b.局部引入并注册
在要使用的组件中引入并注册,只能在当前组件中使用
引入: import 组件名 from ‘ ./component/组件对象 ‘
注册: components: {
组件名: 组件对象
}

3.使用组件 : 组件名作为标签使用

scoped

作用 : 让 style 中的所有样式只针对当前组件标签生效
原理 :
1.给当前组件所有标签添加一个 data-v-hash 的属性
2. 给所有选择器添加一个交集的属性选择器[data-v-hash]

组件通信

父传子

用法 :
1. 在子组件中使用 props 定义变量准备接受
2. 在父组件中使用属性传递数据

单项数据流

Vue 为了让我们数据流向更清晰, 不允许在子组件中修改父组件传递的数据, 如果不小心修改了, 父组件不会收到更新, 同时还会报错

父组件传递给子组件的数据, 只能由父组件修改, props 的数据都是只读的

子传父

用法 :
1. 在父组件中给子组件绑定自定义事件
2. 在子组件中恰当的时机触发事件, 并携带数据 this.$emit( ‘自定义事件名’ , ‘参数’ )
3. 父组件的事件处理函数执行, 处理对应的业务