vue
SHIKIO
这个作者很懒,什么都没留下…
展开
-
深入Vue2.x的虚拟DOM diff原理
作者简介:汪玉林,高级工程师,增值产品部前端Leader,目前团队负责手Q游戏中心、手Q游戏运营、手Q阅读等项目,有丰富的Web前端架构经验。一、前言Vue的核心是双向绑定和虚拟DOM(下文我们简称为vdom),关于双向绑定可以参阅木琴的文章《剖析Vue原理&实现双向绑定MVVM》,vdom是树状结构,其节点为vnode,vnode和浏览器DOM中的Node一一对应,通过vnode的e...转载 2019-07-29 10:45:59 · 144 阅读 · 0 评论 -
相关知识---vue
Object.assign Object.keys Object.valuesvue列表循环非响应式情况数组的length无法响应处理手段: 使用 arr = null arr.splice( 0 )当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue处理手段: Vue.set / this.$set...原创 2019-08-01 20:32:27 · 137 阅读 · 0 评论 -
Vue 组件的生命周期
组件的生命周期我们想要使用组件,那么就得在组件的特定阶段完成特点的任务 【 特定时间点,完成特点任务 】名词: 钩子: 【 姜太公钓鱼,愿者上钩 】 机遇特点时间点,触发的一个方法组件的生命周期分为三个阶段: 初始化、运行中、销毁 8个钩子函数生命周期钩子不允许写成箭头函数,因为箭头函数会改变this指向初始化beforeCreate () {}组件即...原创 2019-07-31 21:17:43 · 199 阅读 · 1 评论 -
Vue - slot 插槽
<div id="app"> <Hello> <p> 这里是Hello的内容 </p> </Hello> </div> <template id="hello"> <d...原创 2019-07-31 21:13:08 · 115 阅读 · 0 评论 -
从零认识Vue 组件extend
Vue.extend 1. 通过实例化Vue构造器函数得到一个Vue实例,这个实例我们称之为’根实例’,它是最大的父级 2. 这个根实例是以标签的形式存在的,那么我们也称之为’ 根组件 ’ 3. 根实例也是一个组件,但是我们得到只是跟组件 4. Vue.extend() 它就是对Vue功能的扩展,这个扩展就是组件 5. Vue是通过 Vue.extend...原创 2019-07-30 22:35:05 · 246 阅读 · 0 评论 -
Vue 一
指令v-bind属性和数据进行绑定举例: 表单的value属性和一个数据绑定说法: 绑定一个数据在某一个属性身上v-bind 【 单项数据绑定 】绑定类名 绑定样式为什么要绑定?答: 通过操作数据就可以改变V中dom的样式,相当于操作了dom类名的绑定 【 两种写法 】对象的写法 <p class = "size bg"&g...原创 2019-07-25 17:13:23 · 129 阅读 · 0 评论 -
Flex 布局教程:语法篇 ---作者: 阮一峰
Flex 布局教程:语法篇网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于[盒状模型],依赖 [display]属性 + [position]属性 + [float]属性。它对于那些特殊布局非常不方便,比如,[垂直居中]就不容易实现。2009年,W3C 提出了一种新的方案----Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏...转载 2019-07-30 16:18:24 · 779 阅读 · 0 评论 -
axios数据请求 《3》 --fetch
<!-- 引入--> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" cr...原创 2019-07-29 16:40:24 · 149 阅读 · 0 评论 -
axios数据请求 《2》
//引入<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="ano...原创 2019-07-29 16:36:57 · 127 阅读 · 0 评论 -
axios数据请求
<div id="app"> <div class="container"> <div class="row"> <h3> 静态请求【 模拟数据 】 </h3> <button type="button" class="btn btn-primary" @...原创 2019-07-29 16:31:42 · 179 阅读 · 0 评论 -
Vue key的作用
<div id="app"> <ul> <li v-for = "(item,index) in todos" :key = "item.id" > <p> {{ item.task }} </p> <div class="btn_box...原创 2019-07-29 16:27:25 · 215 阅读 · 0 评论 -
读懂diff-----阮一峰的日志
作者: [阮一峰]日期: [2012年8月29日]diff是Unix系统的一个很重要的工具程序。它用来比较两个文本文件的差异,是代码版本管理的基石之一。你在命令行下,输入:$ diff <变动前的文件> <变动后的文件>diff就会告诉你,这两个文件有何差异。它的显示结果不太好懂,下面我就来说明,如何读懂diff。一、diff的三种格式由于历史原因,di...转载 2019-07-29 10:52:43 · 454 阅读 · 0 评论 -
vue项目的快速构建工具 cli 【 脚手架 】
cli2 【 扩展 】 cli3 【 大纲 】什么是cli?cli是vue提供的一个用来快速构建项目环境的一个工具,底层使用的是webpackcli目前有哪些版本?cli2 cli3cli3对电脑的配置有一定要求cli如何使用?cli的安装npm/cnpm/yarn 都可以使用 【 yarn 配置国内镜像 】使用国内镜像加速npm和yarnnp...原创 2019-08-01 20:35:21 · 205 阅读 · 0 评论