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 不支持