Vue.js 截至目前为止，比较稳定的版本是2.5.16

Vue.js官方网站 官方下载： https://cn.vuejs.org/v2/guide/installation.html API文档： https://cn.vuejs.org/v2/guide/ GitHub库:https://github.com/vuejs/vue

Vue.js与AngularJS的区别 相同点 1.都支持指令、过滤器、双向数据绑定等 2.都不支持低端浏览器（如IE6/7/8）

不同点 1.AngularJS学习成本比较高，比如增加了依赖注入特性，而Vue.js本身提供的API比较简单、直观 2.在性能上，AngularJS依赖对数据做脏检查，所以Watcher 越来越慢。Vue.js基于依赖追踪的观察并且使用异步队列更新，所以的数据都是独立触发的，对于庞大的应用来说，这个优化差异还是比较明显的

Vue.js与React的区别 相同点 1.中心思想相同：一些都是组件，组件实例之间可以嵌套 2.都提供了合理的钩子函数，可以放开开发者定制化的去处理需求 3.都不内置类似AJAX、Router 等功能到核心包，而是以插件加载

不同点 1.React 依赖虚拟DOM，而Vue.js使用的是DOM模版 2.Vue.js在模版中提供了指令、过滤器等，可以非常方便、快捷的操作DOM

Vue.js：网址 中文资料和开源案例 https://www.vue-js.com/ https://forum.vuejs.org/c/chinese

MVC框架 MVC拆分解释： 1.视图view :用户界面 2.控制器 Controller :业务逻辑 3.模型 Model ：数据保存 MVC通信方式 1.view 传送指令到Controller 2.Controller 完成业务逻辑后，要求Model 改变状态 3.Model 将新的数据发送到View ，用户得到反馈

============================== Vue.js实现步骤： 1.下载vue.js库并引入

2.创建view 视图 //确定一个范围，表示此范围内部都是vue解析出来的

{{msg}}

3.通过vue实列化一个 vue对象 var vm=new Vue({ el:"#box", //el：“选择器” data:{ msg:‘hello,world!’ }, }) 4.使用数据 a.将data 中变量msg 放在#box 内的双花括号内 b.修改data 中的msg，会同步显示在页面中

============================== 实现原理分析 DOM监听： 视图层发生变化，DOM监听到之后，会传到逻辑层进行处理

数据绑定： 逻辑层把数据处理完成之后，通过数据绑定，把处理后的结构返回给视图层 插值表达式：

使用双大括号来包裹js代码构成插值表达式

插值表达式是将双大括号中的数据替换成对应属性值进行展示

插值表达式中可以写入： 1.JSON数据 2.数字 3.字符串 4.插值表达式

================================= 1.什么是Vue.js指令？ 指令（Directive）是特殊的带有v- 前缀的特性

2.作用？ 当表达式的值改变时，将某些行为应用到DOM上

书写规范 书写位置：任意HTML元素的开始标签内

现在你在看到我了

注意：一个开始标签内可以写入多个指令，多个指令间使用空格分隔 <a href=“javascript:;” :class="{active:timeflag}"@click=“queryAll(time)”>全部

v-if指令 被称为条件渲染指令，根据表达式的真假来插入和删除元素

v-if=表达式 1.根据表达式结果的真假，确定是否显示当前元素 2.true表示显示该元素，false表示隐藏该元素

v-else指令 v-else指令为v-if添加一个"else块",v-else元素必须立即跟在v-if元素的后面，否则不能被识别

v-else后面不需要表达式： 1.v-if为true，后面v-else不会渲染到HTML 2.v-if为false，后面的才回渲染到HTML

v-show指令 1.控制切换一个元素的显示和隐藏 2.v-show=“表达式” 3.根据表达式结果的真假，确定是否显示当前元素 ==>true 表示显示该元素，false表示隐藏该元素 语法：

v-if与v-show 区别？ 1.v-show 指令的元素始终会被渲染到HTML *它只是简单的为元素设置CSS的style属性，当不满足条件的元素被设置 style="display:none"样式 2.v-if指令满足条件是，会渲染到html中，不满足条件时，是不会渲染到html中的

v-if与v-show应用场景 1.v-if指令有更高的切换消耗 v-if当条件成立的时候会将元素加上，不成立的时候，就会移出dom，并且内部的指令不会执行。 2.v-show指令有更高的初始渲染消耗 v-show只是简单的隐藏和显示 建议： 如果需要频繁切换使用 v-show 较好，如果在运行时条件不大可能改变使用 v-if较好

v-on 指令 1.为HTML元素绑定事件监听 2.v-on：事件名称='函数名称()' 表达式可以是一个方法的名字或一个内联语句

简单语法： @事件名称='函数名称()' 注意：函数定义在methods配置项中 toggle //v-on:可以简写成@ <button @click=‘fn()’>toggle

举例： 点我

<script> var vm=new Vue({ el:"#box", methods:{ say:function(msg){ alert(msg); } } }) </script>

v-on指令 v-on后面可以增加修饰符： .stop：调用event.stopPropagation() .prevent:调用event.preventDefault() .self:只当时间是从侦听器绑定的元素本身触发时才触发回调 .{keycode}:只在指定键上触发回调

v-model 指令 1.能轻松实现表单输入和应用状态之间的双向绑定 2.双向绑定： 指的是在vue实例中的data 与渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据

v-model=变量 v-model指令只能用在,,等这些表单元素上

示例：

{{msg}}

<script> var vm=new Vue({ el:"#box", data:{ msg:"我好困，想睡觉!" } }) </script>

v-bind指令 1.v-bind可以在其名称后面带一个参数，参数通常是HTML元素的特性（attribute）， v-bind是动态绑定指令，默认情况下自带属性的值是固定的，为了能够动态的给这些属性添加值可以使用v-bind指令 2.v-bind:属性名=‘表达式’ 3.简写形式：v-bind 可以省略 直接书写为： 属性名=‘表达式’

v-for指令 1.遍历data中的数据，并在页面进行数据展示 2.v-for=‘item,key,index in items’ item 表示每次遍历得到的元素 key表示 遍历元素的 属性名 index 表示item 的索引，可选参数 items表示数组或者对象 示例1： 在data中定义一个数组 items:[“json”,“java”,“c”] 页面定义ul>li

{{item}}

示例2： 在data中定义一个对象person person:{ name:“zhangsan”, age:18 } 代码展示：

{{index}}:{{key}}:{{item}} 页面展示： 0:name:zhangsan 1:age:18

嵌套渲染： 在data中定义一个数组嵌套对象 its: [{name:“zhangsan”,type:[“json”,“java”,“c”]}, {name:“lisi”,type:[“vm”,“tt”,“mm”]}], 代码：

{{it.name}}: {{ittype}} 页面展示结果： zhangsan:jsonjavac lisi:vmttmm

================================

交互与实例的生命周期

交互的基本概念： 交互即交流互动，是很多哦互联网平台追求打造的一个功能状态

前后端交互原理 1.前端接收用户的信息，发送到后端 2.后端获得信息后进行数据处理，到数据库取一些数据 3.后端拿到数据库数据返回给前端页面进行显示

交互的应用场景 1.从后端获取一些数据，将其进行展示或计算 *浏览页面的时候，打开一个页面，这时候就会有交互产生，会从后端获取页面数据在前端页面显示 2.将用户在页面中提交的数据发送给后端 *登录的场景中体现的较为明显，登录操作的时候需要把用户名和密码发送给后端，后端验证之后，确定是否能登录成功

小结： 前端概念：浏览器 用户可以直接看到、操作，可以通过前端页面获取想要的信息 后端概念：服务器 运算处理逻辑，从数据库中取得用户需要的数据

===============================

Axios

官方地址： https://github.com/axjos/axios 中文地址： https://www.kancloud.cn/yunye/axios/234845

定义：axios是一个基于Promise 用于浏览器和nodejs的HTTP客户端

作用： 1.从浏览器中创建XMLHTTPRequests 2.从node.js创建http请求 3.支持Promise API 4.拦截请求和响应

Axios安装的两种方式： 1.CDN方式： https//unpkg.com/axios/dist/axios.min.js

2.NPM 方式： npm install axios

Axios API axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.options(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config]]) axios.patch(url[, data[, config]])

示例代码：axios.get请求

{{msg}}00

click 引入vue.js和 axios.min.js

全局拦截器 interceptors 概念：在发送请求或者响应请求被 then 或者catch 处理前拦截它们

作用： 1.发送请求之前拦截，可以对请求数据进行处理，比如给每一个请求都添加上token或者给请求统一添加一些内容 2.在响应请求之前拦截，可以对返回的数据进行二次加工

实例的生命周期 所谓“生命周期”，是指实例对象从构造函数开始执行（被创建）到被 GC(Garbage Collection：垃圾回收)回收销毁的整个存在的时期 2.生命周期钩子： 在生命周期中被自动调用的函数叫做生命周期函数，也被形象的称为钩子函数

生命周期钩子的用途 在对象从创建到被回收的整个过程中会在不同的时期有不同的钩子函数，可以利用不同时期的钩子函数去完成不同的操作

钩子函数有： beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

钩子函数使用 beforeCreate：加一些 loading 事件

created ：结束loading‘事件，还做些初始化，实现函数自执行等。

mounted： 1.发起后端请求，取回数据 2.接收页面之间传递的参数 3.子组件向父组件传递参数 小结： **实例生命周期：**实例在被创建前经过的一系列初始化过程叫生命周期 重要的钩子函数： created 和 mounted

vue.js过滤器 vue.js支持在{{}}插值的尾部添加一个管道符 "(|)"对数据进行过滤，经常用于格式化文本，比如字母的大写、货币的千位使用逗号分隔等 过滤器的定义方法： 1.过滤的规则是自定义的，通过给vue示例添加选项filters来设置 2.过滤器是JavaScript函数，因此可以接收参数 {{message | filterA(‘arg1’,arg2)}}

示例：

{{name | setname('同学')}}

页面结果：张三同学

过滤器可以串联 {{message | filterA | filterB}} filterA被定义为接收单个参数的过滤器函数，表达式message的值将作为参数传入到函数中，然后继续调用同样被定义为接收单个参数的过滤器函数filterB，将 filterA的结果传递到filterB中

示例：

{{item.name}}:{{item.price | discount(50) | joins('￥') }}

var vm=new Vue({ el:"#box", data:{ items:[{name:“苹果”,price:25}, {name:“火龙果”,price:80}, {name:“香蕉”,price:40}] }, filters:{ discount:function(val,arg){ return val*(arg/100); }, joins:function(val,arg){ return val+arg; } } })

小结： 1.过滤器的本质是一个有参数有返回值的方法 2.在没有冲突的前提下，过滤器可以串联 3.过滤器应当用于处理简单的文本转换，如果要实现更为复杂的数据变换，应当使用计算属性来做。

vue.js计算属性(反转) 1.关键词：computed 2.计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也会同步更新 var vm=new Vue({ … computed:{ // 计算属性的getter reversedMessage:function(){ //this 指vm 实例 return this’.message.split(").reverse().join(") } } })

举例：

{{message}} {{reverserMessage}} 点击 <script> var vm=new Vue({ el:"#box", data:{ message:"hello", }, methods:{ change:function(){ this.message="zhangsan"; } }, computed:{ reverserMessage:function(){ return this.message.split('').reverse().join(''); } } }) </script>

vue中 的computed 的属性可以看成和data 一样，可以读取和设值，所以计算属性可以分为getter 和 setter 一般情况下是没有setter 的，计算属性就是只读属性，getter 是默认的省略的

vue.js侦听器 1.vue通过watch选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时可以使用侦听器 2.深度侦听：可以监听到数组和对象的变化 在方法体后加 {deep:true}

示例方法1：

==============================

vue.js组件

组件：组件即自定义控件 组件的用途：能够封装可重用代码，扩展HTML标签功能 本质：自定义标签

组件的分类： 全局组件： 作用域：不同作用域内均可使用 局部组件： 作用域：只在定义该组件的作用域内可以使用 注意： 组件和Vue实例类似，需要注册后才可以使用

全局组件语法： Vue.component(‘name’,{//name指定义的名字 template:’

’ //template是模版，div中是html 代码 }); **定义位置：**创建实例前定义全局组件 template:‘html代码’ template:’#template1’ 数据的定义： data:function(){ //body… return { msg:‘hello’, name:‘lily’ } } 组件 的调用方法： <组件名></组件名>

全局组件示例：

test123{{name}}

局部组件语法： var vm=new Vue({ el:"#box", data:{}, //局部组件的定义 components:{//组件名称{配置项} ‘test’:{//template:‘

标签

’ template:"#t", data:function(){ return { msg:‘hello’ } } } } })

props选项的作用 1.组件不仅仅是要把模版的内容进行复用，更重要的是组件之间的通信，由父组件向子组件正向传递数据或者参数，就是通过props来实现的 2.props选项用来声明它期待获得的数据 3.props本质：props为元素属性

语法： JS中定义： components:{‘组件名称’:{ template:"#模版ID"， props:[‘message1’,‘message2’,…] } } HTML中定义: <组件 message=‘val’ ></组件>

props的使用： 1.与data一样，props可以用在模版中 2.可以在vm实例中像this.message这样使用 3.与组件data函数return 的数据区别 props的数据来自父级 data中数据是组件自己的数据

父组件传值给子组件 子组件有时候需要接收来自父组件的动态数据，这就需要使用v-bind 指令来动态绑定props的值

单向数据流： 1.当父组件的属性变化时，将传给子组件，但是反过来不会 2.要尽可能的将父子组件解耦合，避免子组件无意中修改了父组件状态 3.业务中经常遇到的两种需要改变prop的情况 a。父组件传初始值进来，子组件将他作为初始值保存起来，在自己的作用域下可以随意使用和修改 b。prop作为需要被转变的原始值传入

抛出自定义事件监听 语法： this.$emit(‘event’,val) $emit:实例方法，用来触发事件监听

参数 event：自定义事件名称 val：通过自定义事件传递的值 注意：val为可选参数 接收自定义事件监听 语法： <component @event=‘fn’> fn:function(val){ } //val：自定义事件传递出的值

示例： 点击子组件信息，父组件会增加子组件信息

父组件{{parentmsg}}{{msg}}

slot的作用： 1.slot是插槽的意思，其目的在于让组件的可扩展性更强，用来混合父组件的内容与子组件自己的模版 2.在组件化开发中，虽然组件是一样的，但是在不同的使用场景组件的一部分内容需要有不同的内容显示 3.分类：匿名slot 和 具名 slot

匿名slot语法

头部区域

如果没有分发内容，则显示默认显示

底部区域

示例：

新闻内容

头部

如果没有分发内容，则默认会显示

底部

具名slot 1. 元素可以用一个特殊属性name来配置如何分发内容 2.多个slot可以有不同的名字 3.具名slot将匹配内容片断中有对应slot特性的元素

示例：

i9

1T固态

这是CPU存储的地方 这是显卡存储的地方这是内存存储的地方