创建应用
在script中以模块化引入vue
1
2
3
4
| <script type="module">
import {createApp} from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
</script>
|
通过createApp()函数创建一个新的应用实例，并传入根组件选项；然后通过应用实例的mount()函数挂载应用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <script type="module">
import {createApp} from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";
const app = createApp({
data() {
return {
}
}
});
app.mount("#app");
</script>
|
文本插值
通过插值表达式渲染文本，语法是在标签中用两对大括号嵌套组件实例中的属性名，渲染时会自动替换为属性值
1
| <h1 id="title">{{message}}</h1>
|
1
2
3
4
5
6
7
| createApp({
data() {
return {
message: "铠甲勇士"
}
}
}).mount("#app");
|
等同于
1
| <h1 v-text="message"></h1>
|
1
2
3
4
5
6
7
| createApp({
data() {
return {
message: "铠甲勇士"
}
}
}).mount("#app");
|
标签循环
给某个标签插入v-for指令，该指令根据实例中的数据，使指定标签形成列表结构
在v-for中，armorList代表实例中数组类型的数据，in相当于java增强for循环中的:
(armor, index)中，前者代表本轮循环的数组元素，后者代表本轮循环的index，index也可以选择不填，那么仅有armor，无需括号armor in armorList
:key的作用是更高效的更新虚拟DOM，减少DOM的操作，提高性能
1
2
3
4
5
6
7
| <tbody>
<tr v-for="(armor, index) in armorList" :key="armor.id">
<td>{{index + 1}}</td>
<td>{{armor.name}}</td>
<td>{{armor.weapon}}</td>
</tr>
</tbody>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| createApp({
data() {
return {
armorList: [
{
"id": 1,
"name": "炎龙铠甲",
"weapon": "烈焰刀"
},
{
"id": 2,
"name": "风鹰铠甲",
"weapon": "风鹰剑"
}
]
}
}
}).mount("#app");
|
绑定属性值
v-bind基本用法
插值的方式（两对大括号）不能出现在标签的属性中，所以当标签的属性值需要引用vue实例中的数据时，应使用v-bind指令绑定
1
| <img class="avatar" v-bind:src="armor.avatar.img" v-bind:alt="armor.name" />
|
可以采用简写的方式，直接省略掉v-bind
1
| <img class="avatar" :src="armor.avatar.img" :alt="armor.name" />
|
具体代码如下
1
| <img v-for="(avatar, index) in avatarList" :key="index" :src="avatar.img" :alt="avatar.img" :width="avatar.width" :height="avatar.height"/>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| createApp({
data() {
return {
avatarList: [
{
"img": "./img/dihu.jpg",
"width": 50,
"height": 50
},
{
"img": "./img/xueao.jpg",
"width": 50,
"height": 50
}
]
}
}
}).mount("#app");
|
单向绑定数据
绑定的数据发生改变时，视图会随之改变，但是反过来不行
1
2
3
4
5
6
7
8
9
10
| <table>
<tr v-for="info in infos" :key="info.id">
<td>
<label>人物输入框：<input v-bind:value="info.name"></label>
</td>
<td>
<label>武器输入框：<input v-bind:value="info.weapon"></label>
</td>
</tr>
</table>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| createApp({
data() {
return {
infos: [
{
"id": 1,
"name": "炎龙铠甲",
"weapon": "烈焰刀"
},
{
"id": 2,
"name": "风鹰铠甲",
"weapon": "风鹰剑"
}
]
}
}
}).mount("#app");
|
双向绑定数据
绑定的数据发生改变时，视图也会随之改变，反之亦然
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <label>
人物输入框
<input v-model="infos.name">
</label>
<label>
人物输入框
<input v-model="infos.name">
</label>
<br>
<label>
武器输入框
<input v-model="infos.weapon">
</label>
<label>
武器输入框
<input v-model="infos.weapon">
</label>
|
1
2
3
4
5
6
7
8
9
10
| createApp({
data() {
return {
infos: {
name: "",
weapon: ""
}
}
}
}).mount("#app");
|
show和if
v-show和v-if都是用来控制元素的显示与隐藏，前者根据条件判断是否渲染元素，后者通过条件判断是否显示元素
1
2
3
4
| <span v-if="armor.capacity == 1">垃圾</span>
<span v-else-if="armor.capacity == 2">一般</span>
<span v-else-if="armor.capacity == 3">牛逼</span>
<span v-else>其他</span>
|
1
2
3
| <span v-show="armor.capacity == 1">垃圾</span>
<span v-show="armor.capacity == 2">一般</span>
<span v-show="armor.capacity == 3">牛逼</span>
|
事件绑定
在标签中通过v-on指令给标签绑定事件，事件名可以直接写，也可以通过@简写
1
| <button v-on:click="clicked">按钮</button>
|
1
2
3
4
5
6
7
8
9
10
11
12
| createApp({
data() {
return {
}
},
methods: {
clicked() {
alert("clicked");
}
}
}).mount("#app");
|
下面这种绑定的写法也可以
1
| <button @click="clicked()">按钮</button>
|
带参数的click
1
2
3
4
| <label>
<input v-model="message" type="text">
<button @click="clicked(message)">按钮</button>
</label>
|
1
2
3
4
5
6
7
8
9
10
11
12
| createApp({
data() {
return {
message: "Hello Vue3!"
}
},
methods: {
clicked(data) {
alert(data);
}
}
}).mount("#app");
|
Ajax
异步网络请求。Ajax能够让页面无刷新的请求数据。
Vue官网
Vue内置指令
Axios官网