Vue简装理解

最新推荐文章于 2023-10-31 16:33:32 发布
最新推荐文章于 2023-10-31 16:33:32 发布
阅读量129 收藏
点赞数
分类专栏： 前端框架 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dean_xiu/article/details/108424491
版权

文章目录

Vue是个啥

想要实现前后端分离，第一步是需要了解和使用Vue框架
是的，Vue是一个框架，一个渐进式JS框架

关于渐进式

渐进式是个啥呢，通常我们使用的前端框架，比如layui、bootstrap，当我们想要使用其中一个功能时（比如按钮），我们需要引入该框架的所有文件

但渐进式不需要这么干，如果你想要使用它的按钮功能，那么你只要引用按钮组件就可了

看到差别了吗，在我的理解里，我把它看作是一种封装，即如果我想要一个东西，Vue把它做好给我，我不需要知道里面是是什么东西，是冰红茶都无所谓

Vue把所有的东西都做成了组件，一个组件的本质就是一个拥有预定义选项的Vue实例
组件里包含了它的样式和js
在这里插入图片描述

MVVM框架

Vue能够实现双向绑定，是一个MVVM框架

MVVM model-view-view-model

M： model 即模型 包括数据和一些基本操作
V： View 视图 即页面渲染结果
VM：View-Model 模型与视图间的双向操作
（无需开发人员干涉）

该框架实现了双向绑定，意思就是Model和View之间是相互影响可见的

  • 只要Model发生了改变，View上就能够显示出来
  • 当用户修改了View,Model中的数据也会跟着改变
    MVVM将开发人员从繁琐的DOM操作中解放了出来，将关注点集中在如何操作Model上

SPA

Single Page Web Application 单页Web应用
SPA是一种特殊的Web应用，是加载单个HTML页面并在用户与应用程序交互时动态更新该页面
它将所有的活动都局限在一个Web页面中完成，仅在该Web页面初始化时加载相应的HTML、Js、Css。一旦页面加载完成，SPA是不会因为用户的操作进行页面重载或跳转的，而是利用Js动态变换HTML(采用的是div切换显示和隐藏），从而实现界面与用户的交互
SPA应用中，应用加载之后就不会有整页刷新了
在这里插入图片描述

Dean_xiu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-3dmodel-viewer:[WIP] Vue的Three.js模型查看器
05-01
[WIP] vue-3dmodel-viewer 概述 基于THREE.js的Vue.JS 3D模型查看器组件，灵感来自和
Vue项目中怎么展示3D模型（.glb文件）？
weixin_48373171的博客
08-17 2455
（在npm官网搜索可以找到），这两个插件默认展示的效果是一样的，也默认可以用鼠标控制模型旋转，但是缩放等一系列操作不能够满足，或许可以满足，只是我没仔细研究，重点来了，这个插件还是比较强的这个是npm地址，可以去看看详细信息使用方法：1.安装。
vue实现读取本地模型文件 在线预览其动画
qq_23109373的博客
10-31 478
vue在线预览模型以及模型动画
vue——ViewModel 简易原理
肖的博客
04-01 2976
<input type="text" id="username"> <span id="uName"></span> let obj = {} Object.defineProperty(obj, 'username', { // 使用 defineProperty 中的 get 来双向绑定数据 set (v) { docum...
Modelo（模袋）引擎使用流程及基于Vue开发时注意事项
hoaxxcj的博客
01-26 5049
模袋引擎简介 Modelo是集美观与性能为一体、基于WebGL的三维轻量化BIM引擎。其中，Modelo API是Modelo所有产品的核心框架。基于Modelo API可以非常方便的创建功能丰富的BIM行业应用。 开发者只需专注在业务逻辑的开发，将数据存储、处理和显示等基础功能交给Modelo API完成。 将模袋引入Vue项目 一个开发者账号可以承载一个应用程序的开发，每一个应用程序都有相应的密钥，即App Token。这个密钥是访问此应用程序相关数据的口令。首先，我们需要登录模袋官网https...
深入理解vue
02-24
这句话可能大家并不陌生,但是真正理解这句话的可能并不多,其实,读懂了这句话,也就明白了vue的核心理念.那么,怎样理解什么是渐进式框架?在这之前,我们首先要理解什么是框架.在最初的前端开发中,为了完成某个功能,我们...
关于vue的简单理解
04-16
vue简单概念理解，入门。Vue是一个js框架，易用、灵活、优化，采用组件化的方式构建用户界
Vue自定义指令写法与个人理解
01-19
什么是Vue指令? 指令是一种可以附加到DOM元素的微命令(tiny commands).... 这些例子也能很好的让你理解这些概念. 以下是一些指令的使用方法, 以及对应的例子片段. 这些例子不是规定性的, 它们只是一
深入理解vue Render函数
12-29
最近在学习vue，正好今日留个笔记，我自己还在摸索学习中，现整理出来以作记录。 会使用基本的Render函数后，就会想，这怎么用 v-for/v-if/v-model;我写个vue Render函数进阶 首先是v-if 的转化使用全局组件的v 值...
初学Vue----v-model
Conely的博客
10-13 211
一、v-model是什么？ v-model就是vue的双向绑定的指令，能将页面上控件输入的值同步更新到相关绑定的data属性，也会在更新data绑定属性时候，更新页面上输入控件的值。 二、为什么使用v-model？ v-model作为双向绑定指令也是vue两大核心功能之一，使用非常方便，提高前端开发效率。在view层，model层相互需要数据交互，即可使用v-model。 三、v-model的原理简单描述 1.lazy默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步。可以添加l
vue-3d-model-Vue组件中的3D模型查看器。-Vue.js开发
05-27
vue-3d-model vue.js 3D model viewer component, based on threejs, inspired by model-tag 一个展示三维模型的Vue组件，支持模型操作和模型点击事件，能自动缩放模型到合适大小并校正偏移，支持多种格式的模型。 Examp vue-3d-model vue.js 3D model viewer component, based on threejs, inspired by model-tag 一个展示三维模型的Vue组件，支持模型操作和模型点击事件，能自动缩放模型到合适大小并校正偏移，支持多种格式的模型。 Example DEMO Install using npm npm install vue-3d-model --save Or using script tag for global use
3D-vue-model-view.zip
09-18
3D-vue-model-view.zip,管理者,3D建模使用专门的软件来创建物理对象的数字模型。它是3D计算机图形的一个方面，用于视频游戏，3D打印和VR，以及其他应用程序。
modelviewer一个Web组件用于在Web和AR中轻松显示交互式3D模型
08-08
model-viewer：一个Web组件用于在Web和AR中轻松显示交互式3D模型！
vue生命周期中的modle→view过程
m0_63767163的博客
11-17 273
vue中modle→view的过程可细分为不同的阶段,每个阶段有对应的函数--生命周期函数(或称生命周期钩子).下面就说说这个过程中相关生命周期函数的作用
VUE MODEL VIEW VM
qq_26239917的博客
05-23 338
MODEL data VIEW 页面 View Model vm Vue的实例 1.view 从内存读取数据 2.view试图改变 dom监听数据变化 改变data(model) 3.model发生改变 数据绑定 改变 view v-bind src=“a.jpg” html写法 :src=“imgUrl” imgUrl是一个表达式 数据来源于dat...
vue-3d-model：一个展示三维模型的 Vue 组件
素描本里的男子的博客
05-22 7684
vue-3d-model vue.js 3D model viewer component, based on threejs, inspired by model-tag 一个展示三维模型的Vue组件，支持模型操作和模型点击事件，能自动缩放模型到合适大小并校正偏移，支持多种格式的模型。 Example DEMO Install using npm npm install vue-3d-model --save Or using script tag for global use <scri...
vue基础 - 21 （ MVC机制: Model View Controller、MVVM: Model(数据) View(视图) ViewModel(视图模型)）
欢迎来到猫猫的博客 o_o ，如有问题，欢迎提出改正~
12-05 766
1、 MVC机制: Model View Controller Model：模型层 -- 数据部分 View：视图层 -- 可见的html部分 Controller：控制器 ，控制数据在变化时，自动更新到View中（数据重新赋值/发生变化，页面上的值自动更新，利用的是set、get方法） <body> <div>{{message}}</div> <script&gt...
Vue的MVVM（model、view、viewmodel）
KEY_cheung的博客
08-12 1601
MVVM模式：M（model）+ V（view）+ VM（viewmodel）与 MVC模式：M（model）、V（view）、C（controller）相类似 MVC： 用户向controller层发起请求，controller收到请求后交给model中处理再将结果返回到controller中，controller收到结果后对view进行相对应的页面渲染再反馈给用户。所有操作都在controller中进行，当用户发起大量的请求后，controller加载速度变慢，视图渲染性能降低，进而影响用户体验
开题报告达达宠物认领信息网站的设计与实现 已通过开题答辩的.docx
最新发布
07-25
宠物认领信息网站的主要目的是为寻找宠物的失主和寻找新家的宠物提供一个在线的信息交流平台。通过这个平台，失主可以发布失宠信息，寻找走失或遗弃的宠物；而救助人或组织则可以发布待领养的宠物信息，为那些无家可归的宠物寻找一个永久的归宿。 这样的网站通常会提供一个详细的宠物数据库，包括照片、品种、年龄、健康状况等信息，以便让失主能够方便地找到自己的宠物。同时，网站还会提供一些相关的服务，如失主与救助人之间的在线交流、宠物匹配推荐、领养手续办理等，以帮助双方顺利完成宠物的认领和领养过程。 宠物认领信息网站的目的在于提高失宠找到宠物的几率，减少流浪宠物的数量，并为那些无家可归的宠物提供一个温馨的新家。同时，网站还能促进社会对流浪宠物的关注和保护，提高人们的动物保护意识。
说一下对 vue 的理解
07-13
我对Vue的理解是，Vue是一款流行的前端框架，用于构建用户界面。它采用了MVVM（Model-View-ViewModel）的设计模式，通过数据驱动和组件化的开发方式，使得前端开发变得更加简单、高效。 Vue具有以下几个核心概念： 1. 数据绑定：Vue提供了双向数据绑定的机制，将数据和视图进行实时的同步更新。当数据发生改变时，视图会自动更新；当用户操作视图时，数据也会相应地进行更新。 2. 组件化开发：Vue鼓励使用组件化开发，将页面拆分成多个独立的组件，每个组件负责特定的功能。组件可以复用、嵌套和组合，提高代码的可维护性和可重用性。 3. 虚拟DOM：Vue采用了虚拟DOM技术，通过在内存中构建虚拟DOM树，并与真实DOM进行比较，只更新需要更新的部分，提高了渲染性能。 4. 生态丰富：Vue拥有一个活跃的社区，有大量的第三方插件和工具可供使用。同时，Vue也提供了官方的路由、状态管理和构建工具等配套库，方便开发者进行项目开发。 总体而言，我认为Vue是一款简单易学、灵活高效的前端框架，它的设计理念和特性使得前端开发更加快捷、舒适。它在大型企业应用和小型个人项目中都有着广泛的应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值