vue

从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。

1、生命周期的定义

1. 实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作

① 初始化

2. 当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿

3. 当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom

② 运行中

1. 当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等

2. 组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以

③ 销毁

2、三个阶段

3、Vue生命周期

1.组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码

2.组件是自定义元素（对象）

1. 什么是组件？

方式1：先创建组件构造器，然后由组件构造器创建组件

方式2：直接创建组件

2.定义组件的方式

① 全局组件

② 局部组件

3.组件的分类

将组件内容放到模板<template>中并引用

4.引用模板

<component :is="">组件 多个组件使用同一个挂载点，然后动态的在它们之间切换

<keep-alive>组件

5.动态组件

1、了解组件component

①定义： 在一个组件内部定义另一个组件，称为父子组件

②子组件只能在父组件内部使用。 默认情况下，子组件无法访问父组件中的数据，每个组件实例的作用域是独立的

1. 父子组件

a)在调用子组件时，绑定想要获取的父组件中的数据

b)在子组件内部，使用props选项声明获取的数据，即接收来自父组件的数据

注意： 父组件通过props向下传递数据给子组件 注：组件中的数据共有三种形式：data、props、computed

2.1 子组件访问父组件的数据

b)父组件在使用子组件的地方监听子组件触发的事件，并在父组件中定义方法，用来获取数据

注意：子组件通过events给父组件发送消息，实际上就是子组件把自己的数据发送到父组件

2.2 父组件访问子组件的数据

2. 组件间数据传递 （通信）

① props是单向绑定的，当父组件的属性变化时，将传导给子组件，但是不会反过来

a.使用.sync（1.0版本中支持，2.0版本中不支持，2.3版本又开始支持）需要显式地触发一个更新事件

b.可以将父组件中的数据包装成对象，然后在子组件中修改对象的属性(因为对象是引用类型，指向同一个内存空间)，推荐

② 而且不允许子组件直接修改父组件中的数据，报错 解决方式：

3. 单向数据流

非父子组件间的通信，可以通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件

4. 非父子组件间的通信

2、组件间数据传递

①默认插槽 本意：位置、槽

1. 就是给这个插槽起个名字

2. <slot name="girl"></slot> <div style="height:1px;background-color:red;"></div> <slot name="boy"></slot>

② 具名插槽：

就是我在组件上的属性，可以在组件元素内使用！

1. 定义：

<child :lists="nameList"> <template slot-scope="a"> {{a}} </template> </child>template:` <div> <ul> <li v-for="list in lists"> <slot :bbbbb="list"></slot> </li> </ul> </div> `

2. 实例

③ 作用域插槽

用来获取组件中的原内容

④ 作用：

3、slot内容分发

使用Vue.js开发SPA（Single Page Application）单页面应用 根据不同url地址，显示不同的内容，但显示在同一个页面中，称为单页面应用

① 简介

（1）<router-link> 组件支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。

1. 布局

定义路由组件

定义路由

创建Router实例

注入路由

（2）定义路由的步骤

2. 配置路由

（1） to：表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

（2） replace:设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。<router-link :to="{ path: '/abc'}" replace></router-link>

（3） append：设置 append 属性后，则在当前（相对）路径前添加基路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

（4） tag:有时候想要 <router-link> 渲染成某种标签，例如 <li>。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。 <router-link to="/foo" tag="li">foo</router-link>

（5） active-class ：设置 链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

3. <router-link> 相关属性

② 基本用法

（1） a.查询字符串：login?name=tom&pwd=123 {{$route.query}

（2） b.rest风格url：regist/alice/456 {{$route.params}}

传参的两种形式：

③ 路由嵌套和参数传递

1. router.push() 添加路由，功能上与<route-link>相同

2. router.replace() 替换路由，不产生历史记录

④ 路由实例的方法

(1)在 CSS 过渡和动画中自动应用 class

(2)可以配合使用第三方 CSS 动画库，如 Animate.css

(3)在过渡钩子函数中使用 JavaScript 直接操作 DOM

(4)可以配合使用第三方 JavaScript 动画库，如 Velocity.js

1. 提供多种不同方式的应用过渡效果。

（1）v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

（2）v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。

（3）v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

（4）v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

（5）v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

（6）v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

2. 过渡的类名

⑤ 路由结合动画

4、 vue-router路由

vue文件，称为单文件组件，是Vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js

vue文件由三部分组成：<template>、<style>、<script>

① .vue文件

浏览器本身并不认为.vue文件，所以必须对.vue文件进行加载解析，此时需要vue-loader 类似的loader还有许多，如：html-loader、css-loader、style-loader、babel-loader等

② vue-loader

是一个前端资源模板化加载器和打包工具，它能够把各种资源都作为模块来使用和处理 实际上，webpack是通过不同的loader将这些资源加载后打包，然后输出打包后文件

③ webpack

webpack-demo |-index.html |-main.js 入口文件 |-App.vue vue文件 |-package.json 工程文件 |-webpack.config.js webpack配置文件 |-.babelrc Babel配置文件

（1）创建项目

（2） 编写App.vue

cnpm install vue -S cnpm install webpack -D cnpm install webpack-dev-server -D cnpm install vue-loader -D cnpm install vue-html-loader -D cnpm install css-loader -D cnpm install vue-style-loader -D cnpm install file-loader -D cnpm install babel-loader -D cnpm install babel-core -D cnpm install babel-preset-env -D //根据配置的运行环境自动启用需要的babel插件 cnpm install vue-template-compiler -D //预编译模板

（3） 安装相关模板

（4） 编写main.js

（5）编写webpack.config.js

（6）编写.babelrc

（7）编写package.json

（8）运行测试 npm run dev

④ 示例，步骤：

5、 单文件组件

（1） vue-cli是一个vue脚手架，可以快速构造项目结构

（2） vue-cli本身集成了多种项目模板： simple 很少简单 webpack 包含ESLint代码规范检查和unit单元测试等 webpack-simple 没有代码规范检查和单元测试 browserify 使用的也比较多 browserify-simple

① 简介

cnpm install vue-cli -g

vue --version

vue list

（1）安装vue-cli，配置vue命令环境

语法：vue init 模板名 项目名

（2） 初始化项目，生成项目模板

cd vue-cli-demo cnpm install

（3）进入生成的项目目录，安装模块包

npm run dev //启动测试服务

npm run build //将项目打包输出dist目录，项目上线的话要将dist目录拷贝到服务器上

（4）运行

② 示例，步骤：

6、vue-cli脚手架

4、组件component的应用

② Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

③ Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。

导入 <script src="vue.js"></script>

1.1Vue.js 2.0 介绍

通过数据绑定链接View和Model（ MVVM ），让数据的变化自动映射为视图的更新。

① 核心思想便是 “数据驱动的组件系统”

② 高效实用的组件系统

把一个组件的模板、样式、逻辑三要素整合在同一个文件中（.vue），即方便开发，也方便复用和维护。

③ 基于构建工具的单文件组件格式

当大量数据变动时，所有受到影响的watcher会被推送到一个队列中，并且每个watcher只会推进队列一次。

④ 异步批量DOM更新

Vue.js提供了简单却强大的动画系统，当一个元素的可见性变化时，用户不仅可以很简单地定义对应的CSS Transition或Animation效果，还可以利用丰富的JavaScript钩子函数进行更底层的动画处理

⑤ 动画系统

除了自定义指令、过滤器和组件，Vue.js还提供了灵活的mixin机制，让用户可以在多个组件中复用共同的特性。

⑥ 可扩展性

1.2Vue.js特点

① 基本结构：

el：应用的dom元素id

data：属性

methods：定义的函数，可以通过 return 来返回函数值

② 属性说明：

1.3Vue.js基本结构

1.文本 ：数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值：<span>Message: {{ msg }}</span>

2.纯html: 双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令：<div v-html="rawHtml"></div>

① 插值

1.Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令：<div v-bind:id="dynamicId"></div>

2.这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除：<button v-bind:disabled="someDynamicCondition">Button</button>

② 属性

Vue.js 都提供了完全的 JavaScript 表达式支持。{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}<div v-bind:id="'list-' + id"></div>

③ 使用 JavaScript 表达式

被用作一些常见的文本格式化。过滤器应该被添加在 mustache 插值的尾部，由“管道符”指示：{{ message | capitalize }}

④ 过滤器

指令（Directives）是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式<p v-if="seen">Now you see me</p>

⑤ 指令

用于指出一个指定应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：<form v-on:submit.prevent="onSubmit"></form>

⑥ 修饰符

<!-- 完整语法 --><a v-bind:href="url"></a><!-- 缩写 --><a :href="url"></a>

1.v-bind 缩写

<!-- 完整语法 --><a v-on:click="doSomething"></a><!-- 缩写 --><a @click="doSomething"></a>

2.v-on 缩写

⑦ 缩写

v-model 指令用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定

⑧ 用户输入

1.4Vue.js 模板语法

通过调用表达式中的method来达到同样的效果：<p>Reversed message: "{{ reverseMessage() }}"</p>// in componentmethods: { reverseMessage: function () { return this.message.split('').reverse().join('') }}

1. 计算缓存 vs Methods

提供了一个方法 $watch ，它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时， $watch 很诱人 —— 特别是如果你来自 AngularJS 。

2.vs Watched Property

① 计算属性

② Class 与 Style 绑定

1.v-if

2.v-else

v-if 是真实的条件渲染

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做

v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换

v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display

3.v-if vs. v-show区别：

③ 条件渲染

<div id="app"> <ul> <li v-for="n in 10"> {{ n }} </li> </ul></div>

1.v-for基本语法

2.v-for 还支持一个可选的第二个参数为当前项的索引

<div> <span v-for="n in 10">{{ n }}</span></div>

3.整数迭代 v-for

④ 列表渲染

可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。

1.监听事件

v-on 可以接收一个定义的方法来调用。

2.方法事件处理器

除了直接绑定到一个方法，也可以用内联 JavaScript 语句：<div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button></div>

3.内联处理器方法

<!-- 阻止单击事件冒泡 --><a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 --><a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 --><form v-on:submit.prevent></form>

<!-- 添加事件侦听器时使用事件捕获模式 --><div v-on:click.capture="doThis">...</div>

<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --><div v-on:click.self="doThat">...</div>

通过由点(.)表示的指令后缀来调用修饰符。

4.事件修饰符

.stop - 调用 event.stopPropagation()。 .prevent - 调用 event.preventDefault()。 .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。 .native - 监听组件根元素的原生事件。 .once - 只触发一次回调。

在监听键盘事件时，我们经常需要监测常见的键值。

5.按键修饰符

⑤ 事件处理器

文本<input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p>

多个勾选框，绑定到同一个数组：<input type="checkbox" id="john" value="John" v-model="checkedNames"><label for="john">John</label><input type="checkbox" id="mike" value="Mike" v-model="checkedNames"><label for="mike">Mike</label><br><span>Checked names: {{ checkedNames }}</span>

多选列表（绑定到一个数组）：<select v-model="selected" multiple> <option>A</option> <option>B</option> <option>C</option></select><br><span>Selected: {{ selected }}</span>

用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。

⑥ 表单控件绑定

1.5 Vue.js的高级语法

1、了解Vue.js

2、发送AJAX请求

Vue框架学习