上上篇：Vuex 入门 上一篇：Vuex 提升自制vuex LOGO前两篇讲解了一下 Vuex 的基本使用方法，可是在实际项目中那么写肯定是不合理的，如果组件太多，不可能把所有组件的数据都放到一个 store.js 中的，所以就需要模块化的组织 Vuex，首先看一下 项目结构。 项目结构一、首先执行以下命令： vue init webpack-simple vuex-demo cd vuex-demo npm install npm install vuex -S npm run dev二、按照上图结构创建文件目录Vuex 模块化目...
滚动行为使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。 注意: 这个功能只在 HTML5 history 模式下可用。当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法： var router = new VueRouter({routes: [...],scrollBehavior (to, from, savedPosition) {// return 期望滚动到哪个的位置} }...
导航钩子vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。 全局钩子 你可以使用 router.beforeEach 注册一个全局的 before 钩子： const router = new VueRouter({ ... })router.beforeEach((to, from, next) => {// ... }) 当一个导航触发时，全局的 before 钩子按照创建顺序调用。钩子是异步解析执行，此时导航在所有钩子 reso...
这两天学习了Vue.js 感觉函数化组件这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记介绍 之前创建的锚点标题组件是比较简单，没有管理或者监听任何传递给他的状态，也没有生命周期方法。它只是一个接收参数的函数。在这个例子中，我们标记组件为 functional， 这意味它是无状态（没有 data），无实例（没有 this 上下文）。一个 函数化组件 就像这样： Vue.component(my-component, {functional: true,// 为了弥补缺少...
概述 Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具： 在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库，如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库，如 Velocity.js单元素/组件的过度 Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡 条件渲染 （使用 v-if）条件展...
介绍 vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。本文是基于上一篇文章（Vue学习笔记进阶篇——vue-cli安装及介绍 ）vue-cli脚手架工具的。 安装 在终端通过cd命令进入到上...
本文介绍了vue 多元素及多组件过渡，这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。 多元素的过渡 对于原生标签可以使用 v-if/v-else.但是有一点需要注意： 当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在 <transition> 组件中的多个元素设置 key 是一个更好的实践。示例： <transition><button v...
介绍 Vue-cli是Vue的脚手架工具 主要作用：目录结构、本地调试、代码部署、热加载、单元测试 地址：https://github.com/vuejs/vue-cli 安装 全局安装vue-cli npm install -g vue-cli当然了，要想使用npm工具，就必须安装Node.js，node.js的安装方法这里就不做介绍了。安装完成后，在终端输入以下命令, 可以查看vue的版本：vue -V输入以下命令，可以查看官方提供的模板： vue list我们可以看到，vue官方提供了6个模板，我们这边主要...
本文将介绍Vue中的列表过渡，动态过渡， 以及可复用过渡是实现。 列表过渡 目前为止，关于过渡我们已经讲到： 单个节点同一时间渲染多个节点中的一个那么怎么同时渲染整个列表，比如使用 v-for ？在这种场景中，使用 <transition-group>组件。在我们深入例子之前，先了解关于这个组件的几个特点： 不同于 <transition>， 它会以一个真实元素呈现：默认为一个<span>。你也可以通过 tag 特性更换为其他元素。内部元素 总是需要 提供唯...
这两天学习了Vue.js 感觉渡系统这个地方知识点挺多的，而且很重要，所以，今天添加一点小笔记。 Vue 的过渡系统提供了非常多简单的方法设置进入、离开和列表的动效。那么对于数据元素本身的动效呢，比如： 数字和运算颜色的显示SVG 节点的位置元素的大小和其他的属性所有的原始数字都被事先存储起来，可以直接转换到数字。做到这一步，我们就可以结合 Vue 的响应式和组件系统，使用第三方库来实现切换元素的过渡状态。 状态动画和w...
Vue 官网教程上关于 v-model 的讲解不是十分的详细，写这篇文章的目的就是详细的剖析一下， 并介绍 Vue 2.2 v-model改进的地方，然后穿插的再说点 Vue 的小知识。 在 Vue 中，有许多方法和 Angular 相似，这主要是因为 Angular 是 Vue 早期开发的灵感来源。然而，Augular 中存在许多问题，在 Vue 中已经得到解决。 v-model 用在 input 元素上时 v-model虽然很像使用了双向数据绑定的 Angular 的 ng-model，但是 Vue 是单项数据流，...
一、基本用法 在使用 vue-cli 创建的项目中，组件的创建非常方便，只需要新建一个 .vue 文件，然后在 <template> 中写好 HTML 代码，一个简单的组件就完成了 一个完整的组件，除了 <template> 以外，还有 <script> 和 <style> 需要注意的是，<script> 中的 data 必须是函数 然后在其他文件的 js 里面引入并注册，就能直接使用这个组件了二、使用 slot 分发内容 开发过程中，常常需要在子组件内添加新的内容，这时候可以在子组件...
分享Vue 官网教程上关于 v-model 的讲解不是十分的详细，写这篇文章的目的就是详细的剖析一下， 并介绍 Vue 2.2 v-model改进的地方，然后穿插的再说点 Vue 的小知识。在 Vue 中，有许多方法和 Angular 相似，这主要是因为 Angular 是 Vue 早期开发的灵感来源。然而，Augular 中存在许多问题，在 Vue 中已经得到解决。v-model 用在 input 元素上时v-model虽然很像使用了双向数据绑定的 Angular 的 ng-model，但是 Vue 是单项数据流，...
前言 今天是个特别的日子 祝各位女神女神节快乐哈 封面我就放一张杀殿的帅照表达我的祝福 哈哈 此篇主要手写 Vue2.0 源码-初始渲染原理 上一篇咱们主要介绍了 Vue 模板编译原理 它是 Vue 生成虚拟 dom 的基础 模板编译最后转化成了 render 函数 之后又如何能生成真实的 dom 节点去替换掉 el 选项配置呢 那么通过此篇的学习就可以知道 Vue 初始渲染的流程 此篇主要包含虚拟 dom 以及真实 dom 的生成 适用人群： 没时间去看官方源码或...
NuxtJS案例 - Realworld项目 - 文章/发布部署 11.5 文章详情展示基本信息把Markdown转为HTML展示文章作者相关信息设置页面meta优化SEO文章评论-通过客户端渲染展示评论列表 11.6 发布部署打包最简单的部署方式使用PM2启动Node服务自动化部署介绍GitHub Actions 自动部署11.5 文章详情 展示基本信息请求方法：GET 请求地址：/api/articles/:slug api/article.js // 获取文章详情 export const getArticle = slug => {return request...