VUE前端框架

最新推荐文章于 2024-09-05 15:20:03 发布

小董也不懂呀～

最新推荐文章于 2024-09-05 15:20:03 发布

阅读量400

点赞数

文章标签： vue.js 前端框架前端

本文链接：https://blog.csdn.net/java_dwj/article/details/122461128

版权

什么是vue?

vue是一个基于JavaScript的渐进式的前端学习框架

特点:

1.是一个轻量级的MVVM框架,双向绑定,数据动态更新,gzip后大小只有20k+

2.是一个渐进式框架,其核心思想是数据驱动,组件化的前端开发

3.原生HTML页面是通过js操作的dom,而vue.js操作的是数据

如何使用vue?

1.在网页中引入vue.js

2.在HTML网页里指定vue的作用范围通常情况下是使用div标签指定范围

3.创建vue对象,给vue对象赋值,那个值就是json数据

vue入门案例:准备vue.js文件导入目录

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 2.div指定vue的作用范围 -->
		<div id="app">
			{{msg}}
		</div>
		<!-- 1.在html引入vue.js -->
		<script src="../vue/vue.js" type="text/javascript" ></script>
		<script type="text/javascript">
			/**
			 * 如何使用vue
			 * 1.在网页里引入vue.js
			 * 2.在html网页里面指定vue的作用范围,通常情况下使用div指定范围
			 * 3.创建vue对象,给vue对象赋值,那个值就是个json数据
			 * */
			 //3.定义vue对象的参数
			 var config = {
				 "el":"#app",
				 "data" : {
					 "msg":"hello vue!",
				}
			 }
			 //4.创建vue对象
			new Vue(config);
		</script>
	</body>
</html>

业务开发常规写法:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 2.div指定vue的作用范围 -->
		<div id="app">
			{{msg}}
		</div>
		<!-- 1.在html引入vue.js -->
		<script src="../vue/vue.js" type="text/javascript" ></script>
		<script type="text/javascript">
			/**
			 * 如何使用vue
			 * 1.在网页里引入vue.js
			 * 2.在html网页里面指定vue的作用范围,通常情况下使用div指定范围
			 * 3.创建vue对象,给vue对象赋值,那个值就是个json数据
			 * */
			
			 //3.创建vue对象
			new Vue({
				 "el":"#app",
				 "data" : {
					 "msg":"hello vue!",
				},
			 });
		</script>
	</body>
</html>