前言：
本文内容：Vue基本语法、Vue绑定事件、Vue双向绑定
推荐免费Vue基础教程视频：【狂神说Java】Vue最新快速上手教程通俗易懂_哔哩哔哩_bilibili
Vue基本语法
v-bind
上一节我们已经创建第一个Vue应用，看起来跟渲染一个字符串模板非常类似，但Vue在背后做了大量工作。现在数据和DOM已经被建立了关联，所有东西都是响应式的。控制台操作对象属性，界面可以实时更新！
我们还可以使用v-bind来绑定元素特性
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
{{message}}
<span v-bind:title="message">
鼠标悬停几秒查看此处绑定信息
</span>
</div>
<script>
let vm = new Vue({
el:"#app",
data:{
message:"hello vue"
}
});
</script>
</body>
</html>
|
v-bind等被称为指令。指令带有前缀v-，以表示它们是Vue提供的特性。可能你已经猜到了，它们在渲染的DOM上应用特殊的响应式行为。在这里，该指令意思：“将这个元素节点的title特性和Vue实例的message属性保持一致”
如果你再次打开浏览器的JS控制台，输入app.message="新内容"，就会看到绑定title特性的HTML已经进行更新。
v-if,v-else
创建一个demo01.html，简单练习v-if,v-else
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<title>Title</title>
</head>
<body>
<div id="app">
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
<h1 v-if="book=='书'">这是书</h1>
</div>
<script>
let vm = new Vue({
el: "#app",
data: {
ok: true,
book: '书'
}
});
</script>
</body>
</html>
|
v-for
创建一个demo02.html，简单练习v-for
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<li v-for="(item,index) in items">
{{item.message}}---{{index}}
</li>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
items: [
{message: '小可爱1号'},
{message: '小可爱2号'}
]
}
});
</script>
</body>
</html>
|
Vue绑定事件
可以使用v-on指令监听DOM事件，并在触发时运行一些JavaScript代码
新建demo03.html
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<button v-on:click="sayHi">点一下</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
let vm = new Vue({
el: "#app",
data:{message: 'jokerdig.com'},
methods: {
sayHi:function(){
alert(this.message);
}
}
});
</script>
</body>
</html>
|
Vue双向绑定
什么是双向数据绑定
Vue.js是一个MVVM框架，即数据双向绑定，当数据发生变化的时候，视图也就发生了变化，当视图发生变化的时候，数据也会跟着同步变化。
值得注意的是，我们所说的数据双向绑定，一定是对于UI控件说的，非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提，如果我们使用vuex，那么数据流也是单项的，这是就会和双向绑定冲突。
为什么要实现数据的双向绑定
在vue.js中，如果使用vuex，实际上数据还是单向的，之所以说是数据双向绑定，这是用UI控件来说，对于我们处理表单，Vue的双向数据绑定就很适用。两者不互斥，在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作。
在表单中使用双向数据绑定
你可以用v-model指令在表单<input>,<textarea>,<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model本质是一个语法糖，它负责监听用户的输入事件以更新数据，并对一些极端场景进行特殊处理。
注意：v-model会忽略所有表单元素的value、checked、selected特性的初始值而总是将vue实例的数据作为数据来源。你应该通过JavaScript在组件的data选项中声明初始值。
简单练习
新建demo04.html
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<label>输入的文本：</label>
<input type="text" v-model="message">{{message}}<br>
<label>单选框：</label>
<input type="radio" name="sex" value="男" v-model="message2">男
<input type="radio" name="sex" value="女" v-model="message2">女<br>
<p>
选中了：{{message2}}
</p>
<label>下拉框</label>
<select v-model="selected">
<option value="" disabled>请选择</option>
<option>小王</option>
<option>小赵</option>
</select>
<p>
{{selected}}
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
<script>
let vm = new Vue({
el: "#app",
data: {
message: '',
message2: '',
selected: ''
}
});
</script>
</body>
</html>
|
微信
