Vue基础01-CDN引用vue.js

叶，相触云间

已于 2024-05-23 09:15:09 修改

阅读量491

点赞数 19

文章标签： vue.js

于 2024-05-21 14:53:04 首次发布

本文链接：https://blog.csdn.net/qq_65582259/article/details/139087187

版权

1.CDN-本地引用

1.1 下载vue.js

vue.js下载地址：Installation — Vue.js

区别：1.vue.js没有经过压缩，适合开发测试Debug时使用；

2.vue.min.js代码经过了压缩，适合发布上线时用，节约些资源。

1.2 代码案例

test01.html

<!-- mvvm -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">

			<!--插值表达式:从model中取出数据，并渲染到指定的html位置-->
			{{ message }}
			
		</div>
		
		<div>
			
			{{message}}
			
		</div>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript">
			// 创建vue.js中核心对象
			//核心Vue对象就是vm
			var vm = new Vue({
				//配置
				//vm对象管理的视图html
				el: '#app',
				//模型数据M，data配置项
				//data的值是一个字面量对象，对象的属性就是模型数据
				data:{
					message: 'hello vue.js',
					age: 20,
					flag: true,
					list: ['aa','bb','cc'],
					obj: {
						name: '张三',
						birthday: '2000-08-07'
					}
				}
			});
			//jquery
			//$('#app').html(message);
		</script>
	</body>
</html>

2.CDN-线上引用

参考地址：Installation — Vue.js

或者vue官网：快速上手 | Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

拓展

vue采用mvvm架构

叶，相触云间

关注

19
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Vue基础01-CDN引用vue.js

区别：1.vue.js没有经过压缩，适合开发测试Debug时使用；2.vue.min.js代码经过了压缩，适合发布上线时用，节约些资源。
复制链接

扫一扫