Go after
0%

Number1引入Vue

发表于 更新于 分类于 ， 阅读次数：
本文字数： 1.1k 阅读时长 ≈ 1 分钟

引入Vue

  • 1.直接使用script标签引入Vue.js（简单）
  • 2.使用脚手架（复杂）

1.直接使用script标签引入Vue.js（简单）

有两种方式

1.1通过网络引入外部的vue.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--引入外部的vue.js-->
		 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
	</head>
	<body>
		<div id="app">
			{{ message }}
		</div>
		<script>
			var app = new Vue({
				el: '#app',
				data:{
					message: 'hello Vue'
				}
			})
		</script>
	</body>
</html>

1.2引入本地的vue.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--引入本地的vue.js-->
		<script src="vue.js" type="text/javascript" charset="UTF-8"> </script>
	</head>
	<body>
		<div id="app">
			{{ message }}
		</div>
		<script>
			var app = new Vue({
				el: '#app',
				data:{
					message: 'hello Vue'
				}
			})
		</script>
	</body>
</html>