Vue指令

一、指令

1、属性指令  v-bind

语法：      v-bind:属性名=‘变量’  例如：      v-bind:title='t'

注意：     v-bind:属性名=‘变量’ 的普通用法

<p v-bind:title="t" v-bind:owen="'o'">段落</p>
<script>
    new Vue({
        el: '#app',
        data: {
            t: '悬浮提示',
        },
    })
</script>

'

注意：当标签被v-bind绑定，就会被vue控制，值就会变成变量

例如：<p v-bind:class='a'> </p>           此时的a 就是变量，不是值a

注意：标签中class属性被v-bind绑定时，

01、class中绑定的变量：值可以为一个类名‘p1’,也可以是多个类名‘p1  p2’

02、class中绑定的数组：数组中的每一成员都是变量

<p v-bind:class='[pc,cp]'></p>

03、class中绑定的字典：key就是类名，vaule是决定该类名是否起作用

<p v-bind:class='{p1:1,p2:0}'></p>

04、class中绑定的数组和字典：a是变量，值是类名。b是类名，不是变量。c是变量，值为布尔值，决定b类名 是否起作用

<p v-bind:class='[a,{b:c}]'></p>

注意：标签中style属性被v-bind绑定时，

<p v-bind:style='字典类型的变量'></p>

01、绑定的变量：值是一个字典

注意：重点：事件指令与属性指令都可以简写

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>属性指令</title>
    <style>
        .p1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .p2 {
            border-radius: 50%;
        }

        .live {
            background-color: yellowgreen;
        }

    </style>
</head>
<body>
    <div id="app">
        <p class="p1 p2"></p>
        <p v-bind:class="pc" style="color: red; background-color: orange;" v-bind:title="t" v-bind:owen="'o'">段落</p>
        <p v-bind:class="pc1"></p>
        <p v-bind:class="[pc, cp]"></p>
        <p v-bind:class="{p1: 1, p2: 0}"></p>
        <!-- a是变量，值就是类名 | b就是类名，不是变量 | c是变量，值为布尔，决定b类是否起作用 -->
        <p v-bind:class="[a, {b: c}]"></p>
        <hr>
        <!--
        1）v-bind: 可以简写为 :
        2）v-on: 可以简写为 @
        -->
        //这是一个案例

        <button v-bind:class="{live: isLive == 1}" v-on:click="changeLive(1)">1</button>
        <button v-bind:class="{live: isLive == 2}" v-on:click="changeLive(2)">2</button>
        <button :class="{live: isLive == 3}" @click="changeLive(3)">3</button>           // 简写
        <hr>

        <p style="width: 50px; height: 50px; background-color: pink"></p>
        <p v-bind:style="myStyle"></p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            t: '悬浮提示',
            pc: 'p1',
            cp: 'p2',
            pc1: 'p1 p2',
            a: 'A',
            c: true,
            isLive: 1,
            myStyle: {
                width: '50px',
                height: '50px',
                backgroundColor: 'pink',
                borderRadius: '50%'
            }
        },
        methods: {
            changeLive (index) {
                // this就代表当前vue对象，和app变量等价
                // app.isLive = index;
                this.isLive = index;
            }
        }
    })
</script>
</html>

2、表单指令  v-model

语法： v-model='变量'

注意： 1）v-model 绑定的变量 控制的是vaule属性值

            2）v-model要比v-bind:value要对一个监听机制
            3）数据的双向绑定：
                 v-model可以将绑定的变量值映射给表单元素的value
                 v-model还可以将表单元素的新value映射给报道的变量

<body>
    <div id="app">
        <form action="" method="">
<!--            <input name="n1" type="text" :value="v1">-->
<!--            <input name="n2" type="text" :value="v1">-->
            <input name="n1" type="text" v-model="v1">
            <input name="n2" type="text" v-model="v1">
            <p @click="v1 = '点击了'">{{ v1 }}</p>
            <button type="submit">提交</button>
        </form>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            v1: '123'
        }
    })
</script>

 案例

 

 结果：

 

 

3、条件指令  v-show   v-if

语法：v-show='变量'     v-if='变量'

两者的区别：

 v-show  在渲染标签时，采用display:none 渲染标签

 v-if        在渲染标签时，不会渲染在页面上。有家族：v-if /v-else-if/v-else

                v-if是必须的，必须设置条件
                v-else-if可以为0~n个，必须设置条件
                v-else可以为0~1个
               上方分支成立会屏蔽下方所有分支，从上至下依次类推

<body>
    <div id="app">
        <div>
            <p v-show="isShow">show控制显隐</p>
            <p v-if="isShow">if控制显隐</p>
        </div>

        <div>
            <p v-if="0">你是第1个p</p>
            <p v-else-if="0">你是第2个p</p>
            <p v-else>你是第3个p</p>
        </div>

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            isShow: false,
        }
    })
</script>

案例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        body {
            margin: 0
        }
        button {
            width: 60px;
            line-height: 40px;
            float: right;
        }
        /*这是div块级标签*/
        .bGroup:after {
            display: block;
            content: '';
            clear: both;
        }
        /*这是div块级标签*/
        .box {
            /*100vw中的vw表示 view width;*/
            /*         vh表示 view height;*/
            width: 100vw;
            height: 200px;
        }
        /*三个按钮*/
        .red {
            background-color: red;
        }
        .green {
            background-color: green;
        }
        .blue {
            background-color: blue;
        }

        button.active {
            background-color: cyan;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="bGroup">
            <button :class="{active: isShow === 'red'}" @click="isShow = 'red'">红</button>
            <button :class="{active: isShow === 'green'}" @click="isShow = 'green'">绿</button>
            <button :class="{active: isShow === 'blue'}" @click="isShow = 'blue'">蓝</button>
        </div>
        <div>
            <div v-if="isShow === 'red'" class="box red"></div>
            <div v-else-if="isShow === 'green'" class="box green"></div>
            <div v-else class="box blue"></div>
        </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            isShow: 'red'
        }
    })
</script>
</html>
条件指令案例

4、循环指令  v-for

语法：v-for=''ele in obj''    

  1）obj 是被遍历的对象，ele是遍历得到的每一次结果

  2）遍历可迭代对象的首要结果，都是可迭代对象容器中的值，其次还可以遍历得到索引及键等数据
        字符串：v-for="v in str" | v-for="(v, i) in str"
        数组：v-for="v in arr" | v-for="(v, i) in arr"
        对象：v-for="v in obj" | v-for="(v, k) in obj" | v-for="(v, k, i) in obj"

        数字：v-for="v in number"
* 注：v-for遍历要依赖于一个所属标签，该标签及内部所有内容会被遍历复用

<body>
    <div id="app">
        <!-- 遍历数字 -->
        <p>{{ d1 }}</p>
        <p>
            <i v-for="e in d1">【{{ e }}】</i>
        </p>
        <hr>

        <!-- 遍历字符串 -->
        <p>{{ d2 }}</p>
        <p>
            <i v-for="e in d2">【{{ e }}】</i>
        </p>
        <p>
            <i v-for="(e, i) in d2">【{{ i }}{{ e }}】</i>
        </p>
        <hr>

        <!-- 遍历数组 -->
        <p>{{ d3 }}</p>
        <p>
            <i v-for="e in d3">【{{ e }}】</i>
        </p>
        <p>
            <i v-for="(e, i) in d3">【{{ i }}{{ e }}】</i>
        </p>
        <hr>

        <!-- 遍历对象 -->
        <p>{{ d4 }}</p>
        <p>
            <i v-for="e in d4">【{{ e }}】</i>
        </p>
        <p>
            <i v-for="(e, k) in d4">【{{ k }}-{{ e }}】</i>
        </p>
        <p>
            <i v-for="(e, k, i) in d4">【{{ k }}-{{ e }}-{{ i }}】</i>
        </p>
        <hr>

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            d1: 5,
            d2: 'abc',
            d3: [1, 3, 5],
            d4: {
                name: "Bob",
                age: 17.5,
                gender: "男"
            }
        }
    })
</script>

循环案例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>循环案例</title>
    <style>
        .box {
            width: 280px;
            border: 1px solid #eee;
            border-radius: 5px;
            overflow: hidden; /* 隐藏超出父级显示范围外的内容 */
            text-align: center; /* 文本相关的属性大多默认值是inherit */
            float: left;
            margin: 10px;
        }
        .box img {
            width: 100%;
        }

    </style>
</head>
<body>
    <div id="app">
        <!--
        <div class="box">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2457147274,3329097728&fm=26&gp=0.jpg" alt="">
            <p>纯种拆家专家</p>
        </div>
        -->

        <div class="box" v-for="obj in goods">
            <img :src="obj.img" alt="">
            <p>{{ obj.title }}</p>
        </div>

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    /* 伪代码，模拟请求后台数据
    let data = null;

    import jq
    $.ajax({
        url: '',
        type: 'get',
        data: {

        },
        success (response) {
            data = response.data
        },
    });
    */

    // 前台先制作假数据进行测试
    let goods = [
        {
            "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2457147274,3329097728&fm=26&gp=0.jpg",
            "title": "纯种拆家专家"
        },
        {
            "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2457147274,3329097728&fm=26&gp=0.jpg",
            "title": "纯种拆家专家"
        },
        {
            "img": "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2457147274,3329097728&fm=26&gp=0.jpg",
            "title": "纯种拆家专家"
        }
    ];

    new Vue({
        el: '#app',
        data: {
            goods,
        }
    })
</script>
</html>
循环案例

5、斗篷指令  v-cloak 

 作用：防止页面闪烁。

 原理：当vue环境加载后，会将v-cloak属性解析移除，所以内容{{ num }}就会显示出来
           而现在vue已经准备完毕，所以用户会直接看到数值10，而不会看到 页面从{{ num }}闪烁成数值10 

<style>
    [v-cloak] {
        display: none;
    }
</style>
<div id="app" v-cloak>
    <p>{{ num }}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 10
        },
    })
</script>

 

6、文本指令  v-text  v-html

7、事件指令  v-on

8、伪类事件

click: 单击
dblclick：双击
mouseover：悬浮
mouseout：离开
mousedown：按下
mouseup：抬起

<style>
    body {
        /* 不允许文本选中,这种方法有些low，不建议使用 */          
        user-select: none;  
    }
    .d1:hover {
        color: orange;
        /* 鼠标样式 */
        cursor: pointer;
    }
    /* 只有按下采用样式，抬起就没了 */
    .d1:active {
        color: red;
    }
    /* div标签压根不支持 :visited 伪类 */
    .d1:visited {
        color: pink;
    }

    .d2.c1 {
        color: orange;
    }
    .d2.c2 {
        color: red;
    }
    .d2.c3 {
        color: pink;
    }
</style>
<body>
<div id="app">
    <div class="d1">伪类操作</div>   
</div>
</body>

9、事件处理

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>伪类与事件</title>
    <style>
        .d2.c1 {
            color: orange;
        }
        .d2.c2 {
            color: red;
        }
        .d2.c3 {
            color: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <div :class="['d2', c]" @click="hFn('c1')" @mouseover="hFn('c2')" @mousedown="hFn('c3')">事件处理</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            c: '',
        },
        methods: {
            hFn (c) {
                this.c = c
            }
        }
    })
</script>
</html>

10、面试题：todolist

01、前台数据库

 

 

</body>
<script src="https://cn.vuejs.org/js/vue.js"></script>
<script>

    let arr=[1,2,3];
    console.log(arr);
    // 参数：开始索引、操作长度、操作的结果们
     arr.splice(0,1,0);
     // 参数：开始索引、操作长度、操作的结果们为空：表示删除
     arr.splice(1,1);  //表示删除【1,2,3】中的2元素
     console.log(arr);


     let c = [2,3,4];
     localStorage.arr = a;
     console.log(localStorage.[1]);
</script>
<script>
    //前台数据库
    localStorage.name = 'box';
    sessionStorage.name = 'tom';
    console.log(localStorage.name);
    console.log(sessionStorage.name)
      localStorage.clear();
    sessionStorage.nclear();
    // 不足：只能存储字符串，所有对象和数据需要转换成json类型字符串，再进行存储
    let a =[1,2,3];
    localStorage.arr = JSON.stringify(a);
    let b = JSON.parse(localStorage.arr);
    console.log(b);

</script>
</html>

02、留言板案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist</title>


<body>
    <div id="app">
        <form>
            <input type="text" v-model="info">
            <button type="button" @click="sendInfo">留言</button>
        </form>
        <ul>
            <li v-for="info in info_arr">{{info}}</li>
        </ul>

    </div>
</body>
<script src="https://cn.vuejs.org/js/vue.js"></script>
<script>
    new Vue({
    el:'#app',
        data:{
        info:'',
        // info_arr:[],
            // 表示刷新页面，页面上测数据不消失
        info_arr:localStorage.info_arr ? JSON.parse(localStorage.info_arr):[],
        },

        methods:{
        // 将info添加到info_arr。 info_arr是数组，它的 增 push(首增)/unshift（尾增）  删 pop（尾删）/shift（首删）
        sendInfo () {
            if (this.info){
                //留言
                this.info_arr.push(this.info);
                //清空输入框
                this.info='';
                //前台数据库持久化（缓存）
                localStorage.info_arr = JSON.stringify(this.info_arr)
            }

        },
            //删
            deleteInfo(index) {
             this.info_arr.splice(index,1)
            }
        }
    })
</script>
</html>

 

posted @ 2020-02-12 20:14  薛定谔的猫66  阅读(200)  评论(0)    收藏  举报