VUE学习第二天---指令_1)指令的本质就是自定义属性

hi,今天昨天学习了vue的基础,今天我来分享一下vue的指令.
什么是指令?
1.指令的本质就是自定义属性
2.指令的格式:以v开头(比如v-cloak)
指令的分类
1.内容绑定,事件绑定
比如v-text v-html v-on
2.显示切换,属性绑定
比如v-show v-if v-bind
3.列表循环,表单元素绑定
比如v-for v-on v-model
还有好多指令可以去vue官网查看
官网：https://cn.vuejs.org/v2/api/

内容绑定,事件绑定指令

v-text
设置标签的文本值,默认的写法会替换全部内容,使用差值表达式{{}}可以替换指定内容, 内部支持表达式

<div id="app">
        <h2 v-text="message+'!'">深圳</h2>
        <h2 v-text="info+'!'">深圳</h2>
        <h2>{{message}}深圳</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "芜湖",
                info: "起飞"
            }
        })
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.v-html
设置元素的innerhtml 内容中有html结构会被解析为标签,解析时使用v-text 需要解析html结构使用v-html

 <div id="app">
        <p v-html="content"></p>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                content: "<a href='http://www.baidu.com'>百度一下 </a>"
            }

        })
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13

3.v-on基础
为元素绑定事件,v-on:click 点击事件 v-on:dblick 双击事件 指令可以简写为@ 方法内部通过this关键字可以访问定义在data中的数据

 <div id="app">
        <input type="button" value="点击一下" v-on:click="doit">
        <h2 @click="change">{{ food }}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                food: "希沃"
            },
            methods: {
                doit: function () {
                    alert("芜湖起飞");
                },
                change: function () {
                    this.food += "特尔"
                }
            },
        })
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

显示切换,属性绑定的指令

v-show
根据表达值的真假,切换元素的显示和隐藏, true为显示 ,flase为隐藏 指令后面的内容,最终都会解析为布尔值

<div id="app">
        <input type="button" value="点击一下" @click="changeisshow">
        <input type="button" value="18禁" @click="addage">
        <img v-show="isshow" src="../img/body背景.jpg" alt="">
        <img v-show="age>=18" src="../img/主机游戏.jpg" alt="">
    </div>
    <script src="../js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isshow: false,
                age: 17
            },
            methods: {
                changeisshow: function () {
                    this.isshow = !this.isshow;
                },
                addage: function () {
                    this.age++;
                }
            },
        })
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

2.v-if
根据表达式的真假,切换和显示和隐藏(操作dom元素) 表达式值为true时,元素存在dom树中 反之移除 频繁切换使用v-show 反之使用v-if

<div id="app">
        <input type="button" value="切换" @click="fanzhuanisshow">
        <p v-if="isshow">芜湖起飞</p>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isshow: false
            },
            methods: {
                fanzhuanisshow: function () {
                    this.isshow = !this.isshow;
                }
            }
        })
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3.v-bind
设置元素的属性,比如(src:title.class) 语法v-bind:属性名=表达式
需要动态的增删class建议使用对象的方法式

 <div id="app">
        <img v-bind:src="imgsrc" alt="">
        <br>
        <img :src="imgsrc" alt="" :title="imgtitle">
    </div>
    <script src="../js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgsrc: "这里是图片的地址",
                imgtitle: "芜湖"
            }
        })

    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

列表循环,表单元素绑定的指令

v-for
根据数据生成列表 数组经常和v-for使用 语法(item,index) in 数据
item和index 可以结合其他指令一起使用

  <div id="app">
        <input type="button" value="添加" @click="add">
        <input type="button" value="删除" @click="remove">
        <ul>
            <li v-for="(item,index) in arr">
                {{ index+1}} 芜湖起飞:{{item }}
            </li>
        </ul>
        <h2 v-for="item in vegeables" v-bind:title="item.name">
            {{item.name}}
        </h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                arr: ["北京", "上海", "西安", "重庆"],
                vegeables: [
                    { name: "西瓜" },
                    { name: "苹果" }
                ]
            },
            methods: {
                add: function () {
                    this.vegeables.push({ name: "苹果" })
                },
                remove: function () {
                    this.vegeables.shift();
                }
            }

        })

    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

v-on补充
传递自定义参数 事件修饰符
事件邦定的方法写成函数调用的形式 可以传入自定义参数 method 方法的意思
事件后面跟上 . 修饰符 可以对事件进行限制 .enter 限制为回车

<div id="app">
        <input type="button" value="点击" @click="doit(666,'芜湖')">
        <input type="text" @keyup.enter="sayhi">
    </div>
    <script src=" ../js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                doit: function (p1, p2) {
                    console.log(p1);
                    console.log(p2);
                },
                sayhi: function () {
                    alert("你好")
                }
            }
        })
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

v-model
获取和设置表单元素的值 (双向数据绑定) vue的特点
绑定的数据和表单元素值相关联.

<div id="app">
        <input type="text" v-model="message" @keyup.enter="getm">
        <input type="button" value="修改message" @click="setm">
        <h2>{{ message}}</h2>

    </div>
    <script src="../js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "芜湖"
            },
            methods: {
                getm: function () {
                    alert(this.message);
                },
                setm: function () {
                    this.message = "起飞";
                }
            },

        })
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

结语:
这样vue,js的基本指令就学完啦
期待明天的学习分享 希望大家多多交流,共同进步!