vue中的重点指令 v-text v-html v-for v-model v-on v-bind v-show v-if v-else和v-else-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. 如果还想使用事件源对象，则需要手动的传递$event($event名称绝对不能改)
   4. $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="imgsrc"/> | <img :src="imgsrc"/>
在 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 指令一起使用，否则它将不会被识别

语法：