Vue基础系列(二) v-指令

Vue构建大型单页面电商应用 开源啦!点我看源码

阅读时间预估:5分钟

啥是指令?

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

指令的作用

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

常用的指令有哪些?

v-text

  • 解释:更新DOM对象的 textContent

v-html

  • 解释:更新DOM对象的 innerHTML

v-bind

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




v-on

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




事件修饰符

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

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

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

  • .self 只当事件在该元素本身(比如不是子元素)触发时,才会触发事件

  • .once 事件只触发一次

v-model

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

Message is: {{ message }}

v-for

  • 作用:基于源数据多次渲染元素或模板块

{{ item.text }}

{{item}} -- {{index}}

{{item}} -- {{key}}

{{item}}

key属性

  • 推荐:使用 v-for 的时候提供 key 属性,以获得性能提升。
  • 说明:使用 key,VUE会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。
  • Vue 项目时为什么要在列表组件中写 key,其作用是什么
  • vue key属性的说明

样式处理 -class和style

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

===> 解析后
===>解析后
===>解析后
--- style ---

v-if 和 v-show

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

这个元素展示出来了吗???

这个元素,在HTML结构中吗???

提升性能:v-pre

  • 说明:vue会跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache标签。跳过大量没有指令的节点会加快编译。
{{ this will not be compiled }}

提升性能:v-once

  • 说明:vue只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
This will never change: {{msg}}

过滤器 filter

  • 作用:文本数据格式化
  • 过滤器可以用在两个地方:{{}}和 v-bind 表达式
  • 两种过滤器:1 全局过滤器 2 局部过滤器

全局过滤器

  • 说明:通过全局方式创建的过滤器,在任何一个vue实例中都可以使用
  • 注意:使用全局过滤器的时候,需要先创建全局过滤器,再创建Vue实例
  • 显示的内容由过滤器的返回值决定
Vue.filter('filterName', function (value) {
  // value 表示要过滤的内容
})
{{ dateStr | date }}
{{ dateStr | date('YYYY-MM-DD hh:mm:ss') }}

局部过滤器

  • 说明:局部过滤器是在某一个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指令的巧妙之处,一定要多用多理解每个指令内部是如何实现的,进阶大佬非常管用!!欢迎留言点赞加评论,文章有不对的地方恳请各位大佬提出.

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

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

image

猛戳我点星星

你可能感兴趣的:(Vue基础系列(二) v-指令)