三.vue基础-指令大全

╰+哭是因爲堅強的太久メ 2023-06-18 12:59 14阅读 0赞

### 文章目录 ###

*   *  vue基础-指令大全
     *   *  一. v-text 更新textContent
         *  二.v-html 解析HTML标签
         *  三.v-pre 跳过编译过程
         *  四.v-cloak 关联实例结束编译
         *  五.v-once 渲染一次
         *  六.v-if v-else-if v-else判断语句
         *  七.v-show条件展示元素
         *  八.v-for根据遍历数组来进行渲染
         *  九.v-bind 动态的绑定一个或者多个特性
         *  十.v-model 双向数据绑定
         *  十一.v-on 监听dom事件

## vue基础-指令大全 ##

### 一. v-text 更新textContent ###

v-text主要用来更新textContent,可以等同于JS的text属性.

### 二.v-html 解析HTML标签 ###

1.  \{ \{\}\}mustache模板语句只能将绑定的数据源以文本字符串的格式进行处理,因此如果需要将数据源按照HTML5结构处理,此时可以使用v-html.
2.  v-html=“data” : 该指令可以将绑定的数据源data中的HTML标签按照HTML5的网页结构进行解析

//HTML
     <div id="app" v-html="msg"></div>
    //js
    <script>
        let vm = new Vue({ 
            el: '#app',
            data: { 
                msg: "<p>我是p标签</p>"
            }
        })
    </script>

### 三.v-pre 跳过编译过程 ###

1.  不需要表达式
2.  v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。
    
        `{ { this will not be compiled }}`

### 四.v-cloak 关联实例结束编译 ###

1.  不需要表达式
2.  这个指令保持在元素上直到关联实例结束编译. 和css规则如\[v-cloak\]\{ display: none \}一起使用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕.

//css
    [v-cloak] { 
      display: none;
    }
    
    //html
    <div id="app">
        <h3 v-cloak>{ { introduce}}</h3>
    </div>
    
    //js
    <script>
        let timer = setTimeout(function(){ 
            let vm = new Vue({ 
                el: "#app",
                data:{ 
                    introduce: '我叫张三',
                }
            })
        },5000)
    </script>

### 五.v-once 渲染一次 ###

1.  不需要表达式
2.  v-once关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。

<span v-once>This will never change:{ { msg}}</span>  //单个元素
    <div v-once>//有子元素
        <h1>comment</h1>
        <p>{ { msg}}</p>
    </div>
    <my-component v-once:comment="msg"></my-component>  //组件
    <ul>
        <li v-for="i in list">{ { i}}</li>
    </ul>

例子中,msg,list即使产生改变, 也不会重新渲染.

### 六.v-if v-else-if v-else判断语句 ###

1.  v-if v-else-if v-else:是一个分支结构,可以根据当前指令对应添加的返回结果,决定数据的加载方式,如果返回结果为真,则加载该条件对应的标签结构,否则该结构不加载
2.  可以链式的使用多次. 可以更加方便地实现switch语句
3.  优点:可以根据条件灵活决定加载某一部分代码, 有效降低代码的冗余度
4.  缺点:如果对应的条件判断频繁发生变化, 此时会增加浏览器的系统开销, 影响网页的DOM渲染
5.  该结构适用于条件变化频率不是很快的场景
    
        //HTML
        <div id='app'>
            <div v-if="type==='A'">
                A
            </div>
            <div v-else-if="type==='B'">
                B
            </div>
            <div v-else-if="type==='C'">
                C
            </div>
            <div v-else>
                Not A,B,C
            </div>
        </div>
        //js
        let vm = new Vue({ 
                    el: '#app',
                    data: { 
                        type:A,
                    }
                })

### 七.v-show条件展示元素 ###

1.  v-show:也是根据条件展示元素. 和v-if不同的是, 如果v-if的值是false, 则这个元素被销毁, 不再dom中. 但是v-show的元素会始终被渲染并保存在dom中, 它只是简单的切换css的dispaly属性.
2.  注意: v-if有更高的切换开销  
    v-show有更高的初始渲染开销。  
    因此，如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好
    
        <p v-show="state == c">c</p>

### 八.v-for根据遍历数组来进行渲染 ###

1.  v-for 循环结构, 后面跟的循环表达式
2.  `v-for =" item in items"` `items`用来存储每一次从`itable`变量中提取的一个数据源. `item`为别名.
3.  基于源数据多次渲染元素或模板块. 此指令之值, 必须使用特定语法 `alias in expression`, 为当前遍历的元素提供别名.
    
        <div v-for="item in items">
          { {  item.text }}
        </div>
4.  另外也可以为数组索引指定别名(或者用于对象的键)
    
        <div v-for="(item, index) in items"></div>
        <div v-for="(val, key) in object"></div>
        <div v-for="(val, key, index) in object"></div>
5.  注意: v-for在构建过程中一般需要通过绑定一个特殊的key来区分不同的模块, 原因是vue在进行dom渲染的过程中为了提高页面的渲染速度, 默认使用就近复制的元素, 此时新增加的元素可能出现和上面元素数据相同的情况, 为了避免使用就近复制, 每一次都能重新创建, 此时需要给每一个创建的dom结构绑定一个唯一的key
    
        <div id="app">
            <div class="contact" v-for="item in contacts" :key="item.id">
                <h3>姓名:{
             {item.name}}</h3>
                <form action="">
                    <input type="radio" value="1" :checked="item.sex == '1' ">
                    <span>1</span>
                    <input type="radio" value="2" :checked="item.sex == '2' ">
                    <span>2</span>
                </form>
                <div class="age">{
             {item.age}}</div>
            </div>
        </div>

let vm = new Vue({ 
            el: '#app',
            data: { 
                contacts:[
                    { id: 1, name: '张三', sex: '1', age: 30},
                    { id: 2, name: '李四', sex: '1', age: 30},
                    { id: 3, name: '王二', sex: '1', age: 30},
                ]
            }
        })

### 九.v-bind 动态的绑定一个或者多个特性 ###

1.  v-bind用来动态的绑定一个或者多个特性. 没有参数时, 可以绑定到一个包含键值对的对象.常用于动态绑定class和style,以及href等.
2.  带参指令语法: 指令:参数=数值
3.  简写为一个冒号":"

let vm = new Vue({ 
            el: '#app',
            data: { 
                className:'active',
                msg:'hello world',
            }
        })

1.  示例
    
        
        <img v-bind:src="imageSrc">
        
        
        <img :src="imageSrc">
        
        
        <img :src="'/path/to/images/' + fileName">
        
        
        <div :class="{ red: isRed }"></div>
        <div :class="[classA, classB]"></div>
        <div :class="[classA, { classB: isB, classC: isC }]">
        
        
        <div :style="{ fontSize: size + 'px' }"></div>
        <div :style="[styleObjectA, styleObjectB]"></div>
        
        
        <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
        
        
        <div v-bind:text-content.prop="text"></div>
        
        
        <my-component :prop="someThing"></my-component>
        
        
        <child-component v-bind="$props"></child-component>
        
        
        <svg><a :xlink:special="foo"></a></svg>
2.  `.camel` 修饰符允许在使用 DOM 模板时将 `v-bind` 属性名称驼峰化，例如 SVG 的 `viewBox` 属性：
    
        <svg :view-box.camel="viewBox"></svg>
    
    在使用字符串模板或通过 `vue-loader`/`vueify` 编译时，无需使用 `.camel`。

### 十.v-model 双向数据绑定 ###

1.  v-model:用来实现form表单控件和model层数据源之间的**双向数据绑定**, 即view层数据的改变会影响Model层数据源, 同时model层数据源的变换也会影响view层数据的展示.
    
        <div id="app">
            <input type="text" name="introduce" v-model:value="introduce">
            {
             {introduce}}
        </div>
    
        let vm = new Vue({ 
                el: "#app",
                data:{ 
                    introduce: '我叫张三',
                }
            })
2.  v-model修饰符

*  .lazy 默认情况下, v-mode同步输入框的值和数据. 可以通过这个修饰符, 转变在change事件在同步.
    
        <input v-model.lazy="msg">
 *  .number 自动将用户的输入值转化为数值类型
    
        <input v-model.number="msg">
 *  .trim 自动过滤用户输入的首尾空格
    
        <input v-model.trim="msg">

### 十一.v-on 监听dom事件 ###

1.  v-on主要用来监听dom事件, 以便执行一些代码块. 表达式可以是一个方法名.
2.  简写为: @
    
        //html
        <div id="app">
            <button @click="consoleLog"></button>
        </div>
        //js
        <script>
            var app = new Vue({ 
                el: '#app',
                methods:{ 
                    consoleLog:function (event) { 
                        console.log(1)
                    }
                }
            })
        </script>
3.  事件修饰符

*  `.stop` 阻止事件继续传播
 *  `.prevent` 事件不再重载页面
 *  `.capture` 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
 *  `.self` 只当在 event.target 是当前元素自身时触发处理函数
 *  `.once` 事件将只会触发一次
 *  `.passive` 告诉浏览器你不想阻止事件的默认行为

<a v-on:click.stop="doThis"></a>
    
    
    <form v-on:submit.prevent="onSubmit"></form>
    
    
    <a v-on:click.stop.prevent="doThat"></a>
    
    
    <form v-on:submit.prevent></form>
    
    
    
    <div v-on:click.capture="doThis">...</div>
    
    
    
    <div v-on:click.self="doThat">...</div>
    
    
    <a v-on:click.once="doThis"></a>
    
    
    
    
    <div v-on:scroll.passive="onScroll">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用`v-on:click.prevent.self`会**阻止所有的点击**，而 `v-on:click.self.prevent` 只会阻止对元素自身的点击。