2020年08月_笑道三千

原创 (黑马教程笔记)前端工程化-模块化规范

一，模块化规范的发展就是说，es6提供的模块化规范成为主流，所谓模块化，就是和组件化类似的思想。、二，es6的模块化node对es6的模块化支持并不是很好，所以需要结合babel来体验高级的ES6模块化，可以把高级的、有兼容性的js代码转换为低级的没有兼容性的js代码。想要使用babel就需要在node环境下配置babel环境包。第一步：npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node第二步：

2020-08-31 21:39:18 214

原创 vue-router小案例-后台管理路由

具体代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="js/vue.min.js"></script> <script type="text/javascript" src="js/vue-router_3.0.2.js"&

2020-08-31 17:55:04 508 1

原创 Vue-Router学习笔记-（黑马视频）

一，基本概念与原理也就是说，后端路由就是之前学习的写服务器端的代码：//post请求参数的获取app.post('/add',(req,res)=>{ //接收post请求参数, res.send(req.body)})//get请求参数的获取app.get('/index',(req,res)=>{ res.send(req.query)})也就是说后端渲染存在性能问题，只能支持页面全局渲染更新，于是引出了ajax技术，可以实现局部更新，但是ajax又实现不了历

2020-08-31 00:33:02 558

原创 vue.js动态组件：is特性

- 什么是动态组件：就是几个组件放在一个挂载点下，然后根据父组件的某个变量来决定显示哪个，或者都不显示。- 动态切换：（:is后面的是对应的组件名，必须一致）在挂载点使用component标签，然后使用v-bind:is=”组件名”，会自动去找匹配的组件名，如果没有，则不显示；改变挂载的组件，只需要修改is指令的值即可示例： <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"

2020-08-30 18:12:37 540

原创 vue学习笔记-节接口调用-async和await

一，基本使用其实就是之前学过的异步函数，异步编程在函数前写一个ansyc，就转化为异步函数，返回的是一个promise对象，于是就可以使用await关键字，可以把异步函数写成同步函数的形式，极大地提高代码的可读性。原本的： axios.get('adata',{ params:{ id:123, name:'zhangsan' } }).then(function(ret){ console.log(ret)

2020-08-30 15:36:38 2573

原创 Request header field mytoken is not allowed by Access-Control-Allow-Headers in preflight (请求头设置问题)

报错信息原因是：我在axios中设置了mytoken,但是服务器跨域的代码中没有mytoken，所以加上去就可以了。<script type="text/javascript"> //axios拦截器 axios.interceptors.request.use(function(config){ console.log(config.url) config.headers.mytoken='nihao' //就是这里！！！！ return

2020-08-30 14:19:43 444

原创 vue学习笔记-接口调用-axios

一，概述二，基本用法：客户端代码：<script type="text/javascript" src="js/axios.js"></script> <script type="text/javascript"> axios.get('http://localhost:3000/axios').then(function(ret){ console.log(ret.data) //存储在ret对象中，而服务器返回的数据是存

2020-08-29 15:27:49 312

原创 vue学习笔记-接口调用fetch用法

一，fetch概述二，fetch基本用法第一个then是fetch的一部分，返回一个promise对象，于是可以继续用then来处理返回的结果ret。这段代码是服务器的代码：//这是在创建服务器，通过express，创建名为app的服务器const express=require('express')const app=express()//为获取post参数const bodyParser=require('body-parser')//拦截所有的请求，对post请求做出处理，把参数

2020-08-29 10:52:01 1977

原创 vue学习笔记-promise

一，promise常用的api

2020-08-28 23:42:12 103

原创 vue组件化开发学习笔记-3-组件插槽

一，插槽的基础概念在之前使用组件的时候，就是直接使用这个自定义的标签，而没有在里面增加内容。例如：Vue.component('test-tom',{ data:function(){return {num:0}}, template:` <div> <div>TOM:{{num}}</div> </div> ` }) var vm= new Vue({ el:'#ap

2020-08-28 11:11:23 155

原创 vue组件化开发学习笔记-2-组件间的数据交互

一，父组件向子组件传值<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/base.css"/> <style type="text/css"> #app{ width: 20%; mar

2020-08-27 15:26:54 332

原创 vue组件化开发学习笔记-1-组件化开发思想

一，由机械设计角度理解组件化思想就像是机械设计中，整机通常由各个部件构成，各个部件实现特定的功能。经过机械行业长期的发展，有些公司就开始将这些可以实现特定功能的机械模块进行标准化，比如功能模块单一的标准件：螺钉，螺母，轴承这些。功能结构复杂些的，比如滚珠丝杆，线性导轨，电缸，型材等。利用这些模块，进行排列组合，就可以实现不同功能的机器设备。这就是组件化思想。即将实现不同功能的代码封装成不同的组件，像搭积木一样编程组件化思想有四个特征：标准：也就是和机械中的标准化一样，只有标准化，才能带来更大程

2020-08-27 00:54:36 508

原创 vue学习笔记-17-图书管理小案例

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/base.css"/> <style type="text/css"> table{ border-spacing: 0; } #ap.

2020-08-26 19:10:46 362

原创 vue学习笔记-16-vue的数组方法

vue页面上的数据和vm中的数据是实时一致的，而原生的数组方法无法实现这一点，所以vue中的数组方法经过了二次处理。然而用法还是和之前的一样。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/base.css"/> &l.

2020-08-26 13:53:36 764

原创 vue学习笔记-15-vue生命周期

对于每一个生命阶段，vue提供了一些特定的方法：这一阶段进行完毕，其对应的方法就会被执行。比如：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/base.css"/> <style type="text/c.

2020-08-26 10:14:44 153

原创 vue学习笔记-14-过滤器

一，vue中过滤器的作用二，过滤器的基本使用; //设置过滤器、 Vue.filter('upper',function(val){ return val.charAt(0).toUpperCase()+val.slice(1) }) var vm=new Vue({ el: "#app", data:{ name:"hello" }, computed:{}, methods:{}, watch:{} })

2020-08-25 18:18:28 136

原创 vue学习笔记-13-侦听器

一，侦听器的引入之前就已经学到了，一旦vue实例对象中的数据发生了变化，页面上对应的数据也会随之发生变化，为了业务需要，常常需要对数据进行二次处理，为了保证数据实时变化，所以引入了侦听器的概念，对应的数据一旦发生变化。就会执行这里定义好的对应函数。二，一个小案例<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link .

2020-08-25 17:53:00 225

原创 vue学习笔记-12-计算属性

一，计算属性举个例子，如果要实现字符串的方向输出，需要这样写：<div>{{msg.split('').reverse().join('')}}</div>这样一来，模板里面的字符串就太复杂了，于是就想把它放到专门的地方处理，让html只起页面结构的作用。也就是：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title

2020-08-25 15:59:26 186

原创 vue学习笔记-11-自定义指令

之前学的指令可以满足我们大多数常规的操作，哪那些指令又被称作vue的内置指令。有些时候，又需要我们自定义一些指令。一，不带参数的自定义指令现在拿表单第一个元素自动获取焦点来举例：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> </style>

2020-08-25 14:32:35 154

原创 vue学习笔记-10-常用特性之表单操作

var vm = new Vue({ el: '#app', data: { uname: 'lisi', gender: 2, hobby: ['2','3'], // occupation: 3 occupation: 0, desc: 'nihao' } });一，单行文本输入的处理<input type="text" v-model='un...

2020-08-24 22:33:00 151

原创 vue学习笔记-9-tab选项卡小案例

一，自己写的：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/base.css"/> <style type="text/css"> #app{ width: 400px; mar

2020-08-24 18:36:52 198

原创 vue学习笔记-8-循环结构

一，v-for遍历数组<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> [v-cloak]{ display:none } #app{ width: 20%; margin: 200px auto; line-h

2020-08-24 16:38:32 157

原创 vue学习笔记-7-分支结构

一，分支结构v-if对于分支结构，就是根据表达式的值来有条件地渲染元素。实例：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> [v-cloak]{ display:none } #app{ width: 20%;

2020-08-24 14:32:30 296

原创 vue学习笔记-6-样式绑定

一，通过标识位来控制class的样式是否启用<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> [v-cloak]{ display:none } #app{ width: 20%; margin: 200px auto;

2020-08-24 12:50:38 211

原创 vue学习笔记-6-属性绑定

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> [v-cloak]{ display:none } #app{ width: 20%; margin: 200px auto; line-height: 40px;.

2020-08-24 10:56:49 377

原创 vue学习笔记-5-vue小例子：加法计算器

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> [v-cloak]{ display:none } #app{ width: 20%; margin: 200px auto; line-height: 40px;

2020-08-23 16:53:34 271

原创 vue学习笔记-4-事件绑定

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> [v-cloak]{ display:none } #app{ width: 20%; margin: 200px auto; text-align: center.

2020-08-23 14:43:52 134

原创 vue学习笔记-3-双向数据绑定

双向数据绑定，实际上就是说，页面的内容发生了变化，会导致对应的vm.data中的数据变化。而vm.data中数据的变化，同样会导致页面内容的变化，这就是数据的双向绑定。换句话说，就是页面的显示数据和vm.data中的数据同步变化了。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css.

2020-08-23 14:10:11 146

原创 vue学习笔记-2-模板语法中得指令

一：v-cloak指令的用法 1,先提供样式，放在style样式中，即属性选择器 [v-cloak]{ display:none } 2,在插值表达式所在的标签中添加v-cloak指令<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> [v-clo

2020-08-22 23:44:30 136

原创 vue学习笔记-1-初步认识

一，vue的安装网址：https://doc.vue-js.com/v2/guide/installation.html二，hello word<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> <div>{{ms

2020-08-22 23:13:47 146

原创 Ajax学习笔记-客户端模板引擎-9

在传统的客户端分服务器端通信时，服务器都是将数据和HTML拼接好，再将拼接好的传递给客户端。但是现在我们使用ajax发送请求，服务器端在大多数情况下会使用json格式的数据作为响应内容，也就是说，原本数据和html的拼接是在服务器端完成的。但是现在这项工作需要在客户端完成。在客户端做拼接时，我们也需要模板引擎。一，客户端模板引擎作用：使用模板引擎提供的模板语法，可以将数据和html拼接起来下载地址：http://aui.github.io/art-template/zh-cn/index.html

2020-08-22 11:30:12 117

空空如也

空空如也