01vue学习——基本代码结构

最新推荐文章于 2024-10-14 11:48:02 发布
最新推荐文章于 2024-10-14 11:48:02 发布
阅读量875 收藏 2
点赞数 6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42530160/article/details/96834136
版权
本文介绍了MVVM模式的概念，包括模型、视图和视图模型的职责，并详细阐述了数据双向绑定的工作原理。接着，概述了Vue项目的三个主要代码模块：View、Model和ViewModel，强调了ViewModel在数据通信中的核心作用。最后，提到了Vue中数据绑定和DOM操作的简化，以及使用Vue时避免直接操作DOM的重要性。
摘要由CSDN通过智能技术生成

01vue学习——基本代码结构

在认识vue的代码结构之前，我们先来认识另外一个概念——MVVM，它是Model-View-ViewModel的简写。即模型-视图-视图模型。
1.模型（M）：指的是后端传递的数据。
2.视图（V）：指的是所看到的页面。
3.视图模型（VM）：mvvm模式的核心，它是连接view和model的桥梁。
4.视图模型有两个方向
（1）将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
（2)将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。
5.这两个方向都实现的，我们称之为数据的双向绑定。
6.总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。MVVM流程图如下：
在这里插入图片描述

三个模块的代码结构

0.整体的代码

0.1html代码部分
<!DOCTYPE html>
<html>
<head>
    <meta charset=
最低0.47元/天 解锁文章
0563xixi
关注
Vue.js入门系列（三十二）：Vue3技术——工程结构分析、开发者工具安装与初识 `setup`
weixin_44976692的博客
09-23 1万+
Vue DevTools 是 Vue.js 官方提供的一款浏览器扩展工具，旨在帮助开发者调试 Vue 应用程序。通过 DevTools，开发者可以查看组件树、检查状态、追踪事件流以及观察 Vuex 状态和路由变化。setupVue 3 工程结构：了解了 Vue 3 项目的文件结构和各个文件的作用，特别是main.js文件如何初始化应用并挂载到 DOM。安装开发者工具：学会了如何安装 Vue DevTools 并启用其对 Vue 3 项目的支持，帮助调试 Vue 应用。初识setup函数。
vue系列——vue-cli使用说明
JasonYang25的博客
04-19 810
vue-cli的使用，快速搭建快速启动项目
Vue基本代码结构
Yi_LittleRock的博客
04-15 2053
Vue基本代码结构 1.引入Vue.js文件 <script src="Vue.js"></script> 2.创建Vue实例对象 new Vue() var vm=new Vue({ el:"#app", //选择器的名称，表示当前new的Vue实例，要控制页面上的哪一个区域 data:{ //存放el中要用到的数据 msg:'hello world' //指令 } }) 通过data属性定义数据，这些数据可以在实例对应的模板中进行绑定并使用。
Vue基础系列：代码结构
天然玩家的博客
02-28 394
1 代码结构 实例化Vue对象，对象中填写对应模板、数据、方法、监听等， 序号 属性 描述 1 el 元素，对应div的id 2 template 模板 3 data 数据 4 methods 方法 5 watch 监听 1.0 模板一 模板中data形式为：data(){} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
Vue及项目结构介绍
最新发布
上官花雨滴博客！！！
10-14 1369
Vue│├── node_modules/ # 依赖包│├── public/ # 静态资源│ └── favicon.ico # 图片资源(网站图标)│├── src/ # 源代码│ ├── assets/ # 资源模板 (静态资源目录 如：图片、样式等)│ ├── components/ # 通用组件 (存放 Vue 组件)│ ├── App.vue # 根组件 (所有页面的入口)│ ├── main.js # 入口JS文件 (项目的主入口文件)│。
vue 项目代码架构
王小工小工历程
07-12 2313
Vue项目的代码架构通常遵循一定的组织结构和约定，以提高项目的可维护性、可扩展性和可读性。
vue学习笔记01day_01Vue的基本代码
xinpz的博客
09-10 250
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &amp
vue面试——2021最全面的vue基础面试题.pdf
12-14
MVC通过分离Model、View和Controller的方式来组织代码结构，其中View负责页面的显示逻辑，Model负责存储页面的业务数据，以及对相应数据的操作。Controller层是View层和Model层的纽带，它主要负责用户与应用的响应...
前端VUE实战——去哪儿网项目实战.7z
08-17
在本项目中，我们将深入探讨基于Vue.js框架的前端实战应用——去哪儿网项目。Vue.js是一个轻量级、高性能的JavaScript框架，专为构建用户界面而设计，特别适合开发单页面应用（SPA）。通过这个实战项目，我们可以...
VUE代码架构浅谈
tongliuwei的博客
05-24 924
h 函数就是createElement，是 Vue.js 里面的 函数，这个函数的作用就是生成一个 VNode节点，render 函数得到这个 VNode 节点之后，返回给 Vue.js 的 mount 函数，渲染成真实 DOM 节点，并挂载到根节点上。layout布局页面会在router/index.js中进行加载，是一种将页面布局抽象为可复用组件的方式，以便在多个页面之间共享布局逻辑。app.vue是vue页面资源的首加载项，是主组件，页面入口文件 ，所有页面都是在App.vue下进行切换的。
vue前端项目架构（vue）
03-29
此项目集成了vue，vue-cli，axios（进行了二次封装），element-ui，router
【Vue】基本结构
在这里你大概率会有所收获，欢迎指错||纠正||建议||水评+点赞&&评论&&关注&&转发
07-03 5189
一个vue组件主要包括3个部分：界面展示代码template、业务实现代码script、界面布局代码style <template> <div class="class_1"> <h2>{{msg}}</h2> 这是一个fry VueComponentTest </div> </template> <script> export default { name: 'FryT
vue源码系列2之代码结构及整体逻辑
yuxiaoc的博客
02-17 1724
vue 源码系列之代码结构及整体逻辑
vue项目代码结构
qq_35401191的博客
10-05 1148
最外层文件： README.md  ————&gt; 说明文件 package.json  ————&gt;依赖文件存储地 package-lock.json ————&gt;依赖的版本 LICENSE  ————&gt;开源协议说明 index.heml  ————&gt;项目首页的默认文件（深入） postcssrc.js ————&gt;postcss的配置项。 gitigno...
vue源码结构
weixin_47976412的博客
01-16 317
【代码】vue源码结构。
vue项目的基本结构
小小前端
10-08 1088
目录解析 文件 说明 build 项目构建(webpack)相关代码 config 配置目录，包括端口号等 src 这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：assets: 放置一些图片，如logo等。components: 目录里面放了一个组件文件，可以不用。App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 co...
【VUE基础知识】
weixin_50312169的博客
01-24 1586
VUE基础知识 代码基本结构 每一个vue文件由三部分组成，template、script、style，分别对应html、js、css，另外需要注意的是：template中只允许有一个块状元素，通常情况下是div，其他所有元素的标签都在这个块状元素中 // template即模版的意思，每一个vue文件里必须要有一个，在这里写HTML代码 <template> <div id="app"></div> </template> // 在这里写js逻辑相关的
vuex代码结构
哒哒哒
07-06 744
vuex是一套相对独立的代码，因此可以抽象出到单独的文件夹里，那么比较好的代码结构是啥样的？ 话不多说，以下是vuex比较好的代码结构 ├── index.html ├── main.js ├── api │ └── ... # 抽取出API请求 ├── components │ ├── App.vue │ └── ... └── store ├── index.js ...
数据结构学习网源码数据库——SSM+MySQL+Vue实现
资源摘要信息: "基于ssm+mysql+vue的数据结构学习网源码数据库.zip" ### 标题解读 该标题指出资源是一个整合了ssm框架（Spring、SpringMVC、MyBatis）、MySQL数据库以及Vue.js前端技术的数据结构学习网站的源码和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值