Vue
大前小白
哪有什么天才!
坚持做自己喜欢做的事情,这本身就是一种天赋。
展开
-
Vuex中的Mutations
在 Vuex 中 store 数据改变的唯一方法就是提交 mutations。mutations里面装着一些改变数据方法的集合,这是Vuex 设计很重要的一点,就是把处理数据逻辑方法全部放在 mutations 里面,使得数据和视图分离。Mutations使用Vuex 中的 mutations 非常类似于事件,每个 mutations 都有一个字符串的事件类型(type)和一个回调函数(handler),也可以理解为{type:handler()},这和订阅发布有点类似。先注册事件,当触发响应类型的时候原创 2020-06-01 10:50:43 · 114 阅读 · 0 评论 -
Vuex中的Getters
在Store仓库中,state是用来存放数据的,如果要对数据进行处理输出,比如数据要过滤,一般我们可以写到computed中。但是如果很多组件都使用这个过滤后的数据,我们可以考虑把这个数据提出来共享。这就是getters存在的意义,我们可以将getters认为是 store 的计算属性(computed)。就像计算属性一样,getters 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。示例:假设有一个关于考试分数的数组,我们需要在很多页面中使用,但是只需要显示不及格的成原创 2020-05-29 10:10:16 · 202 阅读 · 0 评论 -
Vuex中的State
state 是Vuex中的基本数据,state 上存放的就是所谓的状态。当没有使用 state 的时候,直接在 data 中进行初始化,有了 state 之后,我们就把 data 上的数据转移到 state 上去了。单一状态树Vuex 使用到的是单一状态树,即用一个对象就包含了全部的状态数据。也就是说如果我们定义了一个 store 的实例,那么这个 store 实例里面只有一个 state。state作为构造器选项,定义了所有我们需要的基本状态参数。单一状态树让我们能够直接地定位任一特定的状态片段,在原创 2020-05-27 10:47:30 · 490 阅读 · 0 评论 -
Vuex中的store
每一个Vuex应用的核心就是store(仓库)。store 基本上就是一个容器,包含着应用中大部分的state(状态)。Vuex和单纯的全局对象有以下两点不同:Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更原创 2020-05-25 09:58:54 · 309 阅读 · 0 评论 -
Vuex 调试工具安装
vue-devtools是一款基于chrome浏览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率。chrome商店直接安装最简单的方法是直接在chrome商店下载安装vue-devtools,但是这需要翻墙才能下载。手动安装首先到github找到vue-devtools。然后将其clone到本地,这需要先在本机安装git、node环境。git clone https://github.com/vuejs/vue-devtools.git在根目录,安装项目所需要的npm包:原创 2020-05-22 10:05:56 · 326 阅读 · 0 评论 -
Vuex 入门
什么是Vuex ?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。什么情况下使用Vuex一般情况下,我们需要根据项目的实际大小来决定是否需要引入Vuex,如果相对需要存储的内容不是特别多的时候,那么我们也可以通过本地存储进行完成一些数据原创 2020-05-18 10:02:08 · 72 阅读 · 0 评论 -
Vuex 安装
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。首先我们来了解一下Vuex的安装,后面我们再继续具体讲解什么是Vuex。下载安装Vuex 有三种安装方式,下面我们一起来看一下:直接下载我们可以直接下载vuex的文件,链接地址:https://unpkg.com/vuex。这个链接会一直指向 NPM 上发布的最新版本,目前的版本为vuex v3.1.2。或者我们还可以根据自己的需要来指定版本,直接在链接后面加上版本号,这样访问的就是制定版本的文件了。例如:https://unpkg.原创 2020-05-15 10:05:39 · 491 阅读 · 0 评论 -
Vue 单元测试
单元测试,就是为了测试某一个类或者是某一个方法能否正常工作而写的测试代码。关于单元测试是什么:单元测试是针对 程序的最小单元 来进行正确性检验的测试工作。就是测试某一个页面或者是某一个方法来进行测试的代码单元。意义:可以减少bug,提高代码的效率质量,同时可以快速定位bug存在的地点位置,减少调试时间,放心重构代码。目的:当我们的项目足够大的时候,在重叠的模块和组件的过程中,可能会有影响到...原创 2019-10-11 10:26:08 · 185 阅读 · 0 评论 -
自定义指令
基础简介除了核心功能默认的内置指令(v-model和v-show),vue也允许注册自定义指令。注意,在Vue2.0中,代码复用和抽象的主要形式是组件,但是在有些情况下,我们需要对普通的DOM元素进行底层操作,这时候就需要我们用到自定义指令。简单事例,当页面加载时元素就会获得焦点,但是实际上只要我们代码完成,页面没打开时这个输入框已经是聚焦状态: <!DOCTYPE html&g...原创 2019-10-10 09:46:51 · 133 阅读 · 0 评论 -
Vue.js 列表过渡
进入/离开 & 列表过渡示例一:<style> /* 移动的时间 */ .fade-enter-active{ transition: all .3s ease; } /* 移动的方向,和过渡 */ .fade-leave-active{ transition: all .8s cubic-bezier(1.0, 0...原创 2019-10-09 09:47:08 · 165 阅读 · 0 评论 -
Vue.js 动画
组件的过渡条件的渲染(使用v-if)条件的展示(使用v-show)动态组件组件根节点链接地址下载:<script src="http://raw.githubusercontent.com/daneden/animate.css/master/animate.css"></script>css过渡下面是一个运用css点击显示隐藏显示的2s动画效果:&...原创 2019-10-08 09:50:13 · 103 阅读 · 0 评论 -
vue 渲染函数
使用方法v-if :<h1 v-if="xkd">侠课岛</h1>template 中配合 v-if 条件渲染一整组 :<template v-if="a"> <h1>Title</h1> <p>Paragraph one</p> <p>Paragraph two</p>&...原创 2019-09-30 09:44:29 · 134 阅读 · 0 评论 -
Vue 初体验
引入VueVue文件地址: <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>Vue雏形代码: <html lang="en"> <head> <meta charset="UTF-8">...原创 2019-09-16 10:51:58 · 96 阅读 · 0 评论 -
Vue 的属性、方法和生命周期
实例<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...原创 2019-09-17 09:43:38 · 191 阅读 · 0 评论 -
Vue 模板语法、事件和表单使用
模板语法文本绑定,两个大括号,中间加上data里面的数据,message里面不仅可以是变量还可以是表达式 <body> <div id="main"> // 变量 {{ message }} <br/> // 表达式 {{ number + 1}} </div><...原创 2019-09-18 10:30:38 · 562 阅读 · 0 评论 -
Vue内置指令的使用
v-model(数据绑定)v-model常用于表单数据的双向绑定,它本质上是一个语法糖。它主要的有两种应用:在文本框、多行文本、input的下拉框、单选按钮、复选框中的应用<div id="app"><input v-model="test"><!-- <input :value="test" @input="test= $event.target.v...原创 2019-09-20 10:10:43 · 299 阅读 · 0 评论 -
组件
组件的使用<!DOCTYPE html><html> <head> <title>组件</title> <script src="Vue.min.js"></script> <script> window.onload = () => { ...原创 2019-09-23 10:02:48 · 121 阅读 · 0 评论 -
Vue路由的配置
什么是路由vue路由是可以通过组件的形式把所有的组件组装成为一个应用程序,当我们需要的时候,将这个组件映射到路由,然后告诉Vue 我们在哪里渲染它们。路由是我们浏览器的一个地址。vue路由的优缺点当我们加载一个程序时,由于它加载的内容特别多,所以会比较缓慢,但是我们加载完之后,我们到页面里进行切换,它的切换速度会变得特别快。原因是因为我们将所有的程序都放在一个页面里面了,我们将它加载时所有...原创 2019-09-25 10:18:47 · 274 阅读 · 0 评论 -
vue-cli 单文件组件
什么是vue-cli单文件组件vue-cli 是官方提供的一个脚手架工具,它可以快速的生成vue的项目模板。官方网址:http://www.npmjs.com/package/vue-cli主要功能提供了一个规范的目录结构本地调试代码部署热加载单元测试怎么建立npm install vue-clinpm init webpacknpm installnpm run d...原创 2019-09-26 10:08:58 · 266 阅读 · 0 评论 -
自定义组件
什么是组件组件(component)就是零件,将零件组装成想要的工具(页面)。组件是Vue.js最强大的功能之一,它可以扩展HTML元素,封装可重用的代码,通过传入对象的不同,实现组件的复用。使用组件的好处组件是可以复用性的易于维护有封装性,易于使用大型项目中降低组件之间重复性全局组件全局组件:在任何地方,任何方式,任何地点都可以使用的标签组件。 Vue.compon...原创 2019-09-27 09:55:52 · 898 阅读 · 0 评论 -
可复用性和组合
可复用性和组合就是将组件可复用性的使用和组合这个组件。可复用性和组合我们可以新建一个index.html和index.js,在index.html中引入index.js,然后在index.html中写入代码:<body> <div id="main"> // 自定义组件名 <vue-hesder class="hesder">...原创 2019-09-29 09:46:31 · 95 阅读 · 0 评论 -
认识Vue
vue是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。Vue的目标是通过尽可能简单的API实现响应式的数据绑定和组合的试图组件。Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非...原创 2019-09-12 10:31:50 · 123 阅读 · 0 评论