1分钟，带你了解 Vue2.x 渐进式框架！

最新推荐文章于 2024-08-14 18:19:46 发布

置顶 gz_liuhong

最新推荐文章于 2024-08-14 18:19:46 发布

阅读量236

点赞数

分类专栏：前端开发文章标签： Vue 渐进式数据绑定 H5框架前端开发

本文链接：https://blog.csdn.net/gz_liuhong/article/details/83314848

版权

前端开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

什么是渐进式框架

Vue 没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已 ()

Vue与Jquery对比

JQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，数据和界面还是是在一起的。当页面结构较为复杂时，Jquery选择器的难度和代价都会增加

Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM (MVVM是什么鬼，大家自行谷百哈)

快速开始

引入vue.js 即可开始vue.js之旅, 后续学习建议保存在本地运行会更快！

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM，代码如下 (图片右上角单击可复制代码)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue数据绑定功能</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<!--div会被渲染为Vue-->
		<div id="app">	
		</div>
		<script type="text/javascript">
			// el属性来指定Vue对象挂载到那个标签元素中
			var app = new Vue({
				el: '#app'
			})
		</script>
	</body>
</html>

MVVM模式实践

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM：

<body>
	<!--div会被渲染为Vue   v- 开头都称为vue的指令 -->
	<div id="app" v-bind:title='title'>
		{{message}}
	</div>
	<script type="text/javascript">
		var app = new Vue({
			// el属性来指定Vue对象挂载到那个标签元素中
			el: '#app',
			// 需要与前端绑定的数据都写在data中
			data:{
				message: 'Hello Vue!',
				title: 'vue data title'
			}
		})
	</script>
</body>
</html>

常见Vue指令

在Vue中v-开头都称为指令，每个都有特殊的功能。例如，v-for 指令可以绑定数组的数据来渲染一个项目列表

<body>
	<div id="app">
		<ol>
			<li v-for="item in list">{{item.text}}</li>
		</ol>
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				list: [{text: '学习 JavaScript'},
					   {text: '学习 Vue'},
					   {text: '整个牛项目'}]
			}
		});
	</script>
</body>