Vue从甜小白到皮大佬系列(二) v-指令

阅读时间预估:5分钟

啥是指令?

指令通俗的来讲就是一个方法名的缩写,经过特定的指令,完成特定的事情,vue中指令前缀为v-

指令的做用

表达式的值改变时,将其产生连带的影响,响应地做用于DOM

经常使用的指令有哪些?

v-text

• 解释：更新DOM对象的 textContent

<h1 v-text="msg"></h1>
复制代码

v-html

• 解释：更新DOM对象的 innerHTML

<h1 v-html="msg"></h1>
复制代码

v-bind

• 做用：当表达式的值改变时，将其产生的连带影响，响应式地做用于 DOM
• 语法：v-bind:title="msg"
• 简写：:title="msg"

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>
复制代码

v-on

• 做用：绑定事件
• 语法：v-on:click="say" or v-on:click="say('参数', $event)"
• 简写：@click="say"
• 说明：绑定的事件定义在methods

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>
复制代码

事件修饰符

• .stop 阻止冒泡，调用 event.stopPropagation()

• .prevent 阻止默认行为，调用 event.preventDefault()

• .capture 添加事件侦听器时使用事件捕获模式

• .self 只当事件在该元素自己（好比不是子元素）触发时，才会触发事件

• .once 事件只触发一次

v-model

• 做用：在表单元素上建立双向数据绑定
• 说明：监听用户的输入事件以更新数据
• 案例：计算器

<input type="text" v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
复制代码

v-for

• 做用：基于源数据屡次渲染元素或模板块

<!-- 1 基础用法 -->
<div v-for="item in items">
  {{ item.text }}
</div>
<!-- item 为当前项，index 为索引 -->
<p v-for="(item, index) in list">{{item}} -- {{index}}</p>
<!-- item 为值，key 为键，index 为索引 -->
<p v-for="(item, key, index) in obj">{{item}} -- {{key}}</p>
<p v-for="item in 10">{{item}}</p>
复制代码

key属性

• 推荐：使用 v-for 的时候提供 key 属性，以得到性能提高。
• 说明：使用 key，VUE会基于 key 的变化从新排列元素顺序，而且会移除 key 不存在的元素。
• Vue 项目时为何要在列表组件中写 key，其做用是什么
• vue key属性的说明

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>
复制代码

样式处理 -class和style

• 使用方式：v-bind:class="expression" or :class="expression"
• 表达式的类型：字符串、数组、对象（重点） 语法：

<!-- 1 -->
<div v-bind:class="{ active: true }"></div> ===> 解析后
<div class="active"></div>
 
<!-- 2 -->
<div :class="['active', 'text-danger']"></div> ===>解析后
<div class="active text-danger"></div>
 
<!-- 3 -->
<div v-bind:class="[{ active: true }, errorClass]"></div> ===>解析后
<div class="active text-danger"></div>
 
 
--- style ---
<!-- 1 -->
<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>
<!-- 2 将多个 样式对象 应用到一个元素上-->
<!-- baseStyles 和 overridingStyles 都是data中定义的对象 -->
<div v-bind:style="[baseStyles, overridingStyles]"></div>
复制代码

v-if 和 v-show

• 条件渲染
• v-if：根据表达式的值的真假条件，销毁或重建元素
• v-show：根据表达式之真假值，切换元素的 display CSS 属性

<p v-show="isShow">这个元素展现出来了吗？？？</p>
<p v-if="isShow">这个元素，在HTML结构中吗？？？</p>
复制代码

提高性能：v-pre

• 说明：vue会跳过这个元素和它的子元素的编译过程。能够用来显示原始 Mustache标签。跳过大量没有指令的节点会加快编译。

<span v-pre>{{ this will not be compiled }}</span>
复制代码

提高性能：v-once

• 说明：vue只渲染元素和组件一次。随后的从新渲染，元素/组件及其全部的子节点将被视为静态内容并跳过。这能够用于优化更新性能。

<span v-once>This will never change: {{msg}}</span>
复制代码

过滤器 filter

• 做用：文本数据格式化
• 过滤器能够用在两个地方：{{}}和 v-bind 表达式
• 两种过滤器：1 全局过滤器 2 局部过滤器

全局过滤器

• 说明：经过全局方式建立的过滤器，在任何一个vue实例中均可以使用
• 注意：使用全局过滤器的时候，须要先建立全局过滤器，再建立Vue实例
• 显示的内容由过滤器的返回值决定

Vue.filter('filterName', function (value) {
  // value 表示要过滤的内容
})
复制代码

<div>{{ dateStr | date }}</div>
<div>{{ dateStr | date('YYYY-MM-DD hh:mm:ss') }}</div>
 
<script>
  Vue.filter('date', function(value, format) {
    // value 要过滤的字符串内容，好比：dateStr
    // format 过滤器的参数，好比：'YYYY-MM-DD hh:mm:ss'
  })
</script>
复制代码

局部过滤器

• 说明：局部过滤器是在某一个vue实例的内容建立的，只在当前实例中起做用

{
  data: {},
  // 经过 filters 属性建立局部过滤器
  // 注意：此处为 filters
  filters: {
    filterName: function(value, format) {}
  }
}
复制代码

按键值修饰符

• 说明：在监听键盘事件时，Vue 容许为 v-on - 在监听键盘事件时添加关键修饰符
• 键盘事件 - 键值修饰符
• 其余：修饰键（.ctrl等）、鼠标按键修饰符（.left等）

// 只有在 keyCode 是 13 时调用 vm.submit()
@keyup.13="submit"
// 使用全局按键别名
@keyup.enter="add"
 
---
 
// 经过全局 config.keyCodes 对象自定义键值修饰符别名
Vue.config.keyCodes.f2 = 113
// 使用自定义键值修饰符
@keyup.enter.f2="add"
复制代码

监视数据变化 - watch

• 概述：watch是一个对象，键是须要观察的表达式，值是对应回调函数
• 做用：当表达式的值发生变化后，会调用对应的回调函数完成响应的监视操做
• VUE $watch

new Vue({
  data: { a: 1, b: { age: 10 } },
  watch: {
    a: function(val, oldVal) {
      // val 表示当前值
      // oldVal 表示旧值
      console.log('当前值为：' + val, '旧值为：' + oldVal)
    },
 
    // 监听对象属性的变化
    b: {
      handler: function (val, oldVal) { /* ... */ },
      // deep : true表示是否监听对象内部属性值的变化 
      deep: true
    },
 
    // 只监视user对象中age属性的变化
    'user.age': function (val, oldVal) {
    },
  }
})
复制代码

计算属性 - computed

• 说明：计算属性是基于它们的依赖进行缓存的，只有在它的依赖发生改变时才会从新求值
• 注意：Mustache语法（{{}}）中不要放入太多的逻辑，不然会让模板太重、难以理解和维护
• 注意：computed中的属性不能与data中的属性同名，不然会报错
• Vue computed属性原理

var vm = new Vue({
  el: '#app',
  data: {
    firstname: 'jack',
    lastname: 'rose'
  },
  computed: {
    fullname() {
      return this.firstname + '.' + this.lastname
    }
  }
})
复制代码

看完这篇不知道面前的这位大侠是否真正的领略到vue指令的巧妙之处,必定要多用多理解每一个指令内部是如何实现的,进阶大佬很是管用!!欢迎留言点赞加评论,文章有不对的地方恳请各位大佬提出.

若是个人分享对面前的这位大侠有所启发,恳请以程序员最高礼遇点✨ 星加分享的方式鼓励我.

关注公众号回复:学习 领取前端最新最全学习资料,也能够进群和大佬一块儿学习交流

猛戳我点星星