vue中的重点指令

最新推荐文章于 2022-03-22 22:37:00 发布

龙影城

最新推荐文章于 2022-03-22 22:37:00 发布

阅读量164

点赞数

文章标签： vue vue.js

本文链接：https://blog.csdn.net/weixin_53577099/article/details/116466221

版权

vue中的重点指令

指令是什么，指令使用的方式

1.在vue中，指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构

2.指令 (Directive) 是带有 v- 前缀的特殊属性(attribute)，意味着在使用的时候，指令的使用和属性的设置类似

3.指令属性(attribute)的值预期是单个 JavaScript 表达式(数据) (v-for 是例外情况)

4.指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

5.语法：<标签指令=‘值’></标签>,如

<span v-text="msg"></span

其中，v-text是指令，msg是当前指令所赋的值

vue中的常见指令

v-text：内容渲染指令

1.介绍：v-html是内容渲染指令，用来辅助开发者渲染 DOM 元素的文本内容

2.作用：设置或更新元素的内容

3.语法：<标签指令=‘值’></标签>，如

4.与插值表达式的共同点：

•可以设置标签的内容

•可以拼接字符串，使用api,三元表达式

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

6.代码：

<template>
  <div>
      <h1>v-text的使用</h1>
      <!-- 使用插值 -->
      <p>还有别的内容哦：{{msg}}</p>
      <!-- 使用v-text -->
      <p v-text="msg"></p>
      <!-- v-text的值与插值一样，可以  拼接字符串，调用api,三元表达式 -->
    <p v-text='"我对你说"+msg'></p>
    <p v-text='"我对你说"+msg.toUpperCase()'></p>
    <p v-text='age>=18?"成年":"未成年"'></p>
      <!-- v-text会完全的替换标签的原始内容 -->
    <p v-text='msg'>我是插值表达式</p>
  </div>
</template>

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

v-html：内容渲染指令

1.介绍：v-html是内容渲染指令，用来辅助开发者渲染 DOM 元素的文本内容

2.作用：完全设置或更新元素的内容，会解析网页结构

3.语法：<标签指令=‘值’></标签>，如

4.与v-text的共同点

•可以设置标签的内容，对标签之间的内容完全替换

•可以拼接字符串，使用api,三元表达式

5.与v-text的区别：v-text会将内容原样输出，而v-html会对内容进行html解析，如果内容是合法的html结构，则会解析出对应的网页结构

6.代码

<template>
  <div>
      <h1>v-html的使用</h1>
      <p>{{msg}}</p>
      <!-- 部分替换 -->
      <p v-text='msg'></p>
      <!-- 全部替换 -->
      <!-- 它会解析html结构 -->
      <!-- 场景：后期解析富文本框所收集的内容 -->
      <p v-html='msg'></p>
  </div>
</template>

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

v-for：列表渲染指令

1.作用：基于源数据多次渲染元素或模板块,说白了，就是对数据进行动态渲染的

2.语法：

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

3.使用方式：你想循环生成什么结构，就在这个结构上添加v-for

4.难点：key****的作用及使用式
1.当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。

2.为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。此时，需要为每项提供一个唯一的 key 属性

3.key 的注意事项

① key 的值只能是字符串或数字类型

② key 的值必须具有唯一性（即：key 的值不能重复）

③ 建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）

④ 使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）

⑤ 建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱

 <!-- 最佳实践：最好每次使用 v-for 的时候，都为循环出来的每一项，动态绑定 key 值（把 Id 当作 Key 值） -->
<li v-for="(user, index) in userlist":key='user.id'>

5.代码

<template>
  <div>
    <h1>这个文件主要说明v-for遍历数组</h1>
    <ul>
    <table width='500'
           border='1'>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>地址</th>
      </tr>

      <tr v-for='(value) in userList'
          :key='value.id'>
        <td>{{value.id}}</td>
        <td>{{value.name}}</td>
        <td>{{value.age}}</td>
        <td>{{value.address?value.address:'未知'}}</td>
      </tr>

      <!-- <tr v-for='(value,index) in userList'>
        <td v-for='(value,key,index) in value'>{{value}}</td>
      </tr> -->

    </table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userList: [
        {
          id: 1,
          name: 'rose',
          age: 18
        },
        {
          id: 2,
          name: 'tom',
          age: 19
        }
      ]
    }
  }
}
</script>

<style>
</style>

v-model：双向绑定指令

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

2.作用：可以实现数据与元素的双向绑定

•数据变化会影响dom元素

•dom元素中的内容变化也会影响数据

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

4.语法：

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

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

6.掌握v-model指令常用的修饰符****

修饰符	作用	示例
.number	自动将用户的输入值转为数值类型	<input v-model.number=“age” />
.trim	自动过滤用户输入的首尾空白字符	<input v-model.trim=“msg” />
.lazy	在“change”时而非“input”时更新	<input v-model.lazy=“msg” />

回忆：

blur：只要失焦就会触发

change：失焦的同时，内容与上次不一样才触发

input：只要内容就会触发

v-on：事件绑定指令

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

•事件类型由v-on后面的参数决定

•在普通元素上时，只能监听原生 DOM 事件

•v-on可以简写为@

2.语法

<template>
  <div>
    <h1>这个文件主要说明v-on的基本使用</h1>
    <!-- 语法：v-on:事件类型='事件处理函数'   v-on:事件类型='语句'
    事件类型：现在就可以认为是内置事件名称
	事件类型就是我们在之前为元素所添加的事件类型如：click，mousedown-->
    <button v-on:click='dothis'>点我啊</button>
    <button @click='dothis'>点我啊-简写</button>
  </div>
</template>

3.理解v-on绑定事件时，处理函数应该在methods中定义

•methods是实例中单独的结构，主要用于定义用户自定义函数

•methods中的this指向当前的组件实例，通过this可以访问组件实例的其它成员

•data中的this指向null，意味着无法进行具体的业务处理

methods: {
    add (name, e) {
      // methods中的this是指向当前的组件实例，通过组件实例可以获取在不同结构中所定义的成员
      // data,methods....只是vue所规范的不同成员的定义的结构，但是都是属于当前组件实例的成员
      console.log(name, e);
    }
  }

4.参数传递

1.可以选择是否传递参数

2.在指定处理函数的时候可以进行参数的传递

3.参数传递的细节

•如果事件处理函数没有手动的传递参数，那么就会默认传递事件源对象

•如果手动的传递了参数，那么默认的事件源对象就不再传递了

•如果还想使用事件源对象，则需要手动的传递 $e v e n t ($ event名称绝对不能改)

• $e v e n t 是 v u e 提供的特殊变量，用来表示原生的事件参数对象 e v e n t 。$ event 可以解决事件参数对象 event 被覆盖的问题

<!-- 不传递参数 -->
    <button v-on:click="dothis">不传递参数</button>
    <!-- 如果手动传递了参数，默认的事件对象就会被用户自定义参数覆盖，如果还需要使用，则必须手动传递$event -->
    <button @click="dothis(20,$event)">传递参数</button>

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

在事件处理函数中调用 event.preventDefault() 或 event.stopPropagation()，或基于某个按钮进行事件的触发，因此，vue 提供了修饰符的概念，主要有两种**(事件修饰符和按键修饰符**）

事件修饰符	说明
.prevent	阻止默认行为（例如：阻止 a 连接的跳转、阻止表单的提交等）
.stop	阻止事件冒泡
.{keyCode \| keyAlias}	特定按键时才触发

示例

  <!-- .prevent:相当于阻止默认行为：preventDefault() -->
    <a href="http://www.baidu.com"
       @click.prevent="nojump">不要跳转到百度</a>

v-bind：属性绑定指令

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

•可以为元素的任意属性进行动态绑定

•只要属性的值是动态变化的，就应该使用v-bind

•v-bind可以简写为 :

2.语法：

<标签  v-bind:属性='值'></标签>，如<img v-bind:src="imgsrc"/> | <img :src="imgsrc"/>

3.在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持 Javascript 表达式的运算

<a :href="'/userdetail?id='.toUpperCase()+(id+1)">查看用户详情</a>

4.细节

•绑定的值如果是变量得先定义好

5.动态的为元素绑定样式

1.对象方式动态绑定样式

•可以根据指定的bool决定是否添加指定的样式

2.数组方式动态绑定样式

•可以同时绑定多个样式，也可以通过bool值决定是否添加指定的样式

 <button @click="fang = !fang">展开与合并</button>
    <!-- <div class="big" :class="{ small: fang }"></div>-->
    <div :class="['big', { small: fang }]"></div>

在这里插入图片描述

3.细节：

•绑定的值如果是变量得先定义好

•数组方式绑定样式的时候，也可以直接使用定义好的样式类名(记得使用引号包含)

4.完整代码

<template>
  <div>
    <h1>v-bind为元素动态绑定样式</h1>
    <button @click="fang = !fang">展开与合并</button>
    <!-- <div class="big" :class="{ small: fang }"></div>-->
    <div :class="['big', { small: fang }]"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fang: false,
    };
  },
};
</script>

<style>
.big {
  width: 500px;
  height: 500px;
  background-color: cyan;
}
.small {
  width: 100px;
}
</style>

v-show：条件渲染指令

1.作用：通过为元素设置display样式实现元素的显示和隐藏

•如果设置的bool值为true,就移除元素的display:none样式

•如果设置的bool值为false,就为元素设置样式display:none

2.语法：

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

3.完整代码

<template>
  <div>
    <h1>这个文件主要说明v-show的使用</h1>
    <h2>它的作用是用于控制元素的显示的隐藏，它是通过为元素设置display样式来实现的</h2>
    <h2>语法： v-show='bool值' 直接赋值bool值，关系运算符 逻辑运算符 </h2>
    <button @click="isshow = !isshow">切换</button>
    <p v-show='isshow'>我到底能不能显示呢</p>
  </div>
</template>

v-if：条件渲染指令

1.作用：根据所指定的表达式的值有条件地渲染元素

•如果设置的bool值为true,就创建元素并渲染

•如果设置的bool值为false,就移除元素

2.语法：

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

  <button @click="flag = !flag">切换</button>
    <p v-if='flag'>我能不能可见</p>

v-if和v-show的总结

1.实现原理不同：

v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；
v-show 指令会动态为元素添加或移除 style=“display: none;” 样式，从而控制元素的显示与隐藏；

2.性能消耗不同，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此：

如果需要非常频繁地切换，则使用 v-show 较好
如果在运行时条件很少改变，则使用 v-if 较好

v-else和v-else-if

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

1.v-if 可以单独使用，或配合 v-else 指令一起使用

2.v-else 指令必须配合 v-if 指令一起使用，否则它将不会被识别

3.v-else-if 指令，顾名思义，充当 v-if 的“else-if 块”，可以连续使用

4.v-else-if 指令必须配合 v-if 指令一起使用，否则它将不会被识别

<template>
  <div>
    <h1>科学计数</h1>
    <input type="number"
           min='0'
           max='100'
           v-model="score">
    <p v-if='score >= 90'>A</p>
    <p v-else-if='score >= 80'>B</p>
    <p v-else-if='score >= 70'>C</p>
    <p v-else-if='score >= 60'>D</p>
    <p v-else>E</p>
  </div>
</template>

以单独使用，或配合 v-else 指令一起使用

2.v-else 指令必须配合 v-if 指令一起使用，否则它将不会被识别

3.v-else-if 指令，顾名思义，充当 v-if 的“else-if 块”，可以连续使用

4.v-else-if 指令必须配合 v-if 指令一起使用，否则它将不会被识别

<template>
  <div>
    <h1>科学计数</h1>
    <input type="number"
           min='0'
           max='100'
           v-model="score">
    <p v-if='score >= 90'>A</p>
    <p v-else-if='score >= 80'>B</p>
    <p v-else-if='score >= 70'>C</p>
    <p v-else-if='score >= 60'>D</p>
    <p v-else>E</p>
  </div>
</template>

龙影城

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中的重点指令

vue中的重点指令指令是什么，指令使用的方式1.在vue中，指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构2.指令 (Directive) 是带有 v- 前缀的特殊属性(attribute)，意味着在使用的时候，指令的使用和属性的设置类似3.指令属性(attribute)的值预期是单个 JavaScript 表达式(数据) (v-for 是例外情况)4.指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM5.语法：<
复制链接

扫一扫