Vue简介
- JavaScript框架
- 简化Dom操作
- 响应式数据驱动
参考链接
官方文档
el挂载点
- el命中的元素内部支持data
- 不能挂在在body或html上，建议挂在div
Vue指令
- 内容绑定，事件绑定
- v-text
设置文本 1
2
3
| // 下面两行作用相等
<h1 v-text="'message:' + message"></h1>
<h1>{{ 'message:' + message }}</h1>
|
- v-html
设置html 1
2
3
4
5
6
| <p v-html="contend"></p>
// Vue
data:{
contend: '<a href="https://www.baidu.com">百度一下</a>'
}
|
- v-on基础
为元素绑定事件 在这里v-on也可以写成@ 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
| <div id="app">
<button type="button" v-on:click="getdata">这是一个按钮</button>
<button type="button" @dblclick="getdata">双击事件</button>
<h2 @click="change">{{ message }}</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
contend: '<a href="https://www.baidu.com">百度一下</a>',
message: "Hello world!",
state: 200,
user: {
name: "Alex",
age: 21,
mobile: "1110"
}
},
methods:{
getdata:function(){
alert("Hello World!");
},
change:function(){
this.message+="|---5cm---|"
}
}
})
</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
| <body>
<div id="app01">
<button type="button" @click="sub">-</button>
{{ number }}
<button type="button" @click="add">+</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app01",
data:{
number: 0,
message: ""
},
methods:{
add:function(){
if(this.number >= 10){
alert("不能再加了!")
return
}
this.number += 1
},
sub:function(){
if(this.number <= 0){
alert("不能再减了!")
return
}
this.number -= 1
}
}
})
</script>
|
- 显示切换，属性绑定
- v-show
根据表达式的真假，切换元素的显示和隐藏
1
2
3
| <button type="button" @click="sub" v-show="isShow">-</button>
// isShow = false
// 也可以是v-show="!isShow" 即为表达式
|
- v-if
根据表达式的真假，切换元素的显示和隐藏（操作dom元素）
- v-bind 简写为
:
设置元素的属性 例如src title class... 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <body>
<div id="app">
<a v-bind:href="is?site:'https://training.github.com/downloads/zh_CN/github-git-cheat-sheet/'">bind测试</a>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
is: false,
site: "https://www.baidu.com"
}
})
</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
| <body>
<div id="app">
<button type="button" @click="previous" v-show="now>0?true:false"><</button>
<img :src="image[now]" >
<button type="button" @click="next" v-show="now<image.length-1?true:false">></button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
now: 0,
image: ["img/image1.jpeg", "img/image2.jpeg", "img/image3.jpeg"]
},
methods:{
previous:function(){
if(this.now <= 0){
this.now = this.image.length - 1
}else{
this.now--
}
},
next:function(){
if(this.now < this.image.length - 1){
this.now++
}else{
this.now = 0
}
}
}
})
</script>
|
- 列表循环，表单元素绑定
- v-for
根据数据生成列表结构 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <body>
<div id="app">
<span v-for="i in list">{{ i }}</span>
<ul>
<li v-for="(i, index) in list">index:{{ index+1 }}, data:{{ i }}</li>
</ul>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
list: ['H', 'e', 'l', 'l', 'o']
}
})
</script>
|
- v-on补充
传入自定义参数
- v-model
表单元素双向数据绑定 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <body>
<div id="app">
<input type="text" v-model="message" />
<button type="button" @click="print">button</button>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
message: "Hello"
},
methods:{
print:function(){
alert(this.message)
}
}
})
</script>
|