Vue
关注
分享
扫一扫
没有什么时间是比现在合适的
欲穷千里目，更上一层楼。
展开
-
Vue.js 源码阅读中遇到的知识点记录
阅读 Vue.js 中遇到的小知识点，虽然很多知识点都可能会牵连出很多问题，但是为了不影响源码的阅读进程，就用到什么学习什么并以此记录（随缘更新）。Rollup 中的命令行参数 environmentrollup -c --environment INCLUDE_DEPS,BUILD:production-c 的作用是指定 rollup 的配置文件，如果这个参数没有传值，会默认使用 rollup.config.js 文件作为配置文件。--environemnt 通过 process.ENV原创 2020-07-20 13:09:46 · 165 阅读 · 0 评论 -
Vue2.0 render:h => h(App)
new Vue({ router, store, render: h => h(App)}).$mount('#app')render函数是渲染一个视图，然后提供给el挂载，如果没有render那页面什么都不会出来vue.2.0的渲染过程：1.首先需要了解这是 es 6 的语法，表示 Vue 实例选项对象的 render 方法作为一个函数，接受传入的参数 h 函数，返回...转载 2020-03-07 11:57:12 · 205 阅读 · 0 评论 -
Vue项目url中的BASE_URL解析
在Vue中遇到很多url都用到了<%= BASE_URL %>这个东西。<%= BASE_URL %>看起来很牛pia，其实就是当前目录。原创 2020-03-07 11:46:42 · 35938 阅读 · 7 评论 -
vue-cli项目初始化文件解析
使用vue-cli安装完一个项目之后会有很多花里胡哨的文件，记录一下相关文件的作用1、yarn.lock这个文件记录了node_modules里面下载的包的详细信息。2、README.md项目的说明文件，包括了项目依赖下载方法、项目启动指令、项目打包指令等。3、package.json当前项目的运行时依赖和开发时依赖的配置文件。4、babel.config.js声明ES6语法编译...原创 2020-03-07 11:45:16 · 150 阅读 · 0 评论 -
关于vue-cli项目搭建完成之后的yarn serve启动指令
在项目的配置文件package.json里面，声明了两条指令的快捷指令，当执行yarn serve的时候就相当于执行了vue-cli-service serve这条指令。原创 2020-03-07 11:28:26 · 21647 阅读 · 0 评论 -
Vue脚手架搭建项目下载node-sass时报错
使用yarn下载，将yarn下载node-sass的地址手动设置成淘宝镜像的地址就可以了就可以了。yarn config set sass-binary-site http://npm.taobao.org/mirrors/node-sass -g顺便捎带着记录一下，将yarn的仓库地址修改成淘宝镜像的方式yarn config set registry http://registry.n...原创 2020-03-07 11:22:18 · 476 阅读 · 0 评论 -
slot插槽
匿名槽口：<div id="app"> <aaa> 哈哈哈 </aaa></div><template id="aaa"> <div> <h1>我是a组件</h1> <!-- slot就是在组件声明的时候预留给外界嵌入内...原创 2020-02-19 11:22:52 · 168 阅读 · 0 评论 -
理解虚拟DOM，key
虚拟dom的目的是为了减少前端应用对真实dom节点的操作，它是真实dom的一层映射，将真实dom转换成了js对象的形式存储在内存中，当dom需要发生变化时，只需要修改虚拟dom的内存数据，然后通过diff算法将改变的地方局部渲染到真实dom上，并不会引起真实dom的全部渲染。key的作用：为了减少复杂度，diff算法在进行计算的时候仅仅是对同级元素之间进行对比，因此复杂度为n。而key的作用就是...原创 2020-02-19 10:37:41 · 232 阅读 · 0 评论 -
Vue从零开始05——component通信
Component-dataVue组件中的data必须写成一个函数返回对象的形式，目的就是让每一个组件实例维护一份被返回对象的独立的拷贝。容易理解的说就是，为了让每一个组件实例都可以单独的对自己的数据进行需要的操作而且不会对其他的组件实例的数据造成影响。Vue.component("hello",{ template:"<h1>{{msg}}</h1>", ...原创 2019-12-28 16:19:37 · 172 阅读 · 0 评论 -
Vue中给标签加行内样式的方式
<div :style="{background:ownColor}"></div>原创 2019-12-28 10:56:43 · 2115 阅读 · 0 评论 -
Vue从零开始07——组件嵌套
<div id="app"> <father></father> <son></son></div><script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script><script> Vue.com...原创 2019-12-28 10:28:53 · 136 阅读 · 0 评论 -
Vue从零开始07——is实现组件间的切换
可以通过is属性和v-bind指令实现组件之间的切换，即:is<div id="app"> <button @click="switchCom">切换组件</button> <div :is="isA == true?'com-a':'com-b'"></div> <!-- 不能使用template标签绑定...原创 2019-12-24 23:09:08 · 186 阅读 · 0 评论 -
Vue从零开始05——component
组件在Vue中，我们通过Vue.extend()来创建Vue的子类，这个东西其实就是组件console.log(Vue.prototype == Vue.extend().prototype.__proto__);//true/* 原型实质上就是一个对象，每一个对象上都有一个__proto__属性，该属性指向的就 是构造该对象的构造函数的原型。Vue.extend().prototyp...原创 2019-12-24 22:52:52 · 129 阅读 · 0 评论 -
Vue从零开始06——filter过滤
Vue.filter()是在Vue实例上面挂载的一个过滤器，通常用于对一些常见的数据进行格式化。比如，将一个时间戳转换成日期时间的格式。全局过滤器局部过滤器过滤器的作用就是在数据显示的时候将数据转换成一定的格式并显示出来。<body> <div id="app"> {{time | timer}} </div> ...原创 2019-12-24 22:29:23 · 92 阅读 · 0 评论 -
Vue从零开始04——mixins
在Vue中可以使用mixins来做代码的抽离复用，便于维护。一个mixins其实就是一个纯粹的对象，上面挂载着抽离出来的配置。在某一个实例中，通过mixins选项导入后，此实例就拥有导入的mixins的配置。mixins的服用不会和实例本身的配置相会覆盖，而是会合并到一起。但是实力本身的优先级会大于mixins，所以实例本身是可以对引入的配置项重写的。<div id="app1"...原创 2019-12-17 21:49:24 · 93 阅读 · 0 评论 -
Vue从零开始03——vue-resource（从vue-resource看jsonp跨域）
JSONP跨域原理可以看下这篇文章<div id="app"> <button @click="jsonp">get</button></div><script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script><script src="ht...原创 2019-12-17 21:15:20 · 165 阅读 · 0 评论 -
Vue从零开始03——vue-resource
vue-resource插件从vue2.0开始已经不再进行维护了，但也还可以用，简单介绍一下，防止以后用到不知。<body> <div id="app"> <button @click="get">get</button> </div> <script src="https://cdn.bo...原创 2019-12-17 20:50:28 · 126 阅读 · 0 评论 -
Vue从零开始02——watch和computed
本文详细介绍watch和computed的各自的使用以及区别。更能需求：总是需要data中一个数据的两倍加一的值。方法一：使用一个method返回这个data的两倍加一这个方法只需要我们在渲染新数据的时候调用一下这个方法就可以了。<div id="app"> <p>num的两倍：<span>{{doubleNum()}}</span>...原创 2019-12-14 12:08:09 · 111 阅读 · 0 评论 -
Vue从零开始02——Vue指令
Vue从零开始02——Vue指令1、v-for遍历数组<li v-for="item,index in animals">{{index+1}}{{item}}</li>animals:["猪","猫","狗"]遍历对象 <li v-for="item,key,index in pig">{{index+1}} {{key}} {{item}}&...原创 2019-12-05 23:00:27 · 195 阅读 · 0 评论 -
Vue从零开始01——Vue双向绑定原理和MVVM
Vue从零开始01——Vue介绍 Vue是一个主张较弱的渐进式框架，什么是主张弱的渐进式框架呢？主张弱和渐进式说的都是，可以灵活的选取你需要用的东西和不需要用的东西，需要用的就引进来，不需要用的就不引，所有的一切都是由我们自己决定的。比如说，我们只是用到声明式渲染，我们只需要引入Vue.js就可以了，如果是要做一个spa只需要引入Vue-router就行了 ，如果是需要对全局的...原创 2019-12-03 22:48:59 · 267 阅读 · 1 评论