1. 介绍：vue是渐进式的js框架可以作为第三方库使用，也可以使用vue构建复杂的单页项目。
2. 特点：

• 很容易开始，只需要html,css,js如果是如果是的话react还需要es6,jsx，函数编程
• 灵活性：可作为第三方库或框架工程使用。
• 高效：虚拟DOM。
• 使用方便：指令、模板、数据双向绑定react可自动修改数据双向绑定，react需要手动执行setState。
• 组件化：和react项目vue新手更容易接受组件化html,css,js，而react都是通过js实现。

1. v-if是删除和创建，频繁切换消耗大
2. v-show是添加display：none；block；来回切换，消耗小，适合频繁切换
3. v-for优先于v-if

• Model View VM
• Model 是数据模型
• View 是视图
• VM 是 用于连接数据和视图

答：一个model view viewModel框架，数据模型model，viewModel连接两个 区别：vue数据驱动，通过数据显示视图层而不是节点操作。 场景:数据操作多的场景更方便

Model视图更新的相关依赖也会同步改变， 双向绑定就是vm起了作用

1.方法:每次重新渲染页面数据，都会重新执行。 性能消耗大，除非不想在缓存时使用. 2.computed：计算属性，依赖于其他属性，并且computed该值为缓存，只有当计算值发生变化时才能返回内容。 3.watch：将执行监控值的变化，并在回调中进行一些逻辑操作。

结论：一般不使用方法，除非你不想缓存 一般来说，动态获取值可以依靠其他属性来使用computed 对于监听到值的变化，需要进行异步操作或更昂贵的操作watch

当前组件style修改为style scoped

< style scoped> < /style> 

vue Loarder作用是将.vue文件分析成浏览器可以识别的文件

key虚拟的主要功能是有效更新DOM

生命周期是从创造到销毁的过程

• beforeCreate 创建前
• created 创建后
• beforeMount 挂载前
• mounted 挂载后
• beforeUpdate 数据更新前
• updated 数据更新后
• beforeDestroy 销毁前
• destroyed 销毁后

• beforeCreate创建前，刚执行new操作，其他什么都没做
• created创建后，将属性和方法挂载到实例上
• beforeMount挂载前，找到了el或mount相应的节点范围，但没有替换数据字，相当于创建DOM树
• mounted挂载后，vue范围内的变量将被替换为data里面的数据值
• beforeUpdate数据更新前
• updated数据更新后
• beforeDestroy销毁前
• destroyed销毁后

ajaxs在获取数据时created此时使用渲染页面

• 复用组件时，共享所有组件实例data，如果data它是一个对象，它会导致一个组件修改其他调用组件的值也会改变。此时，写一个函数，每次调用都会返回一个新的数据
• new Vue() 其中的方法是生成一个根组件，它不会重用，也不会共享data情况

我们可以抽象成一棵由组件组成的大组件树，从一个页面到一个按钮，一个页面由许多组件的嵌套拼接组成，即组件；

• 复用性强
• 模块化开发
• 代码好管理
• 耦合度低

有三种组件：

1. 全局组件：

• Vue.component(‘组件名称‘，组件详情对象)

2. 局部组件：

• new Vue( components:{ 组件名称：组件详情的对象 } ))

3. 单文件组件： .vue文件

1. 第一种：props、$emit

一

1. 父传子: 父传值 v-bind=“msg”，props[]子接受

• 父组件 < son :fatherMsg=“msg” >，在父组件内的子组件上自定义指令绑定父组件的 msg
• 子组件 props[“fatherMsg”]，子组件通过props以数组形式接收,也可以对象形式这样写：
• props:{ fatherMsg: String }

//父组件：
<son :fatherMsg="msg">
//子组件：
{
    
       { fatherMsg }}

<script>
props:["fatherMsg"]
//或
props:{
	fatherMsg: 数据类型
}
<script/>

2. 子传父：用 this.$emit(“自定义事件名称”，传递内容)

• 子组件通过 this.$emit(“事件名”，传递内容)传递内容
• 父组件 < Sub @事件名(同子组件传输的一样)=“自定义事件名” >,在自定义事件上接收并保存在data就可以使用了

//父组件：
//自定义事件名要和子组件传过来的定义一样
<son @childInput="getVal>

<script>
  methods: {
  //接收数据并保存在data
      getVal(msg) {
         this.msgVal = msg;
  	} 
  }
</script>

//子组件：this. e m i t ( " 自 定 义 事 件 名 " ， 传 递 内 容 ) t h i s . emit("自定义事件名"，传递内容) this. emit("自定义事件名"，传递内容)this.emit(“childInput”, this.subcon);

通过一个中转(bus.js)

//bus.js内容
import Vue from "vue";
export default new Vue;

A兄弟传值：

• 通过import引入bus.js
• bus.$emit(“自定义事件名”，传递内容) B兄弟接收：
• 通过import引入bus

bus.$on("自定义事件名"(同传过来的一样),(data) =>{
	//data是传过来的数据进行接收
   }
)

1. 创建组件.vue文件，内部写功能代码
2. Vue.componte(“自定义组件名”，创建的组件名)注册组件
3. 使用组件

路由：路由就是通过点击不同的按钮展示不同的页面或者组件的功能 原理：根据不同的路径地址，展示不同的页面，组件

vue-loader是什么？使用它的用途是什么？

1. vue-loader是：.vue文件的一个加载器 ，跟template，js，style转换成js模块。
2. 用途：js 可以写es6，style样式可以写scss或less ，template可以加jade等

1. keep-alive是什么? 内置组件，能在组件切换过程中将状态保存在内存中，防止重复渲染DOM。

• $route 是路由信息对象，包括 path ， params ， hash ， query ，fullPath ， matched ， name 等 路由信息参数。
• ⽽ $router 是路由实例对象包括了路由的跳转⽅法，钩⼦函数等

下载----引入----使用

1. 请求后台资源模块

2. npm install axios -S装好，然后发送的是跨域，需在配置文件中config/index.js进行设置。后台如果是Tp5则定义一个资源路由。js中使用import进来，然后.get或.post。返回在.then函数中如果成功，失败则是在.catch函数中

• 下载 npm install axios --seve
• 引入(main.js)内

 import axios from "axios"
 Vue.prototype.axios = axios

• 请求方式，以及传参

axios.get("/api/login?userName=xxx$userPwd=xxx")

axios.post("/api/login", {
	userName: xx,
	userPwd: xx
})

Vuex 是实现组件全局状态(数据)管理的一种机制，可以方便的实现组件之间数据共享。

1. 易于开发和维护：能在vuex中集中管理共享数据
2. 提高开发效率：能够高效的实现组件之间的数据共享
3. 实时保持数据与页面的同步：存储在vuex中的数据都是响应式的

一般情况下，只有组件之间共享的数据才有必要存储到vuex中，对于组件的私有数据，依旧存储在自己自身的data中即可

1. 安装vuex依赖包
2. 用import导入vuex包，用Vue.use(Vuex)安装vuex
3. 创建store对象，new 一个Vuex.Store构造函数，提供一个存放全局共享数据的实例

const store = new Vuex.Store({
    //state中存放的就是全局共享数据
    state: { count: 0 }
})

4. 将store对象挂载到vue实例中

new Vue({
    el: "#app",
    render: h => h(app),
    reuter,
    //将创建的共享数据对象挂载到Vue实例中
    //所有的组件就可以直接从store中获取全局的数据了
    store
})

• 方式一：通过this.$store.state.count 获取数据,this可省略
• 方式二：从 vuex 导入 mapState 函数，将全局数据为当前组件的计算属性

• 方式一：通过this.$store.commit(“方法名”)操作mutation
• 方式二：从 vuex 导入 mapMutations函数，将指定的 mutations函数映射为当前组件的methods函数，直接this. 调用,不需要再this.$store.commit

• Action内通过 context.commit()触发某个 mutation才行
• 组件内通过 dispatch函数专门是用来触发 action的：this.$store.dispatch(“定义的action方法名”)

绑定事件，通过element-ui中表单提供的的resetFields方法可以重置表单，this.$refs.(表单的ref).resetFields