Vue框架入门
介绍
MVVM模式
基本用法
在html的head区引script脚本
1
|
<script src="https://unpkg.com/vue@3"></script>
|
body区域参考如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<body>
<div id="app">
{{message}}
</div>
<script>
// 1. 定义Vue应用的配置对象（组件选项对象）
const hello ={
// 2. data选项：用于定义组件的响应式数据
data: function(){
// 3. 返回一个对象，里面是具体的响应式数据
return{
message: 'Hello Vue!'
}
}
}
// 4. 创建Vue应用实例：把配置对象传入createApp方法
const app = Vue.createApp(hello)
// 5. 挂载应用：将Vue应用绑定到页面中id为app的DOM元素上
app.mount('#app')
</script>
</body>
|
注意：当类似message: 'Hello Vue!'这种语句中如果写的是html内容，例如：
1
|
message: '<a href="https://www.baidu.com">百度</a>'
|
这种要是在调用的位置写成了{{message}}，会被按文字渲染到页面上，html代码不会生效，要正确渲染，代码应写成：<p v-html="message"></p>。
属性绑定
看以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<body>
<div id="app">
<a :href="link">百度</a>
<input type="text" :placeholder="inputValue">
<img :src="imgSrc" :style="{width:w}" alt="">
</div>
<script>
const vm = {
data: function(){
return {
link:"http://www.baidu.com",
// 文本框的占位符内容
inputValue: '请输入内容',
// 图片的 src 地址
imgSrc: './images/demo.png',
w:"500px"
}
}
}
const app = Vue.createApp(vm)
app.mount('#app')
</script>
</body>
|
代码中以 : 开头的写法，是 Vue 中 v-bind 指令的简写形式，核心作用是：把 Vue 实例中的响应式数据动态绑定到 DOM 元素的属性上（区别于原生 HTML 的静态属性）。当 Vue 中的数据发生变化时，页面上对应的元素属性会自动更新。
例如：
:href="link"
- 作用：将
<a> 标签的 href 属性（链接地址）动态绑定到 Vue 数据中的 link 变量。
- 对比原生写法：原生 HTML 是
<a href="http://www.baidu.com">（静态地址，写死后无法自动变化）；Vue 绑定后，只要 link 的值改变（比如 link = "http://www.google.com"），页面上这个链接的地址会自动更新，无需手动操作 DOM。
:style="{width:w}"
- 作用：将
<img> 标签的内联样式（这里是宽度 width）动态绑定到 Vue 数据中的 w 变量。
- 语法说明：
:style 接收一个对象，对象的键是 CSS 属性名（可以用驼峰 width 或短横线 'width'），值是 Vue 中的数据变量。比如想同时绑定宽度和高度，可写 :style="{width:w, height:'300px'}"（值也可以是固定字符串）。
使用JavaScript表达式
看以下代码：
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
|
<body>
<!-- vue 实例要控制的 DOM 区域 -->
<div id="app">
<p>{{number + 1}}</p>
<p>{{ok ? 'True' : 'False'}}</p>
<p>{{message.split('').reverse().join('')}}</p>
<p :id="'list-' + id">xxx</p>
<p>{{user.name}}</p>
</div>
<script>
const vm = {
data: function(){
return {
number: 9,
ok: false,
message: 'ABC',
id: 3,
user: {
name: 'zs',
}
}
}
}
const app = Vue.createApp(vm)
app.mount('#app')
</script>
</body>
|
注意到在<div id="app">区域可以正常使用JavaScript表达式。
绑定事件
看以下代码：
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
|
<body>
<div id = "app">
<h3>count的值为：{{count}} </h3>
<button v-on:click="addCount">+1</button>
<button @click="count+=1">+1</button>
</div>
<script>
const vm = {
data: function(){
return {
count: 0,
}
},
methods: {
//点击按钮，让 count + 1的方法
addCount() {
this.count += 1
},
},
}
const app = Vue.createApp(vm)
app.mount('#app')
</script>
</body>
|
注意到：
1
2
|
<button v-on:click="addCount">+1</button>
<button @click="count+=1">+1</button>
|
其中v-on:click等价于@click，引号中的内容为方法名或者表达式；如果方法比较简单，一般就直接使用表达式。
条件渲染指令
看以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<body>
<div id = "app">
<button @click="flag = !flag">Toggle Flag</button>
<p v-if="flag">请求成功 --- 被 v-if 控制</p>
<!-- <p v-else-if> </p>--->
<!-- <p v-else> </p>--->
<p v-show="flag">请求成功 --- 被v-show控制</p>
</div>
<script>
const vm = {
data(){
return {
flag: false,
}
}
}
const app = Vue.createApp(vm)
app.mount('#app')
</script>
</body>
|
注意flag变量需要在 Vue 实例的 data 函数返回的对象中定义。
v-if="flag"：当flag为false时，其不会写入到生成的html中。v-show="flag"：当flag为false时，其会写入到生成的html中，通过css隐藏。
列表渲染指令
看以下代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<body>
<div id = "app">
<ul>
<li v-for="(user, i) in userList" :key="user.id">索引是：{{i}}，姓名是：{{user.name}}</li>
</ul>
</div>
<script>
const vm = {
data(){
return {
userList: [
{id: 1,name: 'zhangsan'},
{id: 2,name: 'lisi'},
{id: 3,name: 'wangwu'},
],
}
}
}
const app = Vue.createApp(vm)
app.mount('#app')
</script>
</body>
|
通过v-for指令，仅需编写一个li标签即可渲染出多个列表项，无需手动重复编写。
