沃梦达 / IT编程 / 前端开发 / 正文

vue中的重点指令

vue中的重点指令什么是指令,指令使用的方式vue中的常见指令 v-text:内容渲染指令v-html:内容渲染指令v-for:列表渲染指令v-model:双向绑定指令v-on:事件绑定指令v-bind:属性绑定指令v-show:条件渲染指令v-if...

vue中的重点指令

  1. 什么是指令,指令使用的方式
  2. vue中的常见指令
    • v-text:内容渲染指令
    • v-html:内容渲染指令
    • v-for:列表渲染指令
    • v-model:双向绑定指令
    • v-on:事件绑定指令
    • v-bind:属性绑定指令
    • v-show:条件渲染指令
    • v-if:条件渲染指令

vue中的常见指令: v-text

介绍:

v-text是内容渲染指令,用来辅助开发者渲染 DOM 元素的文本内容

作用:

设置或更新元素的内容

语法:

<标签 指令='值'></标签>,如<span v-text="msg"></span>

与插值表达式的共同点:

  1. 可以设置标签的内容
  2. 可以拼接字符串,使用api,三元表达式

与插值表达式的区别:

插值表达式可以部分更新,而v-text完全更新标签之间的内容,意味着如果标签之间如果还有其它的内容,使用v-text会将原始的内容完全覆盖掉

<template>
  <div>
      <h1>v-text的使用</h1>
      <!-- 使用插值 -->
      <p>还有别的内容哦:{{msg}}</p>
      <!-- 使用v-text -->
      <p v-text="msg"></p>
      <p v-text="msg.toUpperCase()"></p>
      <p v-text="'我对你说'+msg">还有别的内容哦:</p>
  </div>
</template>

<script>
export default {
    data () {
        return {
            msg:'hello'
        }
    }
}
</script>

vue中的常见指令: v-html

介绍:

v-html是内容渲染指令,用来辅助开发者渲染 DOM 元素的文本内容

作用:

设置或更新元素的内容

语法:

<标签 指令='值'></标签>,如<div v-html="msg"></div>

与v-text的共同点

  1. 可以设置标签的内容,对标签之间的内容完全替换
  2. 可以拼接字符串,使用api,三元表达式

与v-text的区别

v-text会将内容原样输出,而v-html会对内容进行html解析,如果内容是合法的html结构,则会解析出对应的网页结构

<template>
  <div>
    <h1>这个文件主要说明v-html的使用</h1>
    <h2>它和v-text一样,可以对标签之间的内容进行完整的更新,但是它可以解析html结构</h2>
    <p>{{msg}}</p>
    <p v-text='msg'>原始的内容</p>
    <p v-html='msg'>原始的内容</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'hello <hr/>'
    }
  }
}
</script>

vue中的常见指令: v-for

介绍:

列表渲染指令,对数据进行动态渲染的

作用:

基于源数据多次渲染元素或模板块

语法:

//(1).遍历数组:value是数组的成员,index是数组的索引
<元素 v-for='(value,index) in 数组>{{value}}:{{index}}</元素>
//(2).遍历对象:value是对象的属性值,key是对象的属性名称,index是索引(一般不用)
<元素 v-for='(value,key,index) in 对象>{{value}}:{{key}}:{{index}}</元素>

使用方式:

你想循环生成什么结构,就在这个结构上添加v-for

key的作用及使用式

  1. 当列表的数据变化时,默认情况下,vue 会尽可能的复用已存在的 DOM 元素,从而提升渲染的性能。但这种默认的性能优化策略,会导致有状态的列表无法被正确更新。
  2. 为了给 vue 一个提示,以便它能跟踪每个节点的身份,从而在保证有状态的列表被正确更新的前提下,提升渲染的性能。此时,需要为每项提供一个唯一的 key 属性
  3. key 的注意事项
    ① key 的值只能是字符串或数字类型
    ② key 的值必须具有唯一性(即:key 的值不能重复)
    ③ 建议把数据项 id 属性的值作为 key 的值(因为 id 属性的值具有唯一性)
    ④ 使用 index 的值当作 key 的值没有任何意义(因为 index 的值不具有唯一性)
    ⑤ 建议使用 v-for 指令时一定要指定 key 的值(既提升性能、又防止列表状态紊乱)

vue中的常见指令: v-model

介绍:

vue 提供了 v-model 双向数据绑定指令,用来辅助开发者在不操作 DOM 的前提下,快速获取表单的数据

作用:

可以实现数据与元素的双向绑定

  1. 数据变化 会影响dom元素
  2. dom元素中的内容变化也会影响数据

语法:

<标签 v-model='数据'></标签>,如<input v-model="msg"/>

使用限制:

不是任何的元素都能添加v-model,只有input,textarea,select可以使用v-model

使用场景:

一般用于展示默认数据或需要收集用户数据的场景

常用修饰符

为了方便对用户输入的内容进行处理,vue 为 v-model 指令提供了 3 个修饰符,分别是

vue中的常见指令: v-on

介绍:

可以用 v-on指令监听 DOM 事件,并在触发时运行一些 JavaScript代码。

作用:

为元素绑定事件。表达式可以是一个方法的名字或一个内联语句

  1. 事件类型由v-on后面的参数决定
  2. 在普通元素上时,只能监听原生DOM事件
  3. v-on可以简写为@

语法:

自定义函数定义过程

用户自定义函数应该在methods中定义

  • methods是实例中单独的结构,主要用于定义用户自定义函数
  • methods中的this指向当前的组件实例,通过this可以访问组件实例的其它成员
  • data中的this指向null,意味着无法进行具体的业务处理

参数的传递

  1. 可以选择是否传递参数
  2. 在指定处理函数的时候可以进行参数的传递
  3. 参数传递的细节
    1. 如果事件处理函数没有手动的传递参数,那么就会默认传递事件源对象
    2. 如果手动的传递了参数,那么默认的事件源对象就不再传递了
    3. 如果还想使用事件源对象,则需要手动的传递 e v e n t ( event( event(event名称绝对不能改)
    4. e v e n t 是 v u e 提 供 的 特 殊 变 量 , 用 来 表 示 原 生 的 事 件 参 数 对 象 e v e n t 。 event 是 vue 提供的特殊变量,用来表示原生的事件参数对象 event。 event是vue提供的特殊变量,用来表示原生的事件参数对象event。event 可以解决事件参数对象 event 被覆盖的问题

常用的事件(按键)修饰符

在事件处理函数中调用 event.preventDefault()event.stopPropagation(),或基于某个按钮进行事件的触发,这些都是非常常见的需求。因此,vue 提供了修饰符的概念,主要有两种(事件修饰符按键修饰符),来辅助程序员更方便的对事件的触发进行控制,这里介绍比较常见的几个修饰符


vue中的常见指令: v-bind

介绍:

绑定属性

作用:

动态地绑定一个或多个 attribute,如果需要为元素的属性动态绑定属性值,则需要用到 v-bind 属性绑定指令

  1. 可以为元素的任意属性进行动态绑定
  2. 只要属性的值是动态变化的,就应该使用v-bind
  3. v-bind可以简写为:

语法:

<标签 v-bind:属性='值'></标签>
<img v-bind:src="aW1nc3Jj"/> | <img :src="aW1nc3Jj"/>
在 vue 提供的模板渲染语法中,除了支持绑定简单的数据值之外,还支持 Javascript 表达式的运算
<a :href="'http://127.0.0.1:3002/userDetail?id='+id">给我简单的跳</a>

动态的为元素绑定样式

  1. 对象方式动态绑定样式
    • 可以根据指定的bool决定是否添加指定的样式
  2. 数组方式动态绑定样式
    • 可以同时绑定多个样式,也可以通过bool值决定是否添加指定的样式

vue中的常见指令: v-show

介绍:

通过控制元素的display属性 控制元素的显示隐藏

作用:

通过为元素设置display样式实现元素的显示和隐藏
如果设置的bool值为true,就移除元素的display:none样式
如果设置的bool值为false,就为元素设置样式display:none

语法:

<标签 v-show='bool值'></标签>
<p v-show="ishsow">我到底能不能显示呢</p>

vue中的常见指令: v-if

介绍:

通过创建和销毁元素 实现元素的显示隐藏

作用:

根据所指定的表达式的值有条件地渲染元素
如果设置的bool值为true,就创建元素并渲染
如果设置的bool值为false,就移除元素

语法:

<标签 v-if='bool值'></标签>
<p v-if="ishsow">我到底能不能创建并显示呢</p>

v-if 和 v-show 区别

  1. 实现原理不同:
    ? v-if指令会动态地创建或移除 DOM 元素,从而控制元素在页面上的显示与隐藏;
    ? v-show指令会动态为元素添加或移除style="display: none;" 样式,从而控制元素的显示与隐藏;

  2. 性能消耗不同,v-if 有更高的切换开销,而 v-show 有更高的**初始渲染开销。**因此:
    ? 如果需要非常频繁地切换,则使用 v-show 较好
    ? 如果在运行时条件很少改变,则使用 v-if 较好

vue中的常见指令: v-else和v-else-if

介绍:

v-if,v-else,v-else-if相当于js中的if,else if和else的关系

作用:

v-if 可以单独使用,或配合 v-else 指令一起使用
v-else 指令必须配合 v-if 指令一起使用,否则它将不会被识别
v-else-if 指令,顾名思义,充当 v-if 的“else-if 块”,可以连续使用
v-else-if 指令必须配合 v-if 指令一起使用,否则它将不会被识别

语法:

本文标题为:vue中的重点指令