vue基础
关注
分享
扫一扫
vue基础笔记
蜡笔love小新
只记录个人学习笔记
展开
-
虚拟DOM如何新建和渲染
上一篇描述了什么是虚拟DOM。在React和Vue中，虚拟DOM的创建都是由模板或者JSX来完成的。但是由模板变成render或者JSX完成虚拟DOM的创建都是由webpack的loader来完成。我们现在就用原生的方法去完成虚拟DOM是如何去新建和渲染的。如何新建假设我们要生成下面这样一个虚拟DOM<div id="test"> <p>节点1</p&...原创 2019-10-21 10:09:16 · 1081 阅读 · 0 评论 -
虚拟DOM是什么？
问题： 什么是虚拟DOM，我们为什么要用它，它与原生DOM有什么区别？在浏览器的标准里面，DOM是非常复杂的，我们先写一段基本的代码来体现 <script> let div = document.createElement('div') let dif for ( let key in div) { dif += key + ' ' }...原创 2019-10-17 20:46:09 · 383 阅读 · 0 评论 -
vue插槽v-slot
1.什么是slot <app> <menu-main></menu-main> <menu-sub></menu-sub> <div> <app-footer></app-footer> </div> ...原创 2019-10-15 21:02:23 · 840 阅读 · 0 评论 -
vue过滤器的使用
定义自定义过滤器，可以使用的两个地方为插值表达式{{}}中与v-bind表达式中，我们可以定义为全局过滤器和局部过滤器。全局过滤器使用的是Vue.filter()，局部过滤器使用的是filters: {}。全局过滤器需要定义在new Vue()之前。可以同时使用多个过滤器，调用顺序由左到右。过滤器是 JavaScript 函数，因此可以接收参数，过滤器第一个参数默认为要过滤的数，第二个参数开始才...原创 2019-10-14 21:49:09 · 247 阅读 · 0 评论 -
vue生命周期created()前做了什么
我们在做项目时，通常会在组件created()钩子函数中请求后端接口，得到数据后渲染视图，这样可以达到切换到对应页面，即可显示后端数据。问题： vue生命周期created()前做了什么？我们可以看到，官网上给出的是，created()之前执行了初始化注入、初始化化校验。从vue2源码看看：路径：\vue-dev\src\core\instance\init.jsexport func...原创 2019-10-14 15:14:30 · 2564 阅读 · 0 评论 -
vue生命周期beforeCreate()前做了什么
概念当我们执行 new Vue()开始到被创建完成，vue需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。beforeCreate问题：beforeCreate为vue初始化过程中第一个钩子函数，那么从new Vue()到beforeCreate过程它做了什么？...原创 2019-10-13 22:58:11 · 23420 阅读 · 1 评论 -
vue的自定义指令
指令的使用vue的自定义指令分为全局指令和局部指令，vue自带的内置指令不能够满足现在的开发需求，所以我们可以通过自定义指令来实现自己想要的指令。全局指令：注册在vue上的，用法为vue.directive，必须在new Vue之前定义，定义了全局指令，说明该指令在整个vue实例中都可以被使用。例子：新增输入框自动获取焦点的自定义指令<body> <div id=...原创 2019-10-13 17:19:41 · 241 阅读 · 0 评论 -
vue的基本内置指令
1.插值表达式 {{}}作用：将vue数据模型中的数据显示到视图层中，只能使用在双向标签中间例子：<p>{{name}}</p>2.v-text作用：将vue数据模型中的数据显示到视图层中，定义在开始标签中，单向标签和双向标签都可以使用例子：<div v-text="content"></div>3.v-html作用：也是将vue数据模...原创 2019-10-13 17:33:29 · 480 阅读 · 0 评论