- 博客(75)
- 收藏
- 关注
RSS订阅转载 js规范中的相等性判断---“==”、“===”、“Object.is ”
严格相等，使用 ===宽松相等，使用 ==以及 Object.is （ECMAScript 2015/ ES6 新特性）简而言之，在比较两件事情时，双等号将执行类型转换; 三等号将进行相同的比较，而不进行类型转换 (如果类型不同, 只是总会返回 false ); 而Object.is的行为方式与三等号相同，但是对于NaN和-0和+0进行特殊处理。参考文章：https://devel...
2020-04-27 17:25:08
223
转载 JS标准内置对象之---encodeURI()
encodeURI() 函数通过将特定字符的每个实例替换为一个、两个、三或四转义序列来对统一资源标识符 (URI) 进行编码 (该字符的 UTF-8 编码仅为四转义序列)由两个 “代理” 字符组成)。假定一个URI是完整的URI，那么无需对那些保留的并且在URI中有特殊意思的字符进行编码。http://username:password@www.example.com:80/path/to/...
2020-04-27 16:42:36
1332
原创 vueX多模块---简易购物车案例
多个模块的使用，这在企业中也是常见的情况，我们通过商品添加到购物车的案例来分析一下如上，一个简易版的商品购买的案例，Products 列表显示的是商品信息，点击 Add to cart 的时候执行添加到购物车，购物车数据会自动更新以这个案例来说，商品和购物车实际上是两个独立的对象，后台也会有两个不同的 API 来处理API1. productsRequestGET https://w...
2020-04-27 15:31:59
854
原创 网络请求 async 与 await---产品列表渲染
在 JavaScript 中曾学过用 fetch 请求数据，比如一个显示某公司信息的 API：{ "company": "M厂", "slogan": "XXXXXXXX"}用fetch 请求数据的代码如下：fetch( 'https://www.XXXXXXX') .then(function(response) { return response.json(...
2020-04-26 09:53:37
487
原创 vue监听路由--案例详解
有时我们需要对路由的变化进行监听，比如官网展示所有课程的页面：当页面头部的标签切换时，路径也会发生变化，我们需要监听路由变化来改变标签的样式，或者在页面中加载对应的内容。那么怎么监听路由呢？监听路由 $route 的变化监听路由变化我们需要用到两个知识：vue 中的 watch 和 $route。watch 即数据变化监听，$route 即当前路由。路由监听写法如下：watch: ...
2020-04-24 15:40:36
998
原创 vue重定向和别名--详解案例
项目目录：touter/index.js// 0. 使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)import Vue from 'vue';import VueRouter from 'vue-router';Vue.use(VueRouter);// 1. 定义 (路由) 组件。// 可以从其他文件 import 进来imp...
2020-04-24 10:48:57
371
原创 vue页面跳转---编程式导航
编程式导航除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 Router 的实例方法，通过编写代码来实现： 声明式 编程式 <router-link :to="..."> router.push(...) 注意，因为在 Vue 实例内部，可以通过 $router 访问 Route...
2020-04-23 18:49:13
1109
原创 vue动态路由及案例
在此之前遇到的都是一个路径对应一个组件的情况，但有时我们会遇到多个路径对应一个组件的情况。比如个人中心对应一个 User 组件，学员登录个人中心时，由于大家的 id 各不相同，所以个人中心的路径可能会不同，像 /user/123、/user/456 这样，但其实页面会使用同一个 User 组件来渲染。这里的 123和456 指的是用户 id，也就是在路径中添加的参数。像这种多个路径都映射到一...
2020-04-23 16:12:16
895
原创 vue嵌套路由---首页路由案例
router/index.js// 0. 使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)import Vue from 'vue';import VueRouter from 'vue-router';Vue.use(VueRouter);// 1. 定义 (路由) 组件。// 可以从其他文件 import 进来import Lay...
2020-04-22 17:34:51
408
原创 vue路由布局管理
在实际开发中，工程比较复杂，应用界面通常由多层嵌套的组件组合而成，相应的，路由也会按某种结构对应嵌套的各层组件。例如用户相册里有头部、功能区，功能区有相册列表和新建相册两个功能，切换路径时，“banner” 没变，只有功能区的组件发生了切换：路径、组件的嵌套结构：/album/list /album/add+--------------...
2020-04-22 17:19:38
620
原创 vue-router添加路由
路由是路径和组件间的映射，而路径所对应的组件将在 <router-view> 标签处渲染。现在给工程添加一些路由，即在 routes 中添加一些路径和组件的映射：// 1. 将要用到的组件从其他文件 import 进来import Foo from './views/Foo.vue';import Bar from './views/Bar.vue';import User ...
2020-04-22 16:54:04
1339
原创 vue安装、配置 Router
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。了解路由之前，需要先理解一个概念：单页应用。单页应用SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是: 更新视图而不重新请求...
2020-04-22 15:21:43
477
原创 vue 组件 slot进阶---弹窗插槽
有时我们需要多个插槽。例如对于一个带有如下模板的组件：<div class="modal" v-if="visible"> <div class="modal-content"> <header> <!-- 我们希望把页头放这里 --> </header> <main> &...
2020-04-21 17:56:59
1120
原创 vue组件 slot 入门---弹窗组件
slot 即插槽，相当于在子组件的 DOM 中留一个位置，父组件如果有需要，就可以在插槽里添加内容。插槽的基础使用这里是一个插槽的简单用法。在子组件 Modal.vue 中用 slot 标签预留一个位置，slot 标签中的内容是后备内容，也可以为空：<div class="modal-content"> <slot>这是个弹框</slot> ...
2020-04-21 16:59:49
637
原创 vue手机号修改组件
父App.vue<template> <div id="app"> <!-- 使用组件 Modal 用修饰符将 visible 进行”双向绑定“ --> <Modal ref="mobileModal" :visible.sync="visible" @confirm="confirm"></Modal> &...
2020-04-21 16:39:03
696
原创 vue组件函数调用--弹窗组件
除了用自定义组件双向绑定的方法完成弹框的显示和隐藏外，我们还可以把 visible 直接写在子组件中，通过在父组件里调用子组件方法的形式，修改子组件中的 visible 的值，完成弹框的显示和隐藏。想要调用子组件中的方法，其实就是访问子组件实例，调用实例中的方法。可以利用 Vue 提供的 ref 属性来访问子组件实例，并调用子组件中的方法。改写子组件 Modal.vue首先需要修改一下子组...
2020-04-21 16:31:52
1623
原创 vue弹窗组件--修饰符.sync
（父）App.vue<template> <div id="app"> <!-- 使用组件 Modal 用修饰符将 visible 进行”双向绑定“ --> <Modal :visible.sync="visible"></Modal> <button @click="visible = true"&g...
2020-04-20 16:58:27
601
原创 vue绑定自定义事件--点赞功能
我们提到过，不能在子组件中直接修改父组件传来的 prop 数据。如果想要修改父组件中的原数据要怎么办呢？这里我们可以通过自定义事件来完成这个任务。自定义事件现在我们用自定义事件 “upVote” 来实现点赞功能。给子组件 Article.vue 绑定自定义事件：在 App.vue 中用 v-on:upVote=“handleLikes(article)” 给 Article.vue ...
2020-04-20 16:56:17
706
原创 vue 自定义组件绑定原生事件
事件修饰符在自定义组件（Article.vue）的根元素上监听一个原生事件和在 html 原生标签上监听一个原生事件是有区别的，请看下面的例子：App.vue 中：<!-- 给自定义组件添加点击事件 print --><Article v-for="article in articleList" :key="article.title" :article="a...
2020-04-16 18:27:21
510
原创 vue实现文章列表
现在来尝试做文章列表，完成后是这样的：父App.vue<template> <div id="app"> <!-- 用 v-for 渲染文章列表 --> <Article v-for="article in articleList" :key="article.title" :article="article"></A...
2020-04-16 16:09:07
3125
2
原创 vue组件值传递--单向数据流
由于组件 HelloVue 中 data 里的数据 str 是固定的，所以页面上显示的时候内容就是一样的：而实际开发中，复用的组件里显示的内容往往是不同的，比如下面的图片中显示的每个文章介绍其实用的是一个组件，但是每个介绍的内容却是不同的，这就需要从父组件中传递不同的内容给子组件。那么如何从父组件中把内容传给子组件呢？prop 的使用方法基础使用当父组件给子组件的 prop 传递一个...
2020-04-16 15:27:04
450
原创 vue自定义组件方法总结
组件是可复用的 Vue 实例，在开发过程中，我们可以把重复用到的功能封装成自定义组件，达到便捷开发的目的。组件的组织通常一个应用会以一棵嵌套的组件树的形式来组织：你可能会有头部导航、内容区、侧边栏等组件，每个组件内部又包含了导航链接、博文之类的组件。为了能在模板 中使用，这些组件必须先注册以便 Vue 能够识别。组件的注册在 Vue 中，组件的注册分全局注册和局部注册两种：全局...
2020-04-15 17:13:59
555
原创 vue动态 style
绑定内联样式的方法同样有两种，对象方式和数组方式。对象语法可以联想之前在HTML写的行内样式：<div style="background:red;"></div>在Vue中使用动态style的时候是这样来写的：<div :style="{background:'red','font-weight':700,'font-size':20+'px'}">...
2020-04-15 11:31:22
954
原创 vue动态 class
动态样式绑定可以实现选择性的给标签添加样式。动态绑定有两种语法，一种是对象语法，一种是数组语法对象语法语法如下：<div v-bind:class="{ active: isActive }"></div>active为类名，isActive是一个布尔值，可以是变量，也可以是方法（返回值是布尔类型的），isActive的真假决定样式active是否生效。既然是...
2020-04-14 17:19:49
246
原创 vue计算属性和方法的区别
计算属性是 模版中使用表达式 的一个补充。我们知道模版中可以写很多js中的方法等，如果逻辑较为复杂，在模版中使用表达式就会让模版显得太复杂，不便于阅读。比如我们之前的代码：<p>{{ message.split('').reverse().join('') }}</p>计算属性写法计算属性和data、methods、watch是一个级别的，所以它的位置也和它们一...
2020-04-14 16:18:40
223
原创 列表渲染语句v-for
循环渲染数字列表渲染的核心就是Vue的循环指令–v-forv-for和js中的for循环的原理相似。通过最简单的循环渲染数字来初步了解一下v-for：<div id="app"> <ul> <li v-for="item in 5" :key="item">{{ item }}</li> </ul>...
2020-04-14 16:05:53
410
原创 条件渲染语句v-if和v-show
条件渲染语句，就是可以根据不同的条件来选择渲染不同的模块，你可以将它跟js中的if、if/else、if/else-if结合起来理解。v-if当条件满足的时候，会显示标签内的内容。比如下面这个案例：<p v-if="isShow">{{ message }}</p><script>export default { name: "app", ...
2020-04-14 15:29:49
209
原创 H5调试---真香对象console
只读属性Window.console返回一个对Console对象的引用，Window.console提供了向浏览器控制台输出日志信息的方法。这些方法仅应该用于调试，并不应该用来给最终用户呈现信息。在翻阅MDN之前，提起console对象，最常用的要数console.log();//向控制台输出文字其实console这个对象还有很多方法可以帮助我们工作中快速调试开发。打开你的控制台输入co...
2020-04-14 14:34:43
544
原创 模板中使用表达式--vue篇
我们之前学习过Vue中的差值表达式，代码如下：<template> <div id="app"> <p>{{ text }}</p> </div></template>模版中进行计算差值表达式中不仅可以写一个变量，还可以进行简单的计算，比如我们要在渲染商品的时候，还要在前面添加一个序号...
2020-04-13 15:19:02
1686
原创 HTML 属性渲染语法--vue篇
我们知道，标签上是有自己的属性的，比如说a标签上有target、href、title…如何让这些属性的值根据数据动态的发生改变呢？就要用到属性绑定。动态绑定–v-bind<template> <div id="app"> <img src="#" v-bind:alt="imgText"> </div><...
2020-04-13 14:24:39
237
原创 vue监听数据变化
监听数据变化，在Vue中是通过侦听器来实现的，你也可以将它理解为监听器，时刻监听某个数据的变化。watch的基本用法在之前我们在js中添加了data、methods，这一次我们要添加的是watch属性。下面我们先来眼熟一下侦听器的添加位置：<script>export default { name: "app", // 数据 data() { ...
2020-04-10 15:51:36
3871
原创 vue处理用户事件
v-on:和methodsv-on:(事件绑定)在做事件绑定的时候，首先要做的就是给页面中的某个元素绑定一个事件，绑定事件的语法如下：<button v-on:click="add">按钮</button>v-on事件绑定指令的简写模式就是(@)符号，上面的代码可以改为：<button @click="add">按钮</button>...
2020-04-03 16:58:33
90
原创 vue处理用户输入
用户输入就是input、textarea，或者你还可以将select、单选、复选等当作是用户输入来对待。v-model（双向绑定）-- input<template> <p class="page">{{message}}</p> <input type="text" v-model="message" placeholder="请输入...
2020-04-03 16:21:02
164
原创 Vue CLI脚手架配置步骤
Vue CLI（Vue脚手架）安装安装node.jsnode.js的作用就是安装Vue CLI的工具，当然它的作用不仅限于此。安装node.js非常简单，首先我们去node.js官网下载安装包。安装Vue CLI安装脚手架的方法很简单，执行下面的命令即可：npm install -g @vue/cli// 如果是mac电脑，需要在命令前面加sudosudo npm install ...
2020-04-03 15:14:08
361
原创 配置模块
Vuex 的核心技术，需要记住的是编写 store 的顺序。案例简单，所以把 store 都写在了一个 index.js 文件中，这个对于小型的应用来说完全没有问题的。很多企业级项目都是比较复杂的，如果把 store 逻辑都存放在一个 js 文件(想象一下一个 js 文件几千、上万行代码。。。)，那维护起来可能会崩溃，比如说我们在网上买东西，这就至少涉及到了商品和购物车，如果这两个都写在一起，那...
2020-04-03 10:16:39
301
原创 Vuex 表单
搞定获取数据后，在来看一下提交数据，比如注册用户、点赞等等，这就需要往 action 函数传递参数了，这也是 store 使用比较高频的方式。现在通过登录这个功能来让我们看一下如何通过传递参数去请求数据登录功能APIApi Urlhttps://www.fastmock.site/mock/a9b15cd4db90d4e03ed76cd3c76d9197/f6/loginApi Me...
2020-04-03 09:40:34
185
原创 Vuex request
在真实的项目中，数据都是从服务器端获取的，Vuex 中同样也支持从远程获取数据，从前面的知识里了解到，Action 是接收数据并处理逻辑的地方。一般情况下，action 会接收外部传入的参数，然后执行网络请求，但是你需要添加 async 关键字我们先看看如何使用 fetch 库,我们有一个获取用户列表的 json apihttps://www.fastmock.site/mock/a9b15...
2020-04-02 16:03:30
723
原创 Getter
在一个 Vue 文件中提供 computed 函数的缺点就是不能复用，但是如果放置在 store 中就可以被多个组件复用了.Vuex GetterVuex 的 Getter 函数就是类似 Vue computed 函数的作用，Getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。定义 GetterGetter 接受 state 作为其第一个参数：im...
2020-04-02 15:14:42
203
原创 State/Muation/Action
定义 Vuex Store编写 Vuex 之前，我们需要了解一下 Vuex 的规范，具体来说就是State/Muation/Action的约定。StateState 的作用就是存储数据的，因为我们前面提到过 Vuex 是状态管理框架，所以在 Vuex 中 state 表示数据在 Vuex 中的存储状态，你可以把它看成一个全局的（Vue 应用中可以到处访问）大 JSON 对象。我们如果想要获...
2020-04-02 14:57:04
243
原创 Vuex简介/安装
Vuex 是 Vue 团队提供的状态管理模式.。换个维度来说，就是针对 Vue.js 提供的数据驱动解决方案。当我们掌握 Vue 后就会发现组件间的数据交互非常复杂，当我们提供一个单页应用的时候数据也不能复用、共享，这些问题随着你的 Vue 应用的复杂度而变的格外突出。维护一个大型的 Vue 项目也是非常头疼的事情，因为数据和展示黏合在一起，这对二次开发也越发的困难，这些都是 Vuex 要解决...
2020-03-31 18:09:53
147
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人