常见 Vue.js 指令1

最新推荐文章于 2024-01-04 23:23:59 发布

从人到猿

最新推荐文章于 2024-01-04 23:23:59 发布

阅读量457

点赞数

分类专栏： Vue 文章标签：常见 Vue.js 指令1

本文链接：https://blog.csdn.net/qq_39200185/article/details/99880182

版权

Vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

Vue.js 指令

什么是 Vue.js 指令

指令是带有 v- 前缀的特殊属性

Vue.js 指令的用途

它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML属性（attribute）。

Vue.js 指令的书写规范

书写位置：任意 HTML 元素的开始标签内
注意：一个开始标签内可写入多个指令，多个指令间使用空格分隔

小结

指令概念：带有 v- 前缀的特殊属性
指令的用途：给元素添加特殊功能
书写位置：任意 HTML 元素的开始标签内

常见 Vue.js 指令

1. v-model 指令

作用：主要是用于表单上数据的双向绑定
语法：v-model = 变量
注：v-model 指令必须绑定在表单元素上
双向绑定
Vue框架核心的功能就是双向的数据绑定。双向是指：HTML标签数据绑定到 Vue对象，另外反方向数据也是绑定的
使用 v-model 指令来实现双向数据绑定把视图数据与模型数据相互绑定
代码：

<!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>v-model</title>
</head>
<body>
    <div id="demodiv">
      <!--   v-model指令，主要完成双向的绑定，数据的模型发生改变，视图随之发生改变，
        视图的数据改变了，模型的数据也随之改变 -->
        <input type="text" v-model="inputtext">
        <p>{{inputtext}}</p>
    </div>
</body>
</html>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el:"#demodiv",
        data:{
            inputtext:"你的名字"
        }
    })
</script>

双向绑定–原理数据劫持

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的
数据劫持:当我们访问或设置对象的属性的时候，都会触发Object.defineProperty()函数来拦截（劫持），然后在返回(get)或设置(set)对象的属性的值。并且当数据发生改变的时候做出反应。

双向绑定–原理发布者-订阅者模式

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的
发布者-订阅者模式:其定义对象间一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。

2. v-show 指令

作用：控制切换一个元素的显示和隐藏
语法：v-show = 表达式

根据表达式结果的真假，确定是否显示当前元素
true表示显示该元素，false(默认)表示隐藏该元素
元素一直存在只是被动态设置了display：none
代码：

<!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="demodiv">
       <!--  v-show 指定控制元素的显示或者隐藏，true显示，false隐藏，
        v-show使用css的display来控制元素的显示和隐藏 -->  
        <p v-show="true">{{text}}</p>
        <p v-model="ckbool">{{ckbool?"你好":""}}</p>
        <input type="checkbox" v-model="ckbool">{{ckbool?"我被勾选了":"我被取消了"}}
        <h1 v-show="ckbool">控制我的显示</h1>
    </div>
</body>
</html>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el:"#demodiv",
        data:{
            text:"你好",
            ckbool:true
        }
    })
</script>

3. v-on 指令

作用：为 HTML 元素绑定事件监听
语法：v-on：事件名称=‘函数名称()’
简写语法：@事件名称=‘函数名称()’
注：函数定义在 methods 配置项中

<!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>v-on</title>
</head>
<body>
    <div id="demodiv">
        <input type="button" value="点我弹出弹出框" v-on:click="fun()">
    </div>
</body>
</html>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el:"#demodiv",
        data:{
            text:"你好，么么哒"
        },
        methods: {
            fun(){
                //this指向vue的实例
                alert(this.text)
            }
        }
    })
    
</script>

使用 v-show、v-on、v-model 指令的小练习

<!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="demodiv">
        <p @click="fun()">{{text}}</p>
        <input type="text" v-model="text" v-show="bool">
    </div>
</body>

</html>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el:"#demodiv",
        data:{
            text:"hello word",
            bool:false
        },
        methods: {
            fun(){
                this.bool=!this.bool,
                this.text="hello word"
            }
        }
    })
</script>

4. v-for 指令

作用：遍历data中的数据，并在页面中展示
语法：v-for = ‘(item, index) in arr’
item 表示每次遍历得到的元素
index 表示item的索引，可选参数
代码：

<!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>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>

<body>
    <div id="demodiv">
        <!-- v-for 指定用来便利数据    v 就是便利出来的值   i就是便利出来的下标 -->
        <ul>
            <li v-for="(v,i) in arr">{{arr[i]}}</li>
            <li v-for="(v,i) in arr">{{v}}</li>
        </ul>
        
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(v,i) in obj">
                    <td>{{v.name}}</td>
                    <td>{{obj[i].age}}</td>
                </tr>
            </tbody>
        </table>
        
    </div>
</body>

</html>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el: "#demodiv",
        data: {
            arr: [1, 2, 3, 4, 5],
            obj: [
                {
                    name: "haha1",
                    age: 12
                },
                {
                    name: "haha1",
                    age: 12
                },{
                    name: "haha1",
                    age: 12
                },{
                    name: "haha1",
                    age: 12
                },{
                    name: "haha1",
                    age: 12
                }
            ]
        },
    })
</script>

5. v-bind 指令

作用：绑定HTML元素的属性
语法：v-bind:属性名 = ‘表达式’/ 简写：属性名=‘表达式’
绑定一个属性：< img v-bind:src=‘myUrl’ />
*绑定多个属性(不能使用简写)====：< img v-bind=’{src:myUrl, title: msg}’ />*
代码：

<!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>
    <style>
        .red{
            color:red;
        }
    </style>
</head>
<body>
    <div id="demodiv">
        <!-- v-bind可以缩写为: -->
        <a v-bind:class="isRed" :href="ahref">{{text}}</a>
        <div :class="{ red: isRed }"></div>
    </div>
</body>
</html>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el:"#demodiv",
        data:{
            ahref:"http://www.baidu.com",
            text:"百度一下下",
            isRed:"red"
        }
    })
</script>

6. v-if指令

作用：判断是否加载固定的内容
语法：v-if = 表达式
根据表达式结果的真假，确定是否显示当前元素
true表示加载该元素；false表示不加载该元素
元素的显示和隐藏是对Dom元素进行添加和删除
代码：

<!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="demodiv">
        <input type="checkbox" v-model="bool">{{bool?"勾选了":"取消了"}}
        <h1 v-if="bool">{{title}}</h1>
    </div>
</body>
</html>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el:"#demodiv",
        data:{
            bool:true,
            title:"设置我的隐藏和显示"
        }
    })
</script>

v-show与v-if区别

v-if有更高的切换消耗（安全性高）
v-show有更高的初始化的渲染消耗（对安全性无要求选择）

7. v-else 指令

作用：必须配合v-if使用否则无效。当v-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>v-else</title>
</head>
<body>
    <div id="demodiv">
        <input type="checkbox" v-model="bool">
        <p v-if="bool">我是v-if</p>
        <p v-else>我是v-else</p>
    </div>
</body>
</html>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el:"#demodiv",
        data:{
            bool:true
        }
    })
</script>

8. 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>v-else-if</title>
</head>
<body>
    <div id="demodiv">
        <select v-model="text">
            <option value="苹果1">苹果1</option>
            <option value="苹果2">苹果2</option>
            <option value="苹果3">苹果3</option>
            <option value="苹果4">苹果4</option>
            <option value="苹果5">苹果5</option>
            <option value="苹果6">苹果6</option>
        </select>
        <h1 v-if="text=='苹果1'">选择苹果1</h1>
        <h1 v-else-if="text=='苹果2'">选择苹果1</h1>
        <h1>选择苹果1</h1>
        <h1>选择苹果1</h1>
        <h1>选择苹果1</h1>
        <h1>选择苹果1</h1>
        <h1>啥都没选.</h1>
    </div>
</body>
</html>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el:"#demodiv",
        data:{
            text:""
        }
    })
</script>

9. v-text指令和v-html指令

v-text指令

作用：操作网页元素中的纯文本内容。{{}}是他的简写

v-html指令

作用：双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令
语法：< p v-html=“text”>< /p>

代码：

<!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>v-text和v-html</title>
</head>
<body>
    <div id="demodiv">
        <p v-text="text"></p>
        <p v-html="texthtml"></p>
    </div>
</body>
</html>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el:"#demodiv",
        data:{
            text:"你好，Vue",
            texthtml:"<b>我是Vue</b>"
        }
    })
</script>

10. v-once 指令

作用：当数据改变时，插值处的内容不会更新(会影响到该节点上的所有属性)
语法：< p v-once>{{text}}< /p>
代码：

<!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="demodiv">
        <input type="text" v-model="text">
        <p v-once>{{text}}</p>
    </div> 
</body>

</html>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el: "#demodiv",
        data: {
            text:"我是Vue"
        }
    })
</script>

小结

v-show：控制切换一个元素的显示和隐藏
v-on：为 HTML 元素绑定事件监听
v-model：将用户的输入同步到视图上
v-for ：遍历 data 中的数据，并在页面进行数据展示
v-bind：绑定 HTML 元素的属性

案例

<!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>
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <style>
        .red {
            background-color: red;
        }
    </style>
</head>

<body>
    <!-- 1。基本的数据展示使用v-for -->
    <!-- 2.点谁谁变色 -->
    <!-- 2-1需要有一个变量来保存当前的内容是否要变色 需要在数据中声明一个变量来保存当前这个内容的 颜色是否改变 -->
    <!-- 2-2  并且在li中 使用v-bind 动态的绑定class-->
    <!-- 2-3 添加点击事件 并且让程序知道我点的是谁 -->
    <!-- 3.计算总价 可以根据数据的style来完成 -->
    <div id="demodiv">
        <h1>水果价格计算low爆版</h1>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>水果</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(v,i) in obj" v-bind:class="v.style?'red':''" v-on:click="fun(i)">
                    <td>{{v.title}}</td>
                    <td>{{v.pic}}</td>
                </tr>
            </tbody>
        </table>
        <p>共计：{{toto}}元</p>
    </div>
</body>

</html>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el: "#demodiv",
        data: {
            obj: [{
                    title: "苹果",
                    pic: 5,
                    style: false
                },
                {
                    title: "香蕉",
                    pic: 6,
                    style: false
                },
                {
                    title: "菠萝",
                    pic: 4,
                    style: false
                },
                {
                    title: "葡萄",
                    pic: 8,
                    style: false
                },
                {
                    title: "甘蔗",
                    pic: 9,
                    style: false
                },
                {
                    title: "槟榔",
                    pic: 10,
                    style: false
                },
            ],
            toto:0
        },
        methods: {
            fun(i) {
                this.obj[i].style = !this.obj[i].style,
                this.toto = this.obj[i].style?this.toto+this.obj[i].pic:this.toto-this.obj[i].pic;
            }

        }
    })
</script>

从人到猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常见 Vue.js 指令1

Vue.js 指令什么是 Vue.js 指令指令是带有 v- 前缀的特殊属性Vue.js 指令的用途它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML属性（attribute）。Vue.js 指令的书写规范书写位置：任意 HTML 元素的开始标签内注意：一个开始标签内可写入多个指令，多个...
复制链接

扫一扫