随笔分类 - Vue企业开发实战
摘要：从示例 1 的“猜你喜欢接口”中会发现，返回值 data 里面的数据值写法有些奇怪，这种写法就是 Mock.js 的语法。下面来介绍 Mock.js。 Mock.js 是一个模拟数据生成器，可以使前端独立于后端开发。如果正在开发一个前端页面，但是后台还没有完成供前端页面调用的 API，并且数据格式已
阅读全文
摘要：mock 文件支持两种请求： get/api/xxx post/api/<id>/123 <id＞代表链接路由表达式，如／api/:id/123，id 值会发生改变。具体的文件结构如下所示。 mock |--get |--api_xxx.js post |--api_@id_xxx.js 以大觅项目
阅读全文
摘要：在引入 Mock.js 工具模拟数据接口之前，必须先介绍一个应用广泛的前端工具—— connect-mock-middleware，connect-mock-middleware 是一个非常方便、实用的 mock 模拟工具。它具有哪些特点呢？ 支持 mockJs 语法 支持 json、jsonp 修
阅读全文
摘要：任务 1 Vuejs 是什么 4.1.1 MVVM 模式 4.1.2 Vue.js 的开发模式 4.1.3 单文件组件 任务2 Vue 实例与数据绑定 4.2.1 实例与数据 4.2.2 插值表达式 4.2.3 生命周期 任务 3 class 与 style 绑定 4.3.1 了解 v-bind 指
阅读全文
摘要：使用 v-bind:style（即 😒tyle）可以给元素绑定内联样式，方法与 :class 类似。也存在对象语法和数组语法，看起来很像在元素上直接写 css。 在 components 文件夹下新建 BindStyle.vue 组件，写入如示例 11 所示代码，并在路由 index.js 中进行
阅读全文
摘要：1. 对象语法 给 v-bind:class 设置一个对象，可以动态地切换 class，在 Directive.vue 组件中完成如示例 7 所示代码。 示例 7 <template> <div> <a v-bind:href="url">链接</a> <!-- v-bind 可以省略，缩写为 --
阅读全文
摘要：指令（Directive）是特殊的带有“v-”前缀的命令，其作用是当表达式的值改变时，将某些行为应用到 DOM 上。举一个简单的例子，单击某一个按钮，会显示 div，再次单击 div 隐藏，这里就可以通过设置属性的真假，将指令作用到 div 上来控制显示或隐藏。 为什么要使用指令呢？最重要的原因是使
阅读全文
摘要：首先认识一下实例的生命周期。所谓“生命周期”是指实例对象从构造函数开始执行（被创建）到被 GC ( Garbage Collection，垃圾回收）回收销毁的整个存在时期，在生命周期中被自动调用的函数叫作生命周期函数，也被形象地称为生命周期钩子函数。 提示 生命周期的概念可以类比人的成长，人从出生到
阅读全文
摘要：语法 插值表达式可以理解为使用双大括号来包裹 JS 代码，作用是将双大括号中的数据替换成对应属性值进行展示。 双大括号语法也叫模板语法（Mustache 语法）。Mustache 是一款经典的前端模板引擎，在前后端分离的技术架构下面，前端模板引擎是一种可以被考虑的技术选型。随着前端框架（Angula
阅读全文
摘要：Vue 实例是 Vue 框架的入口，也是前端的 ViewModel，它包含了页面中的业务逻辑处理、数据模型等，当然也有自身的一系列选项。 在 main.js 中，可以看到如示例 2 所示的代码。 示例 2 new Vue({ el: '#app', router, components: { App
阅读全文
摘要：Vue.js 自定义了一种 .vue 文件，可以把 HTML、css、JS 代码写到一个文件中，从而实现对一个组件的封装，一个 .vue 文件就是一个单独的组件。由于 .vue 文件是自定义的，浏览器不能识别，因此在 Webpack 构建中，需要安装 vue-loader 对 .vue 文件进行解析
阅读全文
摘要：Vue.js 是一个渐进式的 JavaScript 框架，根据项目需求，可以选择从不同的维度来使用它。因为大觅项目的业务逻辑比较复杂，对前端工程师有一定的要求，需要使用 Vue 单文件组件的形式配合 Webpack 来完成 ，在配置完路由的大觅项目首页的组件中写入下面的代码来快速体验 Vue。 <t
阅读全文
摘要：任务1 let 和 const命令 2 1.1 let 命令 2.1.2 上机训练 2.1.3 const 命令 任务2 变量的解构赋值 2.2.1 数组的解构赋值 2 2.2 对象的解构赋值 2.2.3 上机训练 任务 3 使用箭头函数 2.3.1 箭头函数起因 2.3.2 箭头函数定义 2.3.
阅读全文
摘要：1. 利用 map 数据结构筛选 json 数组。 <!DOCTYPE html> <html lang="zh"> <head> <title>利用map数据结构筛选json数组</title> <meta charset="UTF-8"> <meta name="viewport" conten
阅读全文
摘要：任务 1 什么是前端路由 3.1.1 什么是路由 3.1.2 前端路由 3.1.3 前端路由的使用场景 任务 2 Vue Router基本使用 3.2.1 安装路由 3.2.2 建立路由器模块 3.2.3 启动路由器 3.2.4 路由重定向 3.2.5 路由懒加载 3.2.6 <router-lin
阅读全文
摘要：作业要求 作业1要求 路由综合练习。默认显示首页，当单击导航中的导航项时，会导航到相应的页面。 作业2要求 页面间导航练习，在作业 1 的基础上，添加按钮来控制页面间的导航。 单击“后退”按钮可以后退一步记录，跳转到上一个页面。 单击“前进”按钮可以在浏览器记录中前进一步。 单击“跳步 － 2”按钮
阅读全文
摘要：语法 router.go(n) router.go 方法的参数是一个整数，表法在 history 记录中向前进多少步或向后退多少步，类似于 window.history.go(n)。 具体看一下使用方法，例如： // 在浏览器记录中前进一步，等同于 history.forward() router.
阅读全文
摘要：语法 router.replace(location) router.replace 跟 router.push 很像，唯一的不同是它不会向 history 栈添加新记录，而是跟它 的方法名一样只替换掉当前的 history 记录。 router.replace(...)等价于<router-lin
阅读全文
摘要：ES6 规定，Promise 对象是一个构造函数，用来生成 Promise 实例。 Promise 构造函数接受一个函数作为参数，该函数的两个参数分别是 resolve 和 reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。 resolve 函数的作用是将 Promis
阅读全文
