Vue2.x

Vue2.0

简介

• 一套用于构建用户界面的渐进式JavaScript框架
• 尤雨溪

特点

• 1、采用组件化模式，提高代码复用率、且让代码更好维护
• 2、声明式编码，让编码人员无需直接操作DOM，提高开发效率

初始vue

• 使用Vue，先new一个vue实例，且要传入一个配置对象
• vue实例和容器是一一对应的
• 真实开发中只有一个vue实例，并且会配合着组件一起使用
• {{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
• 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新

vue模板语法

• 插值语法：
  • 功能：用于解析标签体内容
  • 写法：{{xxx}},xxx是js表达式，且可以直接读取到data中的所有属性
• 指令语法：
  • 功能：用于解析标签（包括：标签属性、标签提内容、绑定事件……）

vue数据绑定的方式

• 单向数据绑定（v-bind）：数据只能从data流向页面
• 双向数据绑定（v-model）：数据不仅可以从data流向页面，还能从页面流向data

data与el的2种写法

• el的2种写法:
  • new Vue时配置el属性
  • 线创建Vue实例，随后再通过vm.$mount("#app")指定el的值
• data的2种写法
  • 对象式
  • 函数式
• 由vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了

MVVM模型

• M：模型（model）：对应data中的数据
• V：视图（View）:模板
• VM：视图模型（ViewModel）：Vue对象实例
• data中所有的属性，最后都出现在了vm身上
• vm身上所有的属性Vue模型上所有属性，在Vue模板中都可以直接使用
  

Vue中常用的按键别名：

• 1、Vue中常用的按键别名
  • 回车=>enter
  • 删除=>delete(捕获删除和退格键)
  • 退出=>esc
  • 空格=>space
  • 换行=>tab
• 2、Vue未提供别名的按键，可以使用按键原始的key值去绑定，但要注意转为kebab-case（短横线命名）
• 3、系统修饰符(用法特殊)：ctrl、alt、shift、meta
  • （1）配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发
  • （2）配合keydown使用，正常触发事件
• 4、也可以使用keyCode去指定具体的按键（不推荐）
• 5、Vue.config.keyCode.自定义键名，可以去指定按键别名

Vue中key的作用

1、虚拟DOM中key的作用：

• key是虚拟DOM对象的标识，当状态中的数据发生改变时，Vue会根据【新数据】生成的【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下

2、对比规则：

• （1）旧的虚拟DOM中找到了新虚拟DOM相同的key：
  • ①若虚拟DOM中的内容没变，直接使用之前的真实DOM
  • ②若虚拟DOM中的内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
• （2）旧虚拟DOM中未找到与新DOM相同的key
  • ① 创建新的真实DOM，随后渲染到页面

3、用index作为key可能会引发的问题：

• 若对数据进行：逆序添加、逆序删除等破坏顺序操作，会产生没有必要的真实DOM的更新，页面效果没影响，但是效率低
• 如果结构中还包含输入类的DOM，会产生错误DOM更新，页面有问题

4、开发中如何选择key?：

• 最好使用每条数据的唯一标识作为key，比如id、身份证号等
• 如果仅用于渲染列表用于展示，使用index作为key是没有问题的

Vue中的数据代理

• 通过vm对象来代理data对象中属性的操作
• 好处：更加方便操作data中的数据
• 基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上，为每一个vm上的属性，都指定一个getter/setter，再getter/setter内部去操作data中对应的属性

计算属性computed

• 定义：要用的属性不存在，要通过已有属性计算得来
• 原理：底层借助了过Object.defineProperty()方法提供的getter、setter
• get函数什么时候执行：初次读取时执行一次;当依赖的数据发生改变时会被再次调用
• 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便
• 备注：
  • 计算属性最终会出现在vm上，直接读取使用即可
  • 如果计算属性要被修改，那必须写set函数去相应修改，且set中要引起计算时依赖的数据发生改变。

computed和watch的区别：

1. computed能完成的功能，watch都可以完成
2. watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
3. 两个重要的小原则：
   1.所被vue管理的函数，最后写成普通函数，这样this的指向才是vm或组件实例对象
   2.所有不被Vue管理的函数（定时器的回调函数、Ajax的回调函数等），最好写成箭头函数，这样this的指向才是vm或组件实例对象。

• 深度监视：
  • （1）vue中的watch默认不监测对象内部值的改变（一层）
  • （2）配置deep：true可以监测对象内部值改变（多层）
• 备注;
  • (1)Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
  • 使用watch时根据数据的具体结构，决定是否采用深度监测

Vue数据监测原理：

• 1、Vue会监测data中所有层次的数据
• 2、 如何监测对象中的数据：
  • 通过setter实现监测，且要在new Vue时就传入要监测的数据
    • （1）对象中后追加的属性，Vue默认不做响应式处理
    • （2）如需给后添加的属性做响应式，请使用如下API
      • Vue.set(target,propertyName/index,value)或
      • vm.$set(target,propertyName/index,value)
• 3、如何监测数组中的数据
  • 通过包裹数组更新元素的方法实现，本质就是做了两件事：
    • （1）调用原生对应的方法对数组进行更新
    • （2）重新解析模板，进而更新页面
• 4、在Vue修改数组中某一个元素一定要使用如下方法：
  • 使用这些API：push(),pop(),shift(),unshift(),splice(),sort(),reverse()
  • Vue.set()或vm.$set()
  • 特别注意：Vue.set()和vm.$set()不能给vm或vm根数据对象 添加属性！！！！

过滤器

• 定义：对要显示的数据进行特定格式后再显示（适用于一些简单的逻辑处理）
• 语法：
  • 1.注册过滤器：Vue.flter(name,callback)或new Vue{filters:{}}
  • 2.使用过滤器：{{xxx | 过滤器名}} 或v-bind:属性 =“xxx | 过滤器名”
• 备注：
  • 过滤器也可以接收额外参数，多个过滤器也可以串联
  • 并没有改变原本的数据，是产生新的对应的数据

一些指令

• v-html指令：
  • 作用：向指定节点中渲染包含html结构的内容
  • 与插值语法的区别：
    • v-html会替换掉节点中所有的内容，{{xxx}}则不会
    • v-html可以识别html结构
  • 严重注意：v-html 有安全性问题
    • 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
    • 一定要在可信的内容上使用v-html ，永不要在用户提交的内容上
• v-cloak指令（没有值）：
  • 本质是一个特殊属性，Vue实例创建完毕兵接管容器后，会删掉v-cloak属性
  • 使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
• v-once指令：
  • v-once所在节点在初次动态渲染后，就视为静态内容了
  • 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能
• v-pre指令：
  • 跳过其他所在节点的编译过程
  • 可利用它的跳过，没有使用指令语法、没有使用插值语法的节点，会加快编译

自定义指令

一、 定义语法：

• （1）局部指令：

new  Vue({
   directives:{指令名,配置对象}
})

或

new  Vue({
   directives:{指令名,回调函数}
})

• （2）全局指令：

Vue.directive(指令名,配置对象)

或

Vue.directive(指令名,)

二、配置对象中常用的3个回调

• （1）bind：指令与元素成功绑定时调用
• （2）inserted：指令所在元素被插入页面时调用
• （3）update：指令所在模板结构被重新解析时调用

三、备注

• 指令定义时不加v-，使用时要加v-
• 指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名

生命周期

• 又名：生命周期回调函数、生命周期函数、生命周期钩子
• 是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数
• 生命周期函数的名字不可以更改，但函数的具体内容是自己根据需求进行编写的
• 生命周期函数中的this指向vm或组件实例对象
  
  
• 常用的生命周期钩子:
  • mounted：发送Ajax请求、启动定时器、绑定自定义事件、订阅消息等（初始化操作）
  • beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等（收尾工作）
• 关于销毁Vue实例
  • 1、销毁后借助Vue开发者工具看不到任何信息
  • 2、销毁后自定义事件会失效，但原生DOM事件依然有效
  • 3、一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了

模块

• 理解：向外提供特定功能的js程序，一般就是一个js文件
• 为什么：js文件很多和复杂
• 作用：复用js、简化js、提高js运行效率

模块化

• 当应用中的js都以模块来编写的，那这个应用就是一个模块化的应用

组件

• 理解：用来实现局部（特定）功能效果的代码集合
• 为什么：一个界面的功能和复杂
• 作用：复用编码，简化项目编码，提高运行效率

组件化

• 当应用中的功能都是以多组件的方式来编写的，那这个应用就是一个组件化的应用

VueComponent

• 1、我们自定义的组件通过Vue.extend()生成的
• 2、Vue解析时会帮我们创建自定义组件的实例对象
• 3、每次调用Vue.extend()返回的都是一个全新的VueComponent
• 4、关于this的指向：
  • 组件配置中：
    • data函数、methods中的函数、 watch中的函数 他们的this均是 【VueComponent实例对象】
  • new Vue(options)配置中
    • data函数、methods中的函数、 watch中的函数 他们的this均是【Vue实例对象】
• 5、VueComponent的实例对象、简称vc（组件实例对象）、Vue的实例对象简称vm
• 6、一个重要的内置关系：
  • VueComponent.prototype.__proto__ === Vue.prototype
  • 让组件实例对象vc可以访问到Vue原型上的属性、方法
• 7、 关于脚手架
  

ref属性

• 被用来给元素或子组件注册引用信息（id的替代者）
• 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
• 使用方式：
  • 打标识：<h1 rref = "xxx">·····</h1>或<School ref = "xxx"></School>
  • 获取：this.$ref.xxx

配置项props

• 功能：让组件接收外部传过来的数据
• （1）传递数据：<School name="大学" :age="99"></School>
• （2）接收数据：
  • 第一种方式（只接收）： props:["name","age"]
  • 第二种方式（限制类型）： props: { name: String, age:Number }
  • 第三种方式（限制类型、限制必要性，指定默认值）

  props: {
    name: {
      type: String,
      requied: true,
    },
    age: {
      type: Number,
      requied: true,
      default:18
    }
  }

• 备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据

mixin（混入）

• 功能：可以把多个组件共用的配置提取成一个混入对象
• 使用方式：
  • 第一步定义混入：

{
  data(){·······},
  methods:{·····}
  ······
}

• 第二步使用混入Vue.mixin(xxx)\mixin:['xxx']

插件

• 功能：用于增强Vue
• 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的额参数是插件使用者传递的数据
• 定义插件：

对象.install = function (Vue,options){
  //1.添加全局过滤器
  Vue.filter(····)
  //2、添加全局指令
  Vue.directives(····)
  //3、配置全局混入
  Vue.mixin(····)
  //4、添加全局实例方法
  Vue.prototype.$myMethod = function () {····}
  Vue.prototype.$myProtottype = xxxx
}
使用插件:Vue.use()

scoped样式

• 作用：让样式在局部生效，防止冲突
• 写法：<stype scoped>

总结TodoList案例

• 1、组件化编码流程：
  • （1）拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突
  • （2）实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：
    • 一个组件在用：放在组件自身即可
    • 一些组件在用：放在他们共同的父组件上（状态提升）
  • （3）实现交互：从绑定事件开始
• 2、props适用于：
  • 父组件==>子组件 通信
  • 子组件==>父组件 通信（要求父组件先给子组件一个函数）
• 3、使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的
• 4、props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做

组件的自定义事件

• 1.一种组件间通信的方式，适用于：子组件==>父组件
• 2.使用场景：A是父组件，B是子组件，B想给A组件传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）
• 3.绑定自定义事件：
  • 第一种方式，在父组件中 ：<School @getData = "getData"/>或<School v-on:getData = "getData"/>
  • 第二种方式，在父组件中：

<School  ref = "demo" />
········
mounted(){
 this.$refs.demo.$on('getData',this.test)
}

• 若只想让自定义事件只能被触发一次，可以使用once修饰符，或$once方法
• 4.触发自定义事件：this.$emit('getData',数据)
• 5.解绑自定义事件：this.$off("getData")
• 6.组件上也可以绑定原生DOM事件，需要使用native修饰符
• 7.注意：通过thsi.$refs.xxx.$on("getData",回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this的指向会出问题

全局事件总线

• 1.一种组件间通信的方式，适用于任意组件间通信
• 2.安装全局事件总线：

new Vue({
 ········ 
 beforeCreated(){
   Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
}
 ········
})

• 3.使用事件总线：
  • （1）接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身
  • （2）提供数据：this.$bus.$emit('xxx',数据)

methods:{
  demo(data){········}
}
·········
mounted(){
 this.$bus.$on('xxxx',this.demo)
}

• 4.最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件

nextTick

• 语法：this.$nextTick(回调函数)
• 作用：在下一次DOM更新结束后执行其指定的回调
• 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行

解决跨域

插槽

Vuex

1. 概念：在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读、写），也是一种组件间通信的方式，且适用于任意组件间通信
2. 何时使用：多个组件需要共享数据时
3. 搭建vuex环境
   （1）创建文件：src/store/index.js

import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用Vuex
Vue.use(Vuex)

// 准备actions--用于响应组件中的动作
const actions = { },

// 准备mutations--用于操作数据（state）
const mutations = { }

// 准备state--用于存储数据
const state = { }


const getters = { }

// 创建并导出store
export default new Vuex.Store({
  actions,
  mutations,
  state,
  getters
})

（2）组件中读取vuex中的数据：$store.state.xxx
（3）组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据)或$store.commit('mutation中的方法名',数据)

• 备注：若没有网络请求或其他业务逻辑，组件中页可以越过actions，即不写dispatch，直接编写commit

四个map方法的使用

1.mapState方法：用于帮助我们映射state中的数据为计算属性

computed:{
//借助mapState生成计算属性，sum，school，subject（对象写法）
  ...mapState({sum:'sum',school:'school',subject:'subject'}),
//借助mapState生成计算属性，sum，school，subject（数组写法）
  ...mapState(['sum','school','subject'])
}

2.mapGetters方法：用于帮助我们映射getters中的数据为计算属性

computed:{
  //借助mapGetters生成计算属性bigSum（对象写法）
  ...mapGetters({bigSum:'bigSum'}),
  //借助mapGetters生成计算属性bigSum（数组写法）
  ...mapGetters(['bigSum'])
}

3. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

methods:{
  //靠mapActions生成：oddN,waitN（对象形式）
  ...mapActions({oddN:'jiaOdd',waitN:'jiaWait'})
   //靠mapActions生成：jiaOdd,jiaWait（数组形式）
  ...mapActions(['jiaOdd','jiaWait'])
}

4. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

methods:{
   //借助mapMutations生成，increment、decrement（对象写法）
   ...mapMutations({increment:'JIA',decrement:'JIAN'})
    //借助mapMutations生成，increment、decrement（数组写法）
   ...mapMutations(['JIA','JIAN'])
}

备注：mapActions与mapMutations使用时，若需要传递参数，在模板中绑定事件时传递好参数，否则参数是事件对象

模块化+命名空间

路由vue-router

** vue2中 ，要用 vue-router的3版本  **
** vue3中 ，要用 vue-router的4版本  **

• vue-router，Vue的一个插件库，专门用来实现SPA（single page web application）应用
• SPA（single page web application）应用：
  • 单页Web应用
  • 整个应用只有一个完整的页面
  • 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
  • 数据需要通过ajax请求获取
• 什么是路由？
  • 一个路由就是一组映射关系（key-value）
  • key为路径，value可能是function或component
• 路由的分类：
  • 1.后端路由：
    • （1）理解：value是function，用于处理客户端提交的请求
    • （2）工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
  • 2.前端路由：
    • （1）理解：value是component，用于展示页面内容
    • （2）工作过程：当浏览器的路径改变时，对应的组件就会显示
• 几个注意点
  • 1.路由组件通常存放在pages 文件夹，一般组件通常存放在components文件夹
  • 2.通过切换，隐藏了的路由组件，默认是被销毁掉的，需要的时候再去挂载
  • 3.每个组件都有自己的$route属性，里面存储着自己的路由信息
  • 4.整个应用只有一个router，可以通过组件的$router属性获取到
• 多级路由
  • 配置路由规则，使用children配置项
  • 跳转（要写完整的路径）<router-link to='/home/news'> News </router-link>
• <router-link>的replace属性
  • 作用：控制路由跳转时操作浏览器历史记录的模式
  • 浏览器的历史记录有两种写入方式：push和replace，push是追加历史记录，replace是替换当前记录，路由跳转时候默认为push
  • 如何开启replace模式：<router-link replace .......>News</router-link>
• 编程式路由导航
  • 作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活
  • 具体编码：

$router的两个API
this.$router.push({
  name:'xinwen',
    params:{
      id:'001',
      title:'xxxx'
    }
})


this.$router.replace({
 name:'xinwen',
    params:{
      id:'001',
      title:'xxxx'
    }
})


this.$router.back()//后退
this.$router.forward()//前进
this.$router.go()//正数可前进负数后退

• 缓存路由组件
  • 作用：让不展示的路由组件保持挂载，不被销毁
  • 具体编码：

<keep-alive  include='News'>
   //include写的是组件名
   <router-view></router-view>
</keep-alive>   

路由守卫

• 作用：对路由进行权限控制
• 分类：全局守卫、独享守卫、组件内守卫
• 全局守卫:
  
• 独享守卫
  
• 组件内守卫：
  

路由器的两种工作模式

• 1.对于一个url来说，什么是hash值？——#及其后面的内容就是hash值
• 2.hash值不会包含在HTTP请求中，即：hash值不会带给服务器
• 3.hash模式：
  • （1）地址中永远呆着#号，不美观
  • （2）若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
  • （3）兼容性较好
• 4.history模式：
  • （1）地址干净、美观
  • （2）兼容性和hash模式相比略差
  • （3）应用部署上线时需要后端人员支持，解决刷新页面服务端404问题