Vue根底

邂逅Vuejs

1.意识Vuejs

  • Vue是一个<font color='red'>渐进式框架</font>, 什么是渐进式的呢?

    • 申明式渲染→组件零碎→客户端路由→集中式状态治理→我的项目构建
    • 渐进式意味着你能够将Vue作为你<font color='red'>利用的一部分</font>嵌入其中，带来更丰盛的交互体验。

  • Vue有很多特点和Web开发中常见的高级性能

    • 解耦视图和数据
    • 可复用的组件
    • 前端路由技术
    • 状态治理
    • 虚构DOM

2.Vue初体验

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <!--1、导入Vue的包-->    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script></head><body>    <!--这个div区域就是MVVM中的 View-->    <div id="app">        {{message}}    </div></body><script>    // 2、创立一个Vue的实例    var app = new Vue({        el: '#app', //用于挂载要治理的元素        data: {// 定义数据            message: '学习Vue.js'        }    });</script></html>

3.Vue中的MVVM

  • View层

    • <font color='red'>视图层</font>
    • 前端开发中, 通常就是DOM层
    • 次要的作用是给用户展现各种信息

  • Model层

    • <font color='red'>数据层</font>
    • 数据可能是咱们固定的死数据, 更多的是来自咱们的服务器, 从网络上申请下来的数据

  • VueModel层

    • <font color='red'>视图模型层</font>
    • 视图模型层是View和Model沟通的桥梁
    • 一方面它实现了 Data binding, 也就是数据绑定, 将Model的扭转实时的反馈到了View中
    • 另一方面它实现了DOM Listener，也就是DOM监听，当DOM产生一些事件(点击、滚动、touch等)时，能够监听到，并在须要的状况下扭转对应的Data。

4.Vue实例传入的options

  • 目前把握
属性名类型作用
el<font color='blue'>类型: string \HTMLElement</font>决定Vue实例会治理哪一个DOM
data<font color='blue'>类型: Object \Function (组件当中data必须是一个函数)</font>Vue实例对应的数据对象
methods<font color='blue'>类型: { [key: string]: Function }</font>定义属于Vue的一些办法, 能够再其余中央调用, 也能够在指令中应用

5.Vue生命周期

插值指令

1.Mustache

  • 插值表达式 {{}}

数据绑定最常见的模式就是应用 “Mustache” 语法（双大括号）的文本插值。例如：

<span>Message: {{ msg }}</span>

Mustache 标签将会被代替为对应数据对象上 msg 属性（msg定义在data对象中）的值。

无论何时，绑定的数据对象上 msg 属性产生了扭转，插值处的内容都会自动更新。

语法{{}}JavaScript 表达式反对
一般表达式{{ number + 1 }}
三元表达式{{ ok ? 'YES' : 'NO' }}
三元表达式{{ name == 'smyhvae' ? 'true' : 'false' }}
调用办法{{ message.split('').reverse().join('') }}

2.v-once

该指令前面不须要跟任何表白
该指令示意元素<font color='red'>只渲染一次</font>，不会随着数据的扭转而扭转。
<h2 v-once>{{message}}</h2>

3.v-html

解析<font color='red'>数据中的html</font>代码，渲染到页面中
<h2 v-html="url"></h2>

4.v-text

v-text作用和Mustache比拟类似：都是用于将<font color='red'>数据显示在界面</font>中, 不同的是 v-text 是写在属性中
v-text通常状况下，接管一个string类型
<h2 v-text="text"></h2>

5.v-pre

v-pre用于跳过这个元素和它子元素的编译过程，用于<font color='red'>显示本来的Mustache</font>语法。
<h2 v-pre>{{message}}</h2>

6.v-cloak

在某些状况下，咱们浏览器可能会间接显然出未编译的Mustache标签。
v-cloak指令和CSS 规定一起用的时候，可能解决插值表达式闪动的问题（即：能够暗藏未编译的标签直到实例筹备结束）
<!-- 在vue解析之前, div中有一个属性v-cloak在vue解析之后, div中没有一个属性v-cloak --><div id="app" v-cloak>  <h2>{{message}}</h2></div>

总结

  • Mustache: {{}}语法, 能够写变量/逻辑表达式/计算值...
  • v-once : 元素只渲染一次，不会随着数据的扭转而扭转。
  • v-html="" : 解析数据中的html代码，渲染到页面中
  • v-text="msg": 写在属性当中, 将数据显示在界面中
  • v-pre: 原文输入, 显示本来的Mustache语法
  • v-cloak : 个别配合CSS规定一起应用, 够解决插值表达式闪动的问题

v-bind绑定属性

1.v-bind介绍

  • 后面咱们学习的指令次要作用是将值插入到咱们<font color='red'>模板的内容</font>当中。
  • 然而，除了内容须要动静来决定外，某些<font color='red'>属性</font>们也心愿动静来绑定。

  • 作用：能够给html元素或者组件动静地绑定一个或多个个性，例如动静绑定style和class

    • 比方动静绑定a元素的href属性
    • 比方动静绑定img元素的src属性

  • 这个时候，咱们能够应用v-bind指令：

    • 作用：动静绑定属性
    • 缩写： :
    • 预期：any (with argument) | Object (without argument)
    • 参数：attrOrProp (optional)

2.v-bind绑定class

绑定class有两种形式

  • 对象语法
  • 数组语法

  • 对象语法

    • 对象语法的含意是:class前面跟的是一个<font color='red'>对象</font>。
    <!-- 用法一：间接通过{}绑定一个类 --><h2 :class="{'active': isActive}">Hello World</h2>    <!-- 用法二：也能够通过判断，传入多个值 --><h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>    <!-- 用法三：和一般的类同时存在，并不抵触 --><!--注：如果isActive和isLine都为true，那么会有title/active/line三个类--><h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>    <!-- 用法四：如果过于简单，能够放在一个methods或者computed中 -->    <!--注：classes是一个计算属性 --><h2 class="title" :class="classes">Hello World</h2>

  • 数组语法

    • 数组语法的含意是:class前面跟的是一个<font color='red'>数组</font>。
    <!-- 1. ['active','news'] 当字符串应用 --><h2 class="title" :class="['active','news']">{{message}}</h2>    <!-- [active, new] 当变量应用 --><h2 class="title" :class="[active,news]">{{message}}</h2>    <!-- 3. 函数返回值应用 --><h2 class="title" :class="getClasses()">{{message}}</h2>

3.v-bind绑定style

  • 咱们能够利用v-bind:style来绑定一些CSS内联款式

  • 绑定class有两种形式

    • 对象语法
    • 数组语法

  • 对象语法

    • style前面跟的是一个对象类型
    • 对象的key是css属性名
    • 对象的value是具体赋的值, 能够来自data中的属性
:style="{color: currentColor, fontSize: fontSize + 'px'}"

  • 数组语法

    • style前面跟的是一个数组类型, 多个值以 , 分隔
<div v-bind:style="[baseStyles, fontColor]"></div>/* js */baseStyle: {background: 'lime'},fontSize: {fontSize: '80px'}

computed计算属性

1.基本概念

  • 计算属性呈现的目标是<font color='red'>解决模板中放入过多的逻辑</font>会让模板过重且难以保护的问题
  • 计算属性是基于它们的响应式<font color='red'>依赖进行缓存</font>的

  • 在某些状况，咱们可能须要对数据进行一些转化后再显示，或者须要将多个数据联合起来进行显示

    • 比方咱们有firstName和lastName两个变量，咱们须要显示残缺的名称。
    • 然而如果多个中央都须要显示残缺的名称，咱们就须要写多个{{firstName}} {{lastName}}

  • 将下面代码转换成计算属性

    /* html */ <h2>{{fullNmae}}</h2>/* js */computed: {    fullNmae: function () {      return this.firstNmae + ' ' + this.lastNmae;    }  }

2.计算属性的setter和getter

  • 每个计算属性都蕴含一个getter和一个setter

    • 在下面的例子中，咱们只是应用getter来读取。
    • 在某些状况下，你也能够提供一个setter办法（不罕用）。
    • 在须要写setter的时候，代码如下：

3.计算属性的缓存

  • methods和computed区别

    • methods外面的数据不论发没发生变化, 只有调用了都会执行函数(有的时候数据没发生变化咱们不心愿调用函数)
    • computed计算属性会进行缓存, 如果数据没发生变化,函数只会被调用一次(数据发生变化才会调用函数)

  • 总结:

    • methods不论数据发没发生变化都会调用函数
    • computed只有在依赖数据发生变化时才回调函数

事件监听指令

  • 在前端开发中，咱们须要常常和用户交互

    • 这个时候咱们就必须监听用户的产生工夫，比方点击, 拖拽事件等等

  • v-on 介绍

    • 作用: 绑定事件监听器
    • 缩写: @

1.v-on参数

  • 当methods中定义方法, 以供@click调用时, 须要留神参数问题

  • 状况一: 如果该办法不须要额定参数, 办法后()能够省略

    • 没有传入参数, 接管形参时默认会将原生事件event参数传递进去
  • 状况二: 如果须要同时传入某个参数, 同时须要event时, 能够通过$event传入事件

2.v-on修饰符

  • v-on 提供了很多事件修饰符来辅助实现一些性能。事件修饰符有如下
修饰符作用
.stop阻止冒泡。实质是调用 event.stopPropagation()
.prevent阻止默认事件行为 实质是调用 event.preventDefault()
.{keyCode \keyAlias }当事件是从特定键触发时才触发回调
.once事件只触发一次

条件渲染指令

1.vi-f与v-else-if与v-else

  • Vue的条件指令能够依据表达式的值在DOM中渲染或销毁元素或组件
<h2 v-if="score>=90">优良</h2>    <h2 v-else-if="score>=80">良好</h2>    <h2 v-else-if="score>=60">及格</h2>    <h2 v-else>不及格</h2>
  • 逻辑较多不倡议在模板中应用v-if-else-if

2.复用元素渲染问题

一个问题: 波及到了Vue底层, 虚构DOM virtual DOM
点击切换表单后,input的value值并没有被清空,为什么?
  • 引出： 当实现点击按钮切换input表单时, 咱们输出上的value, 点击按钮切换表单时会发现value值还存在, 然而input元素的确切换了, 这是因为什么呢?
<span v-if="isUser">      <label for="user">用户名</label>      <input type="text" placeholder="用户名" id="user" key="user"></span><span v-else>      <label for="email">邮箱</label>      <input type="text" placeholder="邮箱" id="email" key="email"></span><button @click="isUser=!isUser">切换类型</button><script> const app = new Vue({  el: '#app',  data: {     isUser: true  }})</script>

  • 起因:

    • 1.这是因为Vue在进行DOM渲染时, 出于性能思考, 会尽可能服复用曾经存在的元素, 而不是创立新的元素
    • 2.下面的案例中, Vue外部会进行比照发现两局部都类似只会替换属性, 不会给你创立全新的元素
    • 3.下面 if 的 input不再应用, 间接作为 else 的 input来应用

  • 解决方案

    • 1.如果咱们不心愿 Vue呈现相似反复利用的问题, 能够给对应的 input 增加 key
    • 2.并且保障要们须要的key不同, 这样 vue就会创立一个全新 input元素

3.v-show

v-show的用法和v-if十分类似,也用于决定一个元素是否渲染

  • v-if 和 v-show比照

    • v-if 当条件为false时,压根不会有对应的元素在DOM中
    • v-show 当条件为false时, 仅仅是将元素的 display 属性设置 none 而已

  • 开发中如何抉择呢?

    • 当须要在显示与暗藏之间切换很频繁时,应用v-show
    • 当只有一次切换时,通过应用v-if
<h2 v-show="isShow">{{message}}</h2>

循环遍历指令

1.v-for遍历数组

  • 作用：依据数组中的元素遍历指定模板内容生成内容。
  • 语法: v-for="(item, index) in items"
<ul>    <!-- item: 是每一项元素    index: 下标/索引 -->    <li v-for="(item, index) in name">      {{index+1}}.{{item}}    </li> </ul>

2.v-for遍历对象

  • 作用: 遍历对象
  • 语法: v-for="(value, key, index) in items"
<ul>    <!-- value:属性值  key:属性名  index:下标/索引 -->    <li v-for="(value, key, index) in info">      {{index+1}}.{{value}}    </li> </ul>

3.Vue中Key属性

  • 官网举荐咱们在应用v-for时,给对应的元素或组件增加上一个:key属性。

  • 为什么须要这个key属性呢(理解) ?

    • 这个其实和Vue的虚构DOM的Diff算法有关系。

  • 当某一层有很多雷同的节点时，也就是列表节点时，咱们心愿插入一个新的节点

    • 咱们心愿能够在B和C之间加一个F，Diff算法默认执行起来是这样的。
    • 即把C更新成F，D更新成C，E更新成D，最初再插入E，是不是很没有效率？

  • 所以咱们须要应用key来给每个节点做一个惟一标识

    • Diff算法就能够正确的辨认此节点
    • 找到正确的地位区插入新的节点
  • <font color='red'>key的作用次要是为了高效的更新虚构DOM</font>

应用v-for更新已渲染的元素列表时,默认用<font color='red'>就地复用</font>策略; 如果列表数据批改的时候, 它会依据key值去判断某个值是否批改, 如果批改, 则从新渲染这一项, 否则复用之前的元素; 咱们在应用的应用常常会应用index(即数组的下标)来作为key,但其实这是不举荐的一种应用办法;

4.数组响应式办法

  • 因为Vue是响应式的, 所以当数据发生变化时, Vue会自动检测数据变动, 视图会对应的更新

  • Vue中蕴含了一组察看数组编译的办法, 使它们扭转数组也会触发更新视图

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

5.Vue.set批改响应式数据

  • Vue.set(vm.items, indexOftem, newValue)

  • vm.$set(vm.items ,indexOften,newValue)

    • 参数1: 要批改的数组/对象
    • 参数2: 要设置的索引/增加的属性名
    • 参数3: 设置的值

6.v-if 和 v-for

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着

v-if 将别离反复运行于每个v-for循环中。

防止 v-if 和 v-for用在一起

  • 起因

    • 如果应用了 if 判断, 每次渲染在Vue外部都会遍历整个列表, 不管判断条件是否产生了变动

  • 应用计算属性的益处

    • 1.过滤后的列表只会在users数组产生相干变动时才被从新运算,过滤更高效。
    • 2.应用v-for="user in activeusers"之后,咱们在渲染
    • 3.的时候只遍历沉闷用户,渲染更高效。
    • 4.解耦渲染层的逻辑,可维护性(对逻辑的更改和扩大)更强。
    • 具体解说

表单绑定v-model

1.基本概念

  • Vue中应用v-model指令来实现表单元素和<font color='red'>数据的双向绑定</font>

    • 数据与模板是相互影响的, 一方发生变化, 另一方立刻做出更新

  • 引出:

    • 在之前的案例, 咱们通过v-bind,给<input>标签绑定了data对象里的name属性。data中的name的值产生扭转时, <input>标签里的内容会自动更新。
    • 可当初要做的是: 在<input>标签里批改内容, 要求data中的name的属性值自动更新。从而实现<font color='red'>双向数据绑定</font>。该怎么做呢? 这就能够利用v-model这个属性。

  • 区别:

    • v-bind: 只能实现数据的单向绑定, 从M主动绑定到v。
    • v-model: 只有v-model能力实现双向数据绑定。留神, v-model后面不须要跟冒号

  • 留神

    • v-model只能使用在表单元素中, 或者用于自定义组件。常见的表单元素包含: input(radio,text,address,email...) ,select, checkbox, textarea.

2.v-model原理

  • v-model其实是一个语法糖, 他背地实质是蕴含两个操作

    • v-bind绑定一个value属性
    • v-on指令绑定以后元素的input事件
  • 也就是说上面的代码：等同于上面的代码：
<input type="text" v-model="message"><!-- 等同于上面的代码 --><input type="text" :value="message" @input="message = $event.target.value">

3.表单绑定v-model

  • Vue中应用v-model指令来实现表单元素和数据的双向绑定

  • 案例解析:

    • 当咱们在数据框输出内容时
    • 因为input中v-model绑定了message, 所以会实时将输出的内容传递给message, message发生变化
    • 当message发生变化时, 因为下面咱们应用Mustanche语法, 将message的值插入到DOM中, 所以DOM会产生响应式的扭转
    • 所以, 通过v-model实现了双向的绑定
  • 当然, 咱们能够将v-model用于textarea元素

4.表单中其它类型绑定v-model

  • 表单中其它类型, 绑定v-model
表单类型单选/多选状况绑定的值
v-model: radio多个单选框时绑定的值是value
v-model: checkbox单个勾选框v-model即为布尔值
多个复选框选中多个, 对应的data属性是一个数组
v-model: select单选v-model绑定的是一个值
多选v-model绑定的是一个数组



5.值绑定

  • 动静的给value赋值而已

    • 咱们后面之前写的value中的值, 都是在定义input中间接给定的
    • 然而真是开发中, 这些input中的value值可能是从服务器中获取, 而后定义的
    • 所以咱们能够通过v-bind:value动静的给value绑定值

5.v-model的修饰符

修饰符作用
.lazy当表单失去焦点或按下回车时,data中的数据才会更新
.number输出的内容转换为number数据类型
.trim过滤内容的两侧空格

Vue罕用个性

1.自定义指令

  • 为何须要自定义指令

    • 内置指令不满足需要
Vue.directive 注册全局指令
  • 自定义指令语法(获取焦点)
Vue.directive('focus', {  inserted: function (el) {    el.focus()// 获取元素的焦点  }})// 应用自定义指令<input type="text" v-focus>
  • 带参数的自定义指令
Vue.directive('color', {      // bind申明周期, 只调用一次，指令第一次绑定到元素时调用。在这里能够进行一次性的初始化设置      // el 为以后自定义指令的DOM元素        // binding 为自定义的函数形参   通过自定义属性传递过去的值 存在 binding.value 外面      bind: function(el, binding){        // 依据指令的参数设置背景色        // console.log(binding.value.color)        el.style.backgroundColor = binding.value.color;      }    });// 应用带参数自定义指令<input type="text" v-color='msg'>
自定义部分指令
  • 部分指令，须要定义在 directives 的选项 用法和全局用法一样
  • 部分指令只能在以后组件外面应用
  • 当全局指令和部分指令同名时以部分指令为准
directives: {    focus: {        inserted: function(el) {            el.focus();        }    }}

2.侦听器 watch

  • 侦听器的利用场景

    • 数据变动时执行异步或开销较大的操作

  • 留神: watch 中的属性 肯定是data 中 曾经存在的数据
// 当data中的: firstName属性或lastNames属性扭转时, 会主动触发对应的watchwatch: {     firstName(val) { // val: 示意变动后的值       this.fullName = val + ' ' + this.lastName;     },     lastName(val) {       this.fullName = this.firstName + ' ' + val;     }  }

3.过滤器

  • 概念: Vue.js容许咱们自定义过滤器,可被用作一些常见的文本格式化/解决。
  • 过滤器能够用在两个中央: mustache插值表达式、v-bind表达式。
  • 过滤器应该被增加在JavaScript表达式的尾部,由“管道”符批示。
  • 过滤器不扭转真正的data，而只是扭转渲染的后果，并返回过滤后的版本

  • 全局注册时是filter，没有s的。而部分过滤器是filters，是有s的
  • 反对级联操作(对前一个过滤的数据再次进行过滤解决)
自定义全局过滤器
  • 咱们能够用全局办法Vue.filter()自定义一个全局过滤器。这样的话,每一个Vue的对象实例(每一个VM实例)都能够拿到这个过滤器。它接管两个参数: 过滤器的名称、过滤器函数。
<div>{{msg | upper}}</div><div>{{msg | upper | lower}}</div><div :class="msg | upper"></div><!-- 带参数过滤 --><div>{{date | format('yyyy-MM-dd')}}</div><script>     // 1.全局过滤器    Vue.filter('upper', (val) => {        // val就是要解决的数据      return val.charAt(0).toUpperCase() + val.slice(1);    })    // 2.解决带参数过滤器    Vue.filter('format', (date, arg) => {      // arg: 传递的参数      if (arg === 'yyyy-MM-dd') {        return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();      }    })</script>
自定义公有过滤器
  • 公有过滤器: 在某一个vue对象外部定义的过滤器称之为公有过滤器
  • 这种过滤器只有在以后vue对象的el指定的监管区域有用。
<!-- 管道符后面的price: 要把price这段文本进行过滤 --><!-- 管道符前面的showPrice: 是通过showPrice这个过滤器来进行操作 --><td>{{price | showPrice}}</td><script>const app = new Vue({  filters: {    showPrice(price) {      return '￥' + price.toFixed(2);    }  }})</script>

4.生命周期

  • 事物从出世到死亡的过程
  • Vue实例从创立到销毁的过程,这些过程中会随同着一些函数的自调用。咱们称这些函数为钩子函数
  • 次要阶段

  • 挂载(初始化相干属性)

    • beforeCreate
    • created
    • beforeMount
    • mounted

  • 更新(元素或组建的变更操作)

    • beforeUpdate
    • updated

  • 销毁(销毁相干属性)

    • beforeDestroy
    • destroyed
钩子函数过程
beforeCreate在实例初始化之后, 数据观测和事件配置之前被调用此时data和methods以及页面的DOM构造都没有初始化什么都做不了
created在实例创立实现后被立刻调用此时data 和 methods曾经能够应用然而页面还没有渲染进去
beforeMount在挂载开始之前被调用此时页面上还看不到实在数据只是一个模板页面而已
moutedel被新创建的vm.$el替换, 并挂载到实例下来之后调用该钩子。数据曾经实在渲染到页面上在这个钩子函数外面咱们能够应用一些第三方的插件
beforeUpdate数据更新时调用，产生在虚构DOM打补丁之前。 页面上数据还是旧的
update因为数据更改导致的虚构DOM从新渲染和打补丁, 在这之后会调用该钩子。页面上数据曾经替换成最新的
beforeDestroy实例销毁之前调用
destroyed实例销毁后调用