![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue基础篇
crazy的蓝色梦想
小柒 爱前端
展开
-
Vuex 使用modules采坑
前面的话Vuex一般用于项目比较大,组件之间的逻辑关系比较多时,其中的五大选项:state、mutations、actions、getters、modules小柒平时一般只使用过前四个。modules用来分割store,这次的项目用到了这个选项,记录一下踩的坑。项目结构store文件夹如下:我们不同模块state、getters、mutations、actions都写在不同的文件中,放入...原创 2020-03-15 21:14:17 · 972 阅读 · 0 评论 -
Vue中keep-alive组件的作用
keep-alive组件的作用作用:用于保留组件状态或避免重新渲染(缓存的作用)比如:当一个目录页面与一个详情页面,用户经常:打开目录页面=>进入详情页面=>返回目录页面=>打开详情页面,这样目录页面就是一个使用频率很高的页面,那么就可以对目录组件使用<keep-alive></keep-alive>进行缓存,这样用户每次返回目录时,都能从缓存中快速渲...原创 2020-02-01 18:58:57 · 631 阅读 · 0 评论 -
Vue 异步更新队列$nextTick
前面的话这篇文章将介绍关于Vue异步更新队列的知识,学习异步更新队列将帮助我们更好的理解Vue的更新机制。先来看一个例子:一个div,有v-if控制是否渲染,点击按钮对div的显示/隐藏做改变,并在显示时,获取里边的文本 。 <div id="app1"> <div id="div" v-if="showDiv">这是一段文本</div&g...原创 2019-07-09 11:20:35 · 777 阅读 · 0 评论 -
Vue X-Template 与 手动挂载实例
前面的话这篇文章将介绍两个Vue中高级用法,虽在开发中很少用到,但了解一下也是好的。X-Template如果没有使用webpack、gulp等工具,当我们使用组件template拼接HTML代码时,效率很低。Vue提供了一种定义模板的方式,在< script>标签里使用text/x-template类型,并且指定一个id,将这个id赋给template。<div id="...原创 2019-07-09 17:13:48 · 1388 阅读 · 0 评论 -
Vue 开发一个数字输入框组件
前面的话关于基础组件介绍,已经更新完了。这篇文章将用组件基础知识开发一个数字输入框组件。将涉及到指令、事件、组件间通信。基础需求只能输入数字设置初始值,最大值,最小值在输入框聚焦时,增加对键盘上下键的支持增加一个控制步伐prop-step,例如,设置为10 ,点击加号按钮,一次增加10项目搭建在了解需求后,进行项目的初始化:<!DOCTYPE html><...原创 2019-07-13 18:17:28 · 2124 阅读 · 1 评论 -
Vue 自定义指令
前面的话我们知道Vue有许多内置的指令,比如v-if、v-show等,不过有时我们需要对DOM进行底层操作,这时就要使用自定义指令。指令注册与组件注册一样,分为全局注册与局部注册这里注册一个v-focus的指令:用于在 元素初始化时自动获得焦点[全局注册] Vue.directive('focus',{ // 指令选项 })[局部注册] va...原创 2019-07-15 08:49:21 · 152 阅读 · 0 评论 -
Vue MVVM模式的理解
前面的话面试必考的话题之一:MVVM模式。这篇文章简单的介绍MVVM模式图解MVVM 是 Model-View-ViewModel 的缩写Model: 代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。我们可以把Model称为数据层,因为它仅仅关注数据本身,不关心任何行为View: 用户操作界面(DOM)。当ViewModel对Model进行更新的时候,会通过数据绑...原创 2019-07-27 10:22:31 · 1064 阅读 · 0 评论 -
Vue 实例的生命周期
前面的话Vue实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等。这篇文章介绍Vue实例的生命周期。图解vue生命周期总共分为8个阶段: 创建前/后,载入前/后,更新前/后, 销毁前/后。beforeCreate (创建前):vue实例的挂载元素$el和数据对象 data都是undefined, 还未初始化created (创建后) : data数据初始...原创 2019-07-27 10:57:07 · 503 阅读 · 0 评论 -
npm install出现Unexpected end of JSON input while parsing near错误解决方法
前面的话在创建vue项目的时候,出现以下错误:Unexpected end of JSON input while parsing near解决方法npm cache clean --force即可解决npm install出现”Unexpected end of JSON input while parsing near”错误。...原创 2019-09-14 20:18:36 · 2108 阅读 · 0 评论 -
Vue :is动态显示组件
前面的话在我们平时使用vue中的模板的时候,许多时候都是直接定义成一个固定的模板,但是,vue中提供了一个动态模板,可以在任意模板中切换,就是用vue中用:is来挂载不同的组件。像下图这样,点击不同按钮,切换不同的组件:只需在< component></ component>中绑定一个特殊的属性: is,就可以实现了。代码实现<!DOCTYPE html&...原创 2019-09-22 10:40:22 · 884 阅读 · 0 评论 -
Vue keep-alive组件
前面的话在Vue项目开发中,避免不了的就是路由跳转,vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗。这篇文章介绍组件< keep-alive>基本定义< keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。< keep-alive> 包裹动态组件时...原创 2019-09-22 10:53:18 · 147 阅读 · 0 评论 -
vue实现路由权限 :router.beforeEach实现路由判断页面未登录跳转到登录页面(路由拦截)
前面的话在页面发生路由改变时,比如做登录验证,只有验证登录之后才能进入主界面,未登录不能跳转。vue-router提供了导航钩子beforeEach和afterEach,它们会在路由将改变前和改变后触发。那么登录验证就应该在beforeEach钩子完成。概述beforeEach函数有三个参数:to:router即将进入的路由对象 (这个对象中包含name,params,meta等属性)...原创 2019-09-24 21:59:28 · 6476 阅读 · 1 评论 -
Vue 递归、动态、异步组件
前面的话前面介绍的提到的内联模板也是属于组件高级用法,在实际业务中不是很常用,但是在独立组件开发时可能会用到。递归组件组件在它的模板内可以递归地调用子,只要给组件设置name选项就可以了。 <div id="app1"> <parent-component></parent-component> </div> <...原创 2019-07-08 19:37:08 · 419 阅读 · 0 评论 -
Vue 使用slot分发内容
前面的话当需要让组件组合使用,混合父组件的内容与子组件的模板时,就会用到slot,这个过程叫作内容分发(transclusion)。props传递数据、events触发事件和slot内容分发就构成了Vue组件的3个API来源,再复杂的组件也是由这3部分组成的。 本文将详细介绍内容分发slot。编译作用域正式介绍slot前,需要明确编译的作用域在哪。比如父组件的有如下模板: <chil...原创 2019-07-08 10:57:21 · 3727 阅读 · 1 评论 -
基于Webpack4搭建Vue开发环境
一篇比较好的基于Webpack4搭建Vue开发环境的文章分享给大家https://www.colabug.com/4917669.html?tdsourcetag=s_pcqq_aiomsg原创 2019-06-03 16:16:56 · 434 阅读 · 0 评论 -
Vue 模板逻辑(条件与循环)
前面的话上一篇文章介绍了Vue.js的基本的模板语法,除了模本语法,还有逻辑语句:条件与循环。这篇文章将介绍Vue.js的条件与循环语句。●条件语句js中的条件语句 if、else、else if,在Vue.js中有类似的指令:v-if、v-else、v-else-if。[v-if]v-if指令: 根据表达式的值渲染DOM元素,如果表达式的值是true,那么将元素插入DOM中,否则将从D...原创 2019-05-14 20:38:21 · 3475 阅读 · 0 评论 -
Vue 数组更新与排序过滤
前面的话Vue 的核心是数据与视图的双向绑定,当我们修改数组时,Vue会检测到数据变化,所以用v-for 渲染的视图也会立即更新。Vue为了增加列表渲染的功能,增加了一组观察数组的方法,而且可以显示一个数组的过滤或排序的副本。这篇文章将介绍Vue数组更新及过滤排序。变异方法Vue包含了一组观察数组变异的方法,使用它们改变数组也会触发视图更新。● push() 接受任意数量的参数,把...原创 2019-05-20 18:06:29 · 5143 阅读 · 0 评论 -
Vue 计算属性与监听属性
前面的话模板内的表达式常用于简单的运算,当其过长或逻辑复杂时,会难以维护。这篇文章将介绍计算属性与监听属性去解决该问题。计算属性[什么是计算属性?]首先,来看一个字符串反转的例子: <div id="app1"> {{ message.split('').reverse().join('') }} </div> <s...原创 2019-05-16 10:01:04 · 17959 阅读 · 2 评论 -
Vue 基础入门
前面的话近年来,前端框架发展火热,新的框架和名词不停地出现在开发者眼前 。目前来看, 前端框架给开发者带来不小的便利,其中的3大框架Angular、React.以及Vue.。这些框架的产生保持了UI与状态(后端数据)的同步,使得开发者能从过去手动维护DOM状态的繁琐操作中解脱出来,尽可能地让DOM的更新操作是自动的,状态变化的时候就自动更新到正确的状态。3大框架中最容易上手的就是VueVue ...原创 2019-05-12 15:48:23 · 298 阅读 · 0 评论 -
Vue 模板语法
前面的话如果只使用Vue最基础的声明式渲染的功能,则完全可以把Vue当做一个模板引擎来使用。本文将详细介绍Vue模板语法[ 文本插值 ]数据绑定最常见的形式就是{{ }} 双大括号的文本插值 <div id="app"> <p>{{ name}}</p> </div><script>new Vue({ e...原创 2019-05-12 17:50:38 · 227 阅读 · 0 评论 -
Vue class与style绑定
前面的话DOM元素经常会动态的绑定一些class类名或style样式。前面的文章已经初步的介绍了v-bind指令的基本用,它主要是动态的更新HTMl元素上的属性。这篇文章将介绍使用v-bind指令来绑定class和style的多种方法。回顾 v-bind回顾一下v-bind指令的用法:<div id="app"> <a v-bind:href="url"...原创 2019-05-16 20:36:50 · 2303 阅读 · 3 评论 -
Vue 组件基础用法
前面的话组件是Vue.js最核心的功能,也是整个框架设计最精彩的地方。组件可以扩展HTML元素,封装可重用的代码。根据项目需求,抽象出一些组件,每个组件里包含了展现、功能和样式。每个页面,根据自己所需,使用不同的组件来拼接页面。这种模式使前端页面易于扩展,且灵活性高,而且组件之间也实现了解耦。概述 <div id="app"> <xiao-qi></x...原创 2019-05-30 09:27:30 · 1218 阅读 · 0 评论 -
Vue 表单与v-model
前面的话表单控件承载了一个网页数据的录入与交互。表单控件在实际业务中较为常见,比如单选、多选、下拉选择、输入框等。 它们可以完成数据的录入、校验、提交等。Vue提供的v-model指令,用于表单类元素上的双向绑定。这篇文章将介绍如何使用指令v-model完成表单的数据双向绑定。基本用法[输入框]在输入框上使用,输入的内容会实时映射到绑定的数据上 <div id="app">...原创 2019-05-28 20:15:52 · 388 阅读 · 0 评论 -
Vue props数据传递
前面的话组件不仅仅是要把模板的内容进行复用,更重要的是组件间要进行通信。组件接受的选项大部分与 Vue实例一样,而选项props是组件中非常重要的一个选项。在Vue中,父子组件的关系可以总结为 props down,events up。父组件通过props向下传递数据给子组件,子组件通过events给父组件发送消息。这篇文章将介绍组件使用props传递数据。父子级组件通常父组件的模...原创 2019-06-01 16:14:16 · 9510 阅读 · 0 评论 -
Vue 自定义事件
前面的话我们已经知道,从父组件向子组件通信,通过props传递数据就可以了,但Vue组件通信的场景不止有这一种。归纳起来组件之间的关系可以分为父子组件通信、兄弟组件通信、跨级组件通信。自定义事件当子组件需要向父组件传递数据时,就要用到自定义事件。v-on指令除了监听DOM事件外,还可以用于组件之间的自定义事件。在JS的设计模式—观察者模式中有dispatchEvent和addEventL...原创 2019-06-02 21:43:10 · 888 阅读 · 0 评论 -
Vue 非父子组件通信
前面的话在实际业务中,除了父子通信外,还有很多非父子组件通信的场景,非父子组件一般有两种,兄弟组件和跨多级组件。Vue.js 2.x中,使用一个空的Vue实例作为中央事件总线(bus)。中央事件总线就好比一个中介,租房者与出租者担任两个跨级组件,租房者与出租者之间的联系全靠中介,而两个跨级组件之间的通信全靠中央事件总线(bus)。中央事件总线<div id="app1"> ...原创 2019-06-09 11:55:42 · 1318 阅读 · 0 评论 -
Vue 事件处理器与修饰符
前面的话在前面的一篇“Vue模板语法”文章中,已经引入了Vue事件处理的概念v-on与修饰符。在事件绑定上, 类似原生js的onclick等写法,也是在HTML上进行监听的。这篇文章讲介绍v-on指令与修饰符v-on监听一个按钮的点击事件,设置一个计数器,每次点击都加一:<div id="app"> <!-- 等价于 v-on:click="count++...原创 2019-05-19 11:25:00 · 770 阅读 · 0 评论