初识vue

Posted //我是小白

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初识vue相关的知识,希望对你有一定的参考价值。

vue概述

什么是vue
vue 是一套用于构建用户界面的渐进式框架,它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。

优势和特点
vue两大特点:响应式编程、组件化。

vue的优势:轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。

vue是单页面应用,使页面局部刷新,不用每次跳转页面都要请求所有数据和dom,这样大大加快了访问速度和提升用户体验。而且他的第三方ui库很多节省开发时间。

响应式的数据绑定
vue会自动对页面中某些数据的变化做出响应。这也就是vue最大的优点,通过MVVM思想实现数据的双向绑定,让开发者不用再操作dom对象,有更多的时间去思考业务逻辑。

<body>
		<div id="box">
			<h2>{{ msg }}</h2>
			<input type="text" v-model="msg"/>
		</div>
		<script>
			var ve=new Vue({
				el:"#box",
				data:{
					msg:"hello vue!"
				}
			})
		</script>
</body>

效果
组件化开发
vue通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中,我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑),然后整个应用就算做完了。

组件化开发的优点:提高开发效率、方便重复使用、简化调试步骤、提升整个项目的可维护性、便于协同开发。

Virtual DOM
在传统开发中,用JQuery或者原生的javascript DOM操作函数对DOM进行频繁操作的时候,浏览器要不停的渲染新的DOM树,导致页面看起来非常卡顿。

而Virtual DOM则是虚拟DOM的英文,简单来说,他就是一种可以预先通过JavaScript进行各种计算,把最终的DOM操作计算出来并优化,由于这个DOM操作属于预处理操作,并没有真实的操作DOM,所以叫做虚拟DOM。最后在计算完毕才真正将DOM操作提交,将DOM操作变化反映到DOM树上。

以上是关于初识vue的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段1——vue主模板

VSCode自定义代码片段——.vue文件的模板

VSCode自定义代码片段(vue主模板)

Java初识方法

VSCode自定义代码片段11——vue路由的配置

VSCode自定义代码片段11——vue路由的配置