Vue
关注
分享
扫一扫
文章平均质量分 56
爱发呆的程序员
这个作者很懒，什么都没留下…
展开
-
Vue响应式原理
Vue响应式原理1、目标模拟一个最小版本的Vue响应式原理在面试的常问问题实际项目中出现问题的原理层面的解决 给Vue实例新增一个成员是否是响应式的？ 给属性重新赋值成对象，是否是响应式的？为学习Vue源码做铺垫。2、数据驱动在实现整个Vue响应式代码之前，我们先来了解几个概念。第一个：数据驱动第二个：响应式的核心原理第三个：发布订阅模式和观察这模式我们先来看一下数据驱动的内容：数据响应式，双向绑定，数据驱动（我们经常看到这几个词）数据响应式：数据模型仅仅是普原创 2021-03-10 11:36:56 · 315 阅读 · 0 评论 -
复习Vue20、函数式组件和混入(mixin)
复习Vue20、函数式组件和混入(mixin)20.1、函数式组件组件没有管理任何状态，也没有监听任何传递给它的状态，也没有生命周期方法时，可以将组件标记为functional.这意味它无状态（没有响应式数据），也没有实例（没有this上下文）因为只是函数，所以渲染的开销相对来说，较小。函数化的组件中的 Render 函数，提供了第二个参数 context 作为上下文，data、props、slots、children 以及 parent 都可以通过 context 来访问。20.2 混入（mix原创 2021-03-02 17:42:49 · 347 阅读 · 0 评论 -
复习vue19、渲染函数
复习vue19、渲染函数Vue推荐在绝大数情况下使用模板来创建你的HTML。然后在一些场景中，你真的需要JavaScript的完全编程的能力，也就是使用javaScript来创建HTML，这时你可以用渲染函数，它比模板更接近编译器。这里我们先来做一个基本的了解，为后期的深入学习打好一个基础。下面先看一下render函数的基本结构。render:function(createElement){ //createElement函数返回的结果为VNode. VNode就是虚拟dom，用js对象来模原创 2021-03-02 17:39:41 · 139 阅读 · 0 评论 -
复习Vue18、自定义指令
复习Vue18、自定义指令18.1 自定义指令基本用法为什么需要自定义指令呢？因为内置指令不满足需求。下面看一下基本的创建自定义指令语法:Vue.directive('focus',{ inserted:function(el){ //获取元素焦点 el.focus(); } });自定义指令用法<input type="text" v-focus>下面看一下具体的代码。<!DO原创 2021-03-02 16:26:41 · 155 阅读 · 0 评论 -
复习Vue17：过滤器
复习Vue17：过滤器17.1 过滤器基本使用过滤器在日常生活中也是比较常见的，例如自来水的过滤等。在Vue中，过滤器的作用就是格式化数据，也就是对数据的过滤处理，比如将字符串格式化为首字母大写或者将日期格式化为指定的格式等。下面先看一下自定义过滤器的语法Vue.filter('过滤器名称',function(value){//value参数表示要处理的数据 //过滤器业务逻辑，最终将处理后的数据进行返回})定义好以后可以使用。使用的方式如下：<div>{{msg|up原创 2021-03-02 16:23:13 · 127 阅读 · 0 评论 -
复习Vue16、常用API说明
复习Vue16、常用API说明16.1、 Vue.set向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且会触发视图更新。使用方法：Vue.set(target,propertyName,value)下面通过一个案例来演示一下,这个案例是在以前所做的用户列表的案例上进行修改的，这里需求是给每个用户动态的添加身高。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8原创 2021-03-02 16:12:07 · 192 阅读 · 0 评论 -
复习Vue15：Vue组件化的理解
复习Vue15：Vue组件化的理解关于Vue组件的内容，我们已经学习很多了，那么你能谈一下对Vue组件化的理解吗？其实这也是一个比较常见的面试题。当然，这个问题的面是非常广的。可以通过以下几点来描述：定义：组件是可复用的Vue实例，准确讲它是VueComponent的实例，继承自Vue优点：组件化可以增加代码的复用性，可维护性和可测试性。使用场景：什么时候使用组件？以下分类可以作为参数第一：通用组件：实现最基本的功能，具有通用性，复用性。例如按钮组件，输入框组件，布局组件等。(Element原创 2021-03-02 14:34:50 · 218 阅读 · 0 评论 -
复习Vue14：组件插槽应用
复习Vue14：组件插槽应用14.1、插槽基本使用生活中的插槽其实我们生活中有很多很多的插槽，比如电脑的usb插槽，插板中的电源插槽等等。每一个插槽都有他们之间的价值。比如电脑的usb插槽，可以用来插U盘，链接鼠标，链接收集、音响等等，通过这些插槽，大大拓展了原有设备的功能。组件中的插槽组件中的插槽，让使用者可以绝对组件内部的一些内容到底展示什么，也就是，插槽可以实现父组件向子组件传递模板内容，具有插槽的组件将会有更加强大的拓展性。下面看一个实际应用的例子来体会一下插槽的应用场景。三个页面中原创 2021-03-02 14:24:28 · 317 阅读 · 0 评论 -
复习Vue13：组件通信
复习Vue13：组件通信13.1、父组件向子组件传值当我们将整个页面都拆分为不同的组件之后，这样就会涉及到组件之间的数据传递问题。常见的组件通信可以分为三类：第一类：父组件向子组件传递数据第二类：子组件向父组件传递数据第三类：兄弟组件的数据传递下面我们先看一下父组件向子组件传递数据的情况第一：子组件通过props接收传递过来的值。Vue.component('menu-item',{ props:['title'] // props后面跟一个数组，数组中的内容为字符串，这个字符串可以当做原创 2021-03-02 11:12:27 · 217 阅读 · 0 评论 -
复习Vue12：组件化应用
复习Vue12：组件化应用12.1、组件概述：在这一小节中，重点要理解的就是组件的编程思想。组件标识页面中的部分功能(包括自己的逻辑与样式)，可以组合多个组件实现完整的页面功能。如下图所示：问题是，如何确定页面中那些内容划分到一个组件中呢？但你如何确定应该将那些部分划分到一个组件中呢？你可以将组件当做一种函数或者是对象来考虑（函数的功能是单一的），根据[单一功能原则]来判断组件的范围。也就是说，一个组件原则上只能负责一个功能。如果它需要负责更多的功能，这时候就应该将它拆分成更小的组件。组件有原创 2021-03-02 10:16:49 · 176 阅读 · 0 评论 -
复习Vue11：生命周期探讨
复习Vue11：生命周期探讨其实在Vue实例的生命周期，主要分为三个阶段，分别为挂载(初始化相关的属性,例如watch属性，method属性)1、beforeCreate2、created3、beforMounte4、mounted更新(元素或组件的变更操作)1、beforUpdate2、updatad销毁(销毁相关属性)1、beforDestroy2、destroyed下面我们来看一道面试题：关于Vue的生命周期，下列哪项是不正确的？()[单选题]A、Vue 实例从创建到原创 2021-03-02 09:09:46 · 752 阅读 · 3 评论 -
复习Vue10：生命周期简介
复习Vue10：生命周期简介每个Vue实例在被创建时都要经历一系列的初始化过程，例如：需要设置数据的监听，编译模板，将实例挂载到DOM上，并且在数据变化是更新DOM等，这些过程统称为Vue实例的生命周期。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。下面，我们来看一下这些钩子函数的应用。通过一个异步获取列表数据的案例，来查看这些生命周期的钩子函数应用。在这里是通过异步的方式获取用户列表的数据。<!DOCTYPE html><htm原创 2021-03-01 15:46:36 · 287 阅读 · 0 评论 -
复习Vue9：侦听器 watch
复习Vue9：侦听器 watch侦听器就是侦听data中数据变化，如果数据一旦发生变化就是通知侦听器所绑定方法，来执行相应的操作。从这一点上，与计算属性是非常类似的。但是侦听器也有自己独有的应用场景。执行一户或者开销较大的操作。下面，我们看一下侦听器的基本使用我们使用侦听器来统计总人数。<p> 总人数：{{totalCount}} </p>在data中定义totalCount属性。data: { selectI原创 2021-03-01 15:21:41 · 199 阅读 · 0 评论 -
Vue复习8：计算属性 computed
Vue复习8：计算属性 computed计算属性出现的目的是解决模板中放入过多的逻辑会让模板过重且难以维护的问题。计算属性是根据data中已有的属性，计算得到一个新的属性。下面，我们通过一个案例来学一下计算属性在文本框中输入第一个名字，第二个文本框中输入第二个名字，然后展示全部名称。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta n原创 2021-03-01 14:56:29 · 589 阅读 · 0 评论 -
复习Vue7：条件渲染 v-if v-show
复习Vue7：条件渲染 v-if v-showv-if和v-show指令可以用来控制元素的显示和隐藏下面，我们先来看一下v-if的应用这里还是对永辉数据进行判断。 <div id="app"> <p v-if="users.length===0">没有任何用户数据</p> <ul v-else> <!-- users表示数组，item表示从数组中取出的对象,这个名字可以随意取 -->原创 2021-03-01 14:16:08 · 145 阅读 · 0 评论 -
Vue复习6：class与style绑定
Vue复习6：class与style绑定这块主要内容主要与样式设置有关。操作元素的class列表和内联样式是数据绑定的一个常见的需求。因为他们都是atribute，所以我们可以用 v-bind处理它们：只需要通过表达式计算出字符串结果即可，不过，字符串拼接麻烦且易错。因此，在将v-bind用于class和style时，Vue.js做了专门的增强。表达式结果的类型除了字符串以外，还可以是对象或数组。下面先看一下`Class的绑定在“列表渲染”中给每个列表添加对应的样式。 <style>原创 2021-03-01 14:07:13 · 228 阅读 · 0 评论 -
Vue复习5：v-on
Vue复习5：v-on怎样监听dom的事件呢？可以通过v-on指令完成，具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatibl原创 2021-03-01 11:54:59 · 128 阅读 · 0 评论 -
复习Vue4:v-model
复习Vue4:v-model在前面讲解Vue简介的时候，我们说过，如果Model中的数据发生了变化，会通过ViewModel通知View更新数据，这个效果我们在前面已经讲过演示过了，现在演示一下当view中的数据发生了变化后，怎样通过ViewModel来通知Model来完成数据的更新。其实这就是我们常说的，“双向数据绑定”怎样实现这种效果呢？通过v-model来实现。<!-- v-model指令用来双向数据绑定：就是model和view中的值进行同步变化 --> <!-- v-原创 2021-03-01 11:43:35 · 220 阅读 · 0 评论 -
复习Vue3:列表渲染 v-for
复习Vue3:列表渲染 v-for我们可以通过使用v-for指令基于一个数组来渲染一个列表，v-for指令需要使用item in items形式的语法。其中 items是源数组，而item则是被迭代的数组元素的别名。基本实现的代码如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="wi原创 2021-03-01 11:20:21 · 604 阅读 · 0 评论 -
复习Vue2：模板语法
复习Vue2：模板语法2.1 属性绑定属性的绑定，下面我们先看一下关于对属性的绑定<div id="app"> <h2 v-bind:title="msg"> {{msg}} </h2> </div>在上面的代码中，我们通过v-bind的方式给h2绑定了一个title属性。当然我们上面的代码也可以通过如下方式来进行简化 <div id="app"> <h2 :title="原创 2021-03-01 11:10:18 · 91 阅读 · 0 评论 -
复习vue1：Vue的基本使用以及MVVM的介绍
复习vue1:Vue的基本使用以及MVVM的介绍下面，先来看一段最简单的代码，如下所示：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vue基本使用</tit原创 2021-03-01 10:59:25 · 157 阅读 · 0 评论