vue-指令（菜鸟教程）

最新推荐文章于 2024-08-04 12:47:40 发布

nanling0220

最新推荐文章于 2024-08-04 12:47:40 发布

阅读量307

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/nanling0220/article/details/105624736

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

指令

表达式的值除了可以出现内容中，也可以使用在其它位置，比如：属性。但是不能使用 {{}} 语法，而是需要 指令

在 vue 中，指令是一个带有 v- 前缀的属性，与普通属性不一样的地方在于，指令的值是引号括起来的 表达式，不同的指令有不同的作用，vue 内置了一些常用的指令

指令新手指引：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
    <style>
        /* 编译结束时，失效  */
        /* [v-cloak]{
            font-size: 22px;
            color: tomato;
        } */
        
        
    </style>
</head>
<body>
    <!-- 
        指令：内容输出(text)，循环，逻辑属性绑定，事件
        指定都得带v-在家指令名称 = 表达式(而不是普通的表达式)
     -->
    <div id="app">
        <!-- 表达式 -->
        <!-- {{x}} -->
        <h1>Hello,{{title}}</h1>
        <!-- 内容输出 -->
        <h1 v-text="title"></h1>
        <!--重点： 普通HTML插入-不会作为Vue模板进行编译 -->
        <p v-html  = "content"></p>
        <!-- cloak 优点：不需要表达式  它里面对应的是css样式-->
        <p v-cloak>{{content}}</p> 
    </div>
</body>
</html>
<script>
   let app= new Vue({
        el:"#app",
        data:{
            myclass:"dd", 
            x:1,
            y:2,
            title:"EGM",
            content:"<style>body{background:red}</style>",
        }
    });
</script>

v-show / v-if 如何使用？


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- <div v-show={{islogin}}>这是一个屁</div> -->
        <div v-show = "islogin">这是一个屁/<div>
        <hr/>
        <!-- 假设登陆成功 -->
        <!-- 注意事项：v-if和v-else以及v-else-if 之间必须是连接的 中间不能出现其他元素 -->
        <div v-if="islogin">欢迎</div>
        <div v-else>请登录</div>
    </div>
</body>
</html>
<script>
    /*
        v-show:改变的只有该元素的display样式
               适用于： 数据的改变比较频繁
        v-if:改变该元素的结构（渲染或者删除）
            适用于：逻辑？
    */ 
    let app =new Vue({
        // el:document.quertSelector("div");
        el:"#app",
        data:{
            islogin:true
        }
    })
</script>

指令中的循环：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <!-- 指令中的循环
        v-for  和in 在这里使用没有任何去区别；
    -->
    <div id="app">
        <ul>
            <!-- users  指令，目标 -->
            <!-- v-for  小缺点： -->
            <li v-for ="user of users" :key ="user.id">
                <input type="checkbox">
                {{user.id}} {{user.name}}
            </li>
           
        </ul>
        <!-- 常用 -->
        <div v-for = "(val,name,index)in object">
            <span>索引值：{{index}}</span>
            <span> 属性名:{namel}},值：{{val}}</span>
        </div>
    </div>
</body>
</html>
<script>
    // 模板 => vdom => html
    // {
    //     li :"1"
    //     li :"2"
    //     li :"3"
    // }
    let app = new Vue({
        el:"#app",
        data:{
            // 数据
            users:[
                {id:1,name:"猪八戒"},
                {id:2,name:"猪戒"},
                {id:3,name:"八戒"},
                {id:4,name:"猪猪"},
            ],
            object:{
                x:"a",
                y:"b",
                z:"c"
            }
        }

    });
    


	
    /*
    v-指令名称：参数= "指令的值"
    简写： 
        ：=> v-bind
    
    */
    let app = new Vue({
        el:"#app",
        data:{
            myclass:"box",
            Id:"gaga"
        }
    });
</script>

数组及对象写法（代码演示）：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-bind -->
        <div :style="style1"></div>
        <!-- 数组写法
            :style 获取的是具体的样式
            :class 获取的是类名
        -->
        <div :style="[style1,style2]"></div>
        <!-- 对象写法 -->
        <!-- <div :class="{'box1':new_box,'box2':two_box},"></div> -->
    </div>
</body>
</html>
<script>
   
    let app = new Vue({
        el:"#app",
        data:{
            style1:{
                width:'100px',
                hright:'200px',
                background:'red'
            },
            style2:{
                // width:'300px',
                // height:'100px',
                border:"1px solid green"
            },
            box:

        }
        
    });
</script>

单项数据流 / 双向数据流（代码演示）：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="msg">
        <div>{{msg}}</div>
        <!-- 单项绑定 -->
        <div>{{msg2}}</div>
    </div>
</body>
</html>
<script>
    /*
        单项数据流
        v-bind: 单项数据绑定。 数据到视图
        v-model:双向数据绑定： 数据=> 视图
        不是所有的标签（组件）都支持 v-model
        // 默认：交互元素（input textarea,）
        不是所有的属性都支持 v-model
        v-model  只能绑定一个制定好的属性
        input：value
        textarea:value
        select:selected

        非交互：div p img 等静态类标签（不需要统计信息的）
    
    */ 
    let app = new Vue({
        el:"#app",
        data:{
            msg:"123",
            msg2:"abc",
        }
    });
</script>