前端Vue框架 02 斗篷指令：v-cloak, 指令: 属性指令：v-bind, 表单指令：v-model, 条件指令：v-show v-if, 循环指令：v-for Arr操作 前台数据库(localStorage | sessionStorage)

1.斗篷指令（了解）

"""
v-cloak：避免屏幕闪烁
1）属性选择器，会将v-cloak属性所在的标签隐藏
2）当vue环境加载后，会将v-cloak属性解析移除，所以内容{{ num }}就会显示出来
3）而现在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>

2.属性指令

注：所有变量位，都可以用 字符串、数字等常量替换

"""
/** 属性指令
* 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属性(了解)：
*          绑定的变量：值是一个字典
*/
"""

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

<!-- 
a是变量，值就是类名
b就是类名，不是变量
c是变量，值为布尔，决定b类是否起作用
d是变量，值可以为一个类名 'p1' 也可以为多个类名 "p1 p2 ..."
calss="p1 b p2 p3"
-->
<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>

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

案例

<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 v-bind:class="{live: isLive == 3}" v-on:click="changeLive(3)">3</button>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            isLive: 1,
        },
        methods: {
            changeLive (index) {
                // this就代表当前vue对象，和app变量等价
                // app.isLive = index;
                this.isLive = index;
            }
        }
    })
</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>

事件补充

<style>
    body {
        /* 不允许文本选中 */
        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>
<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>
<script>
    new Vue({
        el: '#app',
        data: {
            c: '',
        },
        methods: {
            hFn (c) {
                this.c = c
            }
        }
    })
</script>

表单指令

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

<!-- 两个输入框内容会同时变化 -->
<input name="n1" type="text" v-model="v1">
<input name="n2" type="text" v-model="v1">
<script>
    new Vue({
        el: '#app',
        data: {
            v1: ''
        }
    })
</script>

注意：<button type="submit">提交</button>    <!--button不写默认为submit，会提交刷新页面-->

条件指令

"""
/**
* 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个
*      上方分支成立会屏蔽下方所有分支，从上至下依次类推
*/
"""

<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>
<script>
    new Vue({
        el: '#app',
        data: {
            isShow: false,
        }
    })
</script>

案例

<style>
    body {
        margin: 0
    }
    button {
        width: 60px;
        line-height: 40px;
        float: right;
    }
    .bGroup:after {　　　/*消除悬浮带来的塌陷，.bGroup名字可以随意起*/　
        display: block;
        content: '';
        clear: both;
    }
    .box {
        /* 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>

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

<script>
    new Vue({
        el: '#app',
        data: {
            isShow: 'red'
        }
    })
</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遍历要依赖于一个所属标签，该标签及内部所有内容会被遍历复用
*/
"""

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>循环指令</title>
</head>
<body>
    <div id="app">
        <!-- 遍历数字
        5
        【1】【2】【3】【4】【5】
        -->
        <p>{{ d1 }}</p>
        <i v-for="e in d1">【{{ e }}】</i>
        <hr>

        <!-- 遍历字符串
        abc
        【a】【b】【c】
        【0a】【1b】【2c】
        -->
        <p>{{ d2 }}</p>
        <i v-for="e in d2">【{{ e }}】</i>
        <i v-for="(e, i) in d2">【{{ i }}{{ e }}】</i>
        <hr>

        <!-- 遍历数组
        [ 1, 3, 5 ]
        【1】【3】【5】
        【01】【13】【25】
        -->
        <p>{{ d3 }}</p>
        <i v-for="e in d3">【{{ e }}】</i>
        <i v-for="(e, i) in d3">【{{ i }}{{ e }}】</i>
        <hr>

        <!-- 遍历对象
        { "name": "Bob", "age": 17.5, "gender": "男" }
        【Bob】【17.5】【男】
        【name-Bob】【age-17.5】【gender-男】
        【name-Bob-0】【age-17.5-1】【gender-男-2】
        -->
        <p>{{ d4 }}</p>
        <i v-for="e in d4">【{{ e }}】</i>
        <i v-for="(e, k) in d4">【{{ k }}-{{ e }}】</i>
        <i v-for="(e, k, i) in d4">【{{ k }}-{{ e }}-{{ i }}】</i>
        <hr>

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

商品循环案例

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

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

<script>
    let goods = [
        {
            "img": "https://***1.jpg",
            "title": "纯种拆家专家1"
        },
        {
            "img": "https://***2.jpg",
            "title": "纯种拆家专家2"
        },
    ];
    
    new Vue({
        el: '#app',
        data: {
            goods,
        }
    })
</script>

准备知识

"""
6、数组操作：unshift、shift、push、pop、splice(begin_index, count, args)
function fn (...args) {}    可变长参数

7、前端数据库
    localStorage 永久存储
    sessionStorage 生命周期同所属页面标签
    存：localStorage.key = value
    取：localStorage.key
    清：localStorage.clear() | localStorage.removeItem(key)
"""

可以在调试页面中查看

面试题：todolist

js的Array操作

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

前台数据库

"""
// 存
// 持久化化存储，永远保存
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);
"""

案例：留言板

<style>
    li:hover {
        color: red;
        cursor: pointer;
    }
</style>

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

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

小结

"""
1、v-cloak斗篷指令
2、属性指令
    v-bind:title="变量"
    :class="变量" | :class="[变量1, ..., 变量n]"  |  :class="{类名: 布尔变量}"
    :style="字典变量"
3、事件：@click @dblclick @mouseover|out|down|up
    鼠标单击、双击、悬浮、移开、按下、抬起
4、表单指令：
    v-model绑定变量控制value属性，可以实现双向绑定
5、条件指令：
    v-show | v-if
    v-if | v-else-if | v-else
6、循环指令：
    字符串：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"
    
7、Array操作
    arr.push(ele)  arr.unshift(ele)
    arr.pop()  arr.shift()
    arr.splice(begin_index, count, args)

8、前台数据库
    localStorage | sessionStorage
    1）操作就类似于obj，直接 .key 语法访问 value
    2）localStorage永久存储
    3）sessionStorage生命周期同所属页面标签
    
"""

6道小练习

"""
1、有以下代码（绑定属性title）
<div style="90px;height:90px;background:red"></div>
点击该标签，就会有一个变量记录点击的次数，且会在该标签被悬浮是用title属性提示用户【当前一共被点击了几下】
----
<div style="90px;height:90px;background:red" @click="num += 1" :title="'当前一共被点击了' + num + '下'"></div>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 0
        }
    })
</script>
----

2、有一下代码（绑定属性class，点击事件改变）
<style>
    .l {100px;height:50px;background:red;}
    .r {50px;height:50px;background:blue;}
    .c {50px;height:50px;background:cyan;border-radius:50%}
</style>
<button>长方形</button>
<button>正方形</button>
<button>圆形</button>
<div></div>
初始div是显示长方形，点击不同按钮，可以改变div的形状

----
<style>
    .l {100px;height:50px;background:red;}
    .r {50px;height:50px;background:blue;}
    .c {50px;height:50px;background:cyan;border-radius:50%}
</style>
<button @click="myClass = 'l'">长方形</button>
<button @click="myClass = 'r'">正方形</button>
<button @click="myClass = 'c'">圆形</button>
<div :class="myClass"></div>
<script>
    new Vue({
        el: '#app',
        data: {
            myClass: 'l'
        }
    })
</script>
----

3、能不能在第二题基础上实现，在div自身 按下变正方形，抬起变圆形，移开重新变为长方形（鼠标事件）
---
<div :class="myClass" @mousedown="myClass = 'r'" @mouseup="myClass = 'c'" @mouseout="myClass = 'l'"></div>
---

4、有下方代码（表单指令，条件指令）
<input type="text" />
<div style="100px;height:50px;background:red;"></div>
<div style="50px;height:50px;background:blue;"></div>
<div style="50px;height:50px;background:cyan;border-radius:50%"></div>
输入框输入l显示长方形，输入r显示正方形，输入c显示圆形，没内容或是其他内容，不显示任何形状
----
<input type="text" v-model="isShow"/>
<div v-if="isShow === 'l'" style="100px;height:50px;background:red;"></div>
<div v-else-if="isShow === 'r'" style="50px;height:50px;background:blue;"></div>
<div v-else-if="isShow === 'c'" style="50px;height:50px;background:cyan;border-radius:50%"></div>
<script>
    new Vue({
        el: '#app',
        data: {
            isShow: '',
        }
    })
</script>
----

5、有以下数据（循环指令）
books = [
    { name: '西游记', price: 66, author: 'Bob'},
    { name: '东游记', price: 77, author: 'Tom'},
    { name: '西厢记', price: 88, author: 'Jerry'},
]
用表格table渲染以上数据
----
<table border="1">
    <tr>
        <th>书名</th> <th>价格</th> <th>作者</th>
    </tr>
    <tr v-for="book in books">
        <td v-for="v in book">{{ v }}</td>
    </tr>
</table>
<script>
    books = [
        { name: '西游记', price: 66, author: 'Bob'},
        { name: '东游记', price: 77, author: 'Tom'},
        { name: '西厢记', price: 88, author: 'Jerry'},
    ]
    new Vue({
        el: '#app',
        data: {
            books,
        }
    })
</script>
----

6、选做题：在第五题基础上，
    i) 可以在表格每条数据后加一个 删除 按钮，可以删除当前书籍
    ii) 可以增加三个输入框，一个提交框，完成新增书籍
    iii) 刷新页面数据不会重置
----
<div id="app">
    <form>
        书名：<input type="text" v-model="name">
        价格：<input type="text" v-model="price">
        作者：<input type="text" v-model="author">
        <button type="button" @click="addBook">新增</button>
    </form>
    <table border="1">
        <tr>
            <th>书名</th>
            <th>价格</th>
            <th>作者</th>
            <th>删除</th>
        </tr>
        <tr v-for="book in books">
            <td v-for="v in book">{{ v }}</td>
            <td @click="deleteBook">删除</td>
        </tr>
    </table>

</div>
</body>
<script src="js/vue.js"></script>
<script>
    books = [
        {name: '西游记', price: 66, author: 'Bob'},
        {name: '东游记', price: 77, author: 'Tom'},
        {name: '西厢记', price: 88, author: 'Jerry'},
    ];
    new Vue({
        el: '#app',
        data: {
            books: localStorage.books ? JSON.parse(localStorage.books) : books,
            name: '',
            price: '',
            author: '',
        },
        methods: {
            deleteBook(index) {
                this.books.splice(index, 1);
                localStorage.books = JSON.stringify(this.books);
            },
            addBook() {
                // 安全处理可以自己写的更详细
                if (this.name && this.price && this.author) {
                    this.books.push({
                        name: this.name,
                        price: this.price,
                        author: this.author
                    });
                    localStorage.books = JSON.stringify(this.books);
                }
            }
        }
    })
</script>
"""