06 2022 档案
摘要：问题 如题所示 答案 /** * Parse the time to string * @param {(Object|string|number)} time * @param {string} cFormat * @returns {string | null} */ 关于javascript中
阅读全文
摘要：问题 如题所示 答案 相关源码： const files = require.context('.', true, /\.js$/); files.keys().forEach((key) => { if (key './index.js') return; files(key).default.f
阅读全文
摘要：问题 如题所示 答案 相关源码： const files = require.context('.', true, /\.js$/); files.keys().forEach((key) => { if (key './index.js') return; files(key).default.f
阅读全文
摘要：问题 如题所示 答案 相关源码： const files = require.context('.', true, /\.js$/); files.keys().forEach((key) => { if (key './index.js') return; files(key).default.f
阅读全文
摘要：问题 如题所示 答案 相关源码： const files = require.context('.', true, /\.js$/); files.keys().forEach((key) => { if (key './index.js') return; files(key).default.f
阅读全文
摘要：问题 如题所示 答案 相关源码： const files = require.context('.', true, /\.js$/); files.keys().forEach((key) => { if (key './index.js') return; files(key).default.f
阅读全文
摘要：问题 如题所示，如何解决 Module not found: Error: Can't resolve './mock' in 'F:\hzh\src' 这个问题？ 答案 在main.js文件中没有下面这句话时： // main.js require('./mock') 控制台会报这样的错误： GE
阅读全文
摘要：问题 如题所示 答案 相关源码： // main.js require('./mock') 这里的mock是文件夹： require() 的基本用法 require用法 根据上面，这里的require()会将加载mock这个文件夹。
阅读全文
摘要：问题 如题所示 答案 vue 如何控制组件初始与销毁_beforeDestroy：vue（组件）对象销毁之前 vue页面刷新时，执行了哪些生命周期——谨慎使用beforeDestroy和destroyed Vue学习笔记3.2-生命周期函数 beforeCreate、created、beforeMo
阅读全文
摘要：问题 如图所示 答案 slot是啥东东？ 深入理解vue中的slot与slot-scope （简单易懂） 根据上面资料，我们可以知道它类似于模板<template></template>，但是它和模板又不一样： slot就是父组件内自定义内容在子组件中的占位 显不显示，怎么显示取决于父组件 那么我们
阅读全文
摘要：问题 如题所示 答案 相关源码如下： hr { margin: 40px 0; border: 0; height: 1px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 109, 109, 0.75
阅读全文
摘要：问题 如题所示 答案 css3 border-style,CSS属性参考 | border-style 根据上面，我们可以知道border-style是控制border的样式，效果如下：
阅读全文
摘要：问题 如题所示 答案 resize属性规定了什么？ CSS中的resize属性 根据上面，我们可以知道resize属性用户可以调整元素的尺寸。 resize: vertical;指的是用户可以在垂直方向上调整元素的尺寸。 我们来看一下对比的效果吧： 在没有添加resize: vertical;这句话
阅读全文
摘要：问题 如题所示 答案 相关源码： box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); CSS3box-shadow属性详解 box-shadow详解 CSS —— 盒子阴影（box-shadow） 按照顺序解释上面源码的参数的意思： 0指的是x轴偏移量是0、 2
阅读全文
摘要：问题 如题所示 答案 首先，什么是选择器呢？我的理解是CSS选择器可以选定某类元素进行样式控制。 css选择器是什么？css选择器有哪些类型？ 所以后代选择器和子选择器也是选择某类元素进行样式控制的。 看它们的名字后代选择器和子选择器应该属于复合选择器。复合选择器是由基本选择器复合而成。基本选择器有
阅读全文
摘要：问题 源码如下： .hzh-banner-img:hover { transform: scale(1.1, 1.1); filter: contrast(130%); } 答案 :hover表示光标悬挂在元素上发生改变。 transform表示2D转换，scale表示缩放转换，两个参数表示水平和垂
阅读全文
摘要：问题 如题所示 答案 完美的背景图全屏css代码 – background-size:cover? 说说background-size:cover;与background-size:contain的区别 相关源码： .hzh-banner-img { width: inherit; height:
阅读全文
摘要：问题 如题所示 答案 在源码中看到这样一句源码： <div class="banner-img" :style="{'background-image': `url({src})这个到底是啥？不太懂，然后群里的朋友跟我说这是模板字符串，然后在网上搜一下答案： 模板字
阅读全文
摘要：问题 如题所示 答案 html中cursor的属性,cursor怎么用？CSS中cursor属性的使用方法以及可选值的解析 CSS 鼠标样式 cursor属性 cursor的用法 cursor: pointer;这个的意思是鼠标的光标移动到组件时会变成竖起来的手指。效果如下图：
阅读全文
摘要：问题 如题所示 答案 setInterval函数的用法 setInterval的用法以及示例 相关源码： let timer = setInterval(() => { let scrollTop = window.pageYOffset || document.documentElement.sc
阅读全文
摘要：问题 如题所示 答案 js 小数向上取整，保留一位有效数字 js 小数向上取整，保留一位有效数字 Math.ceil()表示向上取整，那么向上取整的意思是将会返回一个大于或者等于给定数字的最小整数。
阅读全文
摘要：问题 如题所示 答案 rem和em的区别 em,rem的区别与使用 相关的源码如下： .hzh-back-top { background-color: #ffffff; position: fixed; right: 3rem; bottom: 8rem; } rem是根据html根目录下的字体大
阅读全文
摘要：问题 如题所示 答案 css3 vh单位使用 CSS3新vw, vh单位 css3新单位vw、vh、vmin、vmax的使用详解 vh，指的是Viewport height，也就是视窗的高度。而什么是视窗呢？ 视窗单位-vw/vh/vmin/vmax 如下图所示，浏览器显示内容的部分，其中也包括滚动
阅读全文
摘要：问题 如题所示 答案 CSS中margin属性详解 CSS margin属性详解 margin：auto 与 margin：0 auto 区别 margin:0 auto 表示什么意思？？ 相关的源码 .footer-main{ max-width: 800px; margin: 0 auto 20
阅读全文
摘要：问题 如题所示 答案 【原】a.class与a .class的区别 相关的源码： a.out-link:hover{ color: #ff6d6d; } 如果a标签和类名中有空格，就是后代选择器，也就是a标签中的所有元素。没有空格，就是要满足有a标签和有该类名的条件，但是不太明白为什么这样，直接写这
阅读全文
摘要：问题 如题所示 答案 target="_blank HTML 链接 - target 属性四种选择_blank、_parent、_self、_top HTML5 <a>中 target="_blank"属性值含义 相关源码： <div class="hzh-footer-item"> <div>黄子
阅读全文
摘要：问题 如题所示 答案 Vue中key属性的作用 vue中：key的作用 Vue中key值的作用 vue核心面试题：v-for中为什么要用key 相关源码： <div class="footer-item" v-if="socials.length"> <div v-for="item in soci
阅读全文
摘要：问题 如题所示 答案 Vue.js教程（三）：v-if条件判断 vue中v-if的常见使用 v-if，条件渲染，也是先对后面的布尔值判断真假，再进行渲染。 相关源码： <div class="footer-item" v-if="socials.length"> <div v-for="item i
阅读全文
摘要：问题 如题所示 答案 vuejs里:style和:class的区别（vue动态操作绑定class 和 style的方法） Vue框架整理：动态设置样式style、class 动态style(vue) 动态添加的类名是基于数据的，当对应的数据为 true 时会显示，否则没有 😒tyle属于内联式动态
阅读全文
摘要：问题 如题所示 答案 vue地址去掉 # VUE路由去掉“#” 修改前源码是这样的： export default new Router({ routes: [ { path: '/', name: 'hzhHome', component: () => import('@/views/hzhHom
阅读全文
摘要：问题 如题所示 答案 Vue中this.$router.push（参数） 实现页面跳转
阅读全文
摘要：问题 如题所示 答案 vue中输入框事件的使用——@input、@keyup.enter、@change、@blur 相关源码如下： <div class="header-search"> <i class="iconfont iconsearch" @click.stop="click"></i>
阅读全文
摘要：问题 如题所示 答案 关于vue中的$符号总结一下 Vue实例身上的属性和方法，和用户自定义一样。
阅读全文
摘要：问题 如题所示 答案 Vue里ref(refs.name操作该元素。 具体源码如下： <div class="header-search"> <i class="iconfont iconsearch" @click.s
阅读全文
摘要：问题 如题所示 答案 js添加事件和移除事件:addEventListener()与removeEventListener() 源码如下： watch:{ show(value) { if (value) { document.body.addEventListener('click', this.
阅读全文
摘要：问题 如题所示 答案 outline和border的区别 outline与border的区别 在以下代码的情况下： 上面border和outline啥都没加，元素的border和input聚焦的时候，outline也在。 在以下代码的情况下： border: none; 这时候，元素的border已
阅读全文
摘要：问题 如题所示 答案 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别 终于弄懂了事件冒泡和事件捕获！ 由于元素之间是嵌套关系，当我们点击子孙元素时，事件会向上冒泡，于是它的父元素也获得该事件，祖
阅读全文
摘要：问题 如题所示 答案 Vue基础语法之@click、时间修饰符@click.stop与@click.prevent、按键修饰符（如@keyup.enter） vue @click.native和@click.stop和@click.self @click.stop，.stop是事件修饰符，整个的意思
阅读全文
摘要：问题 如题所示，报错截图如下： 答案 npm install --save vue/types/umd 找到出错的文件： import axios from 'axios' import { error } from 'shelljs' import { config } from 'vue/typ
阅读全文
摘要：问题 如题所示 答案 JS同步执行、异步执行、及同步中的异步执行 了解同步执行和异步执行 同步执行就是你读完小学才能读初中，读完初中才能读高中。 异步执行就是你在拉屎，还没有等屎可以接电话。
阅读全文
摘要：问题 如题所示，源代码如下： fetchCategory() { fetchCategory() .then((res) => { this.category = res.data; }) .catch((err) => { console.log(err); }); } 答案 vue的.then(
阅读全文
摘要：问题 如题所示 答案 axios基础（五）：axios拦截器 axios 拦截器——基本用法及拦截器代码 类似于海关，食品检测局。
阅读全文
摘要：问题 如题所示，源码如下： service.interceptors.request.use( config => { // do something before request is sent // if (store.getters.token) { // config.headers['X-
阅读全文
摘要：问题 如题所示，源码如下： let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; 答案 关于document.body、document.documen
阅读全文
摘要：问题 如题所示 答案 vue中动态添加样式 😒tyle 和 :class 关于vue 里:class 的几种使用方式 Vue框架整理：动态设置样式style、class :class动态绑定样式，其值为真的时候渲染对应样式。
阅读全文
摘要：问题 如题所示 答案 Vue生命周期中mounted和created的区别 mounted是模板渲染成html，也就是页面初始化之后，对应这是每次页面刷新都判断一次滚动条的位置，每次页面刷新都调用fetchcategory这个函数。
阅读全文
摘要：问题 如题所示 答案 统一返回结果对象 HTTP响应码大全 code代表状态码，2xx表示返回成功。
阅读全文
摘要：问题 如题所示 答案 vue工程代码优化：新建utils文件夹统一管理工具函数 前端框架里面utils文件的使用。 共享的一些工具和方法。
阅读全文
摘要：问题 什么是路由懒加载？ 为什么要使用路由懒加载？ 答案 vue-router路由懒加载的详解（原因，效果，和三种方式进行懒加载） 当打包构建应用时，JavaScript包会变得很大，影响页面加载。路由懒加载就是将路由对应的组件打包成JavaScript代码块，只有路由被访问到才加载对应的组件 引用
阅读全文
摘要：问题 如题所示： 答案 看看路由引进的路径有没有写错，写漏， 我一开始的路径是这样的： routes: [ { path: '/', name: 'home', component: () => import('@/views/hzhHome.vue'), meta: { title: '首页' }
阅读全文
摘要：问题 如题所示，以下代码是啥意思？ height: 50px; line-height: 50px; 答案 line-height和height的区别 因为line-height表示的是文字的高度，height表示的是元素的高度，这两者相同的时候就表示元素的高度是由元素中的文字所撑开。
阅读全文
摘要：问题 如题所示 width: 100%; height: 80px; padding: 0 80px; 答案 父元素width为100%，设置padding，出现滚动条 我们看看没有设置padding之前，视图是个啥情况？ 我们可以看到整个整个盒子content的宽度为299，而此时的padding
阅读全文
摘要：问题 如题所示 答案 Vue中显示img图片，显示不出来怎么办？vue显示图片 将hzh-site-logo.svg图片文件从assets文件夹剪切到static文件夹下。 引入方式从： <img src="@/assets/hzh-site-logo.svg"> 改为： <img src="../
阅读全文
摘要：问题 如题所示，控制台报错如下： vue.esm.js?efeb:628 [Vue warn]: Failed to mount component: template or render function not defined. found in > <HzhLayoutFooter> at F
阅读全文
摘要：问题 如题所示 padding: 0 80px; 答案 关于css文件中padding属性各参数的顺序设置规则 这段代码设置元素上下内边距为0px，左右内边距为80px。
阅读全文
摘要：问题 如题所示 transition: 0.3s all ease; -webkit-transition: 0.3s all ease; -moz-transition: 0.3s all linear; -o-transition: 0.3s all ease; -ms-transition:
阅读全文
摘要：问题 源码中这三行代码是啥意思？ display: flex; justify-content: space-between; align-items: center; 答案 html+css:display:flex属性 块元素、行内元素、行内块元素 display: flex;这行代码将ID为l
阅读全文
摘要：问题 如题所示 答案 html li是块级元素,li是行内元素吗？ 块元素、行内元素、行内块元素 <div id="hzh-layout-header"> <div class="hzh-site-logo"> <img src="@/assets/hzh-site-logo.svg"> <p cl
阅读全文
摘要：理论 什么是 CSS 中的交集选择器 实践 源码中： p.site-name { font-size: 15px; font-weight: bold; position: relative; top: -10px; } 也就是选中p标签的同时，也选中类名为site-name的元素。
阅读全文
摘要：问题 如何取消浏览器默认样式和和列表的小点点，又或者如何引入rest.css文件？ 答案 Vue统一样式（reset.css与border.css） 在没有引入初始化文件rest.css之前，页面是这样的： 在assets文件下新建styles文件夹，将rest.css放在该目录下： 引入方式如下：
阅读全文
摘要：问题 以下源码中，@符号代表什么啥意思？ <img src="@/assets/site-logo.svg" alt="" /> 答案 Vue中 @表示的路径 关于@符号的设置可以到webpack.base.conf.js文件中进行修改： 所以这里@/就是表示src路径下啦(▽)
阅读全文
摘要：问题 webpack.config.js文件在哪里？ 答案 Vue中 webpack.config.js在哪儿
阅读全文
摘要：从示例 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
阅读全文
摘要：用 Vue + Vue Router 创建单页应用非常简单：通过 Vue.js，我们已经用组件组成了我们的应用。当加入 Vue Router 时，我们需要做的就是将我们的组件映射到路由上，让 Vue Router 知道在哪里渲染它们。下面是一个基本的例子： App.vue <template> <d
阅读全文
摘要：直接下载 / CDN https://unpkg.com/vue-router@4 Unpkg.com 提供了基于 npm 的 CDN 链接。上述链接将始终指向 npm 上的最新版本。 你也可以通过像 https://unpkg.com/vue-router@3.0.0/dist/vue-route
阅读全文
摘要：Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括： 嵌套路由映射 动态路由选择 模块化、基于组件的路由配置 路由参数、查询、通配符 展示由 Vue.js 的过渡系统提供的过渡效果 细致的导航控制 自动激活 C
阅读全文
摘要：介绍 安装 基础 入门 动态路由匹配 路由的匹配语法 嵌套路由 编程式导航 命名路由 命名视图 重定向和别名 路由组件传参 不同的历史记录模式 进阶 导航守卫 路由元信息 数据获取 组合式 API 过渡动效 滚动行为 路由懒加载 扩展 RouterLink 导航故障 动态路由 从 Vue2 迁移
阅读全文
摘要：节点就是计算机，它们之间通过 p2p 协议互相连接，组成了以太坊网络 。 以太坊有两种类型的节点： EVM 挖矿节点 需要注意的是，这种分类只是为了对概念进行细分，在大多数场景中，并没有专门的 EVM，相反的是，所有的矿工节点都承担了 EVM 的职能 。 1.7.1 EVM EVM 是以太坊网络的运
阅读全文
摘要：区块链是一种包含多个组件的体系结构，区块链独特的地方在于这些组件的功能和相互作用。重要的组件包括：EVM（Ethereum Virtual Machine 以太坊虚拟机）、矿工、区块、交易、共识算法、账户、智能合约、挖矿、以太币和 gas。 一个区块链网络是由大量的节点构成的，其中一部分是属于矿工的
阅读全文
摘要：任务 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
阅读全文
摘要：语法 router.push(location) 要导航到不同的 URL，则使用 router.push 方法。该方法会向 history 找添加一个新的记录，当用户单击浏览器的后退按钮时，回到之前的 URL。 说明 当单击＜router-link＞时，会在内部调用 router.push(...)
阅读全文
摘要：下面列出了常用的路由信息对象。 route.params 一个 key/value 对象，包含了动态片段和全匹配片段，如果没有路由参数，就为空对象。 $route.query 一个 key/value
阅读全文
摘要：<router-link＞组件支持用户在具有路由功能的应用中单击导航。通过 to 属性可以指定目标地址，默认渲染成带有正确链接的＜a＞标签，通过配置 tag 属性可以生成别的标签。另外，当目标路由成功激活时，链接元素会自动设置一个表示激活的 css 类名。下面来看一下<router-link>语法。
阅读全文
摘要：在打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果能把不同路由对应的组件分割成不同的代码块，当路由被访问的时候才加载对应组件，就比较高效了。 结合 Vue 的异步组件和 Webpack 的代码分割功能，可以轻松实现路由组件的懒加载。 提示 异步纽件： 在大型应用中，可能需要将
阅读全文
摘要：项目应用通常都会有一个首页，默认首先打开的是首页，要跳转到哪个页面都可以设置路由路径发生跳转。有些时候也需要路由器定义全局的重定向规则，全局的重定向会在匹配当前路径之前执行。重定向也是通过 routes 配置来完成的，具体如示例 5 所示。示例 5 中 展示的是从“／a ” 重定向到“/b”。 示例
阅读全文
摘要：在 main.js 入口文件中启用该路由器。main.js 作为入口文件，使用 import 可以把所有要用到的包都导入到这里，然后在 Vue 项目中去运用它们。创建和挂载根实例，通过 router 配置参数注入路由，从而让整个应用都有路由功能，具体如示例 2 所示。 示例2 经过示例 2 的配置之
阅读全文
摘要：在以太坊上执行任务需要消耗以太币。由于以太币在交易所进行公开买卖，因此它的价格会上下波动。在支付费用时，如果直接使用以太币，那么，由于其价格不固定，同一个服务所花费的成本可能会忽高忽低。这样的话，人们会选择当以太币价格处于低谷时再去执行交易。对于一个平台来说，出现这种情况并不理想。（会形成峰谷效应，
阅读全文
摘要：以太币是以太坊上的货币。以太坊的每次活动都需要消耗以太币作为费用，成功产生区块的矿工也会获得以太币作为奖励，以太币通过交易平台很容易兑换成法定货币。 以太币采用十进制的计量体系，其最小的单位是 wei。下面列出了一些计量单位，可以在网站 https://github.com/ethereum/web
阅读全文
摘要：密码学是一门科学，它将易懂的、直白的内容转换成秘密的、隐藏的、无意义的内容，同样道理，解密就是反过来操作。加密技术有助于传输和保存数据，而且不能轻易地解密。 在计算机领域有两种类型的加密技术：对称加密和非对称加密。 对称加密和解密：对称加密指的是在加密和解密过程中使用同一个密钥。如果使用这种技术交换
阅读全文
摘要：Vue.js 的介绍 Vue.js 的宫方文档中是这样介绍的：简单小巧的核心，渐进式的技术枝，足以应付任何规模的应用。 简单小巧指的是 Vue.js 压缩后仅有 17KB。渐进式（progressive）是指可以一步一步、阶段性地来使用 Vue.js，不必一开始就使用所有的技能点。 Vue.js 常
阅读全文
摘要：先建立一个路由器模块，主要用来配置和绑定相关信息。在 router 文件夹下的 index.js 文件中使用 new Router 命令创建一个路由，一个路由是一个对象，一条路由的实现需要三部分：name、path 和 component。name 是命名，path 是路径，component 是组
阅读全文
摘要：以太坊的主要工作原理就是接受账户发出的交易，更新它们的状态，然后维持该状态，直到另外的交易更新它们为止。在以太坊上，整个交易接受、执行和写入的流程分成两个阶段。以太坊接受交易和交易执行并写入账本之间是解耦的。对于去中心化和分布式架构来说，这种解耦才能够有效地支撑系统正常运行。 区块链主要有以下三种用
阅读全文
摘要：学习 App.vue源码 <template> <div id="app" v-cloak> <loading></loading> <layout-header></layout-header> <layout-body></layout-body> <layout-footer></layout
阅读全文
摘要：最近十多年来，科技和机器计算的生态系统发生了重大的变化。技术创新在多个领域影响显著，从物联网（IOT）到人工智能（AI），再到区块链（BlockChain），它们中的每一个都具有颠覆产业的力量。当前区块链已经成为最具有颠覆性的技术之一，它将潜在地改变各个行业，并将催生新的业务模式，很多行业将发生巨变
阅读全文
摘要：10.1 调试 10.1.1 Remix 编辑器 10.1.2 使用事件 10.2 使用 Block Explorer 10.3 本章小结
阅读全文
摘要：9.1 应用程序开发生命周期管理 9.2 Truffle 9.3 使用 Truffle 进行开发 9.4 使用 Truffle 进行测试 9.5 本章小结
阅读全文
摘要：8.1 错误处理 8.1.1 require 语句 8.1.2 assert 语句 8.1.3 revert 语句 8.2 事件与日志 8.3 本章小结
阅读全文
摘要：7.1 函数输入和输出 7.2 修改器 7.3 view 函数、constant 函数和 pure 函数 7.4 地址相关函数 7.4.1 send 方法 7.4.2 transfer 方法 7.4.3 call 方法 7.4.4 callcode 方法 7.4.5 delegatecall 方法
阅读全文
摘要：6.1 智能合约 6.2 编写一个简单的合约 6.3 创建合约 6.3.1 使用 new 关键字 6.3.2 使用合约地址 6.4 构造函数 6.5 合约组合 6.6 继承 6.6.1 单继承 6.6.2 多级继承 6.6.3 分层继承 6.6.4 多重继承 6.7 封装 6.8 多态性 6.8.1
阅读全文
摘要：5.1 Solidity 表达式 5.2 if 决策控制 5.3 while 循环 5.4 for 循环 5.5 do...while 循环 5.6 break 语句 5.7 continue 语句 5.8 return 语句 5.9 本章小结
阅读全文
摘要：4.1 var 类型变量 4.2 变量声明提前 4.3 变量作用域 4.4 类型转换 4.4.1 隐式转换 4.4.2 显式转换 4.5 区块和交易全局变量 4.5.1 交易和消息全局变量 4.5.2 tx.origin 和 msg.sender 的区别
阅读全文
摘要：3.1 以太坊虚拟机 3.2 Solidity 和 Solidity 文件 3.2.1 预编译指令 3.2.2 注释 3.2.3 import 语句 3.2.4 合约 3.3 合约的结构 3.3.1 状态变量 3.3.2 结构 3.3.3 修改器 3.3.4 事件 3.3.5 枚举 3.3.6 函数
阅读全文
摘要：2.1 以太坊网络 2.1.l 主网 2.1.2 测试网络 2.1.3 私有网络 2.1.4 联盟网络 2.2 Geth 2.3 搭建一个私有网络 2.4 ganache-cli 2.5 Solidity 编译器 2.6 web3 JavaScript 库 2.7 Mist 钱包 2.8 MetaM
阅读全文
摘要：1.1 什么是区块链 1.2 为什么是区块链 1.3 加密技术 1.4 以太币 1.5 gas 1.6 区块链和以太坊架构 1.7 以太坊节点 1.8 以太坊账户 1.9 交易 1.10 区块 1.11 端到端的交易 1.12 什么是合约 1.13 什么是智能合约 1.14 如何部署合约 1.15
阅读全文
摘要：Vue.js官方提供了一套专用的路由工具库 Vue Router，其使用和配置都非常简单，而且代码清晰易懂，很容易上手。 提示 将单页面应用分割为功能合理的组件或者页面，路由起到一个非常重要的作用，它是连接单页面应用中各页面的链条。 项目使用支持 CommonJS 规范的模块化打包器 Webpack
阅读全文
摘要：前端路由更多使用在单页面应用（SPA）上，因为单页面应用基本上都是前后端分离的，后端自然不会给前端提供路由。 来看一下前端路由的优缺点。 前端路由的优点 从性能和用户体验的层面来看，后端路由每次访问一个新页面都要向服务器发送请求，然后服务器再响应请求，这个过程肯定会有延迟。而前端路由在访问一个新页面
阅读全文
摘要：前端路由和后端路由在技术实现上不一样，但原理是一样的。在 HTML5 的 history API 出现之前，前端路由都通过 hash 来实现，hash 能够兼容低版本的浏览器。如果把上一节的 URI 例子用 hash 来实现的话，它的 URI 规则中需要带上“#”。 http://10.0.0.1/
阅读全文
摘要：假设有一台提供 Web 服务的服务器的网址是 10.0.0.1，该 Web 服务又提供了 3 个可供用户访问的页面，其页面 URI 分别是 ： http://10.0.0.1/ http://10.0.0.1/about http://10.0.0.1/concat 路径分别是／、／about、／c
阅读全文
摘要：从示例 34 可以看出，使用 import 命令时，用户需要知道所要加载的变量名或函数名，否则无法加载。 为了给用户提供方便，不用阅读文档就能加载模块，需要用到 export default 命令，为模块指定默认输出。使用方法如示例 35 所示 。 示例 35 // export-default.j
阅读全文
摘要：Promise 是异步编程的一种解决方案，比传统的解决方案一一回调函数和事件更合理、更强大。它由社区最早提出和实现，ES6 将其写进语言标准，统一了用法，原生提其了 Promise 对象 。 所谓 Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作〉的结果。从语
阅读全文
摘要：在使用 ES6 的模块化设计时最常遇到的问题就是如何导入、导出属性和方法，在创建或者使用对应的 js 文件时常用 export 命令导出对应的属性和方法、import 命令导入对应的属性和方法。 1. export 命令 一个模块就是一个独立的文件，文件内部的所有变量外部无法获取。如果希望外部能够读
阅读全文
摘要：JavaScript 一直没有模块（module）体系，因此无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来，这对开发大型的、复杂的项目形成了巨大障碍。 在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommnonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES
阅读全文
摘要：1. size 属性 size 属性返回 Map 结构的成员总数。 示例26 const hzhMap = new Map ([ ['name', '黄子涵'], ['brother', '黄春钦'], ['mother', '陈兰英'] ]); console.log("hzhMap成员总数：")
阅读全文
摘要：Map 可以接受一个数组作为参数，该数组的成员是一个个表示键值对的数组。查看示例 25 了解如何创建 Map 。 示例25 const hzhMap = new Map ([ ['name', '黄子涵'], ['brother', '黄春钦'], ['mother', '陈兰英'] ]); con
阅读全文
摘要：JavaScript 的对象（Object）本质上是键值对的集合（Hash 结构），但是传统上只能使用字符串作为键，这给它的使用带来了很大的限制。为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但其“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也
阅读全文
摘要：了解了 ES6 箭头函数的优点，也看到了箭头函数的一些不足。那么在什么场景下不适合使用箭头函数呢？ 1. 对象的方式 在对象的方法中不建议使用箭头函数，如果使用了会导致一些问题的产生，看下面这段代码。 示例23 const Hzh = { name: "黄子涵", age: '28', brothe
阅读全文
摘要：与普通函数相比，箭头函数的优势主要表现在以下两个方面： 不绑定 this、arguments 更简化的代码语法 第二个特点不需要过多赘述，主要讲解不绑定 this 和 arguments 这两个特点。 1.不绑定 this 不绑定 this 可以理解为箭头函数的 this 在定义的时候就确定了，以后
阅读全文
摘要：语法 (参数1, 参数2, ..., 参数N) => { 函数声明 } (参数1, 参数2, ..., 参数N) => 表达式(单一) // 相当于：(参数1, 参数2, ..., 参数N) => { return 表达式; } // 当只有一个参数时，圆括号是可选的 (单一参数) => { 函数声
阅读全文
摘要：首先来看示例 17 代码 。 示例17 const Hzh = { name: "黄子涵", age: '28', brother: "黄春钦", mother: "陈兰英", say: function () { setInterval(function () { console.log("你好！
阅读全文
摘要：上机练习2 一一 对象的解构赋值使用 需求说明 假设有一段 JSON 对象数据，利用对象的解构赋值来快速提取 JSON 数据的值。 前端开发与后台交互得到的数据格式，一般情况下为 JSON 对象数据格式，利用对象的解构赋值可以很方便地提取 JSON 对象中的数据。 var hzhJson = { i
阅读全文
摘要：解构不仅可以用于数组，还可以用于对象。对象的解构与数组的解构有一个重要的不同：数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。 示例13 let { hzh, hcq } = { hzh: "黄子涵", hcq: "黄春钦" }; co
阅读全文
摘要：ES6 允许按照一定模式从数组和对象中提取值，再对变量赋值，这被称为解构( Destructuring ）。在实际的项目开发中，从数组和对象中提取值使用得非常频繁，本任务主要讲解如何从数组和对象中提取值。 在以前的开发中为变量赋值，只能直接指定值 。 示例8 // 传统赋值 let cly = 1;
阅读全文
摘要：ES6 新增了 let 命令，用来声明变量。它的用法类似于 var，但其声明的变量只在 let 命令所在的代码块内有效。 1. let 命令作用城只局限于当前代码块 示例1 { let a = 10; var b = 1; } console.log("输出a："); console.log("a
阅读全文
摘要：const 声明一个只读的常量。一旦声明，常量的值就不能改变。 示例 5 const PI = 3.1415; console.log("输出变量PI："); console.log("PI = " + PI); PI = 3; [Running] node "e:\HMV\JavaScript\J
阅读全文
摘要：上机练习1 一一 let 命令使用 需求说明 使用 for 循环体中 let 的父子作用域，解决示例 4 中单击任意按钮最后均打印“这是第 5 个按钮”的问题，最终实现页面效果如下图所示 。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=
阅读全文
摘要：第1章 大觅顶目架何设计 第2章 大觅顶目中 ES6 的使用 第3章 大觅顶目的路由配置 第4章 初识 Vue.js 第5章 大觅顶目中与服务端通信 第6章 Vue.js 指令 第7章 组件详解 第8章 计算属性和侦昕器 第9章 大觅项目中插件的使用 第10章 大觅项目总结
阅读全文
摘要：任务1 大觅项目业务场景 1.1.1 大觅项目业务分析 1.1.2 大觅项目业务梳理 1.1.3 大觅项目技术栈选型 任务2 大觅项目环境搭建 1.2.1 Node.js 的介绍 1.2.2 什么是 NPM 1.2.3 安装 cnpm 1.2.4 Vue-cli 脚手架 1.2.5 上机训练 任务
阅读全文
摘要：前端的优势 解决 JavaScript 和 css 的依赖何题 在实际开发中经常发现 css 没起作用，JavaScript 的某个变量或方法找不到，很多情况下都是因为引入 JavaScript 或者 css 的顺序不对造成的，而使用构建工具就可以大大减少此类问题。 性能优化 随着项目规模的增大，前
阅读全文
摘要：上机练习 2 一一将 iView 框架引入大觅项目 需求说明 将 iView 框架全部引入到大觅项目中。 在 src\components 文件夹下打开 HelloWorld.vue 文件，将 class 名为 hello 的 div 内部标签全部删除，替换为 iView 框架的 button 组件
阅读全文
摘要：UI 框架分析 UI 框架的优点 快速搭建 Web 页面 集中精力完成业务代码 缩短开发周期 UI 框架的缺点 冗余代码 无法定制化、精细化开发 UI 框架的选择 判断项目是否使用 UI 框架，要去权衡 UI 框架是否适合项目要求，如果项目开发工期比较紧，而且对项目精细化要求不是特别高，那么使用 U
阅读全文
摘要：Visual Studio Code 的简介 Visual Studio Code 并不是微软提供的大型开发工具包 Visual Studio，而是微软在 2015 年 4 月发布的一款能够运行在 Windows、Mac OS 和 Linux 之上的免费跨平台编辑器。Visual Studio Co
阅读全文
摘要：分离方式的种类 不分离 部分分离 完全分离 分离方式的缺点 不分离 前后端共用同一个项目目录，本地开发环境搭建成本高，项目比较复杂、不直维护且维护成本高、发布风险高，不利于问题的定位和修改。 部分分离 本地环境搭建成本较高，需要后端提供页面模板（JSP 等），更新和修改模板需要后端人员操作，效率低且
阅读全文
摘要：原生开发存在的问题 难以维护 加载缓慢 体验差 重复编码 扩展困难 前后端祸合度高 大觅项目使用分层架构设计 把功能相似、抽象级别相近的实现进行分层，使逻辑变得清晰，容易理解和维护，也称作多层架构或 N 层架构，在这里使用的是类 MVVM 的分层架构方式，但还不完全是 MVVM 的分层架构方式。 分
阅读全文
摘要：上机练习1 ——— 使用 Vue-cli 脚手架搭建大觅项目 需求说明 使用 Vue 脚手架 Vue -cli 快速搭建项目 。使用命令行安装项目依赖，并且可以启动项目，页面效果如x下图所示。
阅读全文
摘要：Vue-cli 的简介 Vue-cli 是一个官方命令行工具 ，可用于快速搭建大型单页面应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程，只需几分钟即可创建并启动一个带热重载、保存时静态检查，以及可用于生产环境构建配置的项目。 单页面应用（Single Page Web Applic
阅读全文
摘要：NPM 的缺点 NPM 安装插件需要从国外服务器下载，受网络影响大，下载比较慢，容易出现异常。 CNPM 的说明 这是一个完整的 npmjs.org 镜像，可以用此代替官方版本（只读），同步频率目前为 10 分钟一次，以保证尽量与官方服务同步。 CNPM 的使用 既然淘宝 NPM 镜像这样方便，那么
阅读全文
摘要：Node.js 的包管理器 NPM 是全球最大的开源库生态系统，它集成在 Node.js 中，在安装 Node.js 的时候就已经自带了 NPM 包管理工具。验证 NPM 是否安装成功的方法同验证 Node.js 的方法。 在命令行窗口中输入“npm -v ”可得到 NPM 的版本，说明 NPM 己
阅读全文
摘要：Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境 。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，既轻量又高效。另外，Node.js 可以理解为 JavaScript 运行时环境（runtime），runtime 类似于国际会议中的同声翻译。 安
阅读全文
摘要：安装 Node 环境，这是目前前端技术的基础环境，大部分技术技都依赖它，所以必须要安装。 包管理工具 NPM 是伴随 Node 安装的，Node 安装之后，NPM 也自动安装完成了。建议使用淘宝镜像 CNPM。 Vue-cli 的安装以及初始化 vue 项目。 与 Vue 框架搭配使用的 UI 框架
阅读全文
摘要：简答题 简述大觅项目的需求。 简述大觅项目的业务逻辑。 如何安装和调试 Node.js？如何使用 Vue-cli 脚手架？ 如何在项目中使用 iView 框架？ 了解如何在项目中安装、配置构建工具 Webpack? 图 大觅项目业务分析 登录方式 账户登录 短信快捷登录 账户登录 账户登录中会对输入
阅读全文
摘要：任务1 大觅项目起步 10.1.1 项目前期准备 10.1.2 Vue框架 任务2 梳理大觅项目技能点 10.2.1 项目框架搭建及配置 10.2.2 梳理项目技能点 本章作业
阅读全文
摘要：任务1 百度地图插件 9.1.1 百度地图基本介绍 9.1.2 百度地图基本使用 9.1.3 上机训练 任务2 状态管理与 Vuex 9.2.1 状态管理与使用场景 9.2.2 Vuex基本用法 任务3 二维码插件 9.3.1 使用场景 9.3.2 QRCode插件使用 本章作业
阅读全文
摘要：任务1 计算属性 8 1.1 什么是计算属性 8.1.2 计算属性用法 8.1.3 计算属性缓存 8 1.4 上机训练 任务2 侦听器 8.2.1 什么是侦听器 8.2.2 计算属性 VS 侦听器 本章作业
阅读全文
摘要：任务1 组件概念与复用 7.1.1 为什么使用组件 7.1.2 组件的复用 任务2 使用 props 传通数据 7.2.1 基本用法 7.2.2 单向数据流 7.2.3 上机训练 任务3 组件通信 7.3.1 自定义事件及$emit方法 7.3.2 兄弟组件通信的处理方式 任务4 slot 分发内容
阅读全文
摘要：任务 1 条件渲染指令 6.1.1 V-if 指令 6.1.2 v-else 指令 6.1.3 v-show 指令 6.1.4 v-if 与 v-show 的选择 任务2 列表渲染 v-for 指令 6.2.1 基本用法 6.2.2 遍历对象 6.2.3 遍历数组 6.2.4 key 属性 6.2.
阅读全文
摘要：5.1 connect-mock-middleware 工具的使用 5.1.1 添加 middleware 5.1.2 写 mock 文件 5.2 Mock.js 语法 5.2.1 Mock.js 基本介绍 5.2.2 Mock.js语法规范 5.3 snail mock 工具使用 5.4 Axio
阅读全文
摘要：我们之后讨论多个组件的过渡，对于原生标签可以使用 v-if/v-else。最常见的多标签过渡是一个列表和描述这个列表为空消息的元素： <transition> <table v-if="items.length > 0"> <!-- ... --> </table> <p v-else>Sorry,
阅读全文
摘要：这里还有一个问题，请看下面的按钮： 在“on”按钮和“off”按钮的过渡中，两个按钮都被重绘了，一个离开过渡的时候另一个开始进入过渡。这是 <transition> 的默认行为 - 进入和离开同时发生。 在元素绝对定位在彼此之上的时候运行正常： 然后，我们加上 translate 让它们运动像滑动过
阅读全文
摘要：可以通过 appear attribute 设置节点在初始渲染的过渡 <transition appear> <!-- ... --> </transition> 这里默认和进入/离开过渡一样，同样也可以自定义 CSS 类名。 <transition appear appear-class="cus
阅读全文
摘要：概述 单元素/组件的过渡 初始渲染的过渡 多个元素的过渡 多个组件的过渡 列表过渡 可复用的过渡 动态过渡
阅读全文
摘要：Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 这里是一个典型的例子： <div id="demo"> <button v-on:click="show =
阅读全文
摘要：可以在 attribute 中声明 JavaScript 钩子 <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="ent
阅读全文
摘要：2.2.0 新增 在很多情况下，Vue 可以自动得出过渡效果的完成时机。默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定——比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果
阅读全文
摘要：Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。 但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animatio
阅读全文
摘要：我们可以通过以下 attribute 来自定义过渡类名： enter-class enter-active-class enter-to-class (2.1.8+) leave-class leave-active-class leave-to-class (2.1.8+) 他们的优先级高于普通的
阅读全文
摘要：CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。 示例：(省略了兼容性前缀) <div id="example-2"> <button @click="show = !show">Toggle
阅读全文
摘要：常用的过渡都是使用 CSS 过渡。 下面是一个简单例子： <div id="example-1"> <button @click="show = !show"> Toggle render </button> <transition name="slide-fade"> <p v-if="show"
阅读全文
摘要：在进入/离开的过渡中，会有 6 个 class 切换。 v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定
阅读全文
摘要：Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具： 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库，如 Animate.css 在过渡钩子函数中使用 JavaScript 直接操作 DOM 可以配合使用第三方 JavaScrip
阅读全文
摘要：如何追踪变化 检测变化的注意事项 声明响应式 property 异步更新队列
阅读全文
摘要：报告安全漏洞 第一原则：永远不要使用不可信任的模板 Vue 的安全措施 潜在危险 最佳实践 后端协作 服务端渲染
阅读全文
摘要：SSR 完全指南 Nuxt.js Quasar Framework SSR + PWA
阅读全文
摘要：发布为 NPM 包的官方声明文件 推荐配置 开发工具链 基本用法 基于类的 Vue 组件 增强类型以配合插件使用 标注返回值 标注 Prop
阅读全文
摘要：基础 节点、树以及虚拟 DOM createElement 参数 使用 JavaScript 代替模板功能 JSX 函数式组件 模板编译
阅读全文
摘要：插槽内容 编译作用域 后备内容 具名插槽 作用域插槽 动态插槽名 具名插槽的缩写 其它示例 废弃了的语法
阅读全文
摘要：事件名 自定义组件的 v-model 将原生事件绑定到组件 .sync 修饰符
阅读全文
摘要：vue@0.11 vue@0.12 vue@1.0 vue@2.x 基础 安装与介绍 Vue实例 模板语法 计算属性和侦听器 Class 与 Style 绑定 条件渲染 列表渲染 事件处理 表单输入绑定 深入了解组件 组件注册 Prop 自定义事件 插槽 动态组件 & 异步组件 处理边界情况 过渡
阅读全文
摘要：所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。 额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着
阅读全文
摘要：像这样，你已经知道了可以像这样给 prop 传入一个静态的值： <blog-post title="My journey with Vue"></blog-post> <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <me
阅读全文
摘要：如果你想要将一个对象的所有 property 都作为 prop 传入，你可以使用不带参数的 v-bind (取代 v-bind:prop-name)。例如，对于一个给定的对象 post： post: { id: 1, title: 'My Journey with Vue' } 下面的模板： <bl
阅读全文
摘要：<!-- 即便对象是静态的，我们仍然需要 `v-bind` 来告诉 Vue --> <!-- 这是一个 JavaScript 表达式而不是一个字符串。--> <blog-post v-bind:author="{ name: 'Veronica', company: 'Veridian Dynami
阅读全文
摘要：<!-- 即便数组是静态的，我们仍然需要 `v-bind` 来告诉 Vue --> <!-- 这是一个 JavaScript 表达式而不是一个字符串。--> <blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post> <!-- 用一个变量
阅读全文
摘要：<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。--> <blog-post is-published></blog-post> <!-- 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue --> <!-- 这是一个 JavaScript 表达式而
阅读全文
摘要：<!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue --> <!-- 这是一个 JavaScript 表达式而不是一个字符串。--> <blog-post v-bind:likes="42"></blog-post> ```html <!DOCTYPE html> <
阅读全文
摘要：到这里，我们只看到了以字符串数组形式列出的 prop： props: ['title', 'likes', 'isPublished', 'commentIds', 'author'] 但是，通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些 property 的
阅读全文
摘要：HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名： Vue.component('blog-po
阅读全文
摘要：如果你没有通过 import/require 使用一个模块系统，也许可以暂且跳过这个章节。如果你使用了，那么我们会为你提供一些特殊的使用说明和注意事项。 在模块系统中局部注册 如果你还在阅读，说明你使用了诸如 Babel 和 webpack 的模块系统。在这些情况下，我们推荐创建一个 compone
阅读全文
摘要：全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。 在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组
阅读全文
摘要：到目前为止，我们只用过 Vue.component 来创建组件： Vue.component('my-component-name', { // ... 选项 ... }) 这些组件是全局注册的。也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。比如： Vue
阅读全文
摘要：在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了： Vue.component('my-component-name', { /* ... */ }) Vue.component('hzh-component-name', {}); Vue.component('h
阅读全文
摘要：基本示例 组件的复用 组件的组织 通过 Prop 向子组件传递数据 单个根元素 监听子组件事件 通过插槽分发内容 动态组件 解析 DOM 模板时的注意事项
阅读全文
