Vue.js中前端知识点总结笔记

1.提到代码的质量，开发速度2.提高代码的复用率3.降低模块之间的耦合度（高内聚低耦合）

从操作DOM的思维模式 切换到 以数据为主

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文件

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="变量"> ?????</表单元素>

所谓的组件化，就像玩积木一样，把封装的组件进行复用,把积木（组件）拼接在一起，构成一个复杂的页面应用程序。组件树就是由各个组件构成的一种数据结构，它存在的意义是为了帮梳理应用程序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的范围内的任何一个组件内部，直接调用可以；但是局部组件只能在父模板中直接调用

1、创建和使用 Vue.directive(‘change‘,{ ???bind:function(el,bindings){ ???//首次调用 ???}, ???update:function(el,bindings){ ???//只要是有数据变化，都会调用 ???}, ???unbind:function(){ ???//解绑 ???} }) <any v-change="count"></any>

1.创建 ??Vue.filter( ???‘myFilter‘, ???function(myInput){ ??????//myInput是在调用过滤器时，管道前表达式执行的结果 ??????//针对myInput，按照业务需求做处理 ??????//返回 ??????return ‘处理后的结果‘ ???})2.使用 ???<any>{{expression | myFilter}}</any>

1.发送<any>{{expression | myFilter(参数1，参数2)}}</any>2.接受Vue.filter(‘myFilter‘,function(myInput，参数1，参数2){ ???return ‘处理后的结果‘})

知识回顾： ?Vue.component(‘my-header‘,{ ???template:`<div></div>` ?}); ?<my-header></my-header> 复合组件：并不是新的概念，就是一个组件，只不过这个组件中 可以调用其他的组件 注意事项： ?1.组件要渲染的内容 取决于在定义组件时template ???<my-list> ???<my-item></my-item> ?</my-list> ?效果是出不来的 ?2.允许在一个组件中，直接来调用另外一个组件

四个阶段： ???create 准备工作 （数据的初始化。。。） ???mount ?挂载前后针对元素进行操作 ???update 数据发生变化， ???destroy 清理工作 (关闭定时器、集合清空..) ???beforeCreate/created ???beforeMount/mounted ???beforeUpdate/updated ???beforeDestroy/destroyed

1、watch ??????1. 表单元素的双向数据绑定 ??v-model="myValue" ??2.监听 ???watch:{ ???myValue:function(newValue,oldValue){ ???????} ???}2、computed ???计算属于是用于在模板中，搞定复杂的业务逻辑，因为有依赖缓存。 ???1.指定计算属性 ???????computed:{ ?????????myHandle:function(){ ??????????return 数据 ?????????} ???????} ???2.调用 ???????<any>{{myHandle}}</any>

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.mySon4、$parent ???this.$parent得到父组件的实例5、兄弟组件通信 ???1.var bus = new Vue(); ???2.接收方 ???bus.$on(‘eventName‘,function(msg){}) ???3.发送方 ???bus.$emit(‘eventName‘,123);

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‘ ???})

SPA：single page application 单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。比如Gmail、移动的webApp工作原理：1.解析地址栏 ????完整的页面地址、路由地址2.根据路由地址 从路由词典中找到真正的要加载的页面3.发起ajax请求 ????请求要加载的页面4.像指定的容器中 插入加载来的页面

专业术语： ????router路由器 ????route路由 ???routes 路由数组（路由词典）1.引入vue.js vue-router.js2.指定一个容器<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

方式1：直接修改地址栏方式2：jsthis.$router.push(‘路由地址’);方式3： <router-link ?to="路由地址"></router-link>

在页面之间跳转的时候，在有些场景下，需要同时指定参数1.明确发送方和接收方list --20--> detail1.配置接收方的路由地址/detail --》 /detail/:indexthis.$route.params.index2.发送routerLink to="/detail/20"this.$router.push(‘/detail/20‘)

在一个路由中，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

1.指定一个文件夹C:\xampp\htdocs\framework\vue\project2.将tpls.zip拷贝到project中 3.右键单击压缩包，解压缩到当前文件夹4.进入到tpls5.同时按下shift和鼠标右键，选择在此位置打开命令行串口6.执行npm install7.执行npm start

export const getAjax= function (getUrl,getAjaxData) { ?return axios.get(getUrl, { ???params: { ?????‘getAjaxDataObj1‘: getAjaxData.obj1,//obj1为getAjaxData的一个属性 ?????‘getAjaxDataObj2‘: getAjaxData.obj2 ???} ?})}

export const postAjax= function (getUrl,postAjaxData) {return axios.get(postUrl, { ?‘postAjaxDataObj1‘: postAjaxData.obj1,//obj1为postAjaxData的一个属性 ?‘postAjaxDataObj2‘: postAjaxData.obj2})}

axios.interceptors.request.use(config => {config.headers.cityCode = window.sessionStorage.cityCode //jsCookie.get(‘cityCode’)return config},

axios.interceptors.response.use((response) =>{ ?let data = response.data ?if(response.request.responseType === ‘arraybuffer‘&&!data.length){ ???reponse.date=0 ?}})