vue指令实例成员

一、vue指令

　　1、属性指令（v-bind）

"""
/** 属性指令
* 1）语法：v-bind:属性名="变量"   
* 2）针对不同属性，使用方式稍微有一丢丢区别
*      i）自定义属性以及title这些，直接赋值的，使用方式如下（t是变量，'o'是常量）
*          <p v-bind:title="t" v-bind:owen="'o'">段落</p>
*      ii）class属性(重点):
*          绑定的变量：值可以为一个类名 "p1"，也可以为多个类名 "p1 p2"
*          绑定的数组：数组的每一个成员都是一个变量
*          绑定的字典：key就是类名，value是绝对该类名是否起作用
*      iii）style属性(了解)：
*          绑定的变量：值是一个字典
*/
"""

　　- 自定义属性

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>属性指令</title>

</head>
<body>
    <div id="app">
        <!--
         1）标签的属性没有被v-bind绑定，就是同原来一样，基本使用
         2）当被v-bind绑定，就会被vue控制，'值就会变为变量'
         换而言之：如果一个属性要被vue控制，填写变量，就要用v-bind处理
         -->
        <p v-bind:title="t" v-bind:owen="'o'">段落</p>

</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            t:'悬浮提示',
        },
    })
</script>
</html>

　　- class 属性（掌握）

<p v-bind:class="[a, {b: c}]" v-bind:class="d"></p> 
<script>
    let app = new Vue({
        el: '#app',
        data: {
            a: 'p1',
            c: true,
            d: 'p2 p3',
        },
    })
</script>

　　- style属性（了解）

<p v-bind:style="myStyle"></p>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            myStyle: {
                width: '50px',
                height: '50px',
                backgroundColor: 'pink',
                borderRadius: '50%'
            }
        },
    })
</script>

　　- 补充（事件指令与属性指令可简写）

<!--
1）v-bind: 可以简写为 :
2）v-on: 可以简写为 @
-->

<button v-bind:class="{live: isLive == 1}" v-on:click="changeLive(1)">1</button>

/*简写*/
<button :class="{live: isLive == 2}" @click="changeLive(2)">2</button>
<button :class="{live: isLive == 3}" @click="changeLive(3)">3</button>

　　- 伪类与事件的补充

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>伪类与事件</title>
    <style>
        body {
           /*不允许文本选中*/
            user-select: none;
        }

        .d1:hover {
            color: orange;
            /*鼠标样式*/
            cursor:pointer;
        }

        /*只有按下采用样式，抬起就没有*/
        .d1:active {
            color: red;
        }

        /*div标签压根不支持：visited伪类*/
        .d1:visited {
            color: deeppink;
        }

        .d2.c1 {
            color: orange;
        }
        .d2.c2 {
            color: red;
        }
        .d2.c3 {
            color: pink ;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="d1">伪类操作</div>
        <br><br><br>
        <!--
        click:单击
        dblclick:双击
        mouseover:悬浮
        mouseout：离开
        mousedown：按下
        mouseup：抬起
        -->
        <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>

- 案列

<!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">
        <!--
         1）标签的属性没有被v-bind绑定，就是同原来一样，基本使用
         2）当被v-bind绑定，就会被vue控制，'值就会变为变量'
         换而言之：如果一个属性要被vue控制，填写变量，就要用v-bind处理
         -->
        <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: deeppink"></p>
        <p v-bind:style="myStyle"></p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    /**属性指令
     * 1）语法：v-bind：属性名='变量'
     * 2）针对不同属性，使用方式稍微有点区别
     *  1、自定义属性以及title这些，直接赋值的，使用方法如下（t是变量，'o'是常量）
     *  2、class属性（重点）：
     *      绑定的变量：值可以作为一个类名“p1”，也可以为多个类名“p1 p2”
     *      绑定的数组：数组的每一个成员都是一个变量
     *      绑定的字典：key就是类名，value是决定该类名是否起作用
     *  3、style属性（了解）
     *      绑定的变量：值是一个字典
     *
     */
    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.isLive = index;
                this.isLive = index;
            }
        }
    })
</script>
</html>

属性指令

　　2、表单指令（v-model）

v-model的作用：实现表单数据的双向绑定

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>表单指令</title>

</head>
<body>
    <div id="app">
        <form action="">
<!--            <input type="text" name="n1" :value="v1">-->
<!--            <input type="text" name="n2" :value="v1">-->

            <!--
            表单指令
            1）语法：v-model="变量"
            2）v-model绑定的变量控制的其实就是value属性
            3）v-model要比v-bind：value要多一个监听机制
            4）数据的双向绑定：
                v-model可以将绑定的变量值映射给表单元素value
                v-model还可以将表单元素的新value映射给model的变量
            -->

            <input type="text" name="n1" v-model="v1">
            <!--form表单有name属性的才可以往后端提交-->
            <input type="text" name="n2" v-model="v1">
            <p @click="v1 = '点击了' ">{{v1}}</p>

            <button type="submit">提交</button> <!-- button默认是submit提交要想变成普通按钮的指定type=‘button’ -->
        </form>
    </div>
</body>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            v1:'123'
        }
    })
</script>
</html>

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

"""
/**
* 1）语法：v-show="变量"  |  v-if="变量"
* 2）两者的区别：
*      v-show在隐藏标签时，采用display:none渲染标签，标签通过css隐藏
*      v-if在隐藏标签时，不会渲染在页面上
*
* 3）v-if有家族：v-if | v-else-if | v-else
*      v-if是必须的，必须设置条件
*      v-else-if可以为0~n个，必须设置条件
*      v-else可以为0~1个
*      上方分支成立会屏蔽下方所有分支，从上至下依次类推
*/
"""

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>条件指令</title>


</head>
<body>
    <div id="app">
        <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>
</body>
<script src="js/vue.js"></script>
<script>
    /**
     * 1)语法：v-show='变量' |v-if='变量'
     * 2）两者的区别：
     *      v-show在隐藏标签时，采用display:none渲染标签，标签通过css隐藏
     *      v-if在隐藏标签时，不会渲染在页面上想当于直接注释掉
     *
     * 3）v-if有家族：v-if|v-else-if|v-else
     *      v-if 是必须要有的，必须设置条件
     *      v-else-if可为0~n个，必须设置条件
     *      v-else可以为0~1个
     *      这几者之间只会同时走一个条件
     */
    new Vue({
        el:'#app',
        data: {
            isShow:false,
        }
    })
</script>
</html>

- 案列

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>条件指令案列</title>
    <style>
        body {
            margin: 0;
        }

        .box {
            /*vw:view width   vh:view height*/
            width: 100vw;
            height: 200px;
        }

        button {
            width: 60px;
            line-height: 40px;
            float: right;
        }

        /*清除浮动*/
        .bGroup:after {
            display: block;
            content: '';
            clear: both;
        }

        .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）

"""
/**
* 1）语法：v-for="ele in obj"  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遍历要依赖于一个所属标签，该标签及内部所有内容会被遍历复用
*/
"""

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>循环指令</title>

</head>
<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>
        <!--获取key-->
        <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>
    /**
     * 1）语法：v-for="ele in obj"  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遍历要依赖于一个所属标签，该标签及内部所有内容会被遍历复用
     */
    new Vue({
        el:'#app',
        data:{
            d1:5,
            d2:'abc',
            d3:[1, 3, 5],
            d4:{
                name:"Alen",
                age:18,
                gender:"male"
            }
        }
    })
</script>
</html>

- 案例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 280px;
            border: 1px solid #eeeeee;
            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="http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1582114638&t=298677bf66a0bfe8f549ec8e788c3b03" 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 goods = [
        {
            "img":"http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1582114638&t=298677bf66a0bfe8f549ec8e788c3b03",
            "title":"美图"
        },
         {
            "img":"http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1582114638&t=298677bf66a0bfe8f549ec8e788c3b03",
            "title":"美图"
        },
         {
            "img":"http://t8.baidu.com/it/u=2247852322,986532796&fm=79&app=86&size=h300&n=0&g=4n&f=jpeg?sec=1582114638&t=298677bf66a0bfe8f549ec8e788c3b03",
            "title":"美图"
        },
    ];
    new Vue({
        el:'#app',
        data:{
            goods,//goods:goods简写为goods
        }
    })
</script>
</html>

循环指令案列

　　5、斗篷指令（v-cloak）

斗篷指令的作用就是为了解决页面闪烁的问题，从而给用户更好的体验感

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>斗篷指令</title>
    <style>
        /**
        1)属性选择器，会将v-cloak属性所在的标签隐藏
        2）当vue环境加载后，会将v-cloak属性解析移除，所以内容{{num}},所以内容{{num}}就会显示出来
        3)而现在vue已经准备完毕，所以用户会直接看到数值10，而不会看到页面{{num}}闪烁成数值10
         */
        [v-cloak] { /*属性选择器用[属性名]表示*/
            display: none;
        }

    </style>
</head>
<body>
    <div id="app" v-cloak>
        <p v-on:click="fn">{{num}}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    //v-cloak:避免屏幕闪烁
    new Vue({
        el: '#app',
        data:{
            num:10
        },
        methods:{
            fn () {
                if (this.num <= 0) {
                    return false;
                }
                this.num -= 2
            }
        }
    })
</script>
</html>

　　6、面试题（todolist）

- js的Array操作

"""
尾增：arr.push(ele)  
首增：arr.unshift(ele)
尾删：arr.pop()
首删：arr.shift()
增删改插：arr.splice(begin_index, count, args)
"""


<script>
    //splice案例
    let arr = [1, 2, 3];
    console.log(arr);
    //splice 的参数：开始的索引， 操作的长度， 操作的结果们， 即splice函数可以完成增删改插所有功能
    arr.splice(1,2); //即从索引1开始，影响2个，没有即为删除
    console.log(arr)

</script>

- 前端数据库

"""
// 存
// 持久化化存储，永远保存
localStorage.name = "Bob";
// 持久化化存储，生命周期同所属标签(页面)，页面关闭，重新打开就会丢失
sessionStorage.name = "Tom";

// 取
console.log(localStorage.name);
console.log(sessionStorage.name);

// 清空
localStorage.clear();
sessionStorage.clear();

// 短板：只能存储字符串，所有对象和数组需要转换为json类型字符串，再进行存储
let a = [1, 2, 3];
localStorage.arr = JSON.stringify(a);
let b = JSON.parse(localStorage.arr);
console.log(b);
"""

- 案例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>todolist</title>
    <style>
        li:hover {
            color: red;
            cursor: pointer;
        }
    </style>

</head>
<body>
    <div id="app">
        <form>
            <input type="text" v-model="info">
            <button type="button" @click="sendInfo">留言</button>
        </form>

        <ul>
            <li v-for="(info, index) in info_arr" @click="deleteInfo(index)">{{info}}</li>
        </ul>
    </div>
</body>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            info:'',
            //三元运算符：条件 ？ 成立（结果1）：不成立（结果2）

            info_arr: localStorage.info_arr ? JSON.parse(localStorage.info_arr) : [],
        },
        methods: {
            sendInfo() {
                //完成留言：将info添加到info_arr
                //增：push（尾增） unshift（首增） | 删 pop（尾删） shift（首删）
                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);
                //同步给数据库
                localStorage.info_arr = JSON.stringify(this.info_arr)

            }
        }
    })
</script>

<script>
    //splice案例
    let arr = [1, 2, 3];
    console.log(arr);
    //splice 的参数：开始的索引， 操作的长度， 操作的结果们， 即splice函数可以完成增删改插所有功能
    arr.splice(1,2); //即从索引1开始，影响2个，没有即为删除
    console.log(arr)

</script>

<script>
    //前端的数据库

    //存
    //持久化存储，永久保存
    //localStorage.name = "Bob"
    //持久化存储，生命周期同所属标签（页面），页面关闭，重新打开就会丢失
    //sessionStorage.name = "Tom"


    //取
    //console.log(localStorage.name);
    //console.log(sessionStorage)


    //清空
    //localStorage.clear();
    //sessionStorage.cleat();

    //短板：只能存储字符串，所有对象和数组需要转换为json类型字符串，再进行存储
    let a = [1, 2, 3];
    localStorage.arr = JSON.stringify(a);
    let b = JSON.parse(localStorage.arr);
    console.log(b);
</script>

</html>

todolist

posted @ 2020-02-12 22:10 alen_zhan 阅读(208) 评论(0) 编辑收藏举报

刷新页面返回顶部

vue指令实例成员

一、vue指令

1、属性指令（v-bind）

- 自定义属性

- class 属性（掌握）

- style属性（了解）

- 补充（事件指令与属性指令可简写）

- 伪类与事件的补充

- 案列

2、表单指令（v-model）

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

- 案列

4、循环指令（v-for）

- 案例

5、斗篷指令（v-cloak）

6、面试题（todolist）

- js的Array操作

- 前端数据库

- 案例

公告

　　1、属性指令（v-bind）

　　- 自定义属性

　　- class 属性（掌握）

　　- style属性（了解）

　　- 补充（事件指令与属性指令可简写）

　　- 伪类与事件的补充

　　2、表单指令（v-model）

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

　　4、循环指令（v-for）

　　5、斗篷指令（v-cloak）

　　6、面试题（todolist）