2020年07月_furfur-jiang

原创 open with live serve和 open in default brower使用的需要注意路径

open with live serve，是打开本地服务器，所以路径书写的时候./和/是没有区别的open in default brower 是直接本地打开，路径必须是./，否则即/会从根目录下进行读取

2020-07-29 21:41:24 1451

原创 vue的路由切换 router-link

简单一个例子history的（hash模式在路径前加个#）tag可以替换router-link是什么标签activeClass可以为被点击的加个样式类<template> <nav> <ul>  <router-link to="/center" tag="li" activeClass="myactive">center</router-link

2020-07-25 16:22:48 270

原创 express -e 无效解决办法

命令如下：npm install -g express-generator之后再次安装：npm install -g express最后express -e xx名快速生成xx名的项目

2020-07-24 06:52:57 1104

原创 Vue的内置动画，进入离开动画transition，过滤器

参考官网：https://cn.vuejs.org/v2/guide/transitions.html单元素/组件的过渡Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。如果过渡组件提供了

2020-07-18 12:24:03 1277

原创复习vue之自定义指令的生命周期

文章参考自官网，加入自己的例子和理解钩子函数一个指令定义对象可以提供如下几个钩子函数 (均为可选)：bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。只会执行一次update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。（注意是update，不是.

2020-07-18 12:18:39 1304

原创 Vue复习之组件和事件名字的注意，深入了解组件

参考自官方文档，加入自己的理解和例子Prop命名Prop 的大小写 (camelCase vs kebab-case)HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 .

2020-07-17 20:24:59 359

原创 vue非父子组件通信bus中央时间总线，作者组件可以发送文字给读者组件，两组件无任何关系

利用一个空实例，作为中央时间总线作者组件可以发送文字给读者组件，两组件无任何关系作者组件负责$emit进行触发，读者组件通过$on监听let bus = new Vue() //空实例，中央时间总线//所有人都可以通过$on进行监听，$emit进行触发Vue.component('author', { template: `<div> <input ref="mytext"/> <button @click="handleCli

2020-07-16 18:37:37 177

原创解决bug之给input添加回车事件后，内部操作未执行就跳转页面

在form表单里,给input框加回车事件后,本想要获取input框的内容,然后进行跳转,可是并没有跳转而是将input框的内容传到了地址栏当参数,这样就是表单默认提交了。这种问题只出现在form表单里只有一个input框,两个就不默认提交解决办法<input style="display: none;">注意：<input type="hidden">这个写法无效参考自：https://blog.csdn.net/yc950208/article/details/81

2020-07-16 17:43:32 248

原创对一个列表的内容进行关键字高亮显示

boxArr是对应列表的类名val是关键字function HeightColor(val) { let boxArr = document.getElementsByClassName('title') for (let i = 0; i < boxArr.length; i++) { let arr = boxArr[i].innerHTML.split(val) boxArr[i].innerHTML = arr.join('<span styl

2020-07-16 17:19:30 327

原创 vue复习之组件基础，组件定义,父子相互传参，插槽，动态组件

本文参考自官方文档，并加入自己的理解和例子组件基础两种组件的注册类型：全局注册和局部注册。全局注册基本示例// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count .

2020-07-16 11:16:39 292

原创 fetch和axios基本使用注意点

fetch基本使用fetch在第一个then拿不到数据，必须在下一个then才能拿到fetch("./db.json").then(res=>res.json()).then(res=>{ console.log(res)})

2020-07-14 20:58:41 309

原创 vue基础复习：模板语法，计算属性，条件渲染，动态绑定class&style，列表渲染，事件处理，表单输入绑定

模板语法两种：插值语法 {{}} 和指令v-html写法插值语法 {{}}“Mustache”语法 (双大括号) 的文本插值<h2>{{msg}}</h2>Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：<h2

2020-07-14 18:37:54 525

原创 vue购物车实现（逐个增加减少，删除，全选取消，计算总额）

vue购物车实现（逐个增加减少，删除）可以直接运行含有两种计算总价的方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></

2020-07-14 18:34:22 1978

原创 vue遍历的多选框的小问题，点击一个导致全选

必须指定不同的value，否则会导致全选，而且value值需要不相同，由于此处的value值为变量，所以前面需要加：，否则仍然导致value相同的全选结果<ul> <li v-for="(data,index) of datalist" :key="datalist.id"> <input type="checkbox" v-model="checkGroup" :value="data.name"/>{{data}} </li></ul&gt

2020-07-14 17:00:46 2876

原创 9.回文数（JavaScript 转字符串解法和不转换成字符串）

9.回文数判断一个整数是否是回文数。回文数是指正序（从左向右）和倒序（从右向左）读都是一样的整数。示例 1:输入: 121输出: true示例 2:输入: -121输出: false解释: 从左向右读, 为 -121 。从右向左读, 为 121- 。因此它不是一个回文数。示例 3:输入: 10输出: false解释: 从右向左读, 为 01 。因此它不是一个回文数。进阶:你能不将整数转为字符串来解决这个问题吗？不转换成字符串做法简单了解一下对数：如果a的x次方等于N（a&gt

2020-07-02 22:40:05 258

原创 Js的次方（幂）表示方法：基数 **指数或 Math.pow(基数,指数)

Js的次方（幂）表示方法：**或Math.pow()**eg10**3 //10002**3//8Math.pow()egMath.pow(10,3) //1000Math.pow(2,3)//8

2020-07-02 21:47:21 16414 1

furfur-jiang的博客