06 2019 档案
摘要：slot 是vue的内置组件，主要分为传值和接收值两部分; 首先写一个自定义组件：例如 <js></js> 再写一个template模板 并在构造器中使用components：{} 挂载， 在构造器的data中写一个选项方法： data: { jsData: { url: 'http://www.b
阅读全文
摘要：好处是在构造器外部增加一个构造器内部事件 有三个实例事件方法： - $on() // 点击一次执行一次 - $once() // 只执行一次 - $off() // 关闭事件方法 外部方法通过 $emit 方法调用 代码示例如下： <!DOCTYPE html> <html lang="en"> <
阅读全文
摘要：可以用在前端后端（vue，Node.js） 用法： - npm install axios 安装完成后，需要在使用的文件中导入 import asiox from 'asiox' const http = { get(url) { return axios({ url, method: 'GET'
阅读全文
摘要：介绍几个vue 的实例方法： - $destroy()==>销毁方法 - $forceUpdate()==>更新方法 - $nextTick()==>数据修改方法 需要配合钩子函数使用 具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta cha
阅读全文
摘要：使用前需要引入jQuery.js CDN 然后再构造器内部使用挂载，直接使用jQuery方法即可； 在构造器外部也可以调用构造器内部的方法，需要给构造器命名， 然后在构造器外部，使用构造器外部名称调用内部方法即可 代码示例如下： <!DOCTYPE html> <html lang="en"> <h
阅读全文
摘要：extend 扩展选项需要在构造器外部进行定义，并使用updated方法； 在构造器中使用 extend 方法以对象的形式调用， 方法的执行顺序为：原生的methods方法优先执行，然后是扩展的updated方法，最后执行的是原生的updated方法 差值使用{{ }}进行插入，在构造器中设置del
阅读全文
摘要：mixins 选项主要应用于新增需求； 在不改变原有方法的基础上，使用mixins 混入选项； - 以点击加1为例，分为局部和全局两种 - 再混入选项中设置updated方法 - updated 方法，会在局部，全局，以及原生方法中设置 - 执行顺序为 全局的updated优先执行，然后局部的upd
阅读全文
摘要：watch 选项主要用于数据监控，有两种书写方式： 一种是写在构造器内部，另一种是在构造器外部使用 下面以监控天气为例，代码如下： - 每次加减5°C，在watch内部做 if 判断 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF
阅读全文
摘要：methods 选项主要定义了一个执行函数，以下例子主要讲述了组件的三种方式， 包括内部组件，外部组件以及自定义组件的定义及使用方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport
阅读全文
摘要：computed 选项的好处是原始的值没有被污染，代码示例如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini
阅读全文
摘要：首先写一个扩展 ，头部标签 然后再script中声明一个对象，对象中有一个模板 需要挂载扩展，然后磁能生效 propsData 主要用于传值，在扩展里需要接收，需用 props接收 具体代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta chars
阅读全文
摘要：下面是安装好的项目目录： 让我们依次解读： 1、build - 与项目构建相关，webpack相关的都在这个目录下 2、config - 开发环境配置 3、node_modules - 里面是安装的各种包 4、src - 源码目录 5、static - 静态文件目录 - 放一些图片，json数据等
阅读全文
摘要：概念：Vue-cli是vue官方出品的快速构建单页应用的脚手架 由于使用 webpack 构建项目较多，所以在此也是用webpack构建项目 首先来进行安装目录解读： 安装完成后会出现接下来的提示信息 按步骤操作即可 安装完成后会出现node-modules包，所有下载的包都会在此文件夹中 接下来可
阅读全文
摘要：以代码为例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt
阅读全文
摘要：component 继承就是父子组件的关系，在构造器外部写局部注册组件； 如果把局部组件的编写放到构造器内部，若组件代码量很大，会影响构造器的可读性，造成拖拉和错误； 所以要把组件填写的代码放到构造器外部或者说成单独组件； 应先声明一个对象，对象里就是组件的内容，代码示例如下： <!DOCTYPE
阅读全文
摘要：以局部组件为例，在components中设置 props选项，挂载我们设置的属性，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev
阅读全文
摘要：组件定义可分为两部分： 一种是全局组件，另一种是局部组件; 区别是全局组件可以全局调用，而局部组件，在作用域外不可调用 1、首先来看一下全局组件，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta na
阅读全文
摘要：template 模板有四种写法，在此仅介绍三种： 1、在script标签中写template 2、写在body中，然后再new Vue（{}）实例对象中引用 3、在body中 以script 形式写入，但是要声明script 标签类型，引入方式与第二种相同
阅读全文
摘要：Vue的生命周期，也就是钩子函数；Vue一共有10个生命周期函数， 我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容 代码示例如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="
阅读全文
摘要：Vue.set 用于操作数组，由于javascript的限制，无法直接使用下标对数组进行直接操作， 所以vue提供Vue.set这种方法来操作数组，代码示例如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
阅读全文
摘要：vue.extend 扩展实例构造器一般与组件联合使用 代码示例如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
阅读全文
摘要：一、什么是全局API? 全局API并不在构造器里，而是先声明全局变量或者直接在Vue省定义一些新功能，Vue内置了一些全局API， 比如指令Vue.directive。简单来说就是在构造器外部用Vue提供给我们的API函数来定义新的功能 二、自定义绑定事件 - 自定义指令有五个生命周期（也叫钩子函数
阅读全文
摘要：1、v-pre 指令可以用于鸳鸯输出 2、v-cloak 指令在渲染完成后，才显示 3、v-once 仅渲染一次 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co
阅读全文
摘要：v-bind 顾名思义可以绑定标签属性，代码示例如下： v-bind 指令可以简写-->如v-bind:class 可以简写为 :class <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="view
阅读全文
摘要：v-model 可以绑定文本框，文本域，多选框绑定一个值或绑定多个值，以及绑定单选框，代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de
阅读全文
摘要：v-on指令是绑定事件，v-on:click 可以简写成 @click 以下代码可以完成加减运算，使用methods 方法属性 还可以绑定键盘事件：
阅读全文
摘要：1、v-text 以代吗为例： {{ message }} 与v-text=“message” 两种写法效果一致，但是 {{ message }} 这种方式在网络较慢的情况下， 会出现不友好的页面显示方式， 所以推荐 v-text 这种写法 2、v-html 在语句中存在标签的情况下，v-text会
阅读全文
摘要：1、首先循环一个数组，代码如下： 然后对数组进行排序，添加一个计算属性-computed： 2、循环输出一个对象： 对数组对象进行排序：
阅读全文
摘要：1、v-if 条件判断为true时显示，为false时不显示 代码如下： 2、v-show 用法基本相同，为true时显示，为false时隐藏 代码如下：
阅读全文
摘要：1、新建项目文件夹，创建如下项目目录结构 2、进入项目文件夹 - 输入npm init -y 初始化项目 - 生成一个package.json文件 - 全局安装live-server 用于启动项目 输入npm install -g live-server命令 3、创建一个index.html 文件，
阅读全文
摘要：为什么需要cookie： cookie的典型应用： cookie的工作原理： cookie的属性： cookie的缺点：
阅读全文
摘要：一般来说，v-if 有更高的切换开销，而v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好
阅读全文
摘要：computed - 当依赖某些状态（state）产生新值的时候，优先选择使用computed watch - 用来解决beforeUpdate，updated两个钩子里修改状态导致洗循环的问题，采用watch - 监测可能异步改变值的时候 methods - 定义事件响应函数 - 定义组件公共处理
阅读全文
摘要：1、只要改变data里的数据就会可能触发模板渲染 2、如果经过diff算法比较后，发现更新前的虚拟DOM和更新后的虚拟DOM相同，就不会渲染模板
阅读全文
摘要：1、相同点 - 如果作为模板的数据显示，二者能实现响应的功能，唯一不同的是methods定义的方法需要执行 2、不同点 - computed 会基于响应数据缓存，methods不会缓存 - diff之前先看data里的数据是否发生变化，如果没有变化computed的方法不会执行，但methods里的
阅读全文
摘要：const jwt = require('jsonwebtoken') // 对称加密 const key = 'hello' const token = jwt.sign({ username: 'xiaoming' }, key) console.log(token); jwt.verify(t
阅读全文
摘要：cookie, session 1、在服务器端产生一个随机的session字符串，则合格字符串可以在内存里 2、后端中cookie到前端，cookie里存储session随机串 3、当用户第二次访问某个页面的时候，由于域名相同，因此会自动将浏览器端的cookie带到后端 4、后台会根据浏览器端返回的
阅读全文
摘要：Node.js 框架: - express- koa2- adonis- egg
阅读全文
摘要：nodejs的异步操作 - 非I/O - 定时器（setTimeout，setInterval） - microtask（promise） - process.nextTick - setImmedlate - DNS.lookup - I/O - 网络I/O - 文件I/O - DNS操作
阅读全文
摘要：- get:从服务器端获取数据，请求body在地址栏上 - post:向服务器端提交数据，请求数据在报文body里 发送一个修改数据的请求，需求数据要从新创建 - put:向服务器端提交数据，请求数据在报文body里 发送一个修改数据的请求，需求数据更新（全部更新） - patch:向服务器端提交数
阅读全文
摘要：webpack非常强大,但是也有不足的地方,批量式处理依然是gulp更胜一筹.我们是否可以将两者的优点结合起来呢? 这篇文章就是讲述如何集成gulp和webpack 1.安装webpack-stream 很重要的插件,当然也可以直接使用官方的webpack,集成方式可以看webpack官网. 但we
阅读全文
浙公网安备 33010602011771号