VUE入门-VUE初识者的福音

最新推荐文章于 2024-06-21 08:47:39 发布

原创最新推荐文章于 2024-06-21 08:47:39 发布 · 435 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

2 篇文章

订阅专栏

本文深入讲解Vue.js中的各种指令，包括v-model、v-show、v-on、v-for、v-bind等，探讨它们的作用、语法及应用场景，通过示例代码帮助读者理解如何在实际项目中运用这些指令。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是VUE

本文所有小demo建议CTRL C V 看一看，联系一下

是 Vue.js 指令

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

v-bind
v-bind:s
v-bind:k
v-cloak
v-else
v-else-if
v-for
v-html
v-if
v-model

Vue.js 指令的用途

它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML属性（attribute）。
Vue.js 指令的书写规范
书写位置：任意 HTML 元素的开始标签内

注意：一个开始标签内可写入多个指令，多个指令间使用空格分隔
小结
指令概念：带有 v- 前缀的特殊属性
指令的用途：给元素添加特殊功能
书写位置：任意 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>
    <!-- 1.引用vue文件 -->
    <script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <!-- 2.创建视图（就是用户可以看见的界面） -->
        <div id="demodiv">
                <p>{{name}}</p>   <!--{{}}模板语法  双花括号赋值大法 -->
                <p>{{age+num}}</p>
                <p>{{arr[3]}}</p>
                <p>{{obj.name}}</p>
                <p>{{arr}}</p>
                <p>{{bool?"你好":"你坏"}}</p>
        </div>
       <script>
       
    //    3.创建视图模型VM层(实例化vue实例 )---》把视图和模型关联起来
        new Vue({
                el:"#demodiv",//在视图模型中关联视图层
                data:{   //创建模型
                    name:"xixi",
                    age:18,
                    num:1,
                    arr:["aa","bb","cc","ddd"],
                    obj:{
                        name:"小明"
                    },
                    bool:false
                }
        })
        // 总结：在传统js中  如果想把一个数据放到页面中  必须要通过dom操作来进行
        // 但是在vue（mvvm）框架中  不需要有任何的dom操作  一切的数据绑定操作全部交给vue--》对于开发者来说
        // 我们更需要的是关注逻辑 而不是重复进行dom
       </script>
        
</body>
</html>

常见指令
常见 Vue.js 指令

1、v-model 指令

作用：主要是用于表单上数据的双向绑定
语法：v-model = 变量
注：v-model 指令必须绑定在表单元素上

①、双向绑定

Vue框架核心的功能就是双向的数据绑定。双向是指：HTML标签数据绑定到 Vue对象，另外反方向数据也是绑定的
使用 v-model 指令来实现双向数据绑定把视图数据与模型数据相互绑定

②、双向绑定–原理数据劫持

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

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

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

2、v-show指令

作用：控制切换一个元素的显示和隐藏
语法：v-show = 表达式
根据表达式结果的真假，确定是否显示当前元素
true表示显示该元素；false(默认)表示隐藏该元素
元素一直存在只是被动态设置了display：none
v-show 示例

<!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>
    <script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
        <div id="demodiv">
                <!-- v-show  指定控制元素的显示或者隐藏   true显示  false隐藏  v-show使用用css的display 来控制元素的显示和隐藏-->
                <p v-show="false">{{text}} </p>

                <!-- 有一个复选框当我勾选的时候显示 下面的内容  反之取消 -->
                <input type="checkbox" v-model="ckbool"/>{{ckbool?"我被勾选了":"我被取消了"}}
                <h1 v-show="ckbool">控制我的显示</h1>
        </div>
        <script>
            new Vue({
                el:"#demodiv",
                data:{
                   text:"你好",
                   ckbool:true
                }
            })
        </script>
</body>
</html>

3、v-on 指令

作用：为 HTML 元素绑定事件监听
语法：v-on：事件名称=“函数名称()”

v-on:click="fun()"

简写语法：@事件名称=“函数名称()”

@click="fun()"

注：函数定义在 methods 配置项中
v-on 示例

<!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>
    <script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
        <div id="demodiv">
            <!-- v-on 指令  用来绑定事件设置事件监听   -->
            <!-- <button v-on:click="fun()">点我弹出弹出框</button> -->
            <button @click="fun()">点我弹出弹出框</button>
        </div>
        <script>
            new Vue({
                el:"#demodiv",
                data:{
                  text:"你好么么哒"
                },
                // 创建函数   mothods 来进行创建  并且必须和data与el同级
                methods:{
                    fun(){
                        // this指向的vue实例  
                        alert(this.text)
                    }
                }
            })
        </script>
</body>
</html>

小练习（提示：使用 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">
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="divBox">
        <p v-on:click="fun()">{{text}}</p>
        <input type="text" v-model="text" v-show="inputBool?true:false">
    </div>
    <script>
        new Vue({
            el:"#divBox",
            data:{
                text:"idiot",
                inputBool:false
            },
            methods:{
                fun(){
                    this.inputBool=!this.inputBool;   
                    this.text = "idiot"
                }
            }
        })
    </script>
</body>
</html>

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

<!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>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <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>
        <script>
            new Vue({
                el:"#demodiv",
                data:{
                    arr:["aaa","bbb","ccc","ddd"],
                    obj:[
                        {name:"xixix1",age:181},
                        {name:"xixix2",age:182},
                        {name:"xixix3",age:183},
                        {name:"xixix4",age:184},
                        {name:"xixix5",age:185},
                        {name:"xixix6",age:186},
                        {name:"xixix7",age:187}
                    ]
                }
            })
        </script>
</body>
</html>

5、v-bind 指令
作用：绑定 HTML 元素的属性
语法：v-bind:属性名 = ‘表达式’/ 简写：属性名=‘表达式’
绑定一个属性：

<img v-bind:src=‘myUrl’ />

绑定多个属性(不能使用简写)：

<img v-bind=‘{src:myUrl, title: msg}’ />

v-bind示例

<!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>
    <script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
        <div id="demodiv">
            <!-- 错误写法 -->
            <!-- <a href="{{ahref}}">{{atext}}</a>
            <a href="ahref">{{atext}}</a> -->
            <!-- 正确写法  v-bind指令完成  如果想把变量当成属性值
            ！！@@##￥￥￥必须必须必须要用！！@@##￥ -->
            <!-- 传统写法: -->
            <!-- <a v-bind:href="ahref">{{atext}}</a> -->
            <!-- 简写 推荐： -->
            <a :href="ahref">{{atext}}</a>
        </div>
        <script>
            new Vue({
                el:"#demodiv",
                data:{
                    ahref:"http://www.baidu.com",
                    atext:"点我去百度"
                }
            })
        </script>
</body>
</html>

小练习二（练习购物车总价计算：提示：使用 v-for、v-on、
v-bind 指令完成练习）

<!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>
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <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>
            <ul>
                    <!-- v-bind:class="v.style?'red':''" 如果 当前控制颜色的变量为false 那么什么类都不加 true 添加一个red的类 -->
                <li v-for="(v,i) in obj" v-bind:class="v.style?'red':''" v-on:click="fun(i)">{{v.title}}---------{{obj[i].num}}</li>
            </ul>
            <p>共计： {{zong}} 元</p>
        </div>
        <script>
        
            new Vue({
                el:"#demodiv",
                data:{
                 obj:[
                     {title:"苹果",num:5,style:false},
                     {title:"西瓜",num:1.5,style:false},
                     {title:"葡萄",num:3.5,style:false},
                     {title:"榴莲",num:19.9,style:false},
                     {title:"芒果",num:8,style:false}
                 ],
                 zong:0
                },
                methods:{
                 fun(i){
                    //  console.log(i);
                    // 在函数中获取data 模型数据的时候必须用this.xxx
                        //  但等号 把右边的值交给左边
                    this.obj[i].style=!this.obj[i].style
                    // 计算价格
                    this.zong = this.obj[i].style?this.zong=this.zong + this.obj[i].num:this.zong - this.obj[i].num;

                 }
                }
            })
        </script>
</body>
</html>

6、v-if指令

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

---------注意：v-if 与 v-show的区别--------
(相同点)
1. 两者都是控制元素的显示和隐藏
(区别)
1. v-if 在每次切换显示的时候是对dom进行新增和删除安全性高但是在频繁的需要切换显示的时候消耗比较大初始化显示的时候消耗低
2. v-show 在每次切换显示的时候时使用css来进行显示和隐藏安全性低但是在频繁切换显示的时候消耗小初始化显示的时候消耗高。

##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>Document</title>
    <script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
        <div id="demodiv">
          <!-- v-if 用户的角度 就是对元素进行显示和隐藏 -->
           

          <input type="checkbox" v-model="bool"/>{{bool?"勾选了":"取消了"}}
          <h1 v-if="bool">设置我的显示和隐藏</h1>
        </div>
        <script>
        
            new Vue({
                el:"#demodiv",
                data:{
                    bool:true
                },
        
                methods:{
                  
                }
            })
        </script>
</body>
</html>

7、v-else 指令

作用：必须配合 v-if 使用否则无效。当v-if条件不成立的时候执行
v-else示例

<!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>
    <script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
        <div id="demodiv">
            <!-- v-else 必须必须必须必须 要和v-if配合使用 不能单独使用
                当v-if显示的时候 v-else 不显示
                当v-if不显示的时候 v-else 显示
            】-->
            <input type="checkbox" v-model="bool">
            <p v-if="bool">我是v-if</p>
            <p v-else>我是v-else</p>
        </div>
        <script>
        
            new Vue({
                el:"#demodiv",
                data:{
                    bool:true
                },
        
                methods:{
                  
                }
            })
        </script>
</body>
</html>

8、v-else-if

作用：当有一项成立时执行。
v-slse-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>
    <script src="node_modules/vue/dist/vue.min.js"></script>
</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'">您选择了苹果2</h1>
                    <h1 v-else-if="text=='苹果3'">您选择了苹果3</h1>
                    <h1 v-else-if="text=='苹果4'">您选择了苹果4</h1>
                    <h1 v-else-if="text=='苹果5'">您选择了苹果5</h1>
                    <h1 v-else-if="text=='苹果6'">您选择了苹果6</h1>
                    <h1 v-else>您什么都没有选</h1>
        </div>
        <script>
            new Vue({
                el:"#demodiv",
                data:{
                   text:""
                },
                methods:{
                }
            })
        </script>
</body>
</html>

9、v-text 指令

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

10、v-html 指令

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

v-text和v-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">
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="box">
        <!-- v-text 向页面绑定文本   {{}} -->

        <!-- 如果用户网速非常慢的时候 但是v-text不会   可以解决数据的闪烁 -->
        <p v-text="text"></p>
        <p v-html="html"></p>
    </div>
    <script>
        new Vue({
            el:"#box",
            data:{
                text:"你好哈哈哈",
                html:"<h1>你好我是一级标签</h1>"
            }
        })
    </script>    
</body>
</html>

11、v-once 指令

作用：当数据改变时，插值处的内容不会更新(会影响到该节点上的所有属性)
语法：

<!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>
    <script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
        <div id="demodiv">
            <!-- v-once  一次性插值   （数据一旦设置了就不能被修改） -->

            <p v-once>{{text}}</p>
            <input type="text" v-model="text">
            <p>{{text}}</p>  

            <!-- p标签的是可以修改的 -->
        </div>
        <script>
        
            new Vue({
                el:"#demodiv",
                data:{
                   text:"你好么么哒",
                   texthtml:"<em>我是html</em>"
                },
        
                methods:{
                  
                }
            })
        </script>
</body>
</html>