• Vue_指令

    目录

    本质

    指令就是标签的自定义属性(一个指令就是标签的一个自定义属性)；

    作用
    • 相当于给原生的html标签增加一些功能；
    • 替代dom操作，提高开发效率；
    语法
    • 指令名=指令值；
    • 指令都是以v-开头，支持简写；
      • v-on:可以简写为@;
      • v-bind:可以简写为：;
      • v-slot可以简写为#;
    分类
    1.插值表达式

    • 1.作用

      • 将模型中的值(数据)交给视图，并且在模型值改变之后更新核心视图上的内容；

    • 2.语法

      • 写在html标签之间；
      • {{变量名(data中的属性名)}}

    • 3.特点

      • 支持三元运算；
      • 支持对象取值、数组取值
      • 支持二元运算 ： 算术、关系
      • 不支持分支与循环语法（在vue中分支和·循环使用指令）

    • 举例说明

      DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
       
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
head>
<body>
    
    <div id="app">
        <p>{{person.name}}p>
        <p>{{person.age}}p>
        <p>{{person.age>18?'欢迎进入网吧':'未成年人进制入内'}}p>
    div>
    
    <script>
        const mv=new Vue({
            el:'#app',
            // 模型
            data:{
                person:{
                    name:'chaochao',
                    age:'20',
                }
            }
        })
       
    script>
body>
html>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
    2.v-html与v-text
    • 1.作用
      • 将模型中的值(数据)交给视图，并且在模型值改变之后更改视图上的内容；
      • v-text:设置元素的文本 innerText;
      • v-html:设置元素的文本 innerHTML
    • 2.语法
      • v-html=变量名(data中的属性名)
      • 相当于html标签的自定义属性
    v-html与v-text与插值表达式的区别
    • 插值表达式—字符串替换；只是替换局部语法的位置，标签间原有的文本不会覆盖，不会解析html+css;会将html标签按照普通文本进行显示；
    • v-text指令：替换元素的innerText. 标签间的 原有的文本会被覆盖;不会解析html;会将html标签按照普通文本进行显示；
    • 指令v-html:替换元素的 innerHTML. 原有的文本会被覆盖，可以解析内容中的标签，将标签以样式的形式解析出来
    3.v-on

    • 1.作用：给元素绑定事件

    • 2.语法：

      • 标准语法：v-on:事件类型=‘methods中的方法名’
      • 简单语法： @事件类型=‘methods中的方法名’

    • 4.注：事件方法定义在vue实例的mehods对象中；

    • 5.举例说明

      DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
      
       
       <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
       <style>
           .box{
               width: 100px;
               height: 100px;
               border:1px solid red;
           }
       style>
head>
<body>
    
    <div id="app">
       <button @click='btnClick'>点我呀button>
       <div class="box" v-on:mouseenter='boxEnter' @mouseleave='boxLeave'>div>
    div>
    
    <script>
        const mv=new Vue({
            el:'#app',
            // 模型
            data:{
                person:{
                    name:'chaochao',
                    age:'20',
                }
            },
            methods: {
                btnClick(){
                    alert('点我一次288')
                },
                boxEnter(){
                    console.log('移入');
                },
                boxLeave(){
                    console.log('移出');
                }
            },
        })
       
    script>
body>
html>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52
    4.v-bind
    • 1.前提
      • HTML原生的属性无法访问vue实例中的成员(data,methods等)
      • eg:src,href是不能够访问vue实例化对象的成员的；
      1. 若是想让HTML原生的属性访问vue实例中的成员，可以使用v-bind指令进行绑定；
    • 3.语法
      • 标准语法：v-bind:html原生属性名=‘值’
      • 简单语法：:html原生属性名=‘值’
    • 4.v-bind绑定
      • [1]若是字符串，自动变为 数字 或 变量；
      • [2]可以访问vue实例化对象中的成员；
      • [3]添加类可以使用三元运算 或 对象 或 数组；
      • 语法：:class=“{类名1:布尔值,类名2：布尔值}”
        • 注：样式绑定的属性值为一个对象
        • 如果类名中存在-，需要加引号；
          • 原因：js原生中定义属性名：只能是数字，字母，下划线，若多个单词采取驼峰命名所以有-会报错；
          • 字符串不接受任何命名规则，所以加引号不会报错；
            若加了引号vue会自动使用[]解析属性值；
      • 注意点：v-bind指令的属性与js原生的属性可以共存；
        • eg:一个标签中class与:class是可以共存的；
    class与style样式绑定

    class原生一般直接使用字符串添加在class属性中；

    "box1 box2">111
    

    • 1

    若是想去掉可以通过removeAttribute方法移除；
    在vue中，我们可以有以下几种选择
    [1]给class添加一个对象;
    (1)在data中定义几个属性控制多个类的显示与隐藏

      <div :class="{ box1, box2}">111div>

    • 1
    data () {
          return {
            box1: true,
            box2: false
          }
        },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    (2)在data中定义一个对象通过data中的数据动态控制元素的样式，这样比(1)更加直观

    <div :class="divClass">111div>

    • 1
    data() {
   return{
          divClass: {
            box1: true,
            box2: false
          }
         }
      },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    [2]也可给class添加一个数组

    <div :class="[num==1?'box2':'box1','box3']">111div>

    • 1

    [3]给class添加一个三元表达式

    <div :class="num==1?'box2':'box1'">111div>

    • 1

    原生的行内样式书写与内嵌式书写方式相同

    <div style="backgroundColor:aqua;color:red">111div>

    • 1

    而在vue中我们有以下几种选择
    [1]可以传入一个对象

     <div :style="boxStyle">111div>

    • 1
    data () {
          return {
            boxStyle: {
              backgroundColor: 'aqua',
              color: 'red'
            }
          }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    [2]可以传入一个数组,数组的每个元素是一个样式对象

    <div :style="[boxStyle1,boxStyle2]">111div>

    • 1
     data () {
          return {
            boxStyle1: {
              backgroundColor: 'aqua'
            },
            boxStyle2: {
              color: 'red'
            }
          }
        },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    5.v-for

    • 1.作用：渲染列表(渲染数组)

    • 2.语法

      • [1]遍历数组

        
<li v-for='(item index) in arr'>li>

        • 1
        • 2
        
<li v-for='item of arr'>li>

        • 1
        • 2

        [2]遍历对象

        
<li v-for='(val,key,index) in obj'>li>

        • 1
        • 2

      • [3]根据一个字符串进行遍历

         
<li v-for='index of str'>li>

        • 1
        • 2
    6.v-model双向数据绑定
    • 作用： 双向数据绑定
      • 修改表单元素的值，data中的数据自动变化；
        修改data中的数据，表单的值也会自动变化
    • 语法： v-model='data中的值'
    • 注意事项
      • 原生html中–>v-model只能用于表单元素！只能用于表单元素！只能用于表单元素！
      • v-model的值必须要在data中声明
    • 意义
      • 可以快速 操作(获取|设置) 表单的值
    7.v-if与v-show
    v-if

    • 作用

      • 根据条件渲染数据；
        (条件成立就将元素渲染到页面，若条件不成立就不将元素渲染到页面上)

    • 语法

      • v-if=‘布尔值’

        v-else-if=‘布尔值’
        v-else

    - 注：必须以v-if开头，v-else-if,v-else可有可无；

    • 1
    v-show
    • 作用
      • 先将元素渲染在页面上，再根据条件设置元素的display的值；
    • 语法
      • v-show=‘条件(布尔值)’
        • true–将该元素显示
        • false–将该元素隐藏
    v-if与v-show的区别

    • 两者都是控制元素的显示或隐藏，值为boolean类型；

    • 也就是说若boolean值为false,v-if是直接将元素不加载在dom树上， v-show是将元素加载到dom树上，但是将其隐藏；

    • 底层中 v-if是通过display实现的，v-show是通过visiblity实现的！

    • v-if有更高的切换消耗，v-show有更高的初始渲染消耗

    • 使用场景

      • 如果不是频繁切换，则用v-if；如果需要频繁切换，用v-show
    为什么不建议在同一个标签上使用v-for与v-if

    因为v-for比v-if的优先极高，当v-for与v-if在同一个标签上时，会先循环然后再进行if判断，会造成性能浪费；

    8.v-cloak(了解)
    作用：
	设置元素vue渲染之前的样式(一般是隐藏)
语法
	v-cloak
实质
	属性选择器
注意点
	[1]一定要写css样式
	[2]vue会在数据完成渲染之后自动移除这个样式
eg:在渲染数据的时候，有时候网速慢，就会看到渲染成功之前的样式；即插件语法{{msg}}之类的
	没加时数据没有渲染成功的显示：{{msg}}
	加上此指令没有渲染成功的显示：空白
	[v-clock]{
	  display:none;
	}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    9.v-once(了解)
    作用
	让这个元素只是在初始的时候渲染一次；(优化性能)
		即vue只是加载这个元素将数据显示在页面上；
		之后data数据发生/样式发生变化不会重新渲染；
语法
	v-once
应用场景
	点外卖左侧导航栏(页面左侧数据没有变化)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    10.v-pre(了解)
    作用
	让vue不渲染这个元素
语法
	v-pre
应用场景
	博客类的网站
	eg:vue官网(为了让学习的人看到vue语法)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
  • 相关阅读:
    折腾指南: 将光猫改造成你的NAS，WebDAV+网页文件管理器vList5+natmap
    ffmpeg 开发笔记
    链表相关OJ及方法总结
    SurfaceFlinger启动-Android12
    金仓数据库KingbaseES客户端编程接口指南-DCI（6. 附录-DCI错误码）
    详解--计算机存储相关（寄存器、CPU Cache、内存、外存）
    web3去中心化身份可验证凭证
    C++继承关系和复合关系
    软件项目管理 8.3.敏捷项目质量活动
    Mockito单元测试说明
  • 原文地址：https://blog.csdn.net/qq_43260366/article/details/126905134