指令

1、斗篷指令

v-cloak：避免屏幕闪烁

在css中使用 [v-cloak] {display: none}，将v-cloak属性隐藏
当vue环境加载后，会将v-cloak属性解析移除，所以内容 {{ num }} 就显示出来
所以用户就不会看见闪烁页面{{ num }}了

<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、属性指令

语法：v-bind：属性名="变量"，可以简写成：属性名="变量"

针对不同属性，使用方式的不同：

自定义以及title这些直接赋值的，使用方式（t是变量，o是常量）

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

对于class属性（重点）

绑定的是变量，值可以是一个类名，或者也可以是多个类名
绑定的是数组，数组的每一个成员都是变量， [p1, p2] p1与p2都是变量
绑定的是字典，key是类名不是一个变量，value是决定该类名是否起作用的一个布尔变量，{k: v} k是类名，v是变量控制k是否起作用的布尔变量

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

对于style属性(了解)

绑定的是字典变量，值是一个字典，字典的key是驼峰体或者字符串的形式，value是字符串

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

案例

v-bind: 可以简写成：

v-on: 可以简写成@

    <style>
        .live {
            background-color: aqua;
        }
    </style>
<!--    控制点击每一个按钮会进行选中状态-->
    <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>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        // 默认选中1
        data: {
            isLive: 1
        },
        // 给点击事件赋值
        methods:{
            changeLive(index){
                // 将isLive替换成选中的事件
                this.isLive=index
            }
        }

    })
</script>

点击不同按钮进行选中状态

3、事件补充

css中有伪类，鼠标点击与悬浮或访问过后的状态可以设置

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

在vue中我们可以自己控制

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

    <style>
        /*不允许选中文本*/
        body {
            user-select: none;
        }
        .d2.c1 {
            color: red;
        }
        .d2.c2 {
            color: orange;
        }
        .d2.c3 {
            color: blue;
        }
    </style>
</head>
<body>
<div id="app">
<!--    属性选择器，添加类，绑定鼠标事件-->
           <!--
        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>

4、表单指令

语法：v-model="变量"

v-model绑定的变量控制的是value属性值
v-model要比v-bind：value多了一个监听机制
数据的双向绑定：v-model可以将绑定的变量值映射给value，v-model还可以将表单元素新的value映射给变量，即v-model="变量"，变量变化，其他v-model等于的相同的也会变化

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

5、条件指令

语法：v-show="变量" 或者 v-if="变量"

两者的区别：

v-show在隐藏的标签时，采用的是通过css中display: none进行隐藏，不安全，但是速度更快
v-if在隐藏标签时，不会渲染在页面上，更加的安全，通常采用这种方式

v-if有家族：v-if | v-else-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>
        <p v-if="0">第一个p</p>
        <p v-else-if="0">第二个p</p>
        <p v-else>第三个p</p>
    </div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            isShow: 0
        }

    })
</script>

案例

通过点击不同的按钮显示不同的内容

    <style>
        body {
            margin: 0;
        }
        button {
            width: 50px;
            line-height: 40px;
            float: right;
        }
        /*清除浮动*/
        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }
        /*设置内容样式*/
        /*vw: 浏览器展示宽度，100vw包括滚动条的宽度*/
        /*100%：不包括滚动条的*/
        .box {
            width: 100vw;
            height: 200px;
        }
        .red {
            background-color: red;
        }
        .yellow {
            background-color: yellow;
        }
        .blue {
            background-color: blue;
        }
        /*鼠标点击后按钮颜色*/
        button.active {
            background-color: aqua;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="clearfix">
<!--        按钮绑定点击事件，事件名有了就不用重新再methods写了-->
        <button :class="{active: isShow === 'red'}" @click="isShow = 'red'">红</button>
        <button :class="{active: isShow === 'yellow'}" @click="isShow = 'yellow'">黄</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==='yellow'" class="box yellow"></div>
        <div v-else class="box blue"></div>
    </div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            isShow: 'blue'
        },
    })
</script>

点击不同按钮显示不同内容

6、循环指令

语法：v-for="ele in obj" obj是被遍历循环的对象，ele是遍历得到的每一次结果

for循环遍历的都是可迭代对象，还可以遍历出索引和键，数字，字符串，数组，对象

遍历数字时，得到的结果是从1开始到那个数字结束
字符串：v-for="v in str" 或者 v-for="(v, i) in str" v是循环得到的每一个值，i 是对应的索引
数组：v-for="v in arr" 或者 v-for="(v, i) in arr" v是循环得到的每一个值，i 是对应的索引
对象（字典）：v-for="v in obj" 或者 v-for="(v, k) in arr" 或者 v-for="(v, k i) in obj" v是循环得到的每一个值，k 是键， i 是对应的索引

v-for遍历要依赖于一个所属标签，该标签内部所有的内容都会被遍历复用

<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: 8px;
            overflow: hidden; /* 隐藏超出父级范围外的内容*/
            float: left;
            margin: 10px;
            text-align: center; /* 文本相关的属性大多默认值都是inherit*/
        }
        .box img {
            width: 100%;
        }
    </style>
</head>
<body>
<div id="app">
<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': '222.jpg',
            'title': '葫芦娃'
        },
        {
            'img': '111.jpg',
            'title': '小孩'
        },
        {
            'img': '333.jpg',
            'title': '笑脸'
        }
    ];
    new Vue({
        el: '#app',
        data: {
            goods
        }

    })
</script>
</html>

循环展示商品及信息

7、todolist（留言板）

1、补充Array数组增删插操作

尾增：arr.push(ele)
首增：arr.unshift(ele)
尾删：arr.pop()
首删：arr.shift()
增删改插入都可以用的：arr.splice(起始索引，操作位数，操作设置的值)

2、前台数据库

1、存（存起来都是key:value形式）

永久保存：localStorage.name = "Bob";

临时保存，页面关闭即丢失：sessionStorage.name = 'Tom';

2、取

直接点name取

localStorage.name

sessionStorage.name

3、清空

如果对某一个值清空直接重新赋值为空：localStorage.name=""

全部清空用：localStorage.clear() sessionStorage.clear()

4、短板：只能存储字符串，所有对象和数组需要转换成json类型字符串进行存和取

    let a=[1,2,3];
    localStorage.arr = JSON.stringify(a);  // 序列化
    let b = JSON.parse(localStorage.arr);  // 反序列化
    console.log(b)

3、案例（留言板）

    <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 (){
                // 如果input框有值才添加
                if (this.info){
                    // 向数组中添加值，尾增push，首增unshift
                    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>

todolist

posted @ 2020-02-13 09:32 Mr沈阅读(340) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Mr.沈的技术栈

指令

指令