Vue.js 基础总结-常用指令用法

Vue基础知识

本文主要涵盖Vue常见指令知识点、计算属性和侦听器知识点

1. Vue是一套用于构建用户界面的渐进式框架，Vue被设计为可以自底向上逐层应用
2. Vue的核心只关注视图层，是一个允许采用简单的模板语法来声明式的将数据渲染进DOM的系统

常用知识、用法、作用

1. Vue的指令只能在Vue实例所绑定的Dom元素中使用

2. 在插值表达式、v-指令中，都支持书写JavaScript表达式

   • 这些表达式会在所属的Vue实例的数据作用域中作为JavaScript被解析
   • 每个绑定只能包含单个表达式
   • 模板表达式都是放在沙盒中，只能访问全局变量的一个白名单，如Math和Date。不应该在模板表达式中访问用户定义的全局变量

   • <div :test=" vueValue + '普通字符串' ">

     • ""双引号之间书写javascript表达式
     • vueValue指Vue实例的property

{{}} 插值表达式

• 用法：<div>{{message}}</div>
• 作用：{{message}} 与此元素所在的Vue实例中message属性进行关联，将Vue实例的message内容输出位普通文本
• 注意：插值表达式不能作用在HTML attribute上，遇到这种情况使用v-bind指令

v-bind 指令

• 用法：<div v-bind:attributeName="attributeValue">{{message}}</div>
• 简写：v-bind:attrName="attrVal"可以简写为:attrName="attrVal"
• 作用：v-bind用于绑定HTML属性，可以是自定义属性，也可以是正常属性如：title、class等，对于HTML的布尔attribute，v-bind绑定的值为null、undefined、false时，布尔attribute不会被渲染到标签元素中。
• 注意：布尔attribute设置为空字符串是，attribute的值为true

Class 绑定

• 对象语法

  • 用法：<div :class="{className: isCanShow}"></div>

  • 解释：

    • className是类名称
    • isCanShow布尔值；决定了是否将类名添加到class上

• 数组语法

  • 用法：<div :class="[isCanShow ? className : '','alwaysHave'，vueProperty]"></div>

  • 解释：

    • className是类名称,alwaysHave一直存在不需要判断，vueProperty对应的值不需要判断，直接存放进class里
    • isCanShow布尔值；决定了是否将类名添加到class上（三元表达式返回）

• :class可以与普通class共存

  • 用法：<div class="a" :class="{ b : canshow }"></div>
  • 动态计算的class的属性会添加到 class 值得后面
  • 注意：静态属性class的值是不会变得

Style 绑定

• 对象方法：

  • 用法：<div :style="{color: vueValue,"font-size": vueFontSize + 'px'}">content</div>
  • 优化：可以在将css属性写成一个对象传入

  • 解释:

    • 对象的键就是css的属性
    • 对象的值就是Vue实例传入的值

• 数组方法：

  • 用法：<div :style=[baseStyles,overStyle]>
  • 解释：数组内的参数都是样式对象
  • 注意：后引入的样式对象优先级高，会覆盖先引入对象样式
• 自动添加前缀：当时用需要添加引擎前缀的css property是，vue.js会自动侦测添加

• 多重值：

  • 版本Vue 2.3.0+
  • 用法：<div :style="{display:['-webkit-box','-ms-flexbox','flex']}"></div>
  • 解释：只会渲染数组中最后一个被浏览器支持的值

v-text 指令

• 用法：<div v-text="message"></div>
• 作用：输出内容与包裹此元素的最小Vue实例的message property进行关联
• 注意：v-text将内容输出为普通文本，会覆盖<div></div>内容

v-html 指令

• 用法：<div v-html="htmlCOntent"></div>
• 作用：div的内容与Vue实例的htmlContent property绑定
• 注意：htmlContent property直接作为HTML内容，忽略解析property

v-on 指令

• 用法：<div v-on:click="vueFunction">被点击触发</div>
• 简写：v-on:click="vueFunc"可以简写为@click="vueFunc"
• 作用：用于监听Dom事件

• 注意：

  • 当元素为自定义组件时时，组件@click表示等待组件内部抛出click事件再调用。
  • 不管组件内部是否能抛出click事件，组件的@click方法都是等待内部抛出事件
  • 使用.native添加到组件的事件监听上，表示不需要接收组件内部抛出事件@click.native="vueFunc"

v-show 指令

• 用法：<div v-show="canShow"></div>;vshow的元素始终会被渲染并保留在DOM中。v-show只是简单的切换元素的display属性
• 作用：根据条件展示元素。
• 注意：v-show不支持<template>元素。

v-if 指令

• 用法：<div v-if="awesome">awesome</div>这块内容只会在指令的表达式返回truthy值的时候被渲染
• 作用：用于条件渲染一块内容。
• 注意：当值为null undefined false '' 时不渲染
• 如果想一次性显示多个元素，又不想重复添加v-if，或者不想添加<div></div>包裹，可以使用<template></template>元素包裹，最终渲染结果将不包含template元素

v-else-if 指令

• 用法：<div v-else-if></div> 必须紧跟 v-if 使用

v-else 指令

• 用法：<div v-else>content2</div> 必须紧跟 v-if v-else-if 使用
• 作用：当v-if v-else-if全为false时输出
• 注意：必须紧跟 v-if v-else-if 使用

v-for 指令

• 用法：v-for=""

  • 当""迭代的数据类型为数组类型的时候，item in items (item,index) in items
  • 当""迭代的数据类型为对象类型的时候，value in items (value,key) in items (value,key,index) in items
• 作用：渲染多个相同格式内容
• 注意：参数（）内的顺序不可变

v-on 指令

• 用法：<div v-on:click="vueFunc"></div>
• 作用：监听事件
• 简写：<div @click="vueFunc"></div>
• 注意：当绑定的元素是自定义的组件时，默认自定义组件的时间，是由组件内部向上抛出的，如果组件内部没有抛出相应事件，则自定义组件不会触发，使用.native添加到自定义组件的监听事件后面v-on:click.native="vueFunc",表示使用原生事件

v-model 指令

• 用法：<input v-model="message"\>
• 作用：v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定

v-cloak 指令

• 用法：<div v-cloak>{{}}</div>
• 作用：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
• 注意：当网速过慢时，页面会出现{{vueProperty}}，使用v-cloak在实例准备完毕显示

v-once 指令

• 用法：<span v-once>{{msg}}</span>
• 作用：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

computed 计算属性

• 用法：computed:{computedValue:function(){return ....}}
• 作用：处理复杂逻辑，计算属性缓存

• 注意：

  • computed`function`都可以返回复杂运算的结果二者的区别是什么？
  • computed计算属性是基于它们的响应式依赖进行缓存的。只有依赖发生改变它们才会重新求值
  • function计算出来的值,每次触发重新渲染都会调用方法
• 使用场景: 需要进行开销较大的计算属性（能使用计算属性就不使用方法）

// javascript 代码
let vm = new Vue({
    el: '#app',
    data: {
        firstName: 'Clear',
        lastName: 'Love'
    },
    computed: {
        // 计算属性的get方法
        fullName: function(){
            return this.firstName + ' ' + this.lastName
        }
        // 等价于
        fullName: {
            get: function () {
                return this.firstName + ' ' + this.lastName
            },
            // 实现set方法，修改计算属性会修改依赖内容
            set: function (setValue) {
                // 判断输入值是否合法
                let arrs = setValue.split(' ');
                this.firstName = arrs[0];
                this.lastName = arrs[1];
            } 
        }
    }
})

watch 侦听器

• 用法：watch: {dataName:function(){....}}
• 作用：观察和响应Vue实例上的变动,修改dataName的值会触发函数
• 注意：watch和computed不好选择的时候，优先使用computed
• 使用场景：当需要在数据变化时执行异步活开销较大的操作时。watch选项润徐我们执行异步操作，显示我们执行操作的频率，并在得到最终结果之前，设置中间状态，这些都是计算属性无法做到的

v-show v-if二者区别

• v-if是真正的条件渲染，他会确保切换过程中条件块内的事件监听器和子组件适当的被销毁和重建
• v-if是惰性的，如果初始渲染为假，则什么也不做
• v-show不管初始条件是什么，元素总是被渲染，并且只是简单的基于css进行切换
• v-if有更高的切换开销，v-show有更高的初始渲染开销。频繁操作使用v-show,如果运行时条件很少改变，使用v-if

v-if与v-for一起使用

• 注意：不推荐同时使用v-if v-for
• 当v-if v-for一起使用时v-for的优先级更高