【Vue】Vue指令

目录

概念

作用

分类

内容渲染指令

属性绑定指令

事件绑定指令

条件渲染指令

v-if/v-else-if/v-else多分支渲染 

v-show和v-if的区别 

列表渲染指令

v-for中的key属性 

双向绑定指令 

示例：图片切换

示例：可折叠面板

示例：书架列表

概念

作用在标签上，以v-开头的属性，是vue提供的一种特殊语法

作用

增强标签渲染数据的能力

分类

1. 内容渲染指令：作用类似于插值，把表达式的结果渲染到双标签
2. 属性绑定指令：把表达式的值于标签的属性动态绑定
3. 事件绑定指令：用来于标签进行事件绑定，处理用户交互
4. 条件渲染指令：根据表达式的true或false，决定标签是否展示
5. 列表渲染指令：基于数组循环生成一套列表
6. 双向绑定指令：数据与视图相互影响

内容渲染指令

• v-html="表达式"，会解析标签，类似于innerHtml
• v-text="表达式"，不会解析标签，作用与{{表达式}}一样

使用示例：

<template>
    <p v-html="str"></p>
    <p v-text="str"></p>
</template>

<script setup>
    import { ref } from 'vue'
    const str=ref('<span style="color:red">Hello World</span>')
</script>

效果如下：

属性绑定指令

v-bind用于把vue表达式的值与标签的属性动态绑定。

语法：

v-bind:属性名="表达式"

简写：

：属性名=“表达式” 

代码： 

<template>
    <div title="{{ str }}">hello-1</div>
    <div v-bind:title=" str ">hello-2</div>
</template>

<script setup>
    import { ref } from 'vue'
    const str=ref('paragraph')
</script>

效果：

如下便是使用v-bind绑定标签属性和不使用直接使用插值的区别：

事件绑定指令

v-on可以简写@

作用：与DOM元素进行事件绑定/处理

语法：

第一种：

v-on:事件名=“内联代码”

<template>
<div>
    <p>{{ count }}</p>
    <button v-on:click="count++">+1</button>
</div>
</template>

<script setup>
    import { ref } from 'vue'   
    const count=ref(0)
</script>

第二种：

v-on:事件名=“处理函数”

<template>
<div>
    <p>{{ count }}</p>
    <button v-on:click="increce">+1</button>
</div>
</template>

<script setup>
    import { ref } from 'vue'   
    const count=ref(0)
    const increce = () => {
        count.value++
    }
</script>

第三种：

v-on:事件名=“处理函数（实参列表）”

条件渲染指令

v-show和v-if/v-else-if/v-else

作用：

根据vue表达式值是true还是false，决定某个元素是显示还是隐藏

语法：

v-show="布尔表达式"

v-if="布尔表达式" 

<button v-show="false">+1</button>

v-if/v-else-if/v-else多分支渲染 

    <div v-if="mark >= 85">优秀</div>
    <div v-else-if="mark >= 75">良好</div>
    <div v-else-if="mark >= 60">及格</div>
    <div v-else>不及格</div>

v-show和v-if的区别 

控制元素显示或隐藏的原理不同：

• v-show：是通过控制元素css的display属性控制元素显示或隐藏的
• v-if：是通过创建和插入元素或移除DOM元素控制元素显示或隐藏的

如果频繁的控制元素显示或者隐藏，推荐使用v-show，否则使用v-if

列表渲染指令

v-for作用：基于数组/对象/数字 循环生产列表

语法：

想循环谁，就给谁添加v-for

<li v-for="(值变量，下标变量) in 数组"> </li>  // ()括号可加可不加

使用示例：

<template>
<div>
  <ul>
    <li v-for="num,index in nums">
      {{ num }}=>{{ index }}
    </li>

  </ul>
</div>
</template>

<script setup>
    import { ref } from 'vue'
    const nums=ref([11,22,33,44,55])
</script>

v-for中的key属性 

添加key属性，作用是提高vue再更新列表时的更新性能

语法：

:key="不重复的唯一值"

原理：vue内部尽可能保持DOM的复用 ，不去创建新的或更新DOM，加key且为id，通过key来标明当前元素是否发生了变化，如果key不变，vue直接复用之前的DOM.

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

key的选用：首选id其次下标

如下:

未加key前，删除后，需要重新渲染如下标灰的地方

加key后

双向绑定指令 

v-model

所谓双向，就是数据和视图之间的关系，当数据变了，视图也会变（数据驱动视图的思想），当视图变了，数据也会变化。

作用：

经常用在表单元素上，比如输入框、下拉列表、单选框、复选框、文本框等

用于实现数据和标签value属性的双向绑定，进而可以快速收集表单数据

使用实例：

<template>
  <div class="login-box">
    账户：<input type="text" v-model="loginForm.username" placeholder="Username">
    密码：<input type="password" v-model="loginForm.password" placeholder="Password">
  </div>
</template>

<script setup>
import { reactive } from 'vue'
const loginForm = reactive({
  username: '',
  password: ''
})
</script>

示例：图片切换

<script setup>
  import { ref } from 'vue'
  // 声明图片路径数组
  const imgList = [
    'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-00.gif',
    'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-01.gif',
    'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-02.gif',
    'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-03.gif',
    'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-04.png',
    'https://cxk-1305128831.cos.ap-beijing.myqcloud.com/11-05.png'
  ]
//声明响应式下标，初始值为0
const index = ref(0)
</script>
<template>
  <div>
    <button @click="index--" v-if="index>0">上一页</button>
  </div>
  <img :src="imgList[index]" alt="img" />
  <div>
    <button @click="index++" v-if="index<imgList.length-1">下一页</button>
  </div>
</template>




<style>
#app {
  display: flex;
  width: 500px;
  height: 240px;
}

img {
  width: 240px;
  height: 240px;
}

#app div {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

示例：可折叠面板

<template>
  <h3>可折叠面板</h3>
  <div class="panel">
    <div class="title">
      <h4>自由与爱情</h4>
      <span class="btn" v-on:click="flg=!flg">{{flg?'收起':'展开' }}</span>
    </div>
    <div class="container" v-show="flg">
      <p>生命诚可贵，</p>
      <p>爱情价更高。</p>
      <p>若为自由故，</p>
      <p>两者皆可抛。</p>

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

<script setup>
    import { ref } from 'vue';
    const flg=ref(true);
</script>


<!-- 如果指明了lang="scss",项目运行不起来，需要安装sass模块，命令行执行：npm install sass -g 或者  pnpm add -D sass-embedded -->
<style lang="scss">
  body{
    background: #ddd;
  }
  #app{
    width:400px;
    margin: 20px auto;
    padding: 1em 2em 2em;
    border:4px solid green;
    border-radius: 1em;
    box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
    background: #fff;
    h3{
      text-align: center;
    
    }
  }
  .panel{
    .title{
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #ccc;
      padding:0 1em;
      h4{
        margin: 0;
        line-height: 2;
      }
      .btn{
        cursor: pointer;
      }
    }
    .container{
      border: 1px solid #ccc;
      padding:0 1em;
      
    }
  }
</style>

示例：书架列表

<template>
    <h3>书架</h3>
    <ul>
      <li v-for="item,index in bookList">
        <span>{{ item.name }}</span>
        <span>{{ item.author }}</span>
        <button @click="onDel(index)">删除</button>
      </li>
    </ul>
<div>

</div>
</template>

<script setup>
    import { ref } from 'vue'
    const bookList = ref([
      {id:1,name:'红楼梦',author:'曹雪芹'},
      {id:2,name:'三国演义',author:'罗贯中'},
      {id:3,name:'西游记',author:'吴承恩'},
      {id:4,name:'水浒传',author:'施耐庵'},
    ])

    const onDel = (index) => {
      if(window.confirm('确认删除该书籍吗？')){
        bookList.value.splice(index,1)
      }
    }
</script>

<style>
  #app{
    width: 400px;
    margin: 100px auto;
  }
  ul{
    list-style: none;
  }
  ul li{
    display: flex;
    justify-content: space-around;
    padding:10px 0;
    border-bottom: 1px solid #ccc;
  }
</style>