关于vue.js:vueVue中的指令

54次阅读

共计 6022 个字符，预计需要花费 16 分钟才能阅读完成。

Vue 中的指令

  1. v-text
  2. v-html
  3. v-show
  4. v-if
  5. v-else
  6. v-else-if
  7. v-for
  8. v-on
  9. v-bind
  10. v-model
  11. v-slot
  12. v-pre
  13. v-cloak
  14. v-once

1 v-text

更新元素的 textContent
局部更新能够应用插值语法{{Mustache}}

2 v-hetml

更新元素的 innerHTML
内容按一般 HTML 插入 - 不会作为 Vue 模板进行编译

在网站上动静渲染 HTML 很危险，容易导致 XSS 攻打

3 v-show v-if v-else v-else-if

条件渲染
v-show 相当于扭转标签的display
v-if 是实在的 条件渲染，值为 falsy 时会将元素从 DOM 构造中删除

v-else v-else-if 能够与 v -if 组成一个链式的条件渲染，与日常的 if – else 代码块有相似的逻辑

4 v-for

列表渲染
基于源数据屡次渲染元素或模块，alias in expression
v-for的默认行为会尝试原地批改元素而不是挪动它们。要强制从新排序元素，须要非凡的 attribute key来提供一个排序的提醒
expression:Array Object Number String Iterable

// 数组
<template>
  <div id="app">
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{item}}{{index}}{{list[index] }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {list: ["张三", "李四", "王二"],
    };
  },
};
</script>
// 对象
<template>
  <div id="app">
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{item}}{{index}}{{list[index] }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      list: {
        a: "张三",
        b: "李四",
        c: "王二",
      },
    };
  },
};
</script>
// 对象数组
<template>
  <div id="app">
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{item}}{{index}}{{item.name}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {list: [{ name: "张三"}, {name: "李四"}, {name: "王二"}],
    };
  },
};
</script>

数据初始化：由模板 -> 虚构 DOM-> 实在 DOM
key 作为虚构 DOM 中的一个标签属性，如果应用 index 作为 key，在数据更新后新的虚构 DOM 会 编排 key不论更新的数据插入的地位，都是从 0 开始编排

数据更新：新模板 -> 新虚构 DOM->Diff 算法比拟前后的虚构 DOM-> 实在 DOM
在比拟的过程中，如果应用 index 作为 key，先依据 key 比照前后的 DOM 节点，因为 key 的从新编排，导致 模板复用率低 ，并且在复用时还容易 产生谬误
如果应用数据的 惟一标识 作为 key，生成新的虚构 DOM 时依据 key 来比照，不会有太大变动，只更新变动的局部，无变动的局部容易在 key 比对后 复用

v-for 与 v -if 同时应用时，v-for的优先级高，这意味着会进行列表渲染而后再判断是否渲染

5 v-on

绑定事件监听器
一般标签 ：监听 原生 DOM 事件
组件 ：监听 自定义事件
表达式 ：v-on:event=”handle(param)”
缩写 ：@
参数 ：事件处理函数中能够无参数，能够传入多个参数，参数$event 为触发的事件，通常能够通过 $event.target 来获取触发事件的元素

v-on 后能够是一个对象触发对个事件 v-on=”{event1:handle1(),event2:handle2()}”

5.1 事件修饰符

  1. .stop: 调用event.stopPropagation()

    阻止捕捉和 冒泡阶段 中以后事件的进一步流传，不避免任何默认行为的产生

  2. .prevent: 调用event.preventDefault()

    阻止 默认事件，例如 a 标签 href 跳转，应用 @click.prevent 能够阻止跳转行为

  3. .capture: 增加事件监听器时应用 capture 模式

    元素产生冒泡时，先触发 带有该修饰符的元素，有多个该修饰符，由外而内触发

  4. .self: 只当事件是从侦听器绑定的元素自身触发时才触发回调

    在冒泡阶段，从内触发 的事件不会在领有该修饰符的父元素上触发

  5. .{keyCode|keyAlias}: 只当事件从特定键触发时才触发回调

    enter tab delete esc space up down left right ctrl alt shift meta

  6. .native: 监听 组件 跟元素的原生事件

    组件上的事件默认为自定义事件，须要 $emit 触发

  7. .once: 只触发一次
  8. .left: 点击鼠标左键触发
  9. .right: 点击鼠标右键触发

  10. .passive:以 {passive:true} 模式增加侦听器

    告知浏览器 不阻止默认行为 ，能够进步性能， 事件捕捉 -> 事件冒泡 -> 默认事件

5.2 .sync 修饰符

简化父子组件数据的双向绑定

6 v-bind

动静绑定 一个或多个 attribute，或一个组件 prop 到 表达式
缩写：:

在组件上绑定时，须要在组件内应用 props 申明后能力应用

6.1 class 与 style 绑定

动静的切换 class 与绑定内联款式
class

// 对象模式
<div :class="{active: isActive, base: isBase}"></div>
// 数组模式 - 可用三元运算符与对象
<div :class="['active', isBase ?'base':'', { filter: isFilter}]"></div>

style

// 对象模式 - 能够三元运算
<div
  :style="{
    width: activeWidth,
    height: activeHeight,
    background: isRed ? 'red' : '',
  }"
></div>
// 数组模式 - 多个款式对象
<div :style="[baseStyle, activeStyle]"></div>

Vue 会主动的增加浏览器引擎 前缀
对象模式的属性值能够是一个数组，增加多个值

6.2 修饰符

  1. .prop
  2. .camel
  3. .sync

.prop: 作为一个 DOM property 绑定而不是作为 attribute 绑定

<div :textContent.prop="foo"></div>

.camel：将 kebab-case attribute 名转换为 camelCase，将 – 连贯的属性名改为驼峰式

.sync：扩大成一个更新父组件绑定值的 v-on 侦听器

// 不应用.sync 的形式
// 父组件
<template>
  <div id="app">
    <Child :msg="msg" @changeVal="change"></Child>
    <span>{{msg}}</span>
  </div>
</template>

<script>
import Child from "./components/Child.vue";
export default {
  name: "App",
  data() {
    return {msg: "你好",};
  },
  methods: {change(val) {this.msg = val;},
  },
  components: {Child,},
};
</script>
// 子组件
<template>
  <div>
    <input type="text" :value="msg" @input="change($event.target.value)" />
  </div>
</template>

<script>
export default {props: ["msg"],
  methods: {change(e) {this.$emit("changeVal", e);
    },
  },
};
</script>

父组件传递数据，并在组件上绑定自定义的事件，子组件 props 接收数据，触发事件

// 父组件
<template>
  <div id="app">
    <Child :msg.sync="msg"></Child>
    <span>{{msg}}</span>
  </div>
</template>

<script>
import Child from "./components/Child.vue";
export default {
  name: "App",
  data() {
    return {msg: "你好",};
  },
  components: {Child,},
};
</script>
// 子组件
<template>
  <div>
    <input type="text" :value="msg" @input="change($event.target.value)" />
  </div>
</template>

<script>
export default {props: ["msg"],
  methods: {change(e) {this.$emit("update:msg", e);
    },
  },
};
</script>

父组件在传递数据时加上 .sync 修饰符，不须要绑定事件
子组件触发 update:data 事件，data为监听的数据

7 v-model

在 表单控件 或者 组件 上创立 双向绑定

7.1 表单控件绑定

v-model 实质是 v -bind 与事件绑定的语法糖

  • text 和 textarea 元素应用 value property 和input 事件
  • checkbox 和 radio 应用 checked property 和change 事件
  • select 字段将 value 作为 prop 并将 change 作为事件
<template>
  <div id="app">
    <p>1.text</p>
    <div>
      <input type="text" v-model="text" /><br />
      <span>{{text}}</span>
    </div>
    <p>2.textarea</p>
    <div>
      <textarea v-model="textarea"></textarea><br />
      <span>{{textarea}}</span>
    </div>
    <p>3.checkbox</p>
    <div>
      <input type="checkbox" id="jack" value="jack" v-model="checkName" />
      <label for="jack">jack</label>
      <input type="checkbox" id="john" value="john" v-model="checkName" />
      <label for="john">john</label><br />
      <span>checked:{{checkName}}</span>
    </div>
    <p>4.radio</p>
    <div>
      <input type="radio" id="one" value="One" v-model="pick" />
      <label for="one">One</label>
      <input type="radio" id="two" value="Two" v-model="pick" />
      <label for="two">Two</label><br />
      <span>picked:{{pick}}</span>
    </div>
    <p>5.select</p>
    <div>
      <select v-model="selected">
        <option disabled value=""> 请抉择 </option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <br />
      <span>selected:{{selected}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      text: "text",
      textarea: "textarea",
      checkName: [],
      pick: "",
      selected: "",
    };
  },
};
</script>

复选框的绑定能够有两个值 true-value 和false-value示意选中与未选中
value 的值能够进行动静绑定

7.2 组件绑定

自定义组件的 v -model

// 父组件
<template>
  <div id="app">
    <Child v-model="msg" />
    <span>{{msg}}</span>
  </div>
</template>

<script>
import Child from "./components/Child.vue";
export default {
  name: "App",
  data() {
    return {msg: "hello",};
  },
  components: {Child,},
};
</script>
// 子组件
<template>
  <div>
    <input type="text" :value="msg" @input="inputVal($event.target.value)" />
  </div>
</template>

<script>
export default {
  model: {
    prop: "msg",
    event: "changeVal",
  },
  props: ["msg"],
  methods: {inputVal(val) {this.$emit("changeVal", val);
    },
  },
};
</script>

应用 model 选项能够申明绑定的数据与自定义的触发事件
能够防止复选框中绑定 value 与 checked 的抵触

能够与下面介绍的 v-bing+ 事件绑定 与.sync 修饰符 实现的双向绑定比照

7.3 修饰符

.lazy: 从 input 事件触发同步数据转为 change 事件后同步
.number: 将用户输出的值转为 数值类型
.trim: 主动过滤用户输出的首尾 空白符

8 v-slot

提供具名插槽或须要接管 prop 的插槽
缩写：#
vm.slots 和 vm.scopedSlots 属性
插槽

9 v-pre

无表达式
跳过 这个元素和它子元素的 编译过程 。
跳过大量没有指令的节点会放慢编译

10 v-cloak

无表达式
次指令 放弃 在元素上直到关联实例完结编译
作为 css 的属性选择器，与 display:none 一起应用，能够防止在页面处呈现插值语法的{{}}

11 v-once

无表达式
只对元素和组件 渲染一次 ，随后的从新渲染，元素 / 组件及其所有的子节点将被视为动态内容并 跳过

对于领有大量动态内容在组件，能够在根元素上增加该指令，晋升渲染的速度

正文完
vue.js
发表至： vue.js
2021-10-03
 0
关于vue.js:Vue-eltable的sortchange探究
关于vue.js:vue面试题
关于vue.js:关于配置proxy代理配置
关于vue.js:elementui-Datetimepicker-defaulttime-设置默认-时间时分秒