见链接
分类：Vuejs
前端知识点总结——VUE
来源地址：
https://segmentfault.com/a/1190000013378197
前端知识点总结——VUE（持续更新中）
1.框架和库的区别：
框架：framework 有着自己的语法特点、都有对应的各个模块
库 library 专注于一点
框架的好处：
|
1 2 3 4 5 |
1.提到代码的质量，开发速度 2.提高代码的复用率 3.降低模块之间的耦合度 （高内聚低耦合） |
UI：user interface
GUI : graphical user interface
CLI : command line interface
API : application interface
思维模式的转换：
|
1 2 |
从操作DOM的思维模式 切换到 以数据为主 |
2.Vue概述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
1、what 是一个渐进式的构建用户界面的js框架 2、where 小到的简单的表单处理，大到复杂的数据操作比较频繁的单页面应用程序 3、why 1.方便阅读的中文文档 2.容易上手 （学习曲线比较缓和） 3.体积小 4.基于组件化的开发方式 5.代码的可读性、可维护性得到了提高 4、how 工作方式：可以通过丰富的指令扩展模板，可以通过各种各样的插件来增强功能 搭建环境： 方式1 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖，走你 $ cd my-project $ npm install $ npm run dev 方式2: 直接引入对应的js文件 |
3.Vue中基础知识
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
1、双花括号 mustache(胡子)/interpolation（插值表达式） 语法： <any>{{表达式}}</any> 作用： 将表达式执行的结果 输出当调用元素的innerHTML中；还可以将数据绑定到视图 2、指令-循环指令 基本语法1： <any v-for="tmp in array"></any> 基本语法2： <any v-for="(value,index) in array"></any> 作用： 在遍历array这个集合时，将临时变量保存在tmp中，创建多个any标签 3、指令-选择指令 语法： <any v-if="表达式"></any> <any v-else-if="表达式"></any> <any v-else="表达式"></any> 作用： 根据表达式执行结果的真假，来决定是否要将当前的这个元素 挂载到DOM树 4、指令-事件绑定 语法： <any v-on:eventName="handleEvent"></any> 作用： 给指定的元素 将handleEvent的方法绑定给指定eventName事件 5、指令-属性绑定 基本语法： <any v-bind:myProp="表达式"></any> 补充，支持简写： <any :myProp="表达式"></any> 作用： 将表达式执行的结果 绑定 到当前元素的myProp属性 <img v-bind:src="'img/'+myImg" alt=""> 动态样式绑定 <p :style="{backgroundColor:myBGColor}">动态样式绑定</p> 动态样式类绑定 <h1 :class="{myRed:false}">动态样式类的绑定</h1> 6、指令-双向数据绑定 方向1：数据绑定到视图 方向2：将视图中（表单元素）用户操作的结果绑定到数据 基本语法: <表单元素 v-model="变量"> </表单元素> |
4.组件化
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
组件：组件就是可被反复使用的，带有特定功能的视图 所谓的组件化，就像玩积木一样，把封装的组件进行复用,把积木（组件）拼接在一起，构成一个复杂的页面应用程序。 组件树就是由各个组件构成的一种数据结构，它存在的意义是为了帮梳理应用程序 1、组件的创建 全局组件 Vue.component('my-com',{ template:` <h2>it is a header</h2> ` }) 局部组件 new Vue({ components:{ 'my-footer':{ template:'' } } }) 2、组件使用 作为普通的标签去使用 <my-com></my-com> 3、注意事项 1.组件的id和使用方式 遵循烤串式命名方式：a-b-c 2.如果一个组件 要渲染多个元素，将多个元素放在一个顶层标签中，比如div、form 3.全局组件可以用在id为example的范围内的任何一个组件内部，直接调用可以；但是局部组件只能在父模板中直接调用 |
5.自定义指令
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
1、创建和使用 Vue.directive('change',{ bind:function(el,bindings){ //首次调用 }, update:function(el,bindings){ //只要是有数据变化，都会调用 }, unbind:function(){ //解绑 } }) <any v-change="count"></any> |
6.过滤器
过滤器是针对一些数据 进行筛选、过滤、格式化等相关的处理，变成我们想要的数据
过滤器的本质 就是一个带有参数带有返回值的方法
Vue1. 支持内置的过滤器，但是Vue2. 就不再内置过滤器，但是支持自定义过滤器。
1、过滤器的创建和使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
1.创建 Vue.filter( 'myFilter', function(myInput){ //myInput是在调用过滤器时，管道前表达式执行的结果 //针对myInput，按照业务需求做处理 //返回 return '处理后的结果' }) 2.使用 <any>{{expression | myFilter}}</any> |
2、如何在调用过滤器时，完成参数的发送和接受
|
1 2 3 4 5 6 7 8 9 10 |
1.发送 <any>{{expression | myFilter(参数1，参数2)}}</any> 2.接受 Vue.filter('myFilter',function(myInput，参数1，参数2){ return '处理后的结果' }) |
7.复合组件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
知识回顾： Vue.component('my-header',{ template:`<div></div>` }); <my-header></my-header> 复合组件：并不是新的概念，就是一个组件，只不过这个组件中 可以调用其他的组件 注意事项： 1.组件要渲染的内容 取决于在定义组件时template <my-list> <my-item></my-item> </my-list> 效果是出不来的 2.允许在一个组件中，直接来调用另外一个组件 |
8.生命周期
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
四个阶段： create 准备工作 （数据的初始化。。。） mount 挂载前后针对元素进行操作 update 数据发生变化， destroy 清理工作 (关闭定时器、集合清空..) beforeCreate/created beforeMount/mounted beforeUpdate/updated beforeDestroy/destroyed |
9.常用属性
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
1、watch 1. 表单元素的双向数据绑定 v-model="myValue" 2.监听 watch:{ myValue:function(newValue,oldValue){ } } 2、computed 计算属于是用于在模板中，搞定复杂的业务逻辑，因为有依赖缓存。 1.指定计算属性 computed:{ myHandle:function(){ return 数据 } } 2.调用 <any>{{myHandle}}</any> |
10.组件间通信
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
1、父与子通信 （props down） 1.发送 <son myName='zhangsan'> </son> 2.接受 到son组件： Vue.component('son',{ props:['myName'], template:` <p>{{myName}}</p> ` }) 2、子与父通信 (events up) 1.绑定 methods:{ handleEvent:function(msg){} } <son @customEvent="handleEvent"></son> 2.触发 子组件内部： this.$emit(‘customEvent’,100); 3、ref(reference 引用/参考 外号) 帮助在父组件中 得到子组件中的数据、方法。 1.指定ref属性 <son ref="mySon"></son> 2.根据ref得到子组件实例 this.$refs.mySon 4、$parent this.$parent得到父组件的实例 5、兄弟组件通信 1.var bus = new Vue(); 2.接收方 bus.$on('eventName',function(msg){}) 3.发送方 bus.$emit('eventName',123); |
11.补充组件创建的方式
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
1、直接在template属性中指定模板内容 1.全局组件 Vue.component 2.局部组件 { components:{ 'my-footer'：{template:``} } } 2、.vue结尾的文件 <template></template> <script></script> <style></style> 3、单独指定一个模板内容 <script id='myContent' type='text/x-template'> </script> Vue.component('',{ template:'#myContent' }) |
12.路由模块
路由模块的本质 就是建立起url和页面之间的映射关系
1、SPA的基本概念和工作原理
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
SPA：single page application 单一页面应用程序，只有一个完整的页面； 它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。 比如Gmail、移动的webApp 工作原理： 1.解析地址栏 完整的页面地址、路由地址 2.根据路由地址 从路由词典中找到真正的要加载的页面 3.发起ajax请求 请求要加载的页面 4.像指定的容器中 插入加载来的页面 |
2、路由模块的基本使用
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
专业术语： router路由器 route路由 routes 路由数组（路由词典） 1.引入vue.js vue-router.js 2.指定一个容器 <router-view></router-view> 3.创建业务所需要用到的组件类 var MyLogin = Vue.component() 4.配置路由词典 const myRoutes = [ {path:'',component:MyLogin}, {path:'/login',component:MyLogin} ]; const myRouter = new VueRouter({ routes:myRoutes }) new Vue({ router:myRouter }) 5.测试 修改地址栏中的路由地址，测试看加载的组件是否正确 注意事项： 1.先引入vue，再引入插件 2.一定要指定router-view 3.route路由 {path:'',component:} routes 路由数组 [] router 路由器:按照指定的路由规则去访问对应的组件 new VueRouter |
3、使用路由模块来实现页面跳转的方式
|
1 2 3 4 5 6 7 |
方式1：直接修改地址栏 方式2：js this.$router.push(‘路由地址’); 方式3： <router-link to="路由地址"></router-link> |
4、完成参数的传递
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
在页面之间跳转的时候，在有些场景下，需要同时指定参数 1.明确发送方和接收方 list --20--> detail 1.配置接收方的路由地址 /detail --》 /detail/:index this.$route.params.index 2.发送 routerLink to="/detail/20" this.$router.push('/detail/20') |
5、路由嵌套
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
在一个路由中，path对应一个component，如果这个component需要根据 不同的url再加载其他的component，称之为路由的嵌套 举例：比如A组件现在需要根据不同的url，加载B组件或者C组件 1.给A组件指定一个容器 <router-view></router-view> 2.配置路由词典 { path:'/a', component:A, children:[ {path:'/b',component:B} ] } 需求：现在有两个组件，分别是login/mail,建立SPA。 在此基础上，希望mail组件 嵌套inbox/outbox/draft 补充：在设置子路由，路由匹配规则依然是适用的， 只不过路由地址为空和异常，要携带父组件的路由地址 /mail /mail/draft |
13.搭建基于CLI开发环境的方式
|
1 2 3 4 5 6 7 8 9 |
1.指定一个文件夹 C:\xampp\htdocs\framework\vue\project 2.将tpls.zip拷贝到project中 3.右键单击压缩包，解压缩到当前文件夹 4.进入到tpls 5.同时按下shift和鼠标右键，选择在此位置打开命令行串口 6.执行npm install 7.执行npm start |
14.axios
1.axios的get方法
|
1 2 3 4 5 6 7 8 |
export const getAjax= function (getUrl,getAjaxData) { return axios.get(getUrl, { params: { 'getAjaxDataObj1': getAjaxData.obj1,//obj1为getAjaxData的一个属性 'getAjaxDataObj2': getAjaxData.obj2 } }) } |
2.axios的post方法
export const postAjax= function (getUrl,postAjaxData) {
return axios.get(postUrl, {
|
1 2 |
'postAjaxDataObj1': postAjaxData.obj1,//obj1为postAjaxData的一个属性 'postAjaxDataObj2': postAjaxData.obj2 |
})
}
3.axios的拦截器
主要分为请求和响应两种拦截器,请求拦截一般就是配置对应的请求头信息(适用与常见请求方法,虽然ajax的get方法没有请求头,但是axios里面进行啦封装),响应一般就是对reponse进行拦截处理,如果返回结果为[]可以转化为0
1.请求拦截:将当前城市信息放入请求头中
axios.interceptors.request.use(config => {
config.headers.cityCode = window.sessionStorage.cityCode //jsCookie.get(‘cityCode’)
return config
},
2.响应拦截:处理reponse的结果
|
1 2 3 4 5 6 |
axios.interceptors.response.use((response) =>{ let data = response.data if(response.request.responseType === 'arraybuffer'&&!data.length){ reponse.date=0 } }) |
NPM常用更新命令
|
1 2 3 4 5 6 7 8 9 10 11 12 |
1.npm-check检查更新 npm install -g npm-check npm-check 2.npm-upgrade更新 npm install -g npm-upgrade npm-upgrade 3.更新全局包： npm update <name> -g 4.更新生产环境依赖包： npm update <name> --save 5.更新开发环境依赖包： npm update <name> --save-dev |
查看安装了哪些包
|
1 |
npm list -g --depth=0 |
Express应用程序之路由详解
记录下
Nodejs Express 4.X 中文API 4— Router篇
promise，回调函数等
Promise的含义
promise是异步编程的一种解决方法,比传统的回调函数和事件更合理更强大
。他由社区最早提出和实现，ES6将其写进语言标准，统一了用法，原生提供了promise对象。
所谓promise，简单说是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果，从语法上说，promise是一个对象，从它可以获取异步操作的消息，promise提供了统一的API，各种异步操作都可以用同样的方法进行处理。
promise对象的特点
（1）对象的状态不受外界影响，promise对象代表一个异步操作，有三种状态，pending（进行中）、fulfilled（已成功）、rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态，这也是promise这个名字的由来“承若”；
（2）一旦状态改变就不会再变，任何时候都可以得到这个结果，promise对象的状态改变，只有两种可能：从pending变为fulfilled，从pending变为rejected。这时就称为resolved（已定型）。如果改变已经发生了，你再对promise对象添加回调函数，也会立即得到这个结果，这与事件（event）完全不同，事件的特点是：如果你错过了它，再去监听是得不到结果的。
有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。
Promise也有一些缺点。首先，无法取消Promise，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。第三，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
一，用法
promise对象是一个构造函数，用来生成promise实例;
创建一个promise对象实例
|
1 2 3 4 5 6 7 8 |
var promise = new Promise( function( resolve, reject) { //some code if(//异步操作成功){ resolve(value); }else{ reject(error); } }); |
Promise构造函数接收一个函数作为参数，该函数的两个参数分别是resolve和reject，他们是两个函数，由Javascript引擎提供，不用自己部署。
resolve函数的作用是，将promise对象的状态从“pending”变为‘’resolved‘’，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数
|
1 2 3 4 5 6 7 |
promise.then( function(value){ //success }, function(error){ //failure }); |
then方法可以接受连个回调函数作为参数，第一个回调函数是promise对象的状态变为resolved时调用，第二个回调函数是promise对象的状态变为rejected时调用，其中，第二个函数是可选的，不一定要提供，这两个函数都接受promise对象传出的值作为参数；
promise对象的简单例子
|
1 2 3 4 5 6 7 8 |
function timeOut (ms) { return new Promise(function(resolve,reject) { return setTimeout(resolve,ms,"done"); }) } timeOut(3000).then( function(value){ console.log(value); }) |
timeOut方法返回一个promise实例，表示一段时间以后才会发生的结果，过了指定的时间（ms）以后，promise实例的状态变为resolved，就会触发then方法绑定的回调函数
通俗点讲
resolve和reject就是发信号弹的，如果promise里的异步操作成功了，用 resolve 改promise的状态为 resolved（还可以发送异步操作的结果），执行then里的第一个回调函数，如果操作失败了，用reject改promise的状态为rejected，执行then里的第二个回调函数获catch。
iview-admin登录权限控制
有2个地方，ivew使用mockjs模拟了后台数据，所以找到处理login请求的地方。mock文件夹中的login.js，模拟后台数据，直接返回了token值
|
1 2 3 4 |
export const login = req => { req = JSON.parse(req.body) return { token: USER_MAP[req.userName].token } } |
其次在vuex里找到判断是否登录的地方，登录成功将设置token。文件是store文件夹中的user.js文件
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
actions: { // 登录 handleLogin ({ commit }, { userName, password }) { userName = userName.trim() return new Promise((resolve, reject) => { login({ userName, password }).then(res => { const data = res.data //可以在这加判断 commit('setToken', data.token) resolve() }).catch(err => { reject(err) }) }) }, |
JS 数组赋值=引用？
今天发现一个问题，如下所示
|
1 |
var arrayA = ArrayB[] |
当改变arrayA的值的时候，ArrayB也同步修改了，有点像C语言指针的意思，网上查了下，果然是数组引用的意思。那么如何实现只是复制数组呢？
方法一
|
1 |
var arrayA = ArrayB.slice(0) |
方法二
var arrayA = ArrayB.concat()
checkLogin()
路由设置，判断是否存在对应的cookie
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
router.get("/checkLogin", function (req,res,next) { if(req.cookies.userId){ res.json({ status:'0', msg:'', result:req.cookies.userName || '' }); }else{ res.json({ status:'1', msg:'未登录', result:'' }); } }); |
VUE中mounted checkLogin()
|
1 2 3 4 5 6 |
mounted(){ this.checkLogin(); }, methods:{ checkLogin(){ axios.get("/users/checkLogin").then((response)=>{ |
全局路由拦截
在app.js路由前添加
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
app.use(function (req,res,next) { if(req.cookies.userId){ next(); }else{ console.log("url:"+req.originalUrl); if(req.originalUrl=='/users/login' || req.originalUrl=='/users/logout' || req.originalUrl.indexOf('/goods/list')>-1){ next(); }else{ res.json({ status:'10001', msg:'当前未登录', result:'' }); } } }); |
带参数的路由拦截有两种方式
第一种：req.originalUrl.indexOf(‘/goods/list’)
第二种： req.path == ‘/goods/list’