Vue 知识整理—03-指令

Posted 2021-12-08 zhangyan1205

指令：增强元素标签的功能

1.  v-text  &  v-html

相同点：

　　作用：都是替换使用该指令的元素的内容

区别：

　　v-text 是文本输出，显示的格式字符串形式

　　v-html 是 html 格式输出

       注意：尽量避免使用，容易造成危险 (XSS跨站脚本攻击)

   <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>

2.  v-if  &  v-show

相同点：

　　切换元素的显示和隐藏（根据表达式的 bool 值判断是否要渲染）

区别：

　　v-if 是移除 添加

　　v-show 是显示和隐藏  display：none

使用场景:

　　v-if 需要一次渲染的时候

　　v-show 频繁切换的时候使用

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

<div id="app">
  <!-- 作用：条件渲染 -->
  <!-- v-if  通过 移除  添加 一个元素 -->
  <div v-if="flag" class="text-danger">v-if</div>
  <div v-else>v-else</div>

  <!-- v-show 通过 元素的样式 display:none 控制 显示和隐藏 -->
  <div v-show="flag" class="text-success">v-show</div>

  <!--使用场景：v-if 会频繁创建和移除元素  v-show 控制显示和隐藏  -->
</div>
<script>
  var vm = new Vue({
    el: ‘#app‘,
    data: {
      flag: true
    },
    methods: {}
  })
</script>

 

3.  v-on

作用：

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

语法：

　　v-on : 事件名.事件修饰符 = “ fn ( ) ” v-on 可以简写为 @

　　　　说明：fn ( ) 是 methods 中的方法名

 注意：如果需要使用事件对象，固定写法 $ event

事件修饰符：prevent  once 

• . once - 只触发一次回调。

• . prevent - 调用 event.preventDefault()。

p<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>

 

4. v-bind

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

语法：v-bind:属性名称=“数据名称” 简写 v-bind 去掉即可#### 绑定src和id属性

html
  <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>`

css
 .active {
            color: red;
 }


html
 <div id="app">
        <div v-bind:class="{active: isActive}">
            hei
        </div>
        <button @click="changeClassName">点击切换类名</button>
    </div>

js
  <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>`

html
<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

对象语法和数组语法

##### 对象语法

渲染的结果<div style="color: red; font-size: 18px;"></div>

html
 <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>
##### 数组语法

html
<div v-bind:style="[color, fontSize]">abc</div>
<script>
    var vm = new Vue({
        el: ‘#app‘,
        data: {
            color: {
                color: ‘red‘
            },
            fontSize: {
                ‘font-size‘: ‘18px‘
            }
        }
    });
</script>
#### 简化语法

html
<div v-bind:class="{active: isActive}">
</div>
<!-- 可以简化为 :，简化语法更常用 -->
<div :class="{active: isActive}">
</div>

 

5.