Vue 常用指令（上）

2022-11-05 16:53:09 浏览数 (1)

Vue 常用指令

扩展了html标签的功能、大部分的指令的值是js的表达式 取代DOM操作

v-text和 v-html

很像innerText和innerHTML

  • v-text:更新标签中的内容
    • v-text和插值表达式的区别
      • v-text 更新整个标签中的内容
      • 插值表达式: 更新标签中局部的内容
  • v-html:更新标签中的内容/标签
    • 可以渲染内容中的HTML标签
    • 注意:尽量避免使用，容易造成危险 (XSS跨站脚本攻击)
代码语言：javascript复制
 <div id="app">
        <!-- v-text指令的值会替换标签内容 -->
        <p>{{str}}</p>
        <p v-text="str"></p>
        <p v-text="str">我是p标签中的内容</p>
        <p v-text="strhtml">我是p标签中的内容</p>
        <p v-html="str"></p>
        <!-- v-html指令的值(包括标签字符串)会替换掉标签的内容 -->
        <p v-html="strhtml">我是p标签中的内容</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                str: 'abc',
                strhtml: '<span>content</span>'
            }
        });
    </script>

v-if 和 v-show

作用:根据表达式的bool值进行判断是否渲染该元素

代码语言：javascript复制
 <div id="app">
        <!-- 如果isShow的值是true ,就显示p标签 -->
        <p v-if="isShow">我是p标签中的内容</p>
        <p v-show="isShow">我是p标签中的内容</p>
        <!-- 如果标签显示与隐藏切换频繁, 就使用v-show 
            v-show本质是通过修改标签的display值
        -->
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                isShow: false
            }
        });
    </script>

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。 因此，如果需要非常频繁地切换，则使用 v-show 较好； 如果在运行时条件很少改变，则使用 v-if 较好。

v-on

作用:使用 v-on 指令绑定 DOM 事件，并在事件被触发时执行一些 JavaScript 代码。

语法: @事件名.修饰符 = "methods中的方法名"

注意: $event 可以传形参

代码语言：javascript复制
 <div id="app">
        <!-- v-on.xx事件名='当触发xx事件时执行的语句' -->
        <!-- 执行一段js语句:可以使用data中的属性 -->
        <button v-on:click="count  = 1 ">增加 1</button>
        <!-- v-on的简写方法 -->
        <button @click="count  = 1">增加 1</button>
        <!-- 执行一个方法 -->
        <button @click="add">增加 1</button>
        <!-- 执行一个方法、这种写法可以传形参 -->
        <button @click="fn1(count)">执行fn1方法</button>
        <!-- 执行一个方法、这种写法可以传形参,特殊的形参$event -->
        <button @click="fn2($event)">执行fn2方法</button>
        <hr>
        <!-- 和v-for结合使用 -->
        <button @click="fn3(index)" v-for="(item, index) in items">执行fn3方法</button>
        <!-- v-on修饰符 如 once: 只执行一次 -->
        <button @click.once="fn4">只执行一次</button>
​
        <p>上面的按钮被点击了 {{ count }} 次。</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                count: 0,
                items: ['a', 'b', 'c']
            },
            methods: {
                add: function() {
                    this.count  = 1;
                },
                fn1: function(count) {
                    console.log(count);
                    console.log('fn1方法被执行');
                },
                fn2: function(e) {
                    console.log(e);
                    console.log('fn2方法被执行');
                },
                fn3: function(index) {
                    console.log(index);
                    console.log('fn3方法被执行');
                },
                fn4: function() {
                    console.log('fn4方法被执行了');
                }
            }
        });
    </script>

修饰符

  • .once - 只触发一次回调。
  • .prevent - 调用 event.preventDefault()。

简写: @事件名.修饰符 = 'methods中的方法名'

v-for

根据一组数组或对象的选项列表进行渲染。 v-for 指令需要使用 item in items 形式的特殊语法， items 是源数据数组 /对象 当要渲染相似的标签结构时用v-for

代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">
​
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
​
    <body>
        <div id="app">
            <!-- v-for作用:列表渲染,当遇到相似的标签结构时,就用v-for去渲染
        v-for="元素 in 容器(数组和对象)"
        v-for="数组中的元素 in data中的数组名"
        v-for="对象中的属性值 in data中的对象名"
      -->
            <!-- 数组 -->
            <p v-for="item in list">{{item}}</p>
            <hr>
            <p v-for="(item,index) in list">{{item}}----{{index}}</p>
            <!-- (v,i) in 数组
        v:数组中的每个元素
        i:数组中元素的下标
      -->
            <hr>
            <!-- 对象 -->
            <!-- (v,k,i)in 对象
        v:值
        k:键
        i:对象中每对key-value的索引 从0开始
        注意: v,k,i是参数名,见名知意即可!
      -->
            <p v-for="value in per">{{value}}</p>
            <hr>
            <p v-for="(value,key) in per">{{value}}----{{key}}</p>
            <hr>
            <p v-for="(value,key,i) in per">{{value}}----{{key}}--{{i}}</p>
​
        </div>
        <script src="./vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    list: ['a', 'b', 'c'],
                    per: {
                        name: '老王',
                        age: 38,
                        gender: '男'
                    }
                },
                methods: {
​
                }
            })
        </script>
    </body>
​
</html>

注意: 在使用v-for时,要把一个唯一值赋值给:key属性(通常是数组的index或者数据的id)

代码语言：javascript复制
​
 <div id="app">
​
        <!-- v-for 
            key属性: 值通常是一个唯一的标识
            key是一个可选属性
            养成好习惯:建议在写v-for时 设置:key="唯一值"
        -->
        <ul>
            <li v-for="(item,index) in list" :key="index">{{item}}---{{index}}</li>
        </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                list: ['a', 'b', 'c']
            },
            methods: {
​
            }
        });
    </script>

v-bind

作用: 可以绑定标签上的任何属性。

绑定src和id属性
代码语言：javascript复制
  <div id="app">
        <!-- data中的属性值会替换为标签的属性值 -->
        <img v-bind:src="src" />
        <p v-bind:id="idValue">内容</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                src: './logo.png',
                idValue: 'b'
            }
        });
    </script>
绑定class类名

对象语法和数组语法

对象语法

如果isActive为true，则返回的结果为 <div class="active"></div>

代码语言：javascript复制
 .active {
            color: red;
 }
代码语言：javascript复制
 <div id="app">
        <div v-bind:class="{active: isActive}">
            hei
        </div>
        <button @click="changeClassName">点击切换类名</button>
    </div>
代码语言：javascript复制
​
  <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isActive: true
            },
            methods: {
                changeClassName: function() {
                    this.isActive = !this.isActive;
                }
            }
        });
    </script>
数组语法

渲染的结果 <div class="active text-danger"></div>

代码语言：javascript复制
<div v-bind:class="[activeClass, dangerClass]">
    hei
</div>
  <script src="./vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
          activeClass: 'active',
            dangerClass: 'text-danger'
        }
    });
</script>
绑定style

对象语法和数组语法

对象语法

渲染的结果

代码语言：javascript复制
 <div id="app">
        <div v-bind:style="{color: redColor, fontSize: font18   'px'}">
            文本内容
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                redColor: 'red',
                font18: 18
            }
        });
    </script>
数组语法
代码语言：javascript复制
<div v-bind:style="[color, fontSize]">abc</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            color: {
                color: 'red'
            },
            fontSize: {
                'font-size': '18px'
            }
        }
    });
</script>
简化语法
代码语言：javascript复制
<div v-bind:class="{active: isActive}">
</div>
<!-- 可以简化为 :，简化语法更常用 -->
<div :class="{active: isActive}">
</div>
渲染 html 编程算法

0 人点赞