Vue2学习笔记

一、Vue核心

---

模板语法

1.插值语法：
功能: 用于解析标签体内容
语法: {{xxx}} ，xxxx 会作为js表达式解析
2.指令语法：
功能: 解析标签属性、解析标签体内容、绑定事件
Vue 中有有很多的指令，v-bind 举个例子

数据绑定

1.单向数据绑定：
语法：v-bind:href = "xxx" 或简写为 :href
特点：数据只能从 data 流向页面
2.双向数据绑定
语法：v-model:value="xxx" 或简写为v-model="xxx"
特点：数据不仅能从 data 流向页面，还能从页面流向 data

MVVM模型

1. M：模型(Model) ：对应 data 中的数据
2. V：视图(View) ：模板

3. VM：视图模型(ViewModel) ： Vue 实例对象

   
   
   image.png

事件处理

1.绑定监听

• v-on:xxx = "fun"
• @xxx = "fun"
• @xxx = "fun(参数)"
• 默认事件形参：event
• 隐含属性对象 $event
  2.事件修饰符
• .prevent : 阻止事件的默认行为 event.preventDefault()
• .stop : 停止事件冒泡event.stopPropagation()

3. 按键修饰符

• keycode:操作的是某个keycode值的键
• keyName：操作的是某个按键名的键

计算属性与监视

1.计算属性-computed

• 要显示的数据不存在，要通过计算得来。
• 在 computed 对象中定义计算属性。
• 在页面中使用{{方法名}}来显示计算的结果。
  2.监视属性-watch
• 通过 vm 对象的$watch()或 watch 配置来监视指定的属性
• 当属性变化时, 回调函数自动调用, 在函数内部进行计算

class与style绑定

在应用界面中, 某个(些)元素的样式是变化的， class/style 绑定就是专门用来实现动态样式效果的技术
1.class绑定：

• :class='xxx'
• 表达式是字符串: 'classA'
• 表达式是对象: {classA:isA, classB: isB
• 表达式是数组: ['classA', 'classB']

2.style绑定：

• :style="{ color: activeColor, fontSize: fontSize + 'px' }"
• 其中 activeColor/fontSize 是 data 属性

条件渲染

1.条件渲染指令:

• v-if v-else
• v-show

2.比较v-if 与 v-show
如果需要频繁切换 v-show 较好,当条件不成立时, v-if 的所有子节点不会解析(项目中使用

列表渲染

遍历数组: v-for / index
遍历对象: v-for / key

过滤器

功能: 对要显示的数据进行特定格式化后再显示
注意: 并没有改变原本的数据, 是产生新的对应的数据

自定义指令

• 注册全局指令：
  Vue.directive('my-directive', function(el, binding){el.innerHTLM = binding,value.toupperCase()})

• 注册局部指令：
  directives:{}

• 使用指令：
  v-my-directive = 'xxx'

Vue 实例生命周期

• 初始化显示：
  beforeCreate()
  created()
  beforeMount()
  mounted()

• 更新状态：this.xxx=value
  beforeUpdate()
  updated()

• 销毁vue实例：vm.$destory()
  beforeDestory()
  destoryed()

二、vue组件化编程

---

模块与组件

• 模块：
  向外提供特定功能的js程序，一般就是一个js文件

• 组件
  用来实现局部功能效果的代码集合（html/css/js/image...）

• 非单文件组件：
  模板编写没有提示
  没有构建过程, 无法将 ES6 转换成 ES5
  不支持组件的 CSS
  真正开发中几乎不用

单文件组件

• 模板页面
  template
• js模块对象
  script
• 样式
  style

基本使用：
引入组件、映射成标签、使用组件标签

三、使用Vue脚手架

---

Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。
全局安装 npm install -g @vue/cli
创建项目 vue create xxxx
启动项目 npm run serve

• 模板项目的结构

  
  
  image.png

ref与props

• ref
  作用：用于给节点打标识
  读取方式：this.$refs.xxxx

• props
  作用：用于父组件给子组件传递数据
  读取方式：
  只指定名称：
  props: ['name', 'age', 'setName']
  指定名称和类型：
  props: {
  name: String, age: Number, setNmae: Function
  }
  指定名称/类型/必要性/默认值
  props: {
  name: {type: String, required: true, default:xxx}, }

混入：

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

插件：

Vue 插件是一个包含 install 方法的对象
通过 install 方法给 Vue 或 Vue 实例添加方法, 定义全局指令

Vue中的自定义事件

• 绑定事件监听
  @method
  或者 refs.xxx.$on("method",this.method)

• 触发事件
  this.$emit('method',data)

• Vue 原型对象上包含事件处理的方法

1. $on(eventName, listener): 绑定自定义事件监听
2. $emit(eventName, data): 分发自定义事件
3. $off(eventName): 解绑自定义事件监听
4. $once(eventName, listener): 绑定事件监听, 但只能处理一次

全局事件总线

• 所有组件实例对象的原型对象的原型对象就是 Vue 的原型对象
• Vue.prototype.bus 这个属性对象
• Vue.prototype.bus 这个属性对象
• 指定事件总线对象
  new Vue({
  beforeCreate () { // 尽量早的执行挂载全局事件总线对象的操作
  Vue.prototype.mount('#root')
  绑定
  this.on('deleteTodo', this.deleteTo
  分发
  this.emit('deleteTodo', this.index
  解绑
  this.emit('deleteTodo', this.index

消息订阅与发布

它包含以下操作:
(1) 订阅消息 --对应绑定事件监听
(2) 发布消息 --分发事件
(3) 取消消息订阅 --解绑事件监听

过度与动画

操作 css 的 trasition 或 animation
vue 会给目标元素添加/移除特定的 class
过渡的相关类名：

1. xxx-enter-active: 指定显示的 transition
2. xxx-leave-active: 指定隐藏的 transition
3. xxx-enter/xxx-leave-to: 指定隐藏时的样式

四、Vue中的ajax

---

解决开发环境 Ajax 跨域问题

使用代理服务器

vue 项目中常用的 2 个 Ajax 库

• axios
• vue-resource

slot 插槽

父组件向子组件传递带数据的标签，当一个组件有不确定的结构时, 就需要使用
slot 技术，注意：插槽内容是在父组件中编译后, 再传递给子组件的。

1. 默认插槽
2. 命名插槽
3. 作用域插槽

五、vuex

---

概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应
用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方
式，且适用于任意组件间通信。

Vuex 工作原理图

image.png

state

是vuex管理的状态对象，他应该是唯一的

actions

值为一个对象，包含多个响应用户动作的回调函数
通过 commit( )来触发 mutation 中函数的调用, 间接更新 state
如何触发 actions 中的回调？
在组件中使用: $store.dispatch('对应的 action 回调名') 触发
可以包含异步代码（定时器, ajax 等)

mutations

值是一个对象，包含多个直接更新 state 的方法
谁能调用 mutations 中的方法？如何调用？
在 action 中使用：commit('对应的 mutations 方法名') 触发
mutations 中方法的特点：不能写异步代码、只能单纯的操作 state

getters

值为一个对象，包含多个用于返回数据的函数
如何使用？—— $store.getters.xxx

modules

1. 包含多个 module
2. 一个 module 是一个 store 的配置对象
3. 与一个组件（包含有共享数据）对应

六、vue-router

---

vue 的一个插件库，专门用来实现 SPA 应用

路由的理解

• 什么是路由?

1. 一个路由就是一组映射关系（key - value）
2. key 为路径, value 可能是 function 或 component

• 路由分类
  后端路由：

1. 理解：value 是 function, 用于处理客户端提交的请求。
2. 工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数
   来处理请求, 返回响应数据。
   前端路由：
3. 理解：value 是 component，用于展示页面内容。
4. 工作过程：当浏览器的路径改变时, 对应的组件就会显示。

编写使用路由的 3 步

1. 定义路由组件
2. 注册路由
3. 使用路由

七、Vue UI 组件

---

移动端常用 UI 组件库

1. Vant https://youzan.github.io/vant
2. Cube UI https://didi.github.io/cube-ui
3. Mint UI http://mint-ui.github.io

PC 端常用 UI 组件库

1. Element UI https://element.eleme.cn
2. IView UI https://www.iviewui.c