热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

vue的认识与介绍

今天来总结一些我对vue的认识与介绍,可能有时候我们可以不用对一个框架去有很深的认识,就可以去完成我们的工作,但是对于一个框架有基础的理解对我们开发和学习是很有帮助的,让我们很清楚的知道这个框架

今天来总结一些我对vue的认识与介绍,可能有时候我们可以不用对一个框架去有很深的认识,就可以去完成我们的工作,但是对于一个框架有基础的理解对我们开发和学习是很有帮助的,让我们很清楚的知道这个框架是做什么的,我们该用来做些什么。

一、渐进式框架Vue

  1. 什么是渐进式框架。

vue官网说:Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。
渐进式我个人理解就是阶梯式向前。vue是轻量级的,它有很多独立的功能或库,我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染,我就只用vue的声明渲染,而我们要用他的组件系统,我们可以引用它的组件系统。
vue的渐进式表现为:

声明式渲染——组件系统——客户端路由——-大数据状态管理——-构建工具

二、vue中两个核心点

1.响应式数据绑定
当数据发生变化是,vue自动更新视图
它的原理是利用了 Object.definedProperty 中的setter/getter 代理数据,监控对数据的操作。(这也是为什么vue不支持ie8 以及更早的ie浏览器的原因)

2.组合的视图组件

  • ui页面映射为组件书

  • 划分组件可维护、可重用、可测试

    这里写图片描述

三、虚拟DOM

  1. js的运行速度已经很快了,然而大量的DOM 操作就会变得很慢,但是前端本身就是要通过JS处理DOM 来更新视图数据的。 这样在更新数据后会重新渲染页面,这样就造成在没有改变数据的地方也重新渲染了DOM节点。这样性能方面就会很受影响。

    利用在内存中生成与真实DOM与之对应的数据结构,这个在内存中生成的结构称之为虚拟DOM。
    当数据发生变化时,能够智能的计算出重新渲染组件的最小代价并应用到DOM操作上。vue就是利用了这一点。(vue 渲染组件的步骤图:)

vue 渲染组件的步骤图

四、MVVM模式

可能你经常听说MVC 模式 和MVVM 模式。
angular 就是所谓的 MVC 模式的框架,model 、view、controller。
而vue 是 MVVM 模式的框架,即
M: model (数据层,也就是指数据(前端是js))
V:view ( 也就是指DOM层 或用户界面 )
VM : view-model (处理数据和界面的中间层,也就是指Vue)

vue 的 MVVM 模型图

五、Vue实例

每一个应用都是通过Vue 这个构造函数来创建根实例启动的(new Vue()
构造函数中需要传入一些选项对象。包含挂在元素、数据、模板、方法等等、
这些只是一部风API ,更多API请关注:https://cn.vuejs.org/v2/api/

六、声明式渲染(命令式渲染)

渲染时分为 声明式渲染命令式渲染
1. Vue 是声明式渲染的,
也就是 只需要关心 声明在哪里(where) 做什么(what),而不需要关心是如何实现的(how)
2.命令式渲染
需要通过具体的代码表达在哪里(where) 做什么(what),如何实现(how)


推荐阅读
  • Vue.Js_Vue之vue.js声明式渲染
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了Vue之vue.js声明式渲染相关的知识,希望对你有一定的参考价值。ht ... [详细]
  • 认识Vue关于Vue的描述有不少,不外乎都会拿来与Angular和React对比,同样头顶MVVM双向数据驱动设计模式光环的Angular自然被对比的最多,但到目前为止,Angul ... [详细]
  • Vue基础一、什么是Vue1.1概念Vue(读音vjuː,类似于view)是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不 ... [详细]
  • 一、路由首先需要配置路由,就是点击good组件进入goodDetail组件配置路由如下{path:goodDetail,component:goodDetail}同时在good组件中写入如下点击事件,路由中加入 ... [详细]
  • #ReactivityFundamentals#DeclaringReactiveState ... [详细]
  • 使用nodejs爬取b站番剧数据,计算最佳追番推荐
    本文介绍了如何使用nodejs爬取b站番剧数据,并通过计算得出最佳追番推荐。通过调用相关接口获取番剧数据和评分数据,以及使用相应的算法进行计算。该方法可以帮助用户找到适合自己的番剧进行观看。 ... [详细]
  • 网络请求模块选择——axios框架的基本使用和封装
    本文介绍了选择网络请求模块axios的原因,以及axios框架的基本使用和封装方法。包括发送并发请求的演示,全局配置的设置,创建axios实例的方法,拦截器的使用,以及如何封装和请求响应劫持等内容。 ... [详细]
  • uniapp开发H5解决跨域问题的两种代理方法
    本文介绍了uniapp开发H5解决跨域问题的两种代理方法,分别是在manifest.json文件和vue.config.js文件中设置代理。通过设置代理根域名和配置路径别名,可以实现H5页面的跨域访问。同时还介绍了如何开启内网穿透,让外网的人可以访问到本地调试的H5页面。 ... [详细]
  • VueCLI多页分目录打包的步骤记录
    本文介绍了使用VueCLI进行多页分目录打包的步骤,包括页面目录结构、安装依赖、获取Vue CLI需要的多页对象等内容。同时还提供了自定义不同模块页面标题的方法。 ... [详细]
  • 本文介绍了ASP.NET Core MVC的入门及基础使用教程,根据微软的文档学习,建议阅读英文文档以便更好理解,微软的工具化使用方便且开发速度快。通过vs2017新建项目,可以创建一个基础的ASP.NET网站,也可以实现动态网站开发。ASP.NET MVC框架及其工具简化了开发过程,包括建立业务的数据模型和控制器等步骤。 ... [详细]
  • 用Vue实现的Demo商品管理效果图及实现代码
    本文介绍了一个使用Vue实现的Demo商品管理的效果图及实现代码。 ... [详细]
  • wpf+mvvm代码组织结构及实现方式
    本文介绍了wpf+mvvm代码组织结构的由来和实现方式。作者回顾了自己大学时期接触wpf开发和mvvm模式的经历,认为mvvm模式使得开发更加专注于业务且高效。与此同时,作者指出mvvm模式相较于mvc模式的优势。文章还提到了当没有mvvm时处理数据和UI交互的例子,以及前后端分离和组件化的概念。作者希望能够只关注原始数据结构,将数据交给UI自行改变,从而解放劳动力,避免加班。 ... [详细]
  • 1、前端代码需要引入:element.min.cssvue.min.jselement.min.jsaxios.min.js  nuget里面可添加 ... [详细]
  • 【Vue基础】监听属性watch
    Vue监听属性是watch,我们可以通过watch来响应数据的变化。代码示例: ... [详细]
  • 本文涉及源码版本为2.6.9准备工作down一份Vue源码,从package.json入手,找我们需要的代码1、package.json中的scripts,build:nodesc ... [详细]
author-avatar
flower_hj
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有