Vue学习笔记

Vue 源码解析 - 组件挂载

[TOC]Vue学习笔记Vue源码解析-主线流程Vue源码解析-模板编译Vue源码解析-组件挂载Vue源码解析-数据驱动与响应式原理前言前文在对Vue整体流程进行分析时，我们已经知道对于Runtime+
Whyn·2020-07-30 15:51

vue学习笔记：三种for循环用法

vue学习笔记：三种for循环用法需求：遍历books数组，计算出总价格：price是单价，count是数量。
Glinhoow·2020-07-30 10:14

Vue学习笔记（一）

初学Vue.jsmustache语法{{name}}{{firstName+‘’+lastName}}{{firstName}}{{lastName}}constapp=newVue({el:'#app'data:{name:'KobeBryant',firstName:'Kobe',lastName:'Bryant'}})计算属性computed{{name}}constapp=newVue({
weixin_45154474·2020-07-30 10:42

Vue学习笔记——二、指令

2.指令2.1插值表达式({{}})和v-text的两个区别使用插值表达式，在网速较慢的情况下，存在内容闪烁的问题(即直接在页面上渲染{{内容}})，而v-text没有闪烁问题在插值表达式中，可以使用v-cloak解决闪烁问题[v-cloak]{display:none;}//v-cloak属性在页面渲染完成后会被移除{{msg}}插值表达式智慧插入内容，并不会清楚其余的内容；v-text会把元素
Aurora.怂·2020-07-30 10:00

Vue学习笔记(1)--引入、小实例、mvvm、生命周期

Vue是一套用于构建用户界面的渐进式框架。编程范式：声明式编程。一、引入二、小实例建一个简单Vue应用：{{message}}constapp=newVue({el:'#app',data:{message:'HelloVue!'}})在es6里面定义const(常量)/let(变量)。在创建Vue对象时，传入一些option:{}el属性：类型：string｜HTMLElement该属性决定了这
Ming-hl·2020-07-30 09:25

Vue学习笔记(5)--组件化的基本使用、父子组件间的访问和传递数据

一、组件化的基本使用创建组件构造器对象constcpnC=Vue.extend({template:`标题`})``(模版字符串)是ES6中的新的定义字符串的语法，最大的特点就是可以换行//使用''的话，换行要用+conststr='abc'+'bcd'//使用``的话conststr=`abcbcd`注册组件Vue.component('my-cpn',cpnC)使用组件整体代码//3、使用组件
Ming-hl·2020-07-30 09:54

Vue学习笔记(3)--计算属性和method的对比、部分ES6、事件监听、条件判断、v-show、v-for

一、计算属性与method的对比method只会一次次的执行方法，而计算属性可以判断每次参数是否变化而决定是再执行一次还是返回第一次的结果，计算属性会进行缓存，若多次使用时，计算属性只会调用一次。总体来说计算属性比method更加高效。二、ES6语法的一些学习块级作用域let是var的优化版，因为let具有块级作用域，而var没有。在JavaScript中if和for没有块级作用域，只有函数有块级
Ming-hl·2020-07-30 09:54

Vue学习笔记(2)--插值基本语法、动态绑定、计算属性

一、插值基本语法Mustache（胡须，指双大括号）v-once不让界面随意的因为后面的改变而改变该指令表示元素和组件只会渲染一次，不会随着数据的改变而改变。后面不跟表达式{{message}}v-html某些情况下从服务器返回的数据本身是一个html代码，若直接用{{}}进行输出，会将html代码一起输出。如果希望按照html格式进行解析并输出对应内容，就该用到此方法。constapp=newV
Ming-hl·2020-07-30 09:53

vue学习笔记 循环遍历v-for

vue循环遍历v-for1、v-for遍历数组只获取元素值时：{{item}}例子：{{item}}//books:['《132》','《213》','《321》','《123》']获取元素值和对应下标时：{{index}}+{{item}}例子：{{index}}+{{item}}2、v-for遍历对象只获取value值时：{{value}}/*info:{name:"bsy",age:18,h
qq_41937087·2020-07-30 09:06

vue学习笔记 条件判断

vue学习笔记条件判断1：v-if、v-else-if、v-else基本用法：//condition的类型为Boolean值情况1情况2情况3注：v-if、v-else-if、v-else多用在比较简单的逻辑判断上
qq_41937087·2020-07-30 09:06

vue学习笔记v-model(45-50)

vue学习笔记v-model(45-50)vue中的v-model实现了数据的双向绑定v-model的原理（双向绑定）：v-model实际上是一个语法糖，他背后包含了两个操作：1、v-bind给输入框绑定一个
qq_41937087·2020-07-30 09:06

Vue学习笔记01——插值表达式和事件修饰符

最近学长给我们一个关于前端Vue的教学资料，他认为非常实用，值得我们花时间去学习。我这边的项目也快完成了，省出一些时间，正好可以每天挤出一些时间学习Vue的知识！这是我前两天的学习笔记，正好是个day1内容，和大家分享一下！初始模板初始模板varvm=newVue(){el:"#app",//如果是class则用".app"data:{//数据msg:"输入数据"msg1:"123"...},me
眺望-->夜空·2020-07-30 09:39

Vue学习笔记 2 - 计算属性/过滤器/自定义指令/监测数组更新/高阶函数/ES6 语法补充/Vue 实例的生命周期

计算属性当需要对数据进行某种转化，并返回转化后的数据时，我们可以使用计算属性。{{fullName}}//注意：fullName是属性，不是函数，不用加()data:{firstName:'LeBron',lastName:'James'},computed:{fullName:function(){returnthis.firstName+''+this.lastName}}计算属性的缓存看起来
Caramely·2020-07-30 07:54

Vue学习笔记(4)--响应式数组、JavaScript高阶函数、v-model双向绑定

一、响应式数组btnClick(){//1、push()在数组结尾加上数据this.name.push('aa','bb','cc');//2、pop()删除数组的最后一个元素this.name.pop();//3、shift()删除数组中的第一个元素this.name.shift();//4、unshift()在数组最前面添加元素this.name.unshift();//5、splice(从哪
Ming-hl·2020-07-30 07:30

vue学习笔记 解析diff算法

在vue中，DOM被抽象为一个以JavaScript对象为节点的virtualDOM(虚拟DOM)树，当数据发生改变时，会通过修改virtualDOM，使用diff算法，修改局部的内容，然后将这部分内容以打补丁的方式来修改真实的DOM，来达到视图修改的作用。因为通过diff算法，能得出需要修改的最小单位，所以我们在更新视图的时候，只需要修改这些最小单位，这么做减小了更新的消耗。diff算法diff
前端小黑·2020-07-30 06:26

Vue学习笔记一——项目初始化

稍微写一写在学习Vue过程中的一个学习思路，也希望这个简易的教程能帮助到大家项目初始化项目创建在这里我学习到的是使用vue-cli版本3以上的GUI创建版本，这样方便创建首先配置vue-cli脚手架（没有进行npm/webpack等工具安装的同学查看这个链接如何运行vue项目（维护他人的项目）然后windows用户在命令行中使用npm或cnpm进行脚手架的安装npminstall-g@vue/cl
退堂鼓一级演员·2020-07-30 06:42

Vue学习笔记01day_13.v-for循环中key属性的使用

DocumentId:Name:{{item.id}}---{{item.name}}//创建Vue实例，得到ViewModelvarvm=newVue({el:'#app',data:{id:'',name:'',list:[{id:1,name:'李斯'},{id:2,name:'嬴政'},{id:3,name:'赵高'},{id:4,name:'韩非'},{id:5,name:'荀子'}]}
菜鸟柱子·2020-07-30 05:32

Vue学习笔记---Vue中的虚拟DOM以及它 的Diff算法

一、前言Dom操作是比较浪费时间和性能的，当数据量很大的时候，更新DOM是很耗费性能的操作。Vue提供了虚拟DOM的解决办法。Vue的核心是双向绑定和虚拟DOM（VirualDOMA），虚拟DOM是用js对象记录一个DOM节点的副本，当DOM发生更改的时候，先用虚拟DOM进行Diff，算出最小差异，然后再修改真实DOM。虚拟DOM和真实的DOM有一层映射关系，很多需要操作DOM的地方都会去操作虚拟
pro_Top·2020-07-30 04:40

[Vue学习笔记]虚拟dom与diff算法

虚拟dom（Virualdom）React先有，后Vue借鉴若频繁地操作dom节点，代码运行的时间消耗太大，因此Vue推出了以对象实现虚拟dom再加以渲染实体dom节省代码运行时间形成过程内存中生成一颗虚拟dom树将内存中的虚拟dom树初始化渲染成真实dom树当我们修改data中的数据的时候，将之前的虚拟dom树结合形成一个新的虚拟dom树将新的虚拟dom树与上一次旧的虚拟dom树进行对比（dif
炽银银·2020-07-29 23:59

vue学习笔记 These dependencies were not found core-js/modules/es......错误

查了查网上大致都是core-js这个依赖不匹配，尝试升级core-js之后又修改package.json文件配置，把里面的"core-js":"^3.6.4",改成,"core-js":"^3.6.5",仍然不行，然后又只能改回"core-js":"^3.6.4"最后在浏览器中http://localhost:8000/dependencies中找到问题原因是上面的依赖core-js才2.0,但是
lacer·2020-07-29 20:20

Vue学习笔记（一）1.1.0版

Vue渐进式的JS框架。最核心的思想MVVM，数据的绑定。如何使用使用步骤：1、引入vue.js2、创建一个容器标签3、创建一个Vue的实例对象，应该提供至少两个属性el，data4、编写模板、编写事件处理函数。模板的细节：操作元素的文本内容、属性、样式、事件、表单元素可以使用指令来操作这些内容，指令是13个1、操作文本内容（5个指令）把数据和标签进行绑定，把数据显示到标签内部。{{变量}}插值表
巴厘尚晴·2020-07-29 19:35

Vue 源码解析 - 主线流程

[TOC]Vue学习笔记Vue源码解析-主线流程Vue源码解析-模板编译Vue源码解析-组件挂载Vue源码解析-数据驱动与响应式原理前言前面我们对Vue的基本使用进行了归纳：Vue学习笔记，接下来我们对
Whyn·2020-07-29 16:11

Vue学习笔记——前后端交互

Vue学习笔记——前后端交互目标：能够说出什么是前后端交互模式能够说出Promise的相关概念和用法能够使用fetch进行接口调用能够使用axios进行接口调用能够使用async/await方式调用接口能够基于后台接口实现案例
是行是行啊·2020-07-29 12:58

uni-app和vue学习笔记

uni-app官网：https://uniapp.dcloud.io/uni-app官方教程学习手记：https://segmentfault.com/a/1190000017020710uni-app跨平台框架官方教程：https://ke.qq.com/course/343370?taid=2788142445051210模拟虚拟数据：https://easy-mock.com/uni-app
coca丶丶·2020-07-29 06:47

vue学习笔记（一）（vue webpack+vue-router+nodeJs npm）

该博客只是记录我自己使用vue-cli搭建一个vueJs项目，以及慢慢的完成一个项目的过程，主要记录心得与重要知识，由于自己半年前才转入前端，在之前有一些基础，在开始做vuejs项目之前已经明白nodeJs和vueJs的基本用法，所以，这里废话不多说，直接上步骤:1.vue-cli是vue的脚手架工具，主要有：（1）目录结构（2）本地调试（3）代码部署（4）热加载（5）单元测试vue-cli安装：
pupuGirl·2020-07-29 06:13

记录书单

一直以来觉得不错的文章都是放在收藏夹的，今天突然发现收藏夹已经有那么长了…教程阮一峰|JavaScript标准参考教程（alpha）阮一峰|ECMAScript6入门WebGL中文教程html5Canvas画图系列教程Vue
_let·2020-07-29 05:31

Vue学习笔记之初识模块化开发

1、ES6模块化的实现模块化开发声明：type="module"是为了防止各模块直接变量或方法的冲突，每一个模块都有自己的空间导出：export对象导出方式及内容有：导入：import对应的导入方式：exportdefault：在应用的时候，可以修改对应的名称，即是在导入的时候自己进行命名，这时在导出的时候需要用default的属性：引用：导出一个函数PS:1、在一个模块里，只能有一个defaul
大数据时代·2020-07-29 02:22

Vue学习笔记之Webpack简介及安装

1、概念：webpack是一个现代的JavaScript应用的静态模块打包工具（前端模块化打包工具）。让我们可以进行模块化开发，并且会帮助我们处理模块之间的依赖关系。2、webpack的安装：-g是全局安装（还有局部安装），@3.6.0指定版本PS：必须依赖Node.js环境，npm命令管理各种依赖包。npminstall-gcnpm--registry=http://registry.npm.t
大数据时代·2020-07-29 02:22

Vue学习笔记之组件的应用

Vue组件的应用：1、基础使用：第一步创建组件，第二步注册组件，第三步使用组件。在注册组件是需要用到template的属性。全局组件和局部组件组件的嵌套（父子组件）：注意先后顺序，先声明，后面才能用2、组件的语法糖：直接在声明的时候直接进行组件的构造，省去了extend()的步骤//2、注册组件Vue.component('cpn1',{template:``})组件分离写法：通过id来定位使用哪
大数据时代·2020-07-29 02:21

Vue学习笔记之图书采购界面小案例

一、案例要求：功能：点击购买数量的加号、减号进行数量的增减；移除数据；合计总价格等，具体功能界面如下：二、案例结构：Index.html界面main.js功能处理代码style.css样式三、代码实现(功能比较简单，就直接上代码了)Index.html界面：Title书籍名称出版日期价格购买数量操作{{item.id}}{{item.name}}{{item.date}}{{item.price|
大数据时代·2020-07-29 02:21

Vue学习笔记之父子组件通信以及经典案例

父组件、子组件直接的访问方式：1、父组件访问子组件可以用$childern或者$refs$childern的用法：当父组件引用多个子组件的时候，就会生成多个对应的对象：$childern可以访问子组件中的方法、data等数据但$childern一般在开发中比较少用，用$refs比较常用，因为$refs是可以通过key来绝对定位到对应的子组件，这种方法在实际开发中比较常用。$refs是一个对象类型，
大数据时代·2020-07-29 02:21

Vue学习笔记之IDEA工具中的Git、yarn、npm的使用

一、从码云或gihub拉取代码：1、启动IDEA，找到首选项（macOS系统可通过菜单找到「Preferences」打开，Windows系统通过选择菜单「File」->「Settings」打开），选择「Plugins」2、在弹出的插件市场中搜索关键字「Gitee」，在搜索结果中找到「Gitee」插件，点击「Install」安装插件。3、重启IDEA使插件生效。账号登陆设置：1.选择File-set
大数据时代·2020-07-29 02:21

Vue学习笔记之函数、高阶函数、v-model的应用

一、哪些函数是响应式的：1.push在后面追加数据5.sort()排序6.reverse()顺序翻转abcd---->dcba红框中的方式修改数组中的数据时，界面没有响应式的效果二、高阶函数：对数组的操作1、filter函数，返回布尔值返回值是true，则返回当前的值；如果返回值是false，则不返回当前值。循环判断数据里面的数据，直到完成；2、map函数，对数组里面的值进行处理后，返回相应的值。
大数据时代·2020-07-29 02:20

Vue学习笔记（七）路由

对于大多数单页面应用，都推荐使用官方支持的vue-router库。下面的代码默认导入了vue-router库路由的基本使用在Vue中，使用newVueRouter来创建一个路由，在Vue实例中将该路由放入Vue实例中的myRouter，即在某个实例上创建了一个路由。letlogin={template:'thisislogin'}letmyRouter=newVueRouter({routes:[
前端小黑·2020-07-29 02:17

vue学习笔记整理(三)--常用选项

data:类型-Object|Function只有当实例被创建时data中存在的属性才是响应式(改动将会触发任何视图的更新)的vue实例中的data选项是对象，则所有的实例将共享引用同一个数据对象。组件中的data必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。通过提供data函数，每次创建一个新实例后，我们能够调用data函数，从而返回初始数据的一个全新副本数据对象。pro
Alisane·2020-07-28 23:27

Vue学习笔记(八) 组件进阶

1、插槽（1）插槽内容像HTML元素一样，我们常常需要给组件传递内容比如在下面的例子中，我们给自定义组件prompt-info传入出错啦的文本Demo出错啦Vue.component('prompt-info',{template:`提示信息`})newVue({el:'#app'})但是，结果并不像我们所想的，出错啦的提示信息没有显示出来，这时候我们就可以使用解决这个问题就是插槽，也就是说我们需
wsmrzx·2020-07-28 23:21

vue学习笔记

vue学习笔记vue起步vue模板语法条件与循环computed属性监听属性样式绑定事件处理器表单和双向数据绑定组件自定义指令vue实例生命周期路由http过滤器过渡和动画混入学习资料vue起步vue应用语法格式
web_bugger·2020-07-28 22:54

Vue学习笔记（四）插槽、多级组件数据传递

八、插槽8.1匿名插槽插槽就是在组件中预留一个位置，在使用组件时可以给组件追加一些内容。插槽可以指定默认数据，如果使用者没有使用插槽就显示默认内容。在组件中写了几个匿名插槽，使用者填充的数据就会显示几份8.2具名插槽在定义插槽时可以给插槽指定name属性，指定了name属性的就是具名插槽。在使用时需要写上slot属性，才会把追加的内容插入到对应插槽中。不写slot属性会追加给匿名插槽8.3v-sl
前端弟弟也要努力鸭·2020-07-28 22:02

vue学习笔记之vuex动态注册模块

vuex动态注册模块vuex动态注册模块是利用store的registerModule方法实现的，下面具体看一下相关代码：注册模块exportdefault{methods:{register(){this.$store.registerModule('模块名称'，{state:{},getters:{},mutations:{},actions:{}})}}}已有模块动态注册子模块exportd
紫色小衬衣·2020-07-28 22:52

vue学习笔记一（v-bind，v-on，v-model，v-if ，动画transition，组件 ，ref 属性）有详细的案列

一、vue的学习官网vue的学习网站二、进入正题，开始介绍vue的具体用法。1、如何引入vue.js文件可以直接引入vue的连接例如可以下载vue的jar包，放到项目的路径中，直接引用放置的地址就行。2、v-bind和v-on的使用v-bind是绑定属性可以简写为:v-on是时间绑定，可以简写为@具体的用法：Document.red{background:red;}.green{backgroun
奋斗的哼哼·2020-07-28 22:45

vue学习笔记——vuex

Vuex是一个状态管理架构，为应用中的所有组件提供集中式的状态存储与操作，保证了所有状态以可预测的方式发生变化。Vue核心概念一共有5个，分别是state,getters,mutations,actions,modules。Vue官方文档为此提供了一个很好看的示意图vue官方文档入口VueComponents：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方法触发对应
回旋加速喷气式阿姆斯特朗炮·2020-07-28 21:39

vue学习笔记(五)：对于vuex的理解 + 简单实例

优点：通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。使用vuex来引入外部状态管理，将业务逻辑切分到组件外，可以避免重复的从服务端抓取数据。详情请参考官网文档__链接规则：1:应用层级的状态应该集中到单个store对象中。2:提交mutation是更改状态的唯一方法，并且这个过程是同步的3:异步逻辑都应该封装到action里面使用场景1：例如要实现在一
weixin_34174105·2020-07-28 18:40

Vue学习笔记(五) 样式绑定和事件处理

1、样式绑定class和style属性都可以控制元素的显示样式，我们可以使用v-bind指令对它们进行绑定（1）绑定class对象语法我们可以将一个对象传给v-bind:class，它将根据传入对象的值动态切换classDemo.warn{background:yellow;}.error{color:red;}Error数组语法我们也可以将一个数组传给v-bind:class，以便应用一个cla
weixin_30823683·2020-07-28 17:04

吐血整理-Vue学习笔记

学习一个新内容时，最好的方式就是跟随官方文档来进行学习。以下的学习也是基于Vue的官方文档：https://cn.vuejs.org/v2/guide/文章目录概述1、引入2、基本使用3、vue的页面标签4、组件5、实例属性与方法6、生命周期-主要有几个周期相关的方法7、模板语法8、计算属性9、对象语法10、条件渲染11、列表渲染12、监听事件13、表单控件绑定14、深入原理15、注册自定义指令待
MarxPe·2020-07-28 14:17

vue学习笔记（五）

节点，树MytitleSometextcontent上述HTML对应的DOM节点树如下图所示：每个元素都是一个节点。每段文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样，每个节点都可以有孩子节点(也就是说每个部分可以包含其它的一些部分)。虚拟DOM：Vue通过建立一个虚拟DOM来追踪自己要如何改变真实DOM。请仔细看这行代码：returncreateElement(
the_lower·2020-07-28 12:09

vue学习笔记（二）

组件：组件是可复用的Vue实例，所以它们与newVue接收相同的选项，例如data、computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。为了能在模板中使用，这些组件必须先注册以便Vue能够识别。这里有两种组件的注册类型：全局注册和局部注册。全局注册：//定义一个名为button-counter的新组件Vue.component('button-c
the_lower·2020-07-28 12:09

vue学习笔记（四）

混入：混入提供了一种非常灵活的方式，来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。//定义一个混入对象varmyMixin={created:function(){this.hello()},methods:{hello:function(){console.log('hellofrommixin!')}
the_lower·2020-07-28 12:09

vue学习笔记（三）

处理边界情况：访问根实例：在每个newVue实例的子组件中，其根实例可以通过$rootproperty进行访问（适用于小型应用，大型应用使用vuex来管理状态）//Vue根实例newVue({data:{foo:1},computed:{bar:function(){/*...*/}},methods:{baz:function(){/*...*/}}})//所有的子组件都可以将这个实例作为一个全
the_lower·2020-07-28 12:09

vue学习笔记-vue-admin-template框架学习

vue-admin-templateEnglish|简体中文使用[vue-admin-template]进行学习前台整合以及vue相关技术，本项目作为学习记录AminimalvueadmintemplatewithElementUI&axios&iconfont&permissioncontrol&lint项目代码:https://github.com/taoweidong/vue-admin-t
Taowiedong·2020-07-28 12:11

vue学习笔记【三、计算属性与监听】

1、set、get方法实现计算属性与普通属性之间的数据双向绑定====================================================exportdefault{name:"ComputedAndWatch",data(){return{first:'',last:''}},computed:{//计算属性与普通属性之间的单向绑定fullname1:{get(){r
crystal---·2020-07-28 10:51
上一页 10 11 12 13 14 15 16 17 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他