Vue 指令

Vue 文本指令

1 v-* 是vue指令，会被vue解析，v-text="num"中的num是变量（指令是有限的，不可以自定义）
2 v-text是原样输出渲染内容，渲染控制的标签自身内容会被替换掉（
123
会被num替换）
3 v-html可以解析渲染html语法的内容

4）补充

<!-- js基本数据类型：字符串、数字、布尔、undefined --><p v-text="'abc' + num + 10"><p v-text="'abc' + num + 10"></p>
<p>{{ 'abc' + num + 10 }}</p>

<body>
    <div id="app">
        <p>{{ num | add(300) }}</p>

        <p v-text="num"></p>
        <p v-text="num">123</p>

        <p v-text="info"></p>
        <p v-html="info"></p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 100,
            info: '<i style="color: red">info内容</i>'
        },
        filters: {
            add: function (a, b) {
                return a + b;
            }
        }
    })
</script>

总结：

1  v-* 是vue指令，会被vue解析
2  v-text是原样输出渲染内容
3  v-html可以解析渲染html语法的内容

Vue 事件指令

1 数据驱动

操作是一个功能，使用需要一个方法来控制

方法名是变量，所以控制变量就可以控制该方法

2 事件指令
在实例成员 methods 中声明事件方法

标签通过事件指令绑定声明的方法：v-on:事件名="事件方法名"

eg: <button v-on:click="btnClick">按钮<button>
标签通过事件指令绑定声明的方法，且自定义传参： v-on:事件名="事件方法名()"
eg: <button v-on:click="btnClick()">按钮</button>  不传任何参数
eg: <button v-on:click="btnClick($event)">按钮</button>  传入事件对象，同不写()
eg: <button v-on:click="btnClick(10)">按钮</button>  只传入自定义参数，当然也可以传入事件对象

v-on:

v-on: 事件="方法" => 系统传参，只默认传 $event
v-on: 事件="方法($event, ...)" => 完全自定义传参，可以手动传入$event

<div id="app">
    <button v-on:click="btnClick">{{ btn1 }}</button>
    <button v-on:click="btnClick">{{ btn2 }}</button>
    <hr>
<!--    直接绑定事件名：系统会在触发事件时（点击时）调用事件方法(fn1)，传给事件方法一个参数（事件对象）-->
    <button v-on:click="fn1">按钮3</button>
    <hr>
<!--    绑定的事件名后跟着()，不是主动调用事件方法，而是表示在触发事件调用时，传入参数全由用户自己决定-->
    <button v-on:click="fn2($event, 10, 20)">按钮4</button>
    <hr>
    <button v-on:click="fn(btn1)">{{ btn1 }}</button>
</div>
</body>

<script>
    new Vue({
        el: '#app',
        data: {
            btn1: '按钮1',
            btn2: '按钮2',
        },
        methods: {
            btnClick (){
                console.log(666);
            },
            fn1 (ev){
                console.log(ev.clientX, ev.clientY);
            },
            fn2 (ev, n1, n2){
                console.log(ev, n1, n2);
                console.log(ev.clientX, ev.clientY);
            },
            fn (msg){
                console.log(msg);
            }
        }
    })
</script>

总结：

1  v-text：基本同{{}}
2  v-html：可以解析html语法的内容
3  v-on：
   v-on:事件="方法"   =>  系统传参，只默认传$event
   v-on:事件="方法($event, ...)"  => 完全自定义传参，可以手动传入$event

补充：

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

# 总结：
# 事件：@click @dblclick @mouseover|out|down|up
#	鼠标单击、双击、悬浮、移开、按下、抬起

Vue 斗篷指令

v-cloak:避免屏幕闪烁

属性选择器，会将 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>

Vue 属性指令

语法： v-bind: 属性名="变量"

针对不同属性，使用方式稍微有一点区别

自定义属性以及 title 这些，直接赋值的，使用方式如下

t 是变量，'o' 是常量

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

class 属性(重点)

绑定的变量：值可以为一个类名 “p1”，也可以为多个类名 “[p1, p2]”

绑定的数组：数组的每一个成员都是一个变量

绑定的字典：key就是类名，value是绝对该类名是否起作用

<!-- 
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>
        .live {
            background-color: yellow;
        }
    </style>
</head>
<body>
<div id="app">
<!--    默认渲染 1，点击 1 按钮的时候，会把对应事件指令里的参数传进去，点 2 就传 2，就会渲染-->
    <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>
</div>
</body>

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

总结：

v-bind:title="变量"

:class="变量" | :class="[变量1, ..., 变量n]" | :class="{类名: 布尔变量}"

:style="字典变量"

Vue 表单指令

语法： v-model="变量"。服务于文本输入框

v-model 绑定的变量控制的其实就是 value 属性值

v-model 要比 v-bind:value 要多一个监听机制

数据的双向绑定

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>
总结：

v-model绑定变量控制value属性，可以实现双向绑定

Vue 条件指令

语法：v-show="变量" | v-if="变量"
两者的区别
1. v-show 在隐藏标签时，采用 display:none 渲染标签，标签通过 css 隐藏
2. v-if 在隐藏标签时，不会渲染在页面上

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 {
            display: block;
            content: '';
            clear: both;
        }
        .box {
            /* vw: view width  vh: view height*/
        width: 100vw;
        height: 200px;
        }
        .red {
            background-color: red;
        }
        .yellow {
            background-color: yellow;
        }
        .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 === '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: 'red'
        }
    })
</script>

总结：

v-show | v-if
v-if | v-else-if | v-else

Vue 循环指令

语法：v-for="ele in obj" obj 是被被遍历的对象，ele 是遍历得到的每一次结果
遍历可迭代对象的首要结果，都是可迭代对象容器中的值，其次还可以遍历得到索引及键等数据
1. 字符串：v-for="v in str" | v-for="(v, i) in str"
2. 数组：v-for="v in arr" | v-for="(v, i) in arr"
3. 对象：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>

商品循环案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></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>
</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': 'http://pic.netbian.com/uploads/allimg/170623/122647-14981920076193.jpg',
            title: '达科塔·约翰逊 Dakota Johnson 4K壁纸'
        },
        {
            'img': 'http://pic.netbian.com/uploads/allimg/170623/121638-1498191398003a.jpg',
            title: 'Kristen Stewart 克里斯汀斯图尔特4K壁纸'
        },
        {
            'img': 'http://pic.netbian.com/uploads/allimg/170619/192151-14978713114a1d.jpg',
            title: '凯瑟琳·兰福德（Katherine Langford）4K壁纸'
        }
    ];

    new Vue({
        el: '#app',
        data: {
            goods,
        }
    })

</script>
</html>

总结：

字符串：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"

posted on 2020-02-13 11:35 Rannie` 阅读(263) 评论(0) 编辑收藏举报

刷新页面返回顶部