Vue-起步（3）

最新推荐文章于 2023-06-08 16:34:18 发布
最新推荐文章于 2023-06-08 16:34:18 发布
阅读量80 收藏
点赞数
分类专栏： vue
本文为博主原创文章，署名（BY）-非商业性使用（NC）-禁止演绎（ND），转载请附上原文链接和本申明。
本文链接：https://blog.csdn.net/qq_38060231/article/details/108628304
版权

Vue-起步（3）

一、传统设计模式-MVP

在这里插入图片描述
model层：也就是我们说的数据层
presenter层：呈现层或者和业务逻辑相关的控制层
view层：视图层一般指页面上的dom展示

二、MVVM设计模式

**加粗样式**
在这里插入图片描述
在写vue代码的时候一直都在操作数据，而数据就是M层，写的模板标签就是V层，而数据变化页面就会跟着变化这个操作是VM层实现的，vue就是一个VM层

VM层：他可以监听到数据变了帮我们改变视图层，也可以监听到视图层有事件触发调用相应的逻辑代码，通过这些代码我们又改变了M层的数据，当数据变化的时候VM层又会自动把数据映射到视图层

好处：我们只需要关注M层的开发，是面向数据进行编程，减少了代码量

多一点开心
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3 入门
xihuanLilia的博客
05-26 1177
VUE3入门前言1.性能的提升2.源码的升级3.拥抱TypeScript4.新的特性创建vue工程起步Composition APISetupref函数方法中改变ref数据ref改变对象reactive函数 前言 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王 对比于vue2 进行了以下的优化 1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% … 2.源码的升级 使用Proxy代替defineProperty
Vue3 起步简单示例
thankseveryday的专栏
05-12 651
以下是最简单的使用语法： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
vue3起步
simple5960的博客
04-07 242
安装vue3脚手架 npm i -g @vue/cli 如何支持typescript 在创建项目的时候如vue create fileName 选择manmully,然后用空格选中typescript选项 使用vue3的图形界面 vue ui 语法高亮支持 下载vuter 新语法 import { defineComponent ,ref} from 'vue'; export default defineComponent({ name: 'App', se.
vue3项目起步:
m0_59006402的博客
07-17 215
1.cmd窗口: vue create 项目名字 2.自定义创建: 5. 3.选择一些选项 4. 选择vue3.0版本 5.选择hash模式 6.选择less预处理器 7.标准代码风格: 8.保存代码校验代码风格，代码提交时候校验代码风格 9.依赖插件或者工具的配置文件分文件保存 10.记不记录以上操作,这个按个人意愿选择,看你要不要保留了 项目创建完成之后,接下来,我们调整一下目录: 增加两个配置文件:jsconfig.json ...
【Vue3】起步
weixin_39415598的博客
05-04 335
theme: vue-pro 前言 Vue3 中文文档 Vue 是一套用于构建用户界面的渐进式框架，作为当今前端三大框架之一，Vue 是我觉得最容易上手的框架。 本文是我学习 Vue 3 笔记的第一篇，把常用的知识点整理成一个小册。 需要声明的是，Vue 3 提供了 CompositionAPI 的语法，而很多文章也大肆宣传该语法，从而让部分开发者以为新版不再兼容 Vue 2 的语法...
3.Vue起步
weixin_30740295的博客
06-24 70
创建一个Vue实例化对象 　　DOM 　　 　　实例化Vue对象 　　　 　 　　参数说明： 　　　　var app ： 对象名称是 app， 　　　　el : 绑定DOM 元素中的 id， 　　　　data ：用于定义数据属性， 　　打印这个实例化对象看看都有什么吧 　　　　 　　　　这个方框的是不是很熟悉？ 　　　　加$的是实例化对象的...
【05Vue3 起步】Vue3 起步：创建项目、编写组件和运行应用
最新发布
燃正科技
06-08 5490
到这里，你已经成功入门 Vue3，并编写了一个简单的应用程序。接下来，你可以继续学习 Vue3 的文档和教程，深入了解 Vue3 的更多功能和用法。根据提示选择默认配置或手动配置项目。你还可以使用预设模板，如 TypeScript 或 Vue Router。现在我们已经创建了一个 Vue3 项目，接下来我们将编写第一个 Vue 组件。现在我们已经编写了一个 Vue 组件，接下来我们将在应用程序中使用它。现在我们已经完成了组件的编写和使用，接下来我们将运行应用程序。首先，我们将创建一个新的 Vue3 项目。
vue3 第一幕之【快速上手】起步与基础篇（node.js安装配置 组合式API基础）
XSL_HR的博客
09-20 1155
关于vue3 vite ts的一些基础知识整理
Vue基础（三）：跟着官方文档学Vue之起步
Wanik666
04-30 252
1. Hello Vue! 创建一个普通html文件，使用CND方式引入vue.js，接下来就开始第一个Vue应用。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello</title> <...
VUE3学习(入门篇)
热门推荐
Joey_Tribiani的博客
09-24 1万+
VUE3学习(入门篇) Vue3相较于Vue2.x改动： 性能提升 按照vue官方的说法，Vue3包含了以下性能方面的提升： 打包大小减少41% 内存占用减少54% 初次渲染快55%，更新渲染快133% 源码升级 使用Proxy代替Object.defineProperty方法实现响应式 重写虚拟DOM的实现和Tree-Shaking TypeScript支持优化 Vue3可以更好地支持TypeScript 新特性 Composition API（组合API） setup配置 ref与re
vue3入门起步
babyxuqian的博客
04-14 1280
在vue3中需要什么就引入什么：import { } from "vue"; （注意：在vue3中只有响应式数据才能在页面中特别渲染变化） setup函数 简介：setup函数是vue3专门为组件提供的新属性 执行：创建组件实例，初始化props，然后就调用setup，在生命周期beforeCareat钩子之前调用 reactive函数 reactive函数接收一个普通对象，返回一个响应式对象 模板语法----循环语句 <template> <div class="m
Vue3 起步
qq_44336097的博客
04-17 440
刚开始学习 Vue，直接在页面引入 vue.global.js 文件来测试学习。 Vue3 中的应用是通过使用 createApp 函数来创建的，语法格式如下： const app = Vue.createApp({ /* 选项 */ }) 传递给 createApp 的选项用于配置根组件。在使用 mount() 挂载应用时，该组件被用作渲染的起点。 一个简单的实例： Vue.createApp(HelloVueApp).mount('#hello-vue') createApp 的参数是根组件（Hel
vue起步3之vue-router的基本使用
nuc_badaomen的博客
05-22 558
vue-router的基本使用 vue是单页面应用，一个页面是由多个组件构成，所以说做页面跳转的时候并不适合用传统的href,于是vue-router就诞生了。 vue-router是官方的路由管理器 安装 npm install vue-router 在项目根目录下执行以上命令即可 使用 在 src目录下的router/index.js定义router, 就是定义 路径到 组件的 映射。 主页面组件App.vue 主入口main.js 场景1 进入项目后直接跳转到指定页
Vue3.0 起步 快速搭建项目（一）
weixin_43826136的博客
02-26 1万+
学习多了自然就迷糊了，不学习那注定迷糊。 1 安装脚手架 npm install -g @vue/cli # OR yarn global add @vue/cli 2 检查版本Vue CLI v4.5.7 vue -V 3 搭建项目 vue create vue3.0 ? Please pick a preset: (Use arrow keys) //请选择预选项 > Default ([Vue 2] babel, eslint) ...
最全的 Vue3 快速上手指南【值得收藏】
前端小白-Mr鹏帅
03-20 3793
Vue3简介 面临的问题：随着功能的增长，复杂组件的代码变得难以维护，Vue3就随之而来，TypeScript使用的越来越多，Vue3就是TS写的所以能够更好的支持TypeScript 在这里介绍就这么简单 vue2的绝大多数的特性 在Vue3都能使用，毕竟Vue是渐进式的 响应式原理进行使用Proxy实现，v-model可以传参了等等新特性 基础工作 使用Vue3的话，那么必须通过使用构建工具创建一个Vue3项目 安装 vue-cli #npm npmi...
vue-amap的使用
多一点开心
10-14 7143
vue-amap的使用一、效果图二、安装三、使用 一、效果图 二、安装 第一步：安装 npm install vue-amap --save 第二步：入口main.js文件配置 import VueAMap from "vue-amap"; Vue.use(VueAMap); VueAMap.initAMapApiLoader({ key: "95fa72137f4263f8e64ae01f766ad09c", plugin: [ "AMap.Autocomplete", "AMap
echarts-坐标轴名称过长省略，鼠标移入显示全部
多一点开心
10-10 2322
坐标轴名称过长省略，鼠标移入显示全部一、效果图 一、效果图
Vue基础-条件渲染
多一点开心
10-10 1781
条件渲染一、v-if二、v-show三、v-if和v-show的区别四、用key管理可复用的元素 一、v-if 真正的条件渲染，确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建，但他是有惰性的如果初始渲染条件为假，则什么都不做直到第一次条件为真才开始渲染条件块. v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。 二、v-show 不管
Vue基础-计算属性的getter和Setter
多一点开心
10-06 1177
计算属性的getter和Setter一、getter和setter二、代码 一、getter和setter 当我们取计算属性值的时候会执行get方法，设置的时候会执行set方法 二、代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算属性的getter和Setter</title> <script src="./vue.js">&lt
Vue基础-set方法
多一点开心
10-15 1174
Vue.set 使用场景：当生成vue实例后，给原本不存在的属性赋值，赋值成功后的值并不会自动更新到视图上去，这个时候可以用Vue.set 官方介绍： 举例：改变对象 set方法不仅是vue的全局方法还是vue的实例方法，已下这种写法也可以实现页面跟着数据变化 除此之外还可以通过改变对象的引用实现页面跟着数据变 举例：改变数组 除此之外还可以通过数组的变更方法和改变数组的引用实现页面跟着数据变 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值