![](https://img-blog.csdnimg.cn/20191228165310818.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
文章平均质量分 96
Vue
yingjieweb
踏踏实实学点前端
展开
-
MVC 软件架构模式
1、MVC(Model-View-Controller)MVC全名 Model View Controller,是模型 (model)-视图 (view)-控制器 (controller) 的缩写。MVC 这一概念是来源于后端的框架构建思想,是一种软件设计典范,用一种业务逻辑、数据、界面显示分离的方法组织代码,将业务逻辑聚集到一个部件里面,在改进和个性化定制界面及用户交互的同时,不需要重新编...原创 2020-04-04 16:33:27 · 1070 阅读 · 0 评论 -
MVVM 软件架构模式
1、MVVM(Model-View-Viewmodel)MVVM 是一种新型的软件架构模式,它本质上就是 MVC 的改进版。MVVM 有助于将图形用户界面的开发与后端业务逻辑的开发分离开来,MVVM 的视图模型是一个值转换器,这意味着视图模型负责从模型中转换数据对象,以便轻松管理和呈现对象,视图模型实现了中间者的功能。2、MVVM的运行机制View 层:视图层,前端开发中的 DOM 层...原创 2019-10-15 20:17:31 · 664 阅读 · 0 评论 -
Vue CLI 安装及使用方法
一、Vue CLI 是个啥?如果你只是简单写几个 Vue 的 Demo 程序,那么你不需要用 Vue CLI。如果你在开发大型项目,那么你需要,并且必然需要使用Vue CLI。使用 Vue.js 开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。如果每个项目都要手动完成这些工作,无疑效率比较低,通常我们会使用一些脚手架工具来帮助完成这些事情。二、CLI ...原创 2019-09-14 08:02:36 · 512 阅读 · 0 评论 -
升级 Vue CLI4 的脱坑日记
今天心血来潮的想将之前安装的 Vue CLI3 更新一下,随通过命令行对 Vue CLI 进行重新安装,安装完成后命令行查看版本号是:@vue/cli 4.2.3,下面创建一个项目来试一下 Vue CLI4 感觉怎么样vue create demo //项目名称为demo报错!报错信息说是淘宝镜像没有响应,重复试过多次依然不行,于是乎开始了 Google 搜索错误信息,试着从 S...原创 2020-04-04 21:54:16 · 693 阅读 · 0 评论 -
使用 Vue CLI 创建新项目
一、安装 Vue CLI 的准备使用 Vue CLI创建新项目之前,首先你需要安装Vue CLI ,因为 Vue CLI 是基于 node 和 webpack 的,所以还需要在安装Vue CLI 之前,先安装好 node 和 webpack 。如果还没有安装的话可以参考这里:安装步骤。二、Vue CLI3 与 Vue CLI2 版本的区别1、vue-cli3 是基于 we...原创 2019-10-30 09:17:19 · 636 阅读 · 0 评论 -
深入理解 Vue 不同构建版本的区别
目录1、两个版本的相关介绍2、运行时+编译器 vs 只包含运行时3、template 和 render 的使用区别4、用 codesandbox.io 写 Vue 代码1、两个版本的相关介绍首先你要了解如何创建一个 Vue 项目,如果你还不熟悉的话,可以移步到这里:传送门。创建 Vue 项目的过程中会涉及到 Vue 两个不同版本的选择:(1)完整版:vue.js、(2)只包...原创 2020-04-09 10:24:40 · 2018 阅读 · 0 评论 -
虚拟 DOM 和 DOM diff 简介 ★
1、虚拟 DOM 是个啥?虚拟 DOM 和 DOM diff 这两个概念在 Vue 和 React 中经常被提到,也是作为面试时的一个区分初级和高级前端的知识点,这两个概念可以说是非常重要了,但是其实只要你仔细研究一下就会发现它实际上并没有什么难度!虚拟 DOM 与真实 DOM 相对应,它其实就是通过 JavaScript 对象来模拟真实的 DOM 树。只不过这个 JavaScript 对象比较特殊,它内部通常含有标签名、标签上的属性、事件监听和子元素,以及一些其他属性。为什么要用虚拟 DOM.原创 2020-09-20 16:08:33 · 390 阅读 · 0 评论 -
Vue 实例及构造选项 options
目录1、Vue 实例2、构造选项 options3、options 基础重要属性1、Vue 实例const vm = new Vue( options );这句话表示创建一个 Vue 的实例 vm,类似 jQuery 的封装思想,vm 对象内封装了对视图的所有操作,比如:数据的读写、事件的绑定、Dom 更新等(但是没有 Ajax,因为 Vue 主要是视图层的操作,不涵盖网络层...原创 2020-04-10 15:01:19 · 812 阅读 · 1 评论 -
Vue 实例的生命周期图解
最近在学习Vue.js,感觉实例的生命周期这一部分挺重要的,就抽时间在这里梳理了一下,这里有Vue实例生命周期的官方文档,感兴趣的同学可以参考一下。Vue生命周期中包括几个生命周期函数:创建前/后、挂载前/后、更新前/后、销毁前/后,下面是图解:1、beforeCreated()在执行 beforeCreated() 生命周期函数的时候,Vue 实例中 data 数据和 metho...原创 2019-07-13 16:59:42 · 489 阅读 · 0 评论 -
深入 Vue 2.x 数据响应式原理 ★
1、Vue 对 data 做了什么Vue 的数据响应式是它的一大特点,也是它的一大优势,Vue 中的 data 数据模型仅仅是普通的 JavaScript 对象,而当你修改它们时,视图会进行更新,这使得状态管理非常简单直接,那 Vue 到底对 data 做了什么呢?Vue 官方解释:传送门const myData = { //将实例中的data抽出来 n: 0}conso...原创 2020-04-10 18:07:27 · 574 阅读 · 0 评论 -
Vue 3.0 对数据双向绑定的改进
目录1、Object.defineProperty 的缺陷2、Vue 3.0 的数据双向绑定原理3、之前的问题得到了完美的解决1、Object.defineProperty 的缺陷熟悉 Vue 的人都知道,在 vue2.x 之前都是使用 Object.defineProperty() 来实现双向数据双向绑定(数据响应式)的,如果你对此有疑问的话,可以看一下我的这篇博客:深入 Vue 2.x 数据响应式原理。但是这个 Object.defineProperty() 的方法是有挺多缺陷的,下原创 2020-06-16 17:02:35 · 1183 阅读 · 0 评论 -
Vue 3.0 + Vite 快速尝鲜!
目录1、Vite简单介绍2、Vite 的项目搭建3、结合 Vue 3.0 使用1、Vite简单介绍Vite是由 Vue 作者尤雨溪开发的一套一种新的、更快地 web 开发工具,它具快速的冷启动、即时的模块热更新、真正的按需编译几个特点。作者曾在微博上发言:Vite,一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports,在服务器端按需编译返回,完全跳过了打包这个概念,服务器随起随用。同时不仅有 Vue 文件支持,还搞定了热更新,而且热更新的速度...原创 2020-07-19 13:11:07 · 9219 阅读 · 0 评论 -
Vue 构造选型 options 进阶属性
1、构造选项 optionsoptions 是创建 vue 实例时的参数,具体可以查看选项官方文档,options 内含五大类属性:数据:data、props、propsData、computed、methods、watch DOM:el、template、render、renderError 生命周期钩子:beforeCreate/created、beforeMount/mou...原创 2020-04-12 11:19:22 · 1078 阅读 · 0 评论 -
Vue 中 computed 和 watch 的区别
1、computed - 计算属性computed 是依赖 Vue 的 options 中的 data 内部属性,计算出一个新的值的,可以当作属性直接用,但是其实为函数。 computed 在使用的过程中不需要加 () 。Vue 会自动去读取其函数的返回值。 computed 会根据依赖进行自动缓存。如果依赖的 data 数据不变,computed 就不会重新计算。2、watch - 监...原创 2020-04-12 16:55:33 · 280 阅读 · 0 评论 -
Vue 的三种 template 模板写法
目录1、Vue 完整版写法(一)2、Vue 完整版写法(二)3、Vue 非完整版 + .vue 文件1、Vue 完整版写法(一)由于 Vue 完整版的组成是由 运行时版 + 编译器,编译器可以解析 HTML 代码,所以支持将 HTML 写在 .html 文件中。<div id="app"> {{n}} <button @click="ad...原创 2020-04-12 20:14:22 · 2724 阅读 · 0 评论 -
Vue 的 template 模板相关语法
我们把 HTML 模板叫做 template,我们所说的模板一般特指 HTML 的字符串,它里面都涵盖那些语法呢?1、内容展示方面mustache {{ }} 表达式语法用于展示 Vue 的 options 中 data 内部属性,它和 v-text 的效果是一样的,具体使用方式如下:<div>hello,{{person.name}}</div> &...原创 2020-04-13 09:00:46 · 1241 阅读 · 0 评论 -
v-if 和 v-show 指令的区别
v-if 和 v-show 都可以控制 DOM 元素的显示和隐藏,但是二者有一些区别如下:v-show 其实时在控制 css,使标签 display:none 来隐藏。v-if 是每次都会重新删除和创建元素,它是动态的向DOM树添加或删除DOM元素。v-show 有较高的初始性能消耗,因为v-show控制的元素不管显示还是不显示,都会编译,v-show 的初始值为 false 的标签,...原创 2019-10-28 09:28:33 · 387 阅读 · 0 评论 -
Vue 指令及修饰符 & .sync 详解
目录1、指令及其语法2、指令修饰符3、都有哪些修饰符1、指令及其语法Vue 模板语法中的 v-text、v-html、v-pre 都是指令,它起到一种命令或指示的效果,语法如下:v-指令名:参数 = 值如 v-on:click="add",如果值里没有特殊字符,则可以不加引号。有些指令没有参数和值,如 v-pre ,有些指令没有值,如 v-on:click.preven...原创 2020-04-13 09:39:11 · 875 阅读 · 0 评论 -
Vue 中表单元素双向绑定 v-model 原理
表单元素在实际开发中是非常常见的,特别是对于用户信息的提交,需要大量的表单元素。在 Vue 中使用 v-mode 指令来实现表单元素和数据的双向绑定。v-model 指令只能用于表单元素中:input、select、checkbox、textarea。1、用 v-model 实现表单元素和数据的双向绑定<body> <div id="app"> ...原创 2019-10-20 11:01:36 · 1004 阅读 · 0 评论 -
Vue 的 class 组件介绍(vue-property-decorator)
1、Vue class 组件介绍在 Vue 的 V2.X 版本中使用 TypeScript 时,推荐使用基于类的注解装饰器进行开发。Vue 官方推荐Vue Class Component,但是它的装饰器可能存在一点小问题,业界普遍推荐使用 vue-property-decorator,它是基于 vue-class-component 开发而成,但是性能上有一些改进,下面主要介绍基于 vu...原创 2020-04-27 11:26:42 · 3163 阅读 · 0 评论 -
Vue 组件化及基本使用
目录1、组件化是啥2、注册组件的基本步骤3、组件化的基本使用4、组件之间的切换1、组件化是啥如果将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展。但如果将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了。Vue 组件化思想:组件化是 Vue.js 中的重要思...原创 2019-07-11 16:53:19 · 535 阅读 · 0 评论 -
Vue 父组件和子组件
目录1、父组件和子组件2、父子组件通信 — 父传子props3、父子组件通信 — 子传父(自定义事件)4、为什么组件 data 必须是函数1、父组件和子组件组件树可以显示出组件和组件之间存在的层级关系,而其中一种非常重要的关系就是父子组件的关系,下面看一下代码是如何形成这种层级关系的:<div id="app"> <cpn2></...原创 2019-07-11 20:56:49 · 862 阅读 · 0 评论 -
Vue-router 的基本使用
目录1、路由是个啥:2、路由的两种模式3、Vue-router的安装和配置1、路由是个啥:1.1、后端路由阶段:后端渲染:当用户输入一个网址向服务器发送请求后,服务器解析用户数据的 url,并找到用户想请求的页面的相关数据,在服务器端直接将页面渲染好,然后发给客户端,客户端直接展示网页。后端路由:上面这种渲染方式,后端会处理 url 和页面之间的映射关系,这个就叫做后...原创 2019-07-31 10:49:31 · 557 阅读 · 0 评论 -
Vuex 的基本使用
目录1、Vuex 是个啥?2、单页面的状态管理3、Vuex 的安装及使用4、通过mutation改变state状态5、Vuex 的几个核心概念6、项目结构1、Vuex 是个啥?官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue...原创 2019-12-13 20:26:23 · 242 阅读 · 0 评论 -
vue 项目给路径配置别名、统一代码风格配置
目录1、给路径配置别名3、开发代码统一风格配置用 vue-cli3 搭建的项目的相关配置会放到项目的 node_modules 的文件夹下,如果直接去 node_modules 修改配置不仅不方便,后期还会出现一些问题,所以像是给文件路径起别名、配置开发代码的风格等配置,一般都是直接在项目根目录下新建相关的配置文件。1、给路径配置别名给路径配置别名,一般会在项目根目录下新建一个...原创 2019-10-30 10:04:41 · 1277 阅读 · 0 评论 -
vue 中动态绑定 img 的 src 属性
vue 中给 img 标签动态绑定 src 属性需要用到 require() 函数,比如:<div v-for="(item, index) in listData" :key="index" class="item"> <div class="icon"> <img :src="item.src" alt=""> ...原创 2019-10-28 18:28:23 · 7821 阅读 · 0 评论 -
[Vue] 跑马灯效果demo
起步HTML:<div id="wrap"> <div id="head"> <p id="lamp">得不到的永远在骚动,被偏爱的都有恃无恐!!! </p><hr /> <input id="start" type="button" value="开始" /> <input id...原创 2019-07-12 10:59:15 · 317 阅读 · 0 评论 -
[Vue] 购物车小球动画效果
Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下几种工具:在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScript 动画库,如 Velocity.js这里有JavaScript钩子的Vue官方文档点...原创 2019-07-17 16:26:28 · 410 阅读 · 0 评论