Vue基本指令

Day2 基本指令

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue指令</title>

</head>
<body>
    <!--
## 1.内容绑定，事件绑定

### v-text

1. 设置标签的内容；默认写法会替换全部内容，

2. 使用插值表达式“{{}}”可以替换指定内容

3. 内部支持写表达式

###  v-html

1. 设置元素的innerHTML
2. 内容中html结构会被解析为标签；
3. v-text指令无论内容是什么，只会解析文本。

### v-on

1. 为元素绑定事件；
2. 事件名不需要写on；
3. 指令可以简写为@；
4. 绑定的方法定义在methods属性中；
5. 方法内部通过this关键字可以访问定义在data中的数据。

##     2.显示切换，事件绑定

### v-show

1. 根据真假切换元素的显示状态；
2. 原理是修改元素的display，实现显示隐藏；
3. 指令后边的内容，最终都会解析为布尔值；
4. 值为true元素显示，值为false元素隐藏；
5. 数据改变后，对应的元素的显示状态会同步更新。

### v-if

1. 根据真假切换元素的显示状态；
2. 本质是操纵DOM元素来切换显示状态；
3. 表达式的值为true，元素存放于dom树中，为false,从dom书中删除。
4. 频繁切换用v-show，反之用v-if，前者的切换消耗小。

### v-bind

1. 为元素绑定属性；完整写法是v-bind:属性名=“”
2. 简写 :属性名=“”
3. 需要动态的增删class建议使用对象的方式。

##     3.列表循环，表单元素绑定

###  v-for

1. 根据数据生成列表结构；数组经常和v-for结合使用；
2. 语法是v-for=“(item,index) in 数据”
3. item和index可以结合其他指令一起使用；
4. 数组长度的更新会同步到页面上，是响应式的。

### v-on

  1.事件绑定的方法写成函数调用的形式，可以传入自定义参数。

  2.定义方法时需要定义形参来接收传入的实参。

  3.事件的后面跟上.修饰符可以对事件进行限制

  4..enter可以限制触发的按键为回车

### v-model

1. 指令的作用是便捷的设置和获取表单元素的值；
2. 绑定的数据会和表单元素值相关联
3. 绑定的数据和表单元素的值双向绑定
-->
    <div id="app">
        <!-- v-text -->
        <h2 v-text="message+'!'">杭州</h2>
        <h2>濮阳{{message +"!"}}杭州</h2><!-- 插值表达式，优点替换部分内容（大括号内） -->
        <!-- v-html -->
        <p v-html="content"></p>
        <!-- v-on -->
        <input type="button" value="事件绑定" v-on:click="doIt">
        <input type="button" value="事件绑定1" @click="doIt">
        <input type="button" value="双击事件" @dblclick="doIt">
        <p @click="changecity">{{city}}</p>
        <!-- v-show -->
        <img src="../img/1.jpg" v-show="isshow">
        <input type="button" value="切换显示状态 " @click="changeisshow">
        <!-- <img src="../img/2.jpg" v-show="age>=18">
        <input type="button" value="增加年龄" @click="Addage"> -->
        
     </div>
     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    

    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:'陈建岩',
                content:"<a href='#'>杭州</a>",
                city:"濮阳",
                isshow:false,
            },
            methods:{
                doIt:function(){
                    alert("做it");
                },
                changecity:function(){
                    this.city+="杭州"
                },
                changeisshow:function(){
                    this.isshow=!this.isshow;
                }
                
            },
        })
    </script>
</body>
</html>
学习笔记 Vue
Vue

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！