Vue初体验
Vuejs引入
CDN引入
本地引入
初体验
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="ape"></div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
// 创建app
import Vue from "vue";
const ape = Vue.createApp({
template:`<h1>Hello Vue</h1>>`
})
// 挂载app
ape.mount("#ape")
</script>
</body>
</html>
动态展示数据
data关键字
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<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>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
template:`<h2>{{message}}</h2>`,
data:function(){
return{
title: "hello world",
message: "你好啊 Vue3",
}
}
})
app.mount("#app")
</script>
</body>
</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
29
30<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>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
template:`
<h2>电影列表</h2>
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
`,
data(){
return{
message:"你哈OA",
movies: ["测试", "开发", "产品"]
}
}
})
app.mount("#app")
</script>
</body>
</html>
计数器
- methods
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<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>Document</title>
</head>
<body>
<div id="app"></div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
template: `
<h2>当前数量：{{counter}}</h2>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
`,
data(){
return{
counter: 0
}
},
methods:{
increment: function(){
this.counter +=1
},
decrement: function(){
this.counter -=1
}
}
})
app.mount("#app")
</script>
</body>
</html>
计数器代码重构（声明式编程）
- app内有template参数就渲染里面的，没有就加载图层内的
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<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>Document</title>
</head>
<body>
<div id="app">
<h2>当前计数：{{counter}}</h2>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
data(){
return{
counter: 0
}
},
methods:{
increment:function(){
this.counter +=1
},
decrement:function(){
this.counter -= 1
}
}
})
app.mount("#app")
</script>
</body>
</html>
原生计数器(命令式编程)
- 获取dom
- 定义展示变量
- 监听按钮事件
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<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>Document</title>
</head>
<body>
<h2>当前计数：<span class="counter"></span></h2>
<button class="add">+1</button>
<button class="sub">-1</button>
<script>
// 1.获取dom
const h2El = document.querySelector("h2")
const counterEl = document.querySelector(".counter")
const addBtnel = document.querySelector(".add")
const subBtnel = document.querySelector(".sub")
// 2.定义一个变量记录数据
let counter = 100
counterEl.textContent = counter
// 3. 监听按钮
addBtnel.onclick = function(){
counter += 1
counterEl.textContent = counter
}
subBtnel.onclick = function(){
counter -= 1
counterEl.textContent = counter
}
</script>
</body>
</html>
命令式编程和声明式编程
- 区别
MVVM模型
options
data属性选项
- 概念
- Vue内部
实例
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<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>Document</title>
</head>
<body>
<div id="app">
<h2>当前信息：{{message}}</h2>
<button @click="changeMessage">改变</button>
</div>
<script src="./lib/vue.js"></script>
<script>
const app = Vue.createApp({
data(){
return{
message: "heelo,wodsf"
}
},
methods:{
changeMessage:function(){
this.message = "你好，世界"
}
}
})
app.mount("#app")
</script>
</body>
</html>Methods属性选项
不能使用箭头函数
this指向
