Vue
文章平均质量分 82
Vue
前端吕小布
庸人方自扰,自在就好
展开
-
虚拟DOM原理
在Vue2渲染层做了根本性的改动,那就是引入了虚拟DOM。vue的虚拟dom是基于 snabbdom 改造过来的。了解 snabbdom的原理之后再回过头来看 vue的虚拟DOM结构的实现。就难度不大了!一、背景为什么需要 Virtual DOM在前端刀耕火种的时代,jquery 可谓是一家独大。然而慢慢地人们发现,在我们的代码中布满了一系列操作 DOM 的代码。这些代码难以维护,又容易出错,最重要的是,DOM操作非常耗费性能。而Vue和React是数据驱动视图,那么它们如何有效控制DOM操作呢?原创 2022-05-05 16:17:58 · 522 阅读 · 0 评论 -
Vue双向绑定原理
大家都知道,关于Vue的双向绑定,核心是Object.defineProperty()方法,那接下来我们就简单介绍一下!Object.defineProperty()语法:Object.defineProperty(obj,prop,descriptor)obj——要在其上定义属性的对象。prop——要定义或修改的属性的名称。descriptor——将被定义或修改的属性描述符。其实,简单点来说,就是通过此方法来定义一个值。调用,使用到了get方法,赋值,使用到了set方法。例子:let原创 2022-04-27 23:22:32 · 5043 阅读 · 1 评论 -
JS的get方法和set方法
get 关键字将对象属性与函数进行绑定,当属性被访问时,对应函数被执行。set 关键字将对象属性与函数进行绑定,当属性被赋值时,对应函数被执行。基本用法:let obj = { a: '吕小布', get b() { console.log('一旦调用对象的b属性,就会触发b属性的get方法') }, set b(newVal) { b = newVal console.log('调用了b属性的set方法,方法的值是:' + newVal) }}obj.原创 2022-04-27 18:18:37 · 10789 阅读 · 0 评论 -
Vue插槽
含义:插槽就是子组件中的提供给父组件使用的一个占位符,用slot标签表示,父组件可以在这个占位符中填充任何模板代码,如 HTML、组件等,填充的内容会替换子组件的slot标签。例如:// 子组件定义slot占位符<template> <h1>子组件</h1> <slot>submit</slot></template>// 父组件填充插槽内容,然后就会取代子组件中的slot占位符<template>原创 2022-03-03 11:35:37 · 810 阅读 · 0 评论 -
Vue CLI的UI界面(可视化操作Vue项目)
一、打开我们的Vue项目如果当时是使用vue init webpack my-project创建Vue项目的,打开Vue项目是先用cd切换到项目文件夹,再使用“npm run dev”或者“npmrunstart”命令打开。如果是使用vue create my-project创建的Vue项目,就只能使用“npm run serve”命令打开项目。这是我目前的发现。二、打开Vue-Cli的UI界面在已经打开了git bash的情况下,再双击git bash便可打开第二个git bash,然后切..原创 2020-12-02 11:11:47 · 8105 阅读 · 3 评论 -
如何安装vue-devtools(超简单)
vue-devtools的安装有两种方法,第一种是通过谷歌应用商店进行安装,第二种是手动安装:方法一(通过谷歌应用商店进行安装,需要翻墙):打开谷歌的更多工具-扩展程序,打开左上角的“主菜单”,点击下面的“打开Chrome网上应用店”,这个应用商店是需要翻墙的,一般同学是打不开的!能打开的同学搜索Vue.js devtools,把第一个扩展程序添加至Chrome即可。方法二:(手动安装,无需翻墙)1、打开https://github.com/vuejs/vue-devtools2原创 2020-12-01 18:05:50 · 5605 阅读 · 0 评论 -
如何创建一个Vue项目(超简单)
1、安装Node.js(官网Node.js下载)2、运行node -v和npm -v两条命令(检验是否下载成功Node.js)3、npm install -g cnpm --registry=https://registry.npm.taobao.org(用npm安装cnpm,将镜像源设置为国内镜像源,国内镜像源由taobao提供,有些软件可能在国外,有的时候可能需要翻墙,你就会下载比较慢,这个时候使用cnpm就比npm快)4、cnpm -v(查看安装的cnpm版本号,用于检查cnpm安装是否成功)5、cn原创 2020-11-26 17:47:03 · 1274 阅读 · 1 评论