十分钟带你了解Vue框架

Vue 框架诞生于2014年，其作者为中国人--尤雨溪。

Vue用于构建交互式的Web界面的库，是一个构建数据驱动的Web界面渐进式框架，该框架遵循CMD规范，并且提供的设计模式为MVVM模式。

（Model-View-View-Model）,和一个可组合的组合型组件系统，具有简单的、灵活的API接口。

该框架继承了React的虚拟DOM技术和Angular的双向数据绑定技术，是一款较新的功能性框架。

那什么是虚拟DOM和双向数据绑定呢？

1、虚拟DOM:虚构的DOM树，当我们用传统的原生API或者jQuery去操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。

为了解决浏览器性能问题，虚拟DOM就被设计出来了，其核心算法是DIFF算法。它会将一次操作过程中对真实DOM所有更新的diff内容保存到本地的一个js对象中，等更新完成后，再将最终的js对象映射成真实的DOM，交由浏览器去绘制。，最终将这个js对象一次性attach到DOM树上，通知浏览器去执行绘制工作，避免了大量的无谓的计算量。

用js对象模拟DOM节点的好处是：页面的更新可以先全部反应在js对象上，操作内存中的js对象的速度要快很多。

2、双向数据绑定：

单向数据绑定：把Model绑定到View上，当我们用Java代码更新Model时，View就会自动更新了。

那么双向数据绑定就是，不仅具有上面的单向转换，而且用户更新了View，Model的数据也会自动被更新（Model<-->View）。

那View什么时候可以由用户更新呢？

举个例子，填写表单，当用户填写表单时，View的状态就被更新了，如果此时MVVM框架可以自动更新Model的状态，那么就相当于我们把Model和View做了双向数据绑定。

其原理是我们要对input进行value 的属性绑定（v-bind：value=”...”）

将Model中的变量绑定到View上（Model->View）

以及当用户对input进行操作时，进行事件监听（v-on：input=”...”）

将View上的更新传回Model中（View->Model）

从而实现双向数据绑定，在Vue中，以上操作过于繁琐，便提供了v-model直接实现双向数据绑定的效果。

在进行Vue项目开发过程中，我们可以通过标签引入式写法来引入vue或者是nodejs自带的包管理工具npm安装vue。

并且通过new Vue（）进行新建一个Vue的实例对象，其下有很多属性，包括el、data、methods、computed、watch等等，el为指向页面的节点元素，data存储数据，数据类型包括simple datatype（简单数据类型），以及complex datatype（复杂数据类型）。

用插值表达式{{}}显示，在插值显示的时候，不需要写上data，methods内存储方法，通过fn（）的形式调用方法，computed内存储也是方法，但是其为计算数据，复杂逻辑的应该存储在computed中。

计算属性是基于它们的依赖进行缓存的，由于computed带有一层缓存，所以只有在它的相关依赖发生改变时才会重新运行，而methods则是调用一次生成一次，computed中的方法调用时不需要加（）的。

watch为监听，监控，监听data中的属性值也可以监控对象，存在两个参数（currentValue当前值和prevValue之前值）。

在Vue中，html的任何属性都不能用{{}}（插值表达式）来进行设置

要用v-bind：来进行属性绑定，v-bind：可以简写为：

当我们需要对事件进行监听的时候需要用v-on：来进行事件绑定，v-on：可以简写为@，v-once单次渲染，v-html渲染html

在input、select、textarea中我们可以用v-model：进行双向数据绑定，可以用v-for进行数据循环，v-if/v-else-if/v-else进行数据判断

利用v-show显示与隐藏DOM节点，在Vue中还存在很多修饰符如取消事件冒泡（.stop），回车键（.enter），空格键（.space），取消默认事件（.prevent）等等，可以对DOM设置ref属性进行本地指向，类似于id

当我们对一个对象进行v-for循环时要对该对象设置key值，起到标识唯一性，便于检测以及提高性能的作用。

在Vue的实例对象下面还存在很多钩子函数，总体分为三大块（创建、更新、销毁）：

1、创建阶段，存在beforeCreate(){}、created(){}、beforeMount(){}、mounted(){}等钩子函数；

2、更新阶段，存在beforeUpdate(){}、updated(){}等钩子函数；

3、销毁阶段，存在beforeDestroy(){}、destroyed(){}等钩子函数；上述钩子函数不包括全部，一个生命周期内存在很多钩子函数，不能一一列举。

Vue.js框架：

Vue.js是一套构建用户界面的渐进式框架

Vue只关注图层，采用自底向上增量开发的设计

Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件

Vue第一个实例Hello World

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div>

<p>{{message}}</p>

</div>

new Vue({

el: '#app',

data: {

message: 'Hello Vue.js!'

}

})

</script>

</body>

</html>

十分钟带你了解Vue框架相关推荐

十分钟带你理解Kubernetes核心概念
原文地址:http://www.dockone.io/article/932 十分钟带你理解Kubernetes核心概念本文将会简单介绍Kubernetes的核心概念.因为这些定义可以在Kubern ...
十分钟带你打造unity3d第一人称射击
那抱歉,上次那个Unity+kinect还没有更新,最近在深一步研究,不久将更新(绝对不负众望)!现在进入正题,十分钟带你打造unity3D第一人称射击游戏! 看完本篇博客,你将学会第一人称控制,粒子 ...
简单易懂！十分钟带你了解：统计学到底是干什么的
CDA数据分析师出品编译:Mika [导读] 统计学在我们的日常生活中无处不在,它有助于我们更好地了解世界,并做出更好的决策. 在今天的内容里,我们将带你用十分钟了解:统计学到底是关于什么的一门学 ...
Bee框架，一个十分钟即可学会的ORM框架--Bee
Bee 是一个ORM框架.关注:省时/优雅.简易.自动( Tea: Timesaving/Tasteful, Easy, Automatic) 特性.减少开发人员的编码量,只为一个目标--让别人不再叫 ...
这是我见过最好的Python教程：十分钟带你认识Python
这篇文章主要介绍了简洁的十分钟Python入门教程,Python语言本身的简洁也使得网络上各种Python快门入门教程有着很高的人气,本文是国内此类其中的一篇,需要的朋友可以参考下 [简介] Pyth ...
移动端视频开发通过什么方式实现直播？十分钟带你快速了解
原文链接:https://www.jianshu.com/p/92b71382724f 本专栏专注分享大型Bat面试知识,后续会持续更新,喜欢的话麻烦点击一个关注现在的移动端的音视频这些在近段时间非 ...
依赖 netty spring_十分钟带你了解Spring的七大知识点，程序员必了解
Spring框架自诞生以来一直备受开发者青睐,有人亲切的称之为:Spring 全家桶.它包括SpringMVC.SpringBoot.Spring Cloud.Spring Cloud Dataflo ...
基于昇腾CANN的卡通图像生成可在线体验啦！十分钟带你了解CANN应用开发全流程
摘要:CANN作为昇腾AI处理器的发动机,支持业界多种主流的AI框架,包括MindSpore.TensorFlow.Pytorch.Caffe等,并提供1200多个基础算子. 2021年7月8日,第四 ...
[k8s] 第一章十分钟带你理解Kubernetes核心概念
本章节主要介绍应用程序在服务器上部署方式演变以及kubernetes的概念.组件和工作原理. 应用部署方式演变在部署应用程序的方式上,主要经历了三个时代: 传统部署:互联网早期,会直接将应用程序部署 ...

十分钟带你了解Vue框架

十分钟带你了解Vue框架相关推荐

最新文章

热门文章