Vue
文章平均质量分 75
如何一步一步走近vue的学习,这只是我自己的学习经历。也只用于本人留作笔记保存
梦.C
这个作者很懒,什么都没留下…
展开
-
vue总结(一)
我断断续续的学习 Vue 的知识,从指令到组件,这中间我有很多没有弄懂,但是却感觉良好,直到我去学习 Vue Router 之后,我发现很多我不会,比如被我忽略的异步组件、过渡、JSX 等。然后我们重新回到 Vue 的怀抱,继续学习关于Vue 的知识,进行查漏补缺。现在我将结合我之前和现在所学的Vue 知识,将Vue 进行整理和总结,好好整理我脑袋中关于有关Vue的东西,同时留下一点学习的足迹,更为了以后的复习!!!!!!...原创 2021-01-06 15:49:24 · 180 阅读 · 0 评论 -
vue的异步组件
我们之前了解过普通组件、单文本组件,那么这篇我们将了解一下另外一种组件的声明方式——异步组件异步组件在大型应用中,需要加载的资源较多,导致加载时间过长,所以我们可能需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块。而Vue 提供的异步组件就实现了这个功能,使用 Vue 中的工厂函数的方式定义组件,这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染时才会触发该工厂函数,且会把结果缓存起来供未来重渲染。全局注册 <div id="app">.原创 2021-01-04 17:27:59 · 3080 阅读 · 0 评论 -
vue的内置组件
Vue中的组件分为两种,一种是自定义组件,另外一种就是内置组件。内置组件是Vue已经封装好的组件,总共就五个内置组件Vue的内置组件其实我们在一些场景中使用过,但是我们没有系统的了解,这里我们总结一下所有的内置组件和其属性参数。componen组件这个内置组件用于动态切换页面部分区域的视图,它有两个属性:is:根据它的值来渲染需要显示的视图inline-template:用于表示是否能显示通过内联模板声明的视图 <div id="app"> <butt.原创 2021-01-04 17:27:46 · 1774 阅读 · 0 评论 -
vue的过渡
这篇文章介绍Vue的过渡与动画,主要是用到组件transition。我们在CSS 中也学习了过渡,Vue中的过渡和CSS中的过渡效果一样。Vue中在插入、更新或移除 DOM 的过程中就可以使用过渡。过渡分为单元过渡和多元素过渡。单元素过渡在过渡的实现过程中,从开始过渡到结束过渡,总共实现会有 6 个 class 切换:v-enter:定义上半场过渡的初始状态;在过渡开始前被添加,在过渡开始时会被移除v-enter-to:定义上半场过渡的结束状态;在过渡开始时被添加,在过渡完成时会被移除v-.原创 2020-12-30 16:26:41 · 663 阅读 · 0 评论 -
vue脚手架的搭建
我们学完vue最核心的内容组件之后,我们来了解一下vue脚手架的内容。什么是脚手架脚手架就是一个用于快速搭建项目的骨架,对项目所依赖的配置进行初始化的工具。我们利用这个工具可以自动生成一个基于Vue.js的单页面应用的脚手架项目关于脚手架在Vue.js中,这个脚手架就是Vue CLI。在最新版本中,Vue CLI有三个组件:CLI(@vue/cli ):全局安装的npm包,提供了终端里的vue命令。CLI服务(@vue/cli-service):CLI服务是一个开发环境依赖。它是一个npm.原创 2020-11-13 23:01:33 · 375 阅读 · 0 评论 -
带你了解vue中的API
我们之前了解了Vue 的全局配置,现在去了解一个Vue 中的 API。全局APIVue.extend( options ):这个 API 用于创建一个“子类”,参数是一个包含组件选项的对象。用于创建组件构造器,具体在组件的注册有讲解Vue.set( target, key, value ):用于设置 Vue 实例某个对象的属性值,目标对象不能是一个 Vue 实例或 Vue 实例的根数据对象。 let vm = new Vue({ el: "#app",原创 2020-12-10 18:25:12 · 8966 阅读 · 0 评论 -
带你了解vue的全局配置
今天我们去了解一下vue中关于全局配置的内容,Vue.config 是一个对象,它包含 Vue 的全局配置项,可以在启动应用之前对全局配置项进行配置silent配置项首先我们先了解silent配置项,它用于配置是否取消 Vue 所有的日志与警告,当Vue.config.silent = true,表示取消所有的日志与警告。<script> Vue.config.silent = true let vm = new Vue({ el:原创 2020-11-04 19:42:56 · 2420 阅读 · 0 评论 -
vue的生命周期
今天我们了解一下vue实例的生命周期,具体去了解一下生命周期重要的几个阶段!beforeCreate阶段这个阶段,是对vue实例进行初始化之后,在data、methods和watch等选项配置之前调用。created阶段这个阶段,实例已经对选项进行了处理,data(数据观测)、computed(计算属性)、methods(方法)、watch(监听)等选项已经被配置,但$el属性还不能使用。beforeMount阶段这个阶段,还为挂载实例,也无法对DOM进行操作,向比与created阶段,只多.原创 2020-11-09 20:00:07 · 306 阅读 · 1 评论 -
vue中的JSX和函数式组件
上一篇我们讲解了vue中使用 render 函数创建HTML,在创建过程比较复杂,而且模板中的 DOM 结构可读性差。那么这一篇我们主要了解JSX和函数组件JSXJSX全称是JavaScript XML,是一种JavaScript语法扩展,用于描述用户界面。其格式比较像是模板语言,但事实上完全是在JavaScript内部实现的。JSX语法用于简化模板的编写,使得模板的编写变得和普通 DOM 模板一样简单。在 Vue.js中,想要使用 JSX 语法就必须下载 Babel 插件。将如下 DOM 结构.原创 2020-12-27 19:21:59 · 1673 阅读 · 0 评论 -
vue中的渲染函数
虚拟DOM浏览器在解析HTML文档的时候,会将文档中的元素、注释和文本等标记按照它们的层级关系组织成一课数,这就是我们所熟知的DOM树。那么虚拟DOM是什么呢?虚拟DOM是使用普通的JavaScript 对象来描述的 ==DOM ==元素,在Vue 中,每一个虚拟节点都是一 VNode 的实例。而Vue.js 之所以执行性能高,就是因为采用了 虚拟 DOM机制。虚拟DOM对象就是普通的JavaScript对象,访问JavaScript对象要比访问真实的DOM 要快的多,Vue 在更新真实的 DOM 前原创 2020-12-26 19:22:01 · 2651 阅读 · 0 评论 -
vue组件的通信方式
总结一下前面介绍的组件通信的三种方式:父组件通过prop向子组件传递数据;子组件通过自定义事件向父组件发起通知或进行数据传递子组件通过元素充当占位符,获取父组件分发的内容;也可以在元素上使用v-bind指令绑定一个插槽prop,向父组件提供数据。除了上述三种通信方式,vue还提供了其他的通信方式。例如通过\$root属性访问根实例,通过\$parent属性访问父组件实例等等。下面我们具体去了解一下:访问根实例在每一new Vue实例的子组件中,都可以通过$root属性来访问根实例。原创 2020-11-11 17:54:32 · 75 阅读 · 0 评论 -
vue组件的模板定义方式
在vue组件中,我们除了直接在组件 <template>选项中定义模板外,Vue还提供了两种定义方式:内联模板和X-Template内联模板内联模板是在子组件上使用一个特殊属性inline-template,这个属性可以使组件的内容作为模板内容。...原创 2020-11-12 19:19:33 · 701 阅读 · 0 评论 -
vue的单文本组件
什么是vue单文本组件.vue文件,称为单文件组件,是Vue.js自定义的一种文件格式,一个.vue文件就是一个单独的组件,在文件内封装了组件相关的代码:html、css、jsvue单文本组件的组成部分.vue文件由三部分组成:<template>、<style>、<script><template> //组件模板</template> <style> //组件css样式</style><原创 2020-11-15 17:21:20 · 795 阅读 · 0 评论 -
vue的动态组件和混入
这篇文章我们了解一下vue的动态组件和混入。那什么是动态组件呢?动态组件就是对组件进行动态切换;那什么是混入呢?混入就是将组件中某些属性提取出进行复用。那下面我们具体去了解这两个内容动态组件在vue中,我们动态的切换组件必须使用<component>元素中的is属性。 <div id="app"> <button v-for="tab of tabs" :class="{active:currentTab==tab.title}" @click=.原创 2020-11-10 20:50:27 · 2218 阅读 · 0 评论 -
vue组件之插槽
普通页面元素是有属性和内容的,在vue中我们通过prop让组件拥有了属性,那么这篇内容我们来了解一下怎么给组件添加内容原创 2020-11-08 20:03:40 · 367 阅读 · 0 评论 -
vue组件之监听子组件事件
上一篇内容我们了解了vue组件中关于prop选项的内容,props选项实现了父组件和子组件的数据传递,这篇我们将了解一下子组件向父组件进行通信。$emit()方法子组件使用 $emit()方法触发父组件事件。在父组件中通过v-on指令监听子组件的自定义事件,然后自定义事件执行 $emit()方法触发父组件事件,这样就可以实现子组件和父组件之间的通信 <div id="app"> <post-item :value="arr" @greet="fatherCl.原创 2020-11-07 21:08:31 · 6611 阅读 · 0 评论 -
vue组件之Prop属性
一般页面元素是有属性的,如a标签有href等属性,同样Vue中组件也是有属性的。在Vue组件中想要使用属性,首先需要在组件内部定义一些属性,这些属性在Vue中被为prop,在组件中通过props选项中定义。...原创 2020-11-06 19:59:52 · 4207 阅读 · 2 评论 -
今天你学习了吗——vue组件(一)
组件是Vue的最核心的功能,在前端应用程序中可以采用模块化的开发,实现课重用、可扩攒。组件就是一个带有名字的可服用的Vue实例,因此在Vue实例中的各个选项也可以在组件中使用,唯一例外的是el选项。接下来我们具体去了解一下组件组件的注册组件的注册分两种形式,一种全局注册一种局部注册。全局注册在Vue中只能通过Vue.component来创建全局组件 <div id="app"> <input-button></input-button>原创 2020-11-05 19:21:38 · 154 阅读 · 0 评论 -
vue的过滤器
什么是过滤器过滤器本质上就是一个函数,与自定义指令相似。主要用于文本的格式化,或者数组的过滤和排序等。过滤器可以用在两个地方: 双花括号插值和 v-bind 表达式过滤器的注册过滤器和组件一样,分为全局注册和局部注册,注册的关键字是filter。下面我们具体去了解一下两种注册方式全局注册全局过滤器使用Vue.filter()方法来注册,该方法接受两个参数,分别表示过滤器名称和过滤器函数对象。具体语法:Vue.filter( id, [ definition ])。Vue.filter('cap原创 2020-12-10 15:22:20 · 230 阅读 · 0 评论 -
vue中的计算属性和侦听器
计算属性在模板中使用原创 2020-11-02 18:46:48 · 459 阅读 · 0 评论 -
vue中的指令——自定义指令
自定义指令之前我们已经了解过了内置指令,这些内置指令可以满足我们学大部分的需求,但是在某些特殊情况下我们要对DOM进行操作,这个时候我们就需要用到自定义智力了。自定义指令的注册自定义指令只有在注册之后才能使用,两种注册方式: //1.全局注册,这种定义方式可以在全局进行使用 //第一次参数是指令ID,第二个参数是一个定义对象或函数对象 Vue.directive(id, [definition]) //2.局部注册,只能在该实例绑定的视图中使用 //id表示指令ID new Vue({原创 2020-11-01 22:25:28 · 600 阅读 · 0 评论 -
你必须要知道的vue中v-on指令的修饰符
v-on指令首先我们了解一下v-on指令是用来干嘛的,v-on指令我在之前有进行讲解,v-on指令其实就是监听 DOM 事件,并在触发时运行一些 JavaScript 代码那么v-on指令的修饰符是什么呢,是vue为了让我们更加专注于数据逻辑出来,而封装的事件修饰符,可以通过调用已经写好的事件修饰符,来完成一些操作。接下来我们看一下具体的修饰符:.stop.stop用于调用 event.stop,阻止事件冒泡. <div id="app"> <div @click="a原创 2020-11-03 19:17:37 · 1304 阅读 · 0 评论 -
vue中的指令——内置指令
什么是指令指令是带 v- 前缀的特殊属性,其值限定为单个表达式。vue提供了少量指令供大家使用,在一定程度上简化了开发过程。当然除了内置指令,还有自定义指令,本篇就是对这两种指令进行讲解介绍。内置指令...原创 2020-10-30 17:09:15 · 1199 阅读 · 0 评论