Vue 学习笔记——指令

最新推荐文章于 2024-07-25 09:51:39 发布

chengqiuming

最新推荐文章于 2024-07-25 09:51:39 发布

阅读量317

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/chengqiuming/article/details/109169358

版权

Vue 专栏收录该内容

161 篇文章 16 订阅

订阅专栏

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

一 v-text、v-html

v-text：显示文本原始内容，不对html元素进行解析

v-html：显示html解析后的内容

1 代码

<!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">
        <!-- 
            {{}}方式在网络慢的时候会存在问题。在数据未加载完成时，页面会显示出原始的{{}}，加载完毕后才显示正确的数据，这个问题称为插值闪烁
            该表达是支持JS语法，可以调用 js 内置函数（必须有返回值） 
            表达式必要有返回值。例如 1+1 ，没有结果的表达式不允许，如let a=1+1; 
            可以直接获取 Vue 实例中定义的数据或函数 
        -->
        {{msg}} {{1+1}} {{hello()}}<br />
        <span v-html="msg"></span>
        <br />
        <span v-text="msg"></span>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "<h1>Hello</h1>",
                link: "http://www.baidu.com"
            },
            methods: {
                hello() {
                    return "World"
                }
            }
        })
    </script>

</body>

</html>

2 效果

在这里插入图片描述

二 v-bind

单向绑定

vue对象中的值变化会影响绑定标签，反之不会影响
缩写

<a v-bind:href="url">可以缩写为<a :href="url">
属性绑定

给html标签的属性绑定

给class，style的值进行绑定： {class名：属性名(boolean)}/{style属性名：属性值}

1 代码

<!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>
    <!-- 给html标签的属性绑定值：用 v-bind，它是单向绑定 -->
    <div id="app">
        <a v-bind:href="link">gogogo</a>
        <!--
            样式的动态变化 
            class,style  {class名：是否加上通过true或false实现}
            text-danger 要么用单引号，要么驼峰命名
            fontSize 要么用单引号，要么驼峰命名
        -->
        <span v-bind:class="{active:isActive,'text-danger':hasError}" :style="{color: color1,fontSize: size}">你好</span>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                link: "http://www.baidu.com",
                isActive: true,
                hasError: true,
                color1: 'red',
                size: '36px'
            }
        })
    </script>
</body>

</html>

2 效果

在这里插入图片描述

三 v-model

双向绑定，绑定的属性值会反过来影响vue对象中的值

1 代码

<!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>
    <!-- 表单项，自定义组件: v-model 双向绑定 -->
    <div id="app">
        精通的语言：
        <input type="checkbox" v-model="language" value="Java"> java<br />
        <input type="checkbox" v-model="language" value="PHP"> PHP<br />
        <input type="checkbox" v-model="language" value="Python"> Python<br />
        <!-- 数组中元素用,号连接用join -->
        选中了 {{language.join(",")}}
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                language: []
            }
        })
    </script>

</body>

</html>

2 效果

在这里插入图片描述

四 v-on

1 监听事件

语法规则v-on:[eventName]

<button v-on:click="num++">点赞</button>

2 事件修饰符

修饰符是由点开头的指令后缀来表示的；

修饰符可以串联

.stop 阻止单击事件继续传播
.prevent 标签本身效果不会执行
.capture 内部元素触发的事件先在此处理，然后才交由内部元素进行处理
.self event.target 是当前元素自身时触发处理函数
.once 点击事件将只会触发一次

3 按键修饰符

使用格式：v-on:keyup.按键名

当点击这些按键时才会触发事件

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

4 代码

<!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">
        <!--事件中直接写js片段-->
        <button v-on:click="num++">点赞</button>
        <!--事件指定一个回调函数，必须是Vue实例中定义的函数-->
        <button @click="cancle">取消</button>
        <!--  -->
        <h1>有{{num}}个赞</h1>

        <!-- 事件修饰符 -->
        <!-- 仅会触发一次点击事件 -->
        <div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello">
            大div
            <!-- 仅会触发小div的click事件，不会传播至大div的click事件 -->
            <div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
                小div <br />
                <!-- 不会触发大小div的click事件，也不会触发超链接 -->
                <a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
            </div>
        </div>

        <!-- 按键修饰符： -->
        <!-- 按up num+2，按down num-2，同时点击和按ctrl num=10 -->
        <input type="text" v-model="num" v-on:keyup.up="num+=2" @keyup.down="num-=2" @click.ctrl="num=10"><br />

    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>

    <script>
        new Vue({
            el: "#app",
            data: {
                num: 1
            },
            methods: {
                cancle() {
                    this.num--;
                },
                hello() {
                    alert("点击了")
                }
            }
        })
    </script>
</body>

</html>

5 效果

在这里插入图片描述

五 v-for

遍历数组：v-for="item in items

若要获取数组下标：v-for="(item,index) in items

遍历对象：

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"

注意：遍历的时候都加上:key来区分不同数据，提高vue渲染效率

v-for="(user,index) in users" :key="user.name"

1 代码

<!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">
        <ul>
            <li v-for="(user,index) in users" :key="user.name" v-if="user.gender == '女'">
                <!-- 1、显示user信息：v-for="item in items" -->
               当前索引：{{index}} ==> {{user.name}}  ==>   {{user.gender}} ==>{{user.age}}

                <!-- 2、获取数组下标：v-for="(item,index) in items" -->
                <!-- 3、遍历对象：
                        v-for="value in object"
                        v-for="(value,key) in object"
                        v-for="(value,key,index) in object"
                -->
                对象信息：
                <span v-for="(v,k,i) in user">{{k}}=={{v}}=={{i}}；</span>
                <!-- 4、遍历的时候都加上:key来区分不同数据，提高vue渲染效率 -->
            </li>
        </ul>
        <ul>
            <li v-for="(num,index) in nums" :key="index">{{num}}=>{{index}}</li>
        </ul>
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>         
        let app = new Vue({
            el: "#app",
            data: {
                users: [{ name: '柳岩', gender: '女', age: 21 },
                { name: '张三', gender: '男', age: 18 },
                { name: '范冰冰', gender: '女', age: 24 },
                { name: '刘亦菲', gender: '女', age: 18 },
                { name: '古力娜扎', gender: '女', age: 25 }],
                nums: [1,2,3,4,4]
            },
        })
    </script>
</body>
</html>

六 v-if 和 v-show

v-if：条件判断。当得到结果为true时，所在的元素才会被渲染。

v-show：当得到结果为true时，所在的元素才会被显示，false时元素依然存在，只是添加了不显示的样式

1 代码

 <!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>
    <!--
        v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。
        v-show，当得到结果为true时，所在的元素才会被显示。
    -->
    <div id="app">
        <button v-on:click="show = !show">点我呀</button>
        <!-- 1、使用v-if显示 -->
        <h1 v-if="show">if=看到我....</h1>
        <!-- 2、使用v-show显示 -->
        <h1 v-show="show">show=看到我</h1>
    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
        
    <script>
        let app = new Vue({
            el: "#app",
            data: {
                show: true
            }
        })
    </script>

</body>
</html>

2 效果

在这里插入图片描述

七 v-else和v-else-if

<!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">
        <button v-on:click="random=Math.random()">点我呀</button>
        <span>{{random}}</span>

        <h1 v-if="random>=0.75">
            看到我啦？！ &gt;= 0.75
        </h1>

        <h1 v-else-if="random>=0.5">
            看到我啦？！ &gt;= 0.5
        </h1>

        <h1 v-else-if="random>=0.2">
            看到我啦？！ &gt;= 0.2
        </h1>

        <h1 v-else>
            看到我啦？！ &lt; 0.2
        </h1>

    </div>

    <script src="../node_modules/vue/dist/vue.js"></script>
        
    <script>         
        let app = new Vue({
            el: "#app",
            data: { random: 1 }
        })     
    </script>
</body>

</html>

2 效果

在这里插入图片描述

chengqiuming

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue 学习笔记——指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。一 v-text、v-htmlv-text：显示文本原始内容，不对html元素进行解析v-html：显示html解析后的内容1 代码<!DOCTYPE html><html lang="en"><head> <met
复制链接

扫一扫

专栏目录