Vue.js基础

ppzhang
223 阅读5分钟

1. Vue 概述

Vue：渐进式JavaScript框架

声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建

官网：cn.vuejs.org/v2/guide/

  • 易用：熟悉HTML、CSS、JavaScript知识后，可快速上手Vue
  • 灵活：在一个库和一套完整框架之间自如伸缩
  • 高效：20kB运行大小，超快虚拟 DOM

2. Vue基本使用

2.3 Vue.js之HelloWorld细节分析

1. 实例参数分析

  • el： 元素的挂载位置（值可以是CSS选择器或者DOM元素）
  • data：模型数据（值是一个对象）

2. 插值表达式用法

  • 将数据填充到HTML标签中
  • 插值表达式支持基本的计算操作

3. Vue代码运行原理分析

  • 概述编译过程的概念（Vue语法→原生语法）

3. Vue模板语法

3.1 模板语法概述

4. 使用前端模板引擎

下面代码是基于模板引擎art-template的一段代 码，与拼接字符串相比，代码明显规范了很多， 它拥有自己的一套模板语法规则。

<script id="abc" type="text/html">
    {{if isAdmin}}
    <h1>{{title}}</h1>
    <ul>
    {{each list as value i}}
        <li>索引 {{i + 1}} ：{{value}}</li>
    {{/each}}
    </ul>
    {{/if}}
</script>

优点: 大家都遵循同样的规则写代码，代码可读性 明显提高了，方便后期的维护。

缺点： 没有专门提供事件机制。

5. 模板语法概览

  • 差值表达式
  • 指令
  • 事件绑定
  • 属性绑定
  • 样式绑定
  • 分支循环结构

3.2 指令

1. 什么是指令？

  • 什么是自定义属性
  • 指令的本质就是自定义属性
  • 指令的格式：以v-开始（比如：v-cloak）

2. v-cloak指令用法

  • 插值表达式存在的问题：“闪动”
  • 如何解决该问题：使用v-cloak指令
  • 解决该问题的原理：先隐藏，替换好值之后再显示最终的值

官网： cn.vuejs.org/v2/api/

3. 数据绑定指令

  • v-text 填充纯文本
    • ① 相比插值表达式更加简洁(没有闪动问题)
  • v-html 填充HTML片段
    • ① 存在安全问题(XSS攻击，跨站脚本攻击)
    • ② 本网站内部数据可以使用，来自第三方的数据不可以用(不能在跨域使用)
  • v-pre 填充原始信息
    • ① 显示原始信息，跳过编译过程（分析编译过程）

4. 数据响应式

  • 如何理解响应式
    • ① html5中的响应式（屏幕尺寸的变化导致样式的变化）
    • ② 数据的响应式（数据的变化导致页面内容的变化） 数据响应例：在控制台窗口更改vm.msg,页面会跟着一起变化
  • 什么是数据绑定
    • ① 数据绑定：将数据填充到标签中
  • v-once 只编译一次
    • ① 显示内容之后不再具有响应式功能 在控制台更改有v-once属性的vm.info,页面不发生改变

3.3 双向数据绑定指令

1. 什么是双向数据绑定？

image.png

2. 双向数据绑定分析

  • v-model指令用法 <input type='text' v-model='uname'/>

3. MVVM设计思想

  • M(model)
  • V(view)
  • VM(View-Model)

DOM和js对象之间通过Vue的双向绑定：

  • Vue对DOM实施元素监听，一旦DOM发生变化就修改js对象对应的值
  • Vue对js对象的值进行数据绑定，将js对象的值显示在DOM当中，一旦js对象的值发生变化，DOM的值也随之变化

3.4 事件绑定

1. Vue如何处理事件？

  • v-on指令用法
<input type='button' v-on:click='num++'/>
  • v-on简写形式
<input type='button' @click='num++'/>

2. 事件函数的调用方式

  • 直接绑定函数名称
<button v-on:click='say'>Hello</button>
  • 调用函数
<button v-on:click='say()'>Say hi</button>

3. 事件函数参数传递

  • 普通参数和事件对象
  • 如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event
<button v-on:click='say("hi",$event)'>Say hi</button>
  • 如果事件直接绑定函数名称，且不加参数，默认有event作为实参传递，只需要在函数端添加形参接收就可以

例：

button按钮没有向vue传递参数

 <button @click="handle1">点击1</button>

对应函数还是可以接收到event事件

handle1:function (event) {
                    console.log((event.target.innerHTML))
                }

4. 事件修饰符

  • .stop 阻止冒泡
<a v-on:click.stop="handle">跳转</a>
  • .prevent 阻止默认行为
<a v-on:click.prevent="handle">跳转</a>

注意： 可以连在一起写，这样既能阻止冒泡，又能阻止默认点击行为。但是某一些事件修饰符连写会有顺序的问题，比如self和prevent，更多事件修饰符参见API。

5. 按键修饰符

  • .enter 回车键
<input v-on:keyup.enter='submit'>
  • .delete 删除键
<input v-on:keyup.delete='handle'>

6. 自定义按键修饰符

  • 全局config.keyCodes对象
Vue.config.keyCodes.f1 = 112

3.5 属性绑定

1. Vue如何动态处理属性？

  • v-bind指令用法
<a v-bind:href='url'>跳转</a>
  • 缩写形式
<a :href='url'>跳转</a>

2. v-model的低层实现原理分析

这里顺便查了一下input事件，和change事件类似，区别在于input事件是实时触发的，change事件是元素失去焦点触发。另外一点不同是 change 事件也可以作用于 <keygen> 和 <select> 元素。

<input v-bind:value="msg" v-on:input="msg=$event.target.value">

3.6 样式绑定

1. class样式处理

  • 对象语法
<div v-bind:class="{ active: isActive }"></div>
  • 数组语法
<div v-bind:class="[activeClass, errorClass]"></div>

2. style样式处理

  • 对象语法
<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>
  • 数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>

3. class样式绑定语法相关细节

1. 对象绑定和数组绑定可以结合使用

 <div v-bind:class='[activeClass, errorClass,{test:isTest}]'>测试样式</div>

2. class绑定的值可以简化处理

<div v-bind:class="arrClasses"></div>
<div v-bind:class="objClasses"></div>
  • 在script标签下
var vm = new Vue({
el: '#app',
data:{
   arrClasses:['active','error'],
   objClasses:{
   active:true,
   error:true
   }
}

3. 默认的class处理

<div class="base" v-bind:class="objClasses"></div>

div当中原有一个base类名，再添加v-bind绑定objClasses,objClasses绑定了两个类。

image.png

最后一共绑定了三个类，默认的类名不会被覆盖。

3.7 分支循环结构

1. 分支结构

  • v-if
  • v-else
  • v-else-if
  • v-show

2. v-if与v-show的区别

  • v-if控制元素是否渲染到页面（相当于remove该元素，f12不会看到）
  • v-show控制元素是否显示（已经渲染到了页面）（display:none)

注： 如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

3. 循环结构

  • v-for遍历数组
<li v-for='item in list'>{{item}}</li>

<li v-for='(item,index) in list'>{{item}} + '---' +{{index}}</li>
  • key的作用：帮助Vue区分不同的元素，从而提高性能
<li :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}}</li>

4. 循环结构

  • v-for 遍历对象
<div v-for='(value, key, index) in object'></div>
  • v-if和v-for结合使用
<div v-if='value==12' v-for='(value, key, index) in object'></div>

5. Vue常用特性

5.1 常用特性概览

  • 表单操作
  • 自定义指令
  • 计算属性
  • 过滤器
  • 侦听器
  • 生命周期

5.2 表单操作

1. 基于Vue的表单操作

- input 单行文本
- textarea 多行文本
- select 下拉多选
- radio 单选框
- checkbox 多选框

3. 表单域修饰符

- number：转化为数值
- trim：去掉开始和结尾的空格
- lazy：将input事件切换为change事件(v-model默认情况下触发的是input事件，可以通过v-model.lazy来改为change)
```
<input v-model.number="age" type="number">
```

5.3 自定义指令

1. 为何需要自定义指令？

内置指令不满足需求

2. 自定义指令的语法规则（获取元素焦点）

利用钩子函数

  • inserted: 被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）。
  • bind: 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
Vue.directive('focus' {
    inserted: function (el) {
    // 获取元素的焦点
    el.focus();
    }
 })

3. 自定义指令用法

<input type="text" v-focus>

钩子函数参数

指令钩子函数会被传入以下参数：

  • el：指令所绑定的元素，可以用来直接操作 DOM。
  • binding：一个对象，包含以下 property：
    • name：指令名，不包括 v- 前缀。
    • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
    • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
    • arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
    • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
  • vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
  • oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

5. 带参数的自定义指令（改变元素背景色）

Vue.directive(‘color', {
    inserted: function(el, binding) {
        el.style.backgroundColor = binding.value.color;
    }
})

4. 指令的用法

<input type="text" v-color='{color:"orange"}'>

5. 局部指令

当前的vm对象就是一个组件，之前申明的全局指令可以在所有组件中使用，局部指令只能在本组件中使用。

如果想接收局部指令，组件中接收一个directives的选项：

directives: {
    focus: {
    // 指令的定义
    inserted: function (el) {
        el.focus()
    }
  }
}

5.4 计算属性

1. 为何需要计算属性？

表达式的计算逻辑可能会比较复制，使用计算属性可以使模板内容更加简洁。

2. 计算属性的用法

computed: {
    reversedMessage: function () {
        return this.msg.split('').reverse().join('')
    }
}

3. 计算属性与方法的区别

  • 计算属性是基于它们的依赖进行缓存的（执行完之后如果再次调用，不改变data的情况下会直接从缓存取值，不会再执行一遍）
  • 方法不存在缓存

5.5 侦听器

侦听器侦听data当中的数据，一旦数据发送变化就通知侦听器所绑定的方法。

1. 侦听器的应用场景

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

watch: {
    firstName: function (val) {
        // val表示变化之后的值
        this.fullName = val + this.lastNmae;
    },
    lastName: function (val) {
        this.fullName = this.firstNmae + val;
    }
}

5.6 过滤器

1. 过滤器的作用是什么？

格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等

2. 自定义过滤

Vue.filter('过滤器名称', function(value) {
    // 过滤器业务逻辑
})

3. 过滤器的使用

<div>{{msg | upper}}</div>
<div>{{msg | upper | lower}}</div>
<div v-bind:id="id | formatId"></div>

4. 局部过滤器

filters:{
    capitalize: function(){}
}

5. 带参数的过滤器

Vue.filter(‘format’, function(value, arg1){
    // value就是过滤器传递过来的参数
})

6. 过滤器的使用

<div>{{date | format(‘yyyy-MM-dd')}}</div>

image.png

5.7 生命周期

1. 主要阶段

官网：Vue生命周期图示

  • 挂载（初始化相关属性）
    1. beforeCreate
    2. created
    3. beforeMount
    4. mounted
  • 更新（元素或组件的变更操作）
    1. beforeUpdate
    2. updated
  • 销魂（销毁相关属性）
    1. beforeDestroy
    2. destroyed

2. Vue实例的产生过程

1. beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。
2. created 在实例创建完成后被立即调用。
3. beforeMount 在挂载开始之前被调用。
4. mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。
5. beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前。
6. updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
7. beforeDestroy 实例销毁之前调用。
8. destroyed 实例销毁后调用

补充知识（数组相关API)

1. 变异方法（修改原有数据）

  • push(): 在末尾添加元素
  • pop()： 删除数组最后一个元素
  • shift()：删除数组的第一个元素
  • unshift()：向数组开头添加元素
  • splice()：数组删除splice(第几个开始，删除几个)
  • sort()：对数组的元素进行排序
  • reverse()：颠倒数组中元素的顺序（无参数）

2. 替换数组（生成新的数组）

  • filter()：创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
  • concat()：连接两个或多个数组
  • slice()：和splice类似，不影响原数组，可以截取数组，返回截取之后的数组

3. 修改相应式数据

效果一样，语法略有差异

  • Vue.set(vm.items,indexOfltem,newValue)
  • vm.$set(vm.items,indexOfltem,newValue)
    • 参数一表示要处理的数组名称
    • 参数二表示要处理的数组的索引
    • 参数三表示要处理的数组的值
avatar
文章
阅读
粉丝