记录

vue3入门

  • 2022-06-25
  • 作者 我爱小小蝶
  • ~4.68K 字
  1. 1. 一、声明式渲染
  2. 2. 二、v-bind
  3. 3. 三、v-on
  4. 4. 四、v-if
  5. 5. 五、v-for
  6. 6. 六、v-model

一、声明式渲染

声明式渲染
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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="counter">cnt: {{cnt}}  pwd: {{pwd}}</div>
		<script type="text/javascript">
			const Counter = {
				data() {
					return {
						cnt: 1,
						pwd: "wwww"
					}
				},
				// 箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分
				// "箭头”（=>）定义函数
				mounted() {
					setInterval(() => {
						this.cnt++
					}, 1000)
				}
			}
			Vue.createApp(Counter).mount('#counter')
		</script>
	</body>
</html>

二、v-bind

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>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app">
			<span v-bind:title="msg">this is test</span>
		</div>
		
		<script type="text/javascript">
				const vue = {
					data() {
						return {
							msg : "悬停效果。。。。。"
						}
					}
				}
				
				Vue.createApp(vue).mount('#app')
			
		</script>
	</body>
</html>

三、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
29
30
31
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app">
			<button type="button" v-on:click="greet">click me</button>
		</div>
		
		<script type="text/javascript">
			const EventHandling = {
				data() {
					return{
						name: "root"
					}
				},
				methods: {
					greet() {
						alert('Hello '+ this.name + '!');
						
					}
				}
			}
			Vue.createApp(EventHandling).mount('#app');
		</script>
	</body>
</html>

四、v-if

v-if测试
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>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app">
			<span v-if="seen">
				12345
			</span>
		</div>
		
		<script type="text/javascript">
			const vue = {
				data() {
					return {
						seen: true
					}
				}
			}
			Vue.createApp(vue).mount('#app')
		</script>
	</body>
</html>

五、v-for

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
31
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<div id="app">
			<ol>
				<li v-for="todo in todos">{{todo.text}}</li>
			</ol>
		</div>
		
		<script type="text/javascript">
			const vue = {
				data() {
					return {
						todos: [
						        { text: 'Learn JavaScript' },
						        { text: 'Learn Vue' },
						        { text: 'Build something awesome' }
						      ]
					}
				}
			}
			Vue.createApp(vue).mount('#app')
		</script>
	</body>
</html>

六、v-model

v-model
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="app">
			<input v-model.lazy.trim.number="cnt">
			</input>  <br>
			{{cnt}}
		</div>
		
		<script type="text/javascript">
			const vue = {
				data() {
					return {
						cnt : 10
					}
				}
			}
			Vue.createApp(vue).mount('#app')
		</script>
1

1

1

1

1

最后编辑：2022-06-26