vue学习笔记
WebKoalaBoy
Nothing is impossible
展开
-
Vue学习笔记之Vuex的核心概念Module
Module由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割:const moduleA = { stat...原创 2020-01-21 17:24:28 · 185 阅读 · 0 评论 -
Vue学习笔记之Vuex的核心概念Mutation
Mutation更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的事件类型 (type)和 一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数原创 2020-01-20 12:53:49 · 113 阅读 · 0 评论 -
Vue学习笔记之Vuex的核心概念Getter
有时候我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数:computed: { doneTodosCount () { return this.$store.state.todos.filter(todo => todo.done).length }}如果有多个组件需要用到此属性,我们要么复制这个函数,或者抽取到一个共享函数然...原创 2020-01-20 12:43:08 · 192 阅读 · 0 评论 -
Vue学习笔记之Vuex的核心概念State
单一状态树Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。单状态树和模块化并不冲突——在后面的章节里我们会讨论如何将状态和状态变更事件分布到各个子模块中。转载 2020-01-20 12:34:21 · 190 阅读 · 0 评论 -
Vue学习笔记之Vuex学习---Vuex 是什么?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式原创 2020-01-20 12:12:02 · 103 阅读 · 0 评论 -
Vue学习笔记之自定义指令
除了核心功能默认内置的指令 (v-model和v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM 元素进行底层操作,这时候就会用到自定义指令。举个例子聚焦输入框。当页面加载时,该元素将获得焦点 (注意:autofocus在移动版 Safari 上不工作)。事实上,只要你在打开这个页面后还没点...原创 2020-01-17 17:37:15 · 151 阅读 · 0 评论 -
Vue学习笔记之混入 (mixin)
目录选项合并全局混入自定义选项合并策略混入(mixin)提供了一种非常灵活的方式,来分发Vue组件的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。//定义一个混入的对象var myMixin ={ created: function(){ this.hello(); },...原创 2020-01-17 11:00:47 · 127 阅读 · 0 评论 -
Vue学习笔记之路由懒加载
路由懒加载当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。首先,可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve...原创 2020-01-16 17:34:34 · 102 阅读 · 0 评论 -
Vue学习笔记之路由滚动行为
滚动行为使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。vue-router能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。注意: 这个功能只在支持history.pushState的浏览器中可用。当创建一个 Router 实例,你可以提供一个scrollBehavior方法:const router = n...原创 2020-01-16 17:31:30 · 381 阅读 · 0 评论 -
Vue学习笔记之路由数据获取
数据获取有时候,进入某个路由后,需要从服务器获取数据。例如,在渲染用户信息时,你需要从服务器获取用户的数据。我们可以通过两种方式来实现: 导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。 导航完成之前获取:导航完成前,在路由进入的守卫中获取数据,在数据获取成功后执行导航。 从技术角度讲,两种方式都不错 —— 就...原创 2020-01-16 16:31:33 · 1043 阅读 · 0 评论 -
Vue学习笔记之路由过渡动效
过渡动效原创 2020-01-16 16:02:17 · 336 阅读 · 0 评论 -
Vue学习笔记之路由元信息
定义路由的时候可以配置meta字段:const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, children: [ { path: 'bar', component: Bar, ...原创 2020-01-16 15:58:40 · 92 阅读 · 0 评论 -
Vue学习笔记之路由导航守卫
“导航”表示路由正在发生改变。正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化,或使用 beforeRouteUpdate 的组件内守卫。原创 2020-01-16 15:03:14 · 115 阅读 · 0 评论 -
Vue学习笔记之路由组件传参
在组件中使用$route会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性。使用props将组件和路由解耦:取代与$route的耦合const User = { template: '<div>User {{ $route.params.id }}</div>'}const router = new ...原创 2020-01-15 18:13:42 · 240 阅读 · 0 评论 -
Vue学习笔记之路由的重定向和别名
一、重定向重定向也是通过routes配置来完成,下面例子是从/a重定向到/b:const router = new VueRouter({ routes: [ { path: '/a', redirect: '/b' } ]})重定向的目标也可以是一个命名的路由:const router = new VueRouter({ routes: [...原创 2020-01-15 17:33:24 · 189 阅读 · 0 评论 -
Vue学习笔记之路由命名视图
有时候想同时 (同级) 展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar (侧导航) 和 main (主内容) 两个视图,这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果 router-view 没有设置名字,那么默认为 default。原创 2020-01-15 15:20:04 · 156 阅读 · 0 评论 -
Vue学习笔记之命名路由
有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建 Router 实例的时候,在routes配置中给某个路由设置名称。const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user', co...原创 2020-01-14 17:16:43 · 106 阅读 · 0 评论 -
Vue学习笔记之路由编程式的导航
编程式的导航除了使用 <router-link> 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。原创 2020-01-14 17:06:15 · 101 阅读 · 0 评论 -
Vue学习笔记之嵌套路由
实际生活中的应用界面,通常由多层嵌套的组件组合而成。同样地,URL 中各段动态路径也按某种结构对应嵌套的各层组件原创 2020-01-14 16:33:50 · 142 阅读 · 0 评论 -
vue学习笔记之动态路由匹配
1、我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个User组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在vue-router的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果:const User = { template: '<div>User</div>'}...原创 2020-01-14 15:40:25 · 444 阅读 · 0 评论 -
vue学习笔记之路由起步实例
用 Vue.js + Vue Router 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 Vue Router 添加进来,我们需要做的是,将组件 (components) 映射到路由 (routes),然后告诉 Vue Router 在哪里渲染它们。原创 2020-01-14 14:58:46 · 105 阅读 · 0 评论 -
vue学习笔记之路由(Vue Router)安装
一、安装直接下载 / CDNhttps://unpkg.com/vue-router/dist/vue-router.jsUnpkg.com提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像https://unpkg.com/vue-router@2.0.0/dist/vue-router.js这样指定 版本号 或者 Tag。在 ...原创 2020-01-14 14:44:38 · 195 阅读 · 0 评论 -
vue学习笔记之vue深入响应式原理
Vue 最独特的特性之一,是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时,视图会进行更新。原创 2020-01-14 13:50:41 · 285 阅读 · 1 评论