04 2020 档案
摘要：vue-router编程式导航 1 页面导航的两种方式 声明式导航：通过点击链接实现导航的方式，叫做声明式导航 例如：普通网页中的 <a></a> 链接 或 vue 中的 <router-link></router-link> 编程式导航：通过调用JavaScript形式的API实现导航的方式，叫做
阅读全文
摘要：vue-router命名路由 1 命名路由的配置规则 为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”。 const router = new VueRouter({ routes: [ { path: '/user/:id', name: 'user', component
阅读全文
摘要：Vue Router动态路由匹配路由 1 动态匹配路由的基本用法 思考： <!– 有如下 3 个路由链接 --> <router-link to="/user/1">User1</router-link> <router-link to="/user/2">User2</router-link> <
阅读全文
摘要：Vue Router嵌套路由 1 嵌套路由用法 1.1 嵌套路由分析 点击父级路由链接显示模板内容 模板内容中又有子级路由链接 点击子级路由链接显示子级模板内容 1.2 父路由组件模板 父级路由链接 父组件路由填充位 <p> <router-link to="/user">User</router-
阅读全文
摘要：2 Vue Router Vue Router（官网：https://router.vuejs.org/zh/）是 Vue.js 官方的路由管理器。 它和 Vue.js 的核心深度集成，可以非常方便的用于SPA应用程序的开发. Vue Router功能： 支持HTML5 历史模式或 hash 模式
阅读全文
摘要：路由 路由是一个比较广义和抽象的概念，路由的本质就是对应关系。 比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。 在开发中，路由分为：后端路由和前端路由 路由分为前端路由和后端路由 1).后端
阅读全文
摘要：1 async/await基本用法 async/await是ES7引入的新语法，可以更加方便的进行异步操作 async关键字用于函数上（async函数的返回值是Promise实例对象） await关键字用于async函数当中（await可以得到异步结果） <script type="text/jav
阅读全文
摘要：1 axios 的基本特性 axios 是一个基于Promise用于浏览器和node.js的HTTP客户端。 支持浏览器和node.js 支持Promise 能拦截请求和响应 自动转换JSON数据 2 axios基本用法 <script type="text/javascript" src="js/
阅读全文
摘要：1 fetch概述 1.1 基本特性 更加简单的数据获取方式，可以看做是XMLHttpRequest的升级版 基于Promise实现 1.2 语法结构 fetch(url).then(fn2) .then(fn3) ... .catch(fn) 2 fetch的基本用法 fetch('/abc').
阅读全文
摘要：1 异步调用 异步效果分析 ① 定时任务 ② Ajax ③ 事件函数 多次异步调用的依赖分析 ① 多次异步调用的结果顺序不确定 ② 异步调用结果如果存在依赖需要嵌套 2 Promise用法 主要解决异步深层嵌套的问题 promise 提供了 简洁的API 使得异步操作更加容易 3 Promise基本
阅读全文
摘要：1 接口调用方式 原生ajax 基于jQuery的ajax fetch axios 2 URL地址格式 2.1 传统形式的URL 格式：schema://host:port/path?query#fragment ① schema：协议，例如http、https、ftp等。 ② host：域名或者I
阅读全文
摘要：效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> .container { } .container .c
阅读全文
摘要：1.组件插槽的作用 父组件向子组件传递内容 2.组件插槽基本用法 2.1 插槽位置 Vue.component('alert-box', { template: ` <div class="demo-alert-box"> <strong>Error!</strong> <slot></slot>
阅读全文
摘要：父组件向子组件传值 1. 组件内部通过props接收传递过来的值 Vue.component('menu-item', { props: ['title'], template: '<div>{{ title }}</div>' }) 2. 父组件通过属性将值传递给子组件 例 <!DOCTYPE h
阅读全文
摘要：介绍 vue-devtools 是一款基于chrome游览器的插件，用于调试vue应用 1.进入Vue官网，选择生态系统 > 工具 > Devtools 2.在GitHub上克隆下来 将vue-devtools clone到本地 git clone https://github.com/vuejs/
阅读全文
摘要：全局组件注册语法 1.组件注册语法 Vue.component(组件名称, { data: 组件数据, template: 组件模板内容 }) // 注册一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function
阅读全文
摘要：变异方法和替换数组 1. 变异方法(修改原有数据) push() pop() shift() unshift() splice() sort() reverse() 2. 替换数组(生成新的数组) filter() concat() slice() <!DOCTYPE html> <html lan
阅读全文
摘要：5.7 生命周期 1. 主要阶段 挂载（初始化相关属性） ① beforeCreate ② created ③ beforeMount ④ mounted 更新（元素或组件的变更操作） ① beforeUpdate ② updated 销毁（销毁相关属性） ① beforeDestroy ② des
阅读全文
摘要：5.6 过滤器 1.过滤器的作用是什么？ 格式化数字，比如将字母格式化大写，日期格式化等 2. 自定义过滤器 Vue.filter(‘过滤器名称’, function(value){ // 过滤器业务逻辑 }) 3. 过滤器的使用 <div>{{msg | upper}}</div> <div>{{
阅读全文
摘要：5.5 侦听器 1. 侦听器的应用场景 数据变化时执行异步或开销较大的操作 2. 侦听器的用法 watch: { firstName: function(val){ // val表示变化之后的值 this.fullName = val + this.lastName; }, lastName: fu
阅读全文
摘要：5.4 计算属性 1. 为何需要计算属性？ 表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁 2. 计算属性的用法 computed: { reversedMessage: function () { return this.msg.split('').reverse().join
阅读全文
摘要：5.3 自定义指令 1. 为何需要自定义指令？ 内置指令不满足需求 2. 自定义指令的语法规则（获取元素焦点） Vue.directive('focus' { inserted: function(el) { // 获取元素的焦点 el.focus(); } }) 3.自定义指令用法 <input
阅读全文
摘要：Vue常用特性 5.1 常用特性概览 表单操作 自定义指令 计算属性 过滤器 侦听器 生命周期 5.2 表单操作 1.基于Vue的表单操作 Input 单行文本 textarea 多行文本 select 下拉多选 radio 单选框 checkbox 多选框 <!DOCTYPE html> <htm
阅读全文
摘要：过年在家时，我弟给我出了个题，他说：“你买了10瓶酒，如果4个酒盖子或2个空酒瓶子可换1瓶酒，那么你最多可以喝几瓶酒？”于是我写了一下程序来计算。 // 4个盖子或两个瓶子可以换一瓶酒 static void Main(string[] args) { // 一开始的酒数量 int wineCoun
阅读全文
