Vue知识点 超详细!万字说明！

Vue和其他两大框架的区别

• Angular 学习成本太高
• React 代码可读性差
• Vue 学习成本较低 很容易上手
• vue官网： https://cn.vuejs.org/v2/guide/comparison.html

Vue是什么

• Vue是一套用于构建用户界面的渐进式框架 "前端框架"
• 让程序员脱离自己操作DOM 专注于写逻辑和操作数据
• Vue的核心库只关注视图层 易上手 便于与第三方库或既有的项目整合
• 当与现代化的工具链以及各种支持的库结合使用时 Vue也完全能够为复杂的单页应用提供驱动

MVVM

• M
  model 数据
• V
  view 页面
• VM
  viewModel Vue实例
• DOM监听(DOM Listeners)
• 数据绑定(Date Bindings)

 

Vue指令

️1.1 v-text

说明: 文本数据渲染
用法: v-text = "Vue实例中的数据" => 简写 { {Vue实例中的数据}}

相当于JavaScript中的innerText

v-text指令 和 { { }}插值表达式 的区别

• v-text 会直接替换元素中的所有内容
• { { }} 只会替换插值表达式中的占位符

️1.2 v-html

说明: HTML渲染数据
用法:v-html = "Vue实例中的数据"
会解析html结构 渲染至页面

相当于JavaScript中的innerHTML

️1.2.1 v-html指令 和 v-text指令的区别

• v-html 会将数据解析成html 渲染至页面
• v-text 只会输出成文本(字符串形式)

注意: 在网站上动态渲染任意的 HTML 是非常危险的!!! 因为容易导致 XSS 攻击 只在可信内容上使用 v-html 绝对不要用在用户通过(提交)的内容上使用

️1.3 v-on

说明: 事件绑定(绑定事件监听器)
用法: v-on:事件名 = "事件处理函数" => 简写 @事件名 = "事件处理函数"

️1.3.1 详细用法

• @事件名.修饰符 = "事件处理函数"
• 逻辑比较少的可以直接写在行内
• 逻辑较多的写到 methods 中 注意: 操作Vue实例上的数据要跟上 this
• 可以通过实参传递($event) 获取事件参数e

1. $event.target 获取当前事件触发的DOM元素
2. $event.path[0](el.path[0]) 也可以获取当前事件触发的DOM元素 path数组中有从触发事件源的元素的所有上一级元素 直到window
3. 实参不传递(没有任何参数) 默认在形参中第一个就是事件参数
   实参传递 就必须传递$event 来获取获取事件参数

1.3.2 事件修饰符

• .stop
  阻止事件冒泡
• .prevent
  阻止事件默认行为
• .once
  只触发一次回调
• .native
  监听组件根元素的原生事件
  很重要！有些第三方组件可能内部并没有设置原生的事件 就可以通过.native来触发事件

面试问及

之前在使用饿了么UI的时候给一个组件添加一个原生的事件
但是一直触发不了
后面查阅文档发现这个组件内部并没有注册我使用的原生事件
事件修饰符.native就可以直接监听并触发组件的原生事件

• .capture
  添加事件侦听器时使用 capture 模式
• .{keyCode | keyAlias}
  只当事件是从特定键触发时才触发回调
• .left
  (2.2.0版本) 只当点击鼠标左键时才触发
• .right
  (2.2.0版本) 只当点击鼠标右键时才触发
• .middle
  (2.2.0版本) 只当点击鼠标中键时才触发
• .self
  只当事件使用侦听器绑定的元素本身触发时才触发回调
• .passive
  (2.3.0版本)以{ passive:true } 模式添加侦听器

1.4 v-bind

说明: 属性绑定(行内属性)
用法: v-bind:属性名="Vue实例中的数据" => 简写 :属性名="Vue实例中的数据"
当Vue实例中的数据改变之后 页面会同步更新

️1.4.1 属性绑定修饰符

• .prop
  被用于绑定 DOM 属性 (property)
• .camel
  (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
• .sync
  (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器

️1.4.2 对象的方式绑定class

• :class = "{'red' : isRed}"

isRed = true 就有red这个类
isRed = false 就没有red这个类
isRed 在 Vue 实例data中声明

• 默认的class 和 :class(绑定的class) 一起使用不会冲突 后面的会作为追加或者移除来解析

class = "red" :class = "{'yellow' : isYellow}"

️1.4.3 对象的方式绑定style

• :style = "{fontSize : mySize + 'px'}"
• 样式名需要使用驼峰命名法
• 后面的mySize需要在Vue实例data中定义

1.5 v-model

说明: 双向数据绑定
用法: v-model = "Vue实例中的数据"

️1.5.1 双向

• 视图层
• 数据层
  数据能够自动的从内存中显示到页面上去

️1.5.2 双向绑定修饰符

• .lazy
  懒载入 当表单属性失去光标或按下回车键后 再将页面中的数据和Vue实例中的数据双向绑定
• .trim
  输入的数据首位空格过滤
• .number
  输入字符串转为有效的数字

注意: v-model 只能设置给from表单属性

1.6 v-for

说明: 循环渲染
用法: v-for = "(item,index) in items" :key = "index"

items是源数据数组
item是被迭代的数组元素的别名
index是被迭代的数组元素的下标(索引)

1.6.1 :key

• 数据唯一标识绑定
• v-for默认行为试着不改变整体 而是替换元素 迫使其重新排序的元素需要提供一个key(用户删除数据后 数据需重新排列序号 就可以使用key来实现)
• 数据实现重用和重新排序现有的元素
• 值最好为字符串或数值类型(唯一的)

1.6.2 遍历数组注意点

• Vue本身只是监视了Vue实例Data中数组的改变(监视内存地址) 没有监视数组内部数据的改变
• (变异方法)Vue重写了数组中的一系列改变数组内部数据的方法(先调用原生的方法 再更新页面) 所以实现了使用数组提供的方法 数组内部改变 界面自动改变

push()
pop()
shift()
unshift()
splice()
sort()
reverse()
...

• this.arr[index] = 新值

这种修改数组中的元素是无法实现数据改变后页面会同步改变(只会修改data中的数据 但是页面不会同步改变)

• splice()的增删改
  增 this.arr.splice(index,0,新值)
  删 this.arr.splice(index,1)
  改 this.arr.splice(index,1,新值)

️1.7 v-if,v-else,v-else-if

说明: 条件(表达式或布尔值)判断渲染
用法:
v-if = "表达式或布尔值"
v-else-if = "表达式或布尔值"
v-else

1.7.1 注意

v-if 和 v-else-if 后面必须跟表达式或布尔值
v-else-if 和 v-else 不能独立使用 必须跟在 v-if 后面

️1.8 v-show

说明: 条件渲染
用法: v-show = "表达式或布尔值"
根据表达式或布尔值的真假切换元素的display属性

1.8.1 注意

v-show 不支持 <template>元素 也不支持 v-else

1.9 v-if vs v-show

都是用来判断渲染数据的

• v-if

1.有较高的切换性能消耗
2.惰性渲染 第一次如果条件为false 则不会渲染到页面 需要等后面条件切换后才会进行第一次渲染
3.条件切换是切换DOM数中这个元素的移除或添加
4.如果运行时条件很少改变则使用v-if

• v-show

1.有较高的初始渲染消耗
2.初始渲染 不管条件 第一次加载页面的时候都会渲染到页面
3.条件切换只是切换元素的display属性
4.如果运行时条件会非常频繁的切换则使用v-show

️2、 v-cloak

说明: 这个指令保存在这个元素上 直到关联实例结束编译

2.0.1 详细说明

插值表达式在网络较满的情况下可能会出现数据闪烁问题
可以通过给实例(#app)盒子添加一个 v-cloak 指令
通过这个指令的特性(如页面中还有插值表达式就会存在这个指令 如果页面的插值表达式都被替换成数据 就会自动移除这个标签)
配合css [v-cloak]{display:none|opacity:0}来解决数据闪烁的问题

2.1.1 v-once

说明: 这个指令添加的元素 内部的胡子语法只会在第一次渲染的时候执行解析一次 后面数据发生改变后也不会触发更新

2.1.1.1 用途

某些元素只需要解析一次 后续不需要更新 就可以使用这个指令 提升性能

3、Vue实例

️3.1 el

• 与页面中的元素绑定
• 指定根element(选择器)
• 可以写id、class、标签选择器
  建议使用id 因为id是唯一的 一个Vue实例绑定一个页面元素
• 注意: 不支持绑定body和html