标签：route ade 表达式 ant lin 点击 cap imp src
前言：
一、优点：
轻量级、高效率、上手快、简单易学、文档全面而简洁
二、功能：
1、模板渲染
2、模块化
3、扩展功能：路由、Ajax
三、课程包含：
1、Vue实例
2、Vue组件
3、Vue指令
4、内置组件
5、实例方法
6、实例选项
7、实例属性
8、模板渲染
9、条件渲染
10、组件交互
11、标签属性
12、事件绑定
13、计算属性
14、属性监听
15、表单
16、动画
17、vue-cli项目搭建
18、Vue-router理由：实现单页面切换
19、vuex
四、vue.js简介
1、轻量级的前端界面框架
2、2016.10发布最新2.0版本，更强大，更快速
3、主要包括：
a) 数据渲染/数据同步
b) 组件化/模块化
c) 其他功能：路由、ajax、数据流
五、Vue.js学习资源
六、Vue.js的特点
1、双向数据绑定
2、组件化/模块化
3、单文件组件 - js、css、html存在于一个.vue文件内
通过什么实现呢？
a) webpack+vue-loader
b) Browserify+vueify
单文件组件的优点：
a) 可以在一个文件里编辑html、css和js
b) <style scoped></style>样式上的scoped属性规定了该样式的作用域，防止污染到其他组件
c) 可以定义语言，如：<template lang=”jade”></template> 预加载器
<style lang=”less”></style> 预处理器
d) 可以使用webpack打包工具，利用它的功能
七、Vue.js的实例对象
1、概念：当项目引入vue.js后，在全局里会有个js的vue的类，通过vue类来实例化的对象就是vue实例对象。通过关键字new Vue()实例。
2、选项
（1）el - 决定该vue实例装载到页面的什么位置
（2）模板template - 装载的东西，是指包含指令或html的一个片段
如：template: ‘<div><other-component></div>’
（3）数据data - data中的数据会被代理到实例对象里
如：data: {
fruit: ‘apple’
}
可以通过vm.fruit访问代理到的内容
也可以将data中的数据渲染到template中，如：
template: ‘<div>{{ fruit }}</div>’
（4）组件component - 引入其他子组件
如：component: {App}
3、实际项目中如何使用组件和组件间如何引入
（1）通常一个项目里，我们可以在main.js或入口的js中首先实例化一个根组件，把这个根组件挂载到某个容器中，然后引入第一个子组件App，当然App中也会有其他的组件，比如header、sidebar、footer等，我们的每个页面也是以同样的方式引入到App这样的组件里，然后一层层树状结构，形成一个组件树。
4、生命周期
（1）Vue的一个组件或者vue的一个实例化对象在不同的阶段，vue.js提供了不同的钩子，我们通过这些钩子在特定的阶段执行特定的操作。
（2）钩子函数包括：
a) beforeCreate -- 实例刚刚创建的时候
b) Created -- 初始化完成这样的一个事件
c) beforeMount -- 渲染的时候
d) Mounted -- 渲染完毕
e) beforeDestory & destoryed -- 调用摧毁方法
八、Vue.js的组件
1、如何实现vue.js的根组件及组件之间的相互关系？
（1）通过vue的脚手架工具生成项目
（2）在main.js中通过es6语法引入vue的一个库并赋予Vue这个变量：
import Vue from ‘vue’;
‘vue’ -- vue库或模块
Vue -- 变量
（3）实例化根组件并进行数据渲染
先关注main.js和index.html：
在main.js中 import Vue from ‘vue‘ （ES6知识点：P272 import导入模块） /* eslint-disable no-new */ new Vue({ el: ‘#app‘, template: ‘<p>hello world {{ word }}</p>‘, data: { word: ‘hello world‘ } })
（4）Vue是自底向上增量开发
（5）组件注册与引入 -- 实现组件树
通过Vue.component(‘组件名’, {组件对象，含有参数template})方法注册全局组件，此处的组件对象相当于new Vue方法，涉及到一个“语法糖”功能。
a) 注册全局组件
js:
Vue.component(‘my-header‘, {
template: ‘<p>this is my header</p>‘
})
html:
<div id="app">
<my-header></my-header>
</div>
b) 注册局部组件、子孙组件构成组件树
js:
// 孙组件
var myHeaderChild = {
template: ‘<p>this is my header child</p>‘
}
// 子组件
var myHeader = {
template: ‘<p><my-header-child></my-header-child>this is my header</p>‘,
components: {
‘my-header-child‘: myHeaderChild
}
}
new Vue({
el: ‘#app‘,
data: {
word: ‘hello world‘
},
components: {
‘my-header‘: myHeader
}
})
html:
<div id="app">
<my-header></my-header>
</div>
局部组件my-header只能在#app中使用。
PS: 实际项目中在components文件夹中存放组件，跟它同级的App.vue引入不同的component，在导出pages的时候使用components来引入其它component就非常清晰.
c) 避免data引用赋值
如果直接给组件的data赋一些值，这样做如果有多个组件用到这个data，其中一个通过事件改变data后，另一些组件中的data也会发生改变，采用return方法返回所需要的数据可避免这种情况。
var myHeader = {
template: ‘<p><my-header-child></my-header-child>this is my header</p>‘,
components: {
‘my-header-child‘: myHeaderChild
},
data () { （ES6知识点：P90方法简写）
return {
f1: 0,
f2: 2
}
}
}
九、Vue的基本概念
1、全局api -- vue的实例对象提供的全局方法
（1）Vue.extend(options) -- 用于扩展vue的构造器
（2）Vue.set(object, key, value) -- 是给全局vue设置属性的一个方法
（3）Vue.component(id, [definition]) -- 添加全局组件
（4）Vue.use(plugin) -- 通过它来注册类似vue router、vuex之类的插件
2、实例选项
（1）Data--与数据相关：
a) data
b) computed -- 计算属性值
c) props
d) methods
e) watch
（2）与DOM相关的：
a) el
b) template
c) render -- 方法
（3）Lifecycle Hooks -- 生命周期的钩子
（4）Assets
a) directives -- 输入指令
b) filters -- 过滤器
c) components
（5）Misc -- 合集的一些选项
a) extends
b) functional
3、实例属性/方法 -- 以$开头，直接从实例对象调用
root.$data/ root.$on
var root = new Vue({
el: ‘#app‘,
data: {
word: ‘hello world‘
},
components: {
‘my-header‘: myHeader
}
})
// 属性&方法
console.log(root.$data)
root.$on(‘emit‘, function () {
alert(1)
})
4、指令 -- 写在模板里，通过模板与组件的数据进行交互的方法，有时这个指令还包含参数，如v-on:事件
（1）v-html -- 将数据渲染到元素内部
与v-text的区别：前者渲染出的是DOM元素，后者渲染成字符串文本
{{msg}} 与v-text类似，双花括号里可以是一元js表达式
<template>
<div>
<p v-text="hello"></p>
<p v-html="hello"></p>
{{ hello }}
{{ status ? ‘success‘ : ‘fail‘ }}
</div>
</template>
<script>
export default {
data () {
return {
hello: ‘<span>world</span>‘,
status: true
}
}
}
</script>
（2）v-on:事件 缩写@:事件
有时会与修饰器“.”结合 构成v-on:参数.修饰器
var myHeader = { template: ‘<p v-html="" v-on:click="" v-on:keydown.enter=""><my-header-child></my-header-child>this is my header</p>‘, components: { ‘my-header-child‘: myHeaderChild }, data () { return { f1: 0, f2: 2 } } }
常用的修饰器有：
a) .stop 阻止冒泡
b) .prevent
c) .capture
d) .self
e) .{keyCode | keyAlias} -- 如：.enter
f) .native
（3）v-if
（4）v-for -- （详细介绍参见第三章第二项）
5、内置组件 -- 不是自己注册的，而是vue自带的组件
（1）<component></component> 它身上包含:is方法，通过此方法将变量传进去来指定这个组件是个什么样的组件。
（2）<router-view></router-view> 是路由提供的内置组件
（3）<keep-alive></keep-alive> 可以通过它来将上面的router组件进行缓存，即在进行切换的时候，router-view里的内容只要被访问过的就会被缓存起来。
var myHeader = { template: ‘<p v-html="" v-on:click="" v-on:keydown.enter=""> <component :is=""></component> this is my header</p> <keep-alive><router-view></router-view></keep-alive>‘, components: { ‘my-header-child‘: myHeaderChild }, data () { return { f1: 0, f2: 2 } } }
（4）<transition></transition> 动画组件
第三章
一、基本结构
1、在index.html中写下div，并赋予id
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue2.0</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
2、在main.js中通过import引入vue模块（每个项目必引）和相应的组件模块如App.vue
import Vue from ‘vue‘ import App from ‘./App‘ /* eslint-disable no-new */ new Vue({ el: ‘#app‘, render: h => h(App) （ES6知识点：P69 箭头函数） })
3、在App.vue中定义template、script、style三部分，在script中使用export导出要显示的页面
<template> <div> {{ hello }} </div> </template> <script> export default { data () { return { hello: ‘world‘ } } } </script> <style> #app { font-family: ‘Avenir‘, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
二、列表渲染v-for 数组、对象、子组件
1、v-for指令实现列表循环 -- 数组形式
<template>
<div>
<ul>
<li v-for="item in lists">{{item.name}}的价格是{{item.price}}元</li>
或采用v-text指令：
<li v-for="item in lists" v-text="item.name + ‘---‘ + item.price"></li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
lists: [
{
name: ‘apple‘,
price: 34
},
{
name: ‘banana‘,
price: 56
}
]
}
}
}
</script>
需要注意的是，v-for指令应加在要循环的那一项上面，而不是它的父级。
此外，也可以声明每一项的index
<li v-for="(item, index) in lists" :class="{odd: index % 2}">{{ index }}-{{ item.name }}的价格是{{ item.price }}元</li>
注：此处的:class的值如果是对象，一定别忘记写花括号。
2、v-for指令实现列表循环 -- 对象形式
<template>
<div>
<ul>
<!-- <li v-for="value in listObj">{{ value }}</li> -->
或：
<li v-for="(value, key) in listObj">{{ key + value}}</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
listObj: {
name: ‘apple‘,
price: 34,
weight: ‘100g‘
}
}
}
}
</script>
注：这里的v-for指令中必须用key、value in obj，与数组的item(不是定死的)和index in arr相对应。
3、组件之间的相互引用及列表循环之子组件间的渲染
（1）组件间的相互引用
第一步：在script中的export前先把组件引进来
<script> import componentA from ‘./components/a‘ export default {} </script>
注：此处的componentA代表这个a.vue，在其他组件中直接用<componentA></componentA>
第二步：注册 -- 通过components选项注册到当前组件里
export default { components: {componentA}, （ES6知识点：P90属性简写） data () { return { } } }
第三步：使用、渲染 -- 将组件componentA的template渲染到当前的组件的template中
<template> <div> <component-a></component-a> </div> </template>
（2）列表循环之子组件间的渲染
只需要在template中的componetA组件上添加v-for指令即可：
<componentA v-for="(value, key) in listObj" :key="key"></componentA>
组件渲染的意义：
可以动态的将父组件的数据传给子组件componentA，如上例中通过绑定属性key，然后子组件a.vue中可以拿到传过来的值进行使用。
三、列表数据的同步更新方法
1、methods
<template>
<div>
<ul>
<li v-for="item in list">{{ item.name }} -- {{item.price}}</li>
</ul>
<button @click="addItem">addItem</button>
</div>
</template>
<script>
export default {
data () {
return {
list: [
{
name: ‘apple‘,
price: 34
},
{
name: ‘banana‘,
price: 56
}
]
}
},
methods: {
addItem () {
this.list.push({name: ‘pineapple‘, price: 78})
}
}
}
</script>
PS：此处的逻辑是点击按钮，向列表中添加一项。
数组中并不是所有的方法都能触发列表的更新，下面的这些方法可以触发：
push() 在后面添加一项
pop() 从后面删除一项
shift() 在前面添加一项
unshift() 从前面删除一项
splice() 删除或替换一项
sort() 排序
reverse() 反转
这些方法或情形不会触发列表更新：
filter() 过滤
concat() 拼接数组
slice() 切割数组
两种情形：
（1）直接为其中某一项赋值，如vm.items[indexOfItem] = newValue
所以下例这种情况不生效：
methods: {
addItem () {
this.list[1] = {
name: ‘pineapple‘,
price: 78
}
}
}
如果硬要改变第1项实现列表数据更新，就要借助Vue.set()方法：
methods: {
addItem () {
Vue.set(this.list, 1, {
name: ‘pineapple‘,
price: 78
})}
}
其中第一个参数是数组本身，第二个是要被改变的那项的index，第三项是改变成什么。
PS：但在使用Vue的set方法前，需要在该组件中引入Vue组件，否则会报错
<script>
import Vue from ‘Vue‘
export ...
</script>
（2）改变数组的长度，如vm.items.length = newLength
四、vue标签属性和条件渲染
1、通过v-bind:参数名 = “数据” 进行动态绑定标签属性，当数据被修改后，该属性对应的数据在页面也会同步更新。
<template>
<div>
<a :href="link" :title="hello">to baidu</a>
<componentA :dataA = "dataA"></componentA>
</div>
</template>
<script>
export default {
data () {
return {
hello: ‘world‘,
link: ‘http://www.baidu.com‘,
dataA: 112
}
}
}
</script>
PS：1）使用v-bind绑定的是个变量，不使用v-bind绑定的属性就只是个字符串。
如：
<a class="link-href" :class="classStr">to baidu</a>
这里的两个class不会冲突。
:class延伸：class属性的几种添加方式
a) 字符串形式：如上例
b) 对象形式：如果class绑定的是一个对象，就可以根据对象的值进行判断是否展示该对象的属性作为class。如：
<a class="link-href" :class="classObj">点我啊</a>
data () {
return {
classObj: {
‘red-font‘: true,
‘blue-font‘: false
}
}
}
c) 数组形式：
<a class="link-href" :class="classArr">再点我啊</a>
data () {
return {
classArr: [‘red-font‘, ‘blue-font‘]
}
}
PS：以上三种形式都可以直接写到行间。
d) 数组、对象混用
<a class="link-href" :class="[classA, {‘red-font‘: hasError}]">第三次点击</a>
data () {
return {
classA: ‘blue-font‘,
hasError: true
}
}
也可以通过:style内联样式将样式展示到便签上：
<a :style="styleCss">测试内联样式</a>
data () {
return {
styleCss: {
color: ‘red‘,
‘font-size‘: ‘30px‘
}
}
}
这时，可以在js中如methods中对this.styleCss进行操作来改变a标签的样式。
2） 如果v-bind属性绑定到子组件标签componentA上，那么在子组件内部a.vue中也可以使用该属性。
2、条件渲染之v-if、v-show
<template>
<p v-if="isPartA">partA</p>
<p v-show="!isPartA">partB</p>
<button @click="toggle">toggle</button>
</template>
<script>
export default {
data () {
return {
isPartA: false
}
},
methods: {
toggle () {
this.isPartA = !this.isPartA
}
}
}
</script>
PS：v-if和v-show的区别：
v-if在DOM元素中不存在，使用v-show时元素存在，只是加了个display=”none”
二者都可以配合v-else指令使用：
<p v-if="isPartA">partA</p>
<p v-else>no data</p>
五、事件绑定
1、基本/内置的事件绑定通过v-on:参数或缩写@:绑定，有时后会用到修饰符“.”
2、自定义事件绑定
流程描述：在子组件中通过点击触发了自己的方法，这个方法$emit发出一个自定义事件（可带参数），父组件监听这个自定义事件，并触发父组件自己的一个方法，这个方法就是要处理的结果，方法中传递参数，可访问到子组件中$emit发出的那个参数。
父组件App.vue中：
<template>
<comA @my-event="onComaMyEvent"></comA>
</template>
<script>
import comA from ‘./components/a‘
export default {
components: {comA},
data () {
return {
}
},
methods: {
onComaMyEvent (paramFromA) {
console.log(‘onComaMyEvent‘ + paramFromA)
}
}
}
</script>
子组件a.vue中：
<template>
<button @click="emitMyEvent">emit</button></template>
<script>
export default {
data () {
return {
hello: ‘I am a component A!‘
}
},
methods: {
emitMyEvent () {
this.$emit(‘my-event‘, this.hello)
}
}
}
</script>
3、表单事件绑定 -- 双向数据绑定（v-model）
（1）普通的input框
<template>
<input type="text" v-model="myValue">
<p>{{ myValue }}</p>
</template>
<script>
export default {
data () {
return {
myValue: ‘‘
}
}
}
</script>
（2）复选框
<template>
<input v-model="myBox" type="checkbox" value="apple">
<input v-model="myBox" type="checkbox" value="banana">
<input v-model="myBox" type="checkbox" value="pineapple">
<p>{{ myBox }}</p>
</template>
<script>
export default {
data () {
return {
myBox: []
}
}
}
</script>
（3）单选框
<template>
<input v-model="myRadio" type="radio" value="apple">
<input v-model="myRadio" type="radio" value="banana">
<input v-model="myRadio" type="radio" value="pineapple">
<p>{{ myRadio }}</p>
</template>
<script>
export default {
data () {
return {
myRadio: ‘‘
}
}
}
</script>
4、下拉框
<template>
<select name="" id="" v-model="selection">
<option value="apple">apple</option>
<option value="banana">banana</option>
<option value="pineapple">pineapple</option>
</select>
<p>{{ selection }}</p>
</template>
<script>
export default {
data () {
return {
selection: null
}
}
}
</script>
PS：上述的option可以通过v-for循环渲染
select标签及指令不变，只在option上v-for循环即可：
<option v-for="item in selectObj" :value="item.id">{{ item.text}}</option>
<script>
export default {
data () {
return {
selection: null,
selectObj: [
{id: 0, text: ‘apple‘},
{id: 1, text: ‘pineapple‘},
{id: 2, text: ‘banana‘}
]
}
}
}
</script>
另外，也可以把select抽成组件如vSelect，上面也可以绑定自定义事件，并通过操作自定义事件和$emit来实现父子组件之间的通信。
5、v-model.lazy 懒加载
当输入框输完失去焦点后才进行双向数据绑定。
6、v-model.number转换数据类型 由string转为number
注意：字母和数字组合为NaN，数据类型也是number
7、v-model.trim 裁剪空格，只是裁两端空格
六、计算属性computed和数据监听watch
1、计算属性computed是个vue选项，通过computed、通过一个方法来return一个值，这个值可以使用data里面的数据，通过this来引用。会被缓存。
<template>
<input type="text" v-model="myValue">
<p>{{ myValueWithoutNum }}</p>
</template>
<script>
export default {
data () {
return {
myValue: ‘‘
}
},
computed: {
myValueWithoutNum () {
return this.myValue.replace(/\d/g, ‘‘)
}
}
}
</script>
PS：也可以在methods通过方法myValueWithoutNum()来实现该功能。
二者的区别：
计算属性的更新只会根据另外一个值如myValue进行更新，假如myValue不再更新，那么myValueWithNum也不再更新。
而当我们调用方法里的myValueWithNum()时，无论何时调用，都会重新获取该myValue。
2、数据监听watch
<template>
<ul>
<li v-for="item in myList">{{ item.text }}</li>
</ul>
<button @click="changeList">change</button></template>
<script>
import Vue from ‘vue‘
export default {
data () {
return {
myList: [
{text: ‘apple‘},
{text: ‘banana‘}
]
}
},
methods: {
changeList () {
Vue.set(this.myList, 1, {
text: ‘pineapple‘
})
},
tellUser () {
alert(‘will change！‘)
}
},
watch: {
myList () {
this.tellUser()
}
}
}
</script>
适用场景：对列表进行更改，可以在watch里进行监听，只要更改就调用methods的某个方法。
第四章 深入vue组件
I. 组件
一、组件基础
1、组件名、属性在template中最好把驼峰格式转成中线格式。
2、可以通过:is=””方法在template中使用组件。
二、组件之间的通信 -- 主要有三种：属性、emit、slot插槽
父向子传 用props，即标签属性
子向父传 用emit，即通过去触发一个事件，这个事件只有emit触发和on监听两种方法
（1）父传子之静态属性传递
父组件App.vue中：
<template>
<div>
<comp-a number-to-do = 78></comp-a>
</div>
</template>
<script>
import compA from ‘./components/a‘
export default {
components: {
compA
},
data () {
return {}
}
}
</script>
子组件a.vue中：
<template>
<div>
{{ hello }}
{{ numberToDo }}
</div>
</template>
<script>
export default {
props: [‘number-to-do‘],
data () {
return {
hello: ‘I am a component A!‘
}
}
}
</script>
PS：a) 注意以上三处加粗的代码的名字转换。
b) 在子组件中通过props接收父组件传过来的数据，就相当于在自己的data中添加了该数据，在data中就不必重新定义。
c) props除了可以接收数组外，还可以接收对象，对象里可以定义接收的数据类型。
父组件中：
<comp-a number-to-do = 78></comp-a>
子组件中：
props: {
‘number-to-do‘: [Number, String]
},
PS：父组件中的78不管加不加引号，都是String类型，如果子组件中props未指定该类型，就会报错，指定了就不会。
（2）父传子之动态属性传递
父组件App.vue中：
<template>
<div>
<input type="text" v-model="myVal">
<comp-a :my-value="myVal"></comp-a>
</div>
</template>
<script>
import compA from ‘./components/a‘
export default {
components: {
compA
},
data () {
return {
myVal: ‘‘
}
}
}
</script>
子组件a.vue中：
<template>
<div>
{{ hello }}
{{ myValue }}
</div>
</template>
<script>
export default {
props: {
‘my-value‘: [Number, String]
},
data () {
return {
hello: ‘I am a component A!‘
}
}
}
</script>
PS：注意属性如:my-value、事件如@my-event只能用中划线，不能用驼峰方式。
（3）父传子之插槽
如果父组件想向子组件插入一个模板标签元素，要借助<slot>标签。
父组件App.vue中：
<template>
<div>
<comp-a :my-value="myVal">
<p>123</p>
</comp-a>
</div>
</template>
子组件a.vue中：
<template>
<div>
{{ hello }}
{{ myValue }}
<slot></slot>
</div>
</template>
PS：上例中就把父组件放到子组件标签中的p标签插到了子组件的slot位置。
1）插槽的便捷之处：
a) 常用场景：
比如子组件<comp-a>是个dialog，标签里可以插入任何元素<p>、<span>之类的，这样就可以实现弹框内容不同了。
b) 比如子组件<comp-a>中没有内容，可以在插槽<slot>标签中写内容，就会被显示，若子组件有内容，就只展示子组件的内容，而不展示插槽的。
2）关于具名slot -- 可以知道不同部分的插入
父组件中：
<comp-a :my-value="myVal">
<p>123</p>
<p slot="header">xxx header</p>
<p slot="footer">yyy footer</p>
</comp-a>
子组件中：
<slot></slot>
<slot name="header">no header</slot>
balabala
<slot name="footer">no footer</slot>
（4）子传父 使用emit和v-on:，参照第三章P16第五事件绑定。
三、动态组件
1、通过:is=＂变量如：currentView＂，将某个组件渲染到某个位置，我们就可以通过currentView来载入不同的组件到那个位置。
2、常用场景：
比如tab切换，tab切换下面会展现不同的小组件，这个小组件由一个组件切换成另一个组件，所以我们只要在切换的方法中更新currentView就会将组件同步更新到相应的位置。
3、动态组件有些类似路由，换句话说<router-view>就相当于一个动态组件。
跟路由相似，动态组件也支持<keep-alive>内置标签，可以缓存组件，提高组件的加载速度。
<template>
<keep-alive>
<p :is = "currentView"></p>
</keep-alive>
</template>
<script>
import comA from ‘./components/a‘
export default {
components: {comA},
data () {
return {
currentView: ‘com-a‘
}
}
}
</script>
PS：加粗的com-a就是子组件变量，该子组件一定要先import再注册，否则就会报错。
四、总结
II. Vue.js的高级功能
一、过渡/动画
1、css实现过渡
css阶段类名：
通过<transition>标签与v-show或v-if指令以及style样式配合，样式中一般都是opacity/transform样式：
（1）淡入淡出
<template>
<button @click="show = !show">toggle</button>
<div>
<transition name="fade">
<p v-show="show">this is toggle show</p>
</transition>
</div>
</template>
<script>
export default {
data () {
return {
show: true
}
}
}
</script>
<style>
.fade-enter,
.fade-leave-active {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: all .5s ease-out;
}
</style>
PS：style中的.fade-和<transition>标签的name是对应的。
（2）自定义动画，如位移
<template>
<button @click="show = !show">toggle</button>
<div>
<transition name="my-trans">
<p v-show="show">this is toggle show</p>
</transition>
</div>
</template>
<script>
同上
</script>
<style>
.my-trans-enter-active,
.my-trans-leave-active {
transition: all 1s ease-out;
}
.my-trans-enter {
transform: translateY(-500px);
opacity: 0;
}
.my-trans-leave-active {
transform: translateY(500px);
opacity: 0;
}
</style>
（3）接受的过渡状态、多元素过渡
a) 方式一
<template>
<button @click="toggleCom">toggle</button>
<transition name="fade" mode="out-in">
<div :is="currentView"></div>
</transition>
</template>
<script>
import comA from ‘./components/a‘
import comB from ‘./components/b‘
export default {
components: {comA, comB},
data () {
return {
currentView: ‘com-b‘
}
},
methods: {
toggleCom () {
if (this.currentView === ‘com-a‘) {
this.currentView = ‘com-b‘
} else {
this.currentView = ‘com-a‘
}
}
}
}
</script>
<style>
.fade-enter,
.fade-leave-active {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: all .5s ease-out;
}
</style>
PS：a) style中的.fade-和<transition>标签的name是对应的。
b) 与直接用css过渡不同之处在于，标签上不用加v-show/v-if指令。
c) <transition>标签默认的mode为in-out即新的先进来旧的再出去，这样体验很不好，所以修改为out-in即旧的先出新的再进。
b) 方式二
<template>
<button @click="show = !show">toggle</button>
<transition name="fade" mode="out-in">
<p v-if="show">I am show</p>
<div v-else>I am not show</div>
</transition>
</template>
<script>
import comA from ‘./components/a‘
import comB from ‘./components/b‘
export default {
components: {comA, comB},
data () {
return {
currentView: ‘com-b‘,
show: true
}
}
}
</script>
<style>
.fade-enter,
.fade-leave-active {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: all .5s ease-out;
}
</style>
PS：在vue中如果<transition>中的两个元素是相同标签如都是<p>，则不会执行该动画，需要添加key区分两个标签，动画才能正常执行。
<transition name="fade" mode="out-in">
<p v-if="show" key="0">I am show</p>
<p v-else key="1">not in show</p>
</transition>
2、JS过渡
— 同样也分为一些过渡阶段，与css过渡不同的是，js通过v-on来监听这些事件钩子。
<template>
<transition
@before-enter="beforeEnter"
@enter="enter"
@leave="leave"
:css="false">
<p class="animate-p" v-show="show">I am show</p>
</transition>
<br><br><br><br><br>
<button @click="show = !show">toggle</button>
</template>
<script>
import $ from ‘jquery‘
export default {
data () {
return {
show: true
}
},
methods: {
beforeEnter (el) {
$(el).css({
left: ‘-500px‘,
opacity: 1
})
},
enter (el, done) {
$(el).stop().animate({
left: 0,
opacity: 1
}, {
duration: 1500,
complete: done
})
},
leave (el, done) {
$(el).stop().animate({
left: ‘500px‘,
opacity: 0
}, {
duration: 1500,
complete: done
})
}
}
}
</script>
<style>
.animate-p {
position: absolute;
left: 0;
top: 0;
}
</style>
注意：（1）<transition>标签不需要name，但需要绑定属性:css=”false”,避免该标签去检查css中指定的选项。
（2）每个方法其实都要操作传过来的参数el，这个el是<transition>体内的DOM元素。
（3）其中的两个方法enter、leave除了参数el外，还有个done（必须调用），是在两个动作执行完了执行。
（4）用js操作时可能需要用到jquery等公用库，最好把它在index.html中引入，因为那儿的代码不会经过打包和处理资源，只会作为一个入口的页面往里加东西。
PS：如何在项目中引入jquery？
在当前项目的目录下（就是package.json），运行命令 cnpm install jquery --save-dev 这样就将jquery安装到了这个项目中。然后修改webpack.base.conf.js(在build文件下)两个地方：
小注：上面的--save是为了更新package.json，使得别人在用的时候也是更新后的。
a) 加入
var webpack=require(‘webpack‘);
b) 在module.exports的里面加入
plugins: [
new webpack.optimize.CommonsChunkPlugin(‘common.js‘),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
c) 最后在main.js中加入import $ from ‘jquery‘,完成jquery的引入
二、自定义指令
通过选项directives定义如v-color指令，在directives指令选项中定义color函数，传el和binding两个参数，el就代表v-color指令所在的元素，binding是个对象，指它绑定的一些变量或计算表达式等，binding.value指的是指令接收到值。
1、局部指令 -- 把该指令定义到普通组件的directives里
<template>
<p v-color="‘red‘">这是一个段落</p>
<p v-custom="‘40px‘">第二段</p>
</template>
<script>
export default {
directives: {
color (el, binding) {
el.style.color = binding.value
},
custom: {
bind (el, binding) {
},
inserted (el, binding) {
el.style.fontSize = binding.value
}
}
}
}
</script>
2、全局指令 -- 把该指令定义到main.js的根组件的directives里，定义方法同上
PS：如上例中，color指令方法为合写，custom指令方法为分写，详细介绍参见下面：
3、自定义指令适用场景
实现该元素一插入到页面就获取焦点：
<template>
<input type="text" v-focus>
</template>
<script>
export default {
directives: {
focus: {
inserted (el, binding) {
el.focus()
}
}
}
}
</script>
三、插件 -- 功能完整的一套组件，独立于vue而存在的
1、例如vue-router，如何安装并引用呢？
第一步，在当前项目的目录下（就是package.json），运行命令cnpm install vue-router --save
第二步，如果全局使用，就在main.js中import VueRouter from ‘vue-router’，等同于var VueRouter = require(‘vue-router’)
第三步，注册使用该插件Vue.use(VueRouter)
第四步，实例化该插件let router = new VueRouter()
第五步，正式使用，在根组件中直接使用上面定义的router
以下为入口文件main.js：
import Vue from ‘vue‘
import App from ‘./App‘
import VueRouter from ‘vue-router‘
// 注册
Vue.use(VueRouter)
// 实例化
let router = new VueRouter()
/* eslint-disable no-new */
new Vue({
router, // 正式使用
el: ‘#app‘,
render: h => h(App)
})
2、例如vue-resource，它的安装同vue-router，在main.js中引入时直接注册即可，不需要实例化，这样在每个子组件的方法中都可以直接采用this.$http.get()方法。
更多插件详见https://github.com/vuejs
四、单文件组件和vue-cli
1、单文件组件概念：vue本身是通过vue-cli工具搭建成的，单文件组件是.vue文件，它把template、script和css都集中到一个文件里，实现组件及组件树。所有的组件都是个.vue文件，最终在main.js中将根组件App.vue拼装到页面里。
单文件组件的实现得益于vue-loader，配合webpack，经过一定的处理，最终把template和css插到组件里。
关于css:
在style标签上添加scoped，就限制该css为当前组件的样式，如果不加scoped，样式就会泄漏到全局，导致所有引入该组件的父组件也会接收到这样的样式。
2、vue-cli
（1）用于初始化vue项目，是vue官方提供的一个脚手架工具。
（2）使用vue-cli的优势：
a) 它是一套成熟的vue项目架构设计，会随着版本的更迭而更新（现为2.0）
b) 提供了一套本地的测试服务器
c) 提供了一套自己的打包上线的方案webpack
（3）vue-cli对系统的要求 -- 它是命令行的一个工具
a) 系统必须装NodeJs（>=4.0）
b) git 下载代码
c) 一个能使用Node的命令行终端
（4）使用流程（使用NodeJs的包管理工具）：
a) 全局安装vue-cli npm install vue-cli -g
b) 初始化项目 vue init webpack my-project 规定了使用webpack打包方式
c) 安装项目依赖 npm install
d）在localhost启动测试服务器 npm run dev
或：生成上线目录（部署） npm run build
（5）缺少第五章项目安装等笔记
五、ES6语法
1、import、export
（1）语法格式
import 变量名 from ‘’
export default {}
export后面必须跟default，只有这样才可以直接import一个default的内容作为一个变量来引入当前文件。也可以引入或导出一个变量import/export {变量名}，但必须带花括号。
2、对象缩写
如componets: {hello}
3、区分var和let、const （ES6知识点）
用var在代码块中定义变量，在外面也能取到该变量，用let可避免这种泄露。
const用来声明常量，也可以避免泄露。
4、函数简写
如data () {}
六、vue-router
1、概念：根据不同的地址发到不同的页面
2、单页面应用：不用频繁地去请求服务器，我们只是通过ajax在切换的时候请求新数据，就实现了不需要刷新整个页面的功能
3、什么是前端路由？
举例说明，当我们请求foo页面，展示其中一个页面，请求bar时展示另一个页面。
前端路由在由一个页面请求另一个页面时，公共的框架、css、js、环境之类的不再请求，只请求页面的不同之处。
4、设置路由
（1）安装路由 cnpm install vue-router --save
（2）在入口文件main.js中引入vue-router
import Vue from ‘vue‘
import App from ‘./App‘
import VueRouter from ‘vue-router‘
// 注册
Vue.use(VueRouter)
// 实例化
let router = new VueRouter()
/* eslint-disable no-new */
new Vue({
router, // 正式使用
el: ‘#app‘,
render: h => h(App)
})
（3）使用vue-router有三个关键点：
a) 一份map 规定什么样的地址访问什么样的页面或组件，在它上上级routes并列要加哈西mode: ‘history’ — 路由map
b) router-view 规定什么样的位置或什么样的区域显示不同的页面 — 路由视图
c) router-link 在页面上如何跳转到下个页面 — 路由导航
如何使用？
第一步，提前写好两个组件apple.vue和banana.vue，并在main.js中引入组件：
import Apple from ‘./components/apple’
import Banana from ‘./components/banana’
第二步，在上述实例化中通过routes选项进行配置（映射关系）：
let router = new VueRouter({
mode: ‘history’,
routes: [
{
path: ‘/apple’,
component: Apple
},
{
path: ‘/banana,
component: Banana
}
]
})
第三步，规定在路由里设定的组件在哪显示 —— 在App.vue的template中
<template>
<router-view></router-view>
</template>
第四步，访问地址分别为localhost:8080/#/apple和localhost:8080/#/banana，第二步中使用Mode哈西，地址中就不需要写#了。
另一种方式，可以使用<router-link>组件，并绑定:to属性
<template>
<router-view></router-view>
<router-link :to=”{path: ‘apple’}”>toApple</router-link>
<router-link :to=”{path: ‘banana’}”>banana</router-link>
</template>
这个组件会默认渲染成一个a标签，to代表它的href
5、路由参数
1、我们原来的地址会加上?type=1&mode=2之类的参数，vue-router要在映射表中加入参数：
let router = new VueRouter({
mode: ‘history’,
routes: [
{
path: ‘/apple/:color/detail/:type’,
component: Apple
},
{
path: ‘/banana,
component: Banana
}
]
})
PS：上面的path中只有带引号的才是能被下面的$router.params获取的参数。
2、使用时，在地址中直接通过’/参数值’添加：
localhost:8080/apple/red/detail/3
3、在组件如apple.vue内部如何获取刚设定的这个参数？
设完参数以后，路由会往每个组件的全局的router对象里插入当前页面的params，我们在每个子组件里就可以通过this.$route这样的全局对象来获取当前路由的参数，获取到的是一个参数对象，如{color:’red’, type: 3}，或者在template用花括号直接访问如{{$route.params.color}}。
apple.vue中：
<template>
<p>{{ $route.params.color }}</p>
<button @click=”getParam”>getParam</button>
</template>
<script>
export default {
methods: {
getParam () {
console.log(this.$route.params)
}
}
}
</script>
PS：如果在映射表的path中设置了参数，但访问路径中不写这个参数，就找不到这个路由即访问不到相应的页面。
6、路由嵌套vue-touter
在映射表中接着写children，这个children对应的值也是个数组，同样也包含path和component两个属性，该子组件通过<router-view>插入到父组件即apple.vue中，渲染出的页面同样会显示在apple.vue页面。
main.js中路由映射表：
先引入RedApple组件：
import RedApple from ‘./components/redapple’
let router = new VueRouter({
mode: ‘history’,
routes: [
{
path: ‘/apple’,
component: Apple,
children: [
path: ‘red’,
component: RedApple
]
},
{
path: ‘/banana,
component: Banana
}
]
})
该RedApple的父组件apple.vue中：
<template>
{{hello}}
<router-view></router-view>
</template>
export def...
访问地址：
localhost:8080/apple/red
PS：同样我们在App.vue中也可以通过<router-link :to=”{path:’apple/red’}”></router-link>实现相同的路由嵌套。
7、命名的路由视图、路由重定向
（1）在router-link的to属性的值有以下几种：
a) <router-link :to=”’apple’”></router-link>
b) <router-link :to=”{path: ‘apple/red’}”></router-link>
c) <router-link :to=”{path: ‘apple’, param: {color: ‘yellow’}}”></router-link>
d) 具名的路由 <router-link :to=”{name: ‘applePage’}”></router-link>
e) 由于router-link默认生成a标签，要生成其他标签如在ul中生成li，则需加个属性tag=”li”
f) router-link标签被点中之后会自动添加一个class=”router-link-active”
PS：在组件template中的router-link这样的导航叫做声明式的导航。
（2）我们也可以在main.js里采用router.push()方法进行编程式导航，其中push的内容和router-link的to所能指定的格式相同。
怎么使用呢？
比如router.beforEach()方法指每次操作时都为它设定一些操作，此时我们可以进行一些异步操作，比如检查用户信息，如果是未登录状态，可以在回调里使用router.push()把页面导航到登录页。
router.beforEach(router.push(‘login’)或router.push({path: ‘login’})或router.push({name: ‘loginPage’}))
（3）命名的路由视图(第五章4-8 26分钟处）
给App.vue中的多个router-view标签命不同的名字，在main.js的映射表的component中给不同的视图指定不同的组件。
App.vue中：
<router-view name="bananaA"></router-view>
<router-view name="bananaB"></router-view>
main.js中：
routes: [
{
path: ‘/banana‘,
components: {
bananaA: Banana,
bananaB: RedBanana
}
}
]
（4）路由重定向
在映射表中加一项，采用redirect属性将地址重定向到其他页面：
main.js中：
routes: [
{
path: ‘/’,
redirect: ‘/banana’
},
{
path: ‘/banana‘,
components: {
bananaA: Banana,
bananaB: RedBanana
}
}
]
8、使用过渡制作路由跳转动画
在App.vue中：
<transition name="fade">
<keep-alive>
<router-view></router-view>
</keep-alive>
</transition>
9、总结
（1）路由map 路由视图 路由导航
（2）路由参数 嵌套路由
（3）命名路由和路由视图
（4）重定向
七、vuex — 状态管理插件（原理）
1、原理：有个统一的数据中心store，它用来维护状态数据，每个组件进行更新的时候就通知数据中心，数据中心再将共享的状态触发每个调用这个组件的更新。
2、flux模型 用来实现vuex的流程
vue的组件通过Actions这样一个动作来操作Mutations，Mutations控制数据中心的状态state，状态更改后再反映到页面组件的一个渲染render，下图中绿框虚线标的部分是vuex做的事情。
这个模型的设计含有很多规则，比如：
（1）Actions去执行异步的操作，比如去后台调用API（Backend API）
（2）Mutations是同步地去更改State数据的一种方法，它可以和Devtools交互
这套模型了保证数据的单项流动：
Vue Components通过Dispatch这样的动作去触发Actions，Actions通过Commit去触发Mutations，Mutations直接操作数据。
PS：只适用于复杂项目，也可以自己建造store，然后对外提供些事件接口及更新视图的方法。
3、vuex状态管理（实例）
（1）安装vuex cnpm install vuex --save
然后重启服务器cnpm run dev
（2）使用：
第一步，在main.js中引入插件vuex
import Vuex from ‘vuex‘
第二步，注册使用
Vue.use(Vuex)
第三步，实例化
let store = new Vuex.Store({
state: {
totalPrice: 0
},
mutations: {
increment (state, price) {
state.totalPrice += price
},
decrement (state, price) {
state.totalPrice -= price
}
}
})
第四步，在根实例中引入store
new Vue({
store
})
第五步，在App.vue中展示totalPrice
<template>
{{ totalPrice }}
</template>
PS：此处的totalPrice为属性或方法，所以需要在script中定义
<script>
import Apple from ‘./components/apple’
export default {
components: {
Apple
},
computed: {
totalPrice () {
return this.$store.state.totalPrice
// PS：此处的totalPrice是刚才在main.js的store实例的state中定义的，和本页面的不一样
}
}
}
</script>
第六步，在子组件apple.vue中添加按钮并对totalPrice进行操作
<template>
<button @click=”add”>add 5<button>
<button @click=”minus”>minus 5</button>
</template>
<script>
export default {
data () {
price: 5
},
methods: {
add () {
this.$store.commit(‘increment’, this.price)
},
minus () {
this.$store.commit(‘decrement’, this.price)
}
}
}
</script>
PS：子组件中用$store.commit方法感觉和子组件向父组件传递事件类似用$emit方法，可一并记忆理解。
其中第三步和第六步可改为：
第三步，实例化
let store = new Vuex.Store({
state: {
totalPrice: 0
},
mutations: {
increment (state, price) {
state.totalPrice += price
},
decrement (state, price) {
state.totalPrice -= price
}
},
actions: {
increase (context, price) {
context.commit(‘increment’, price)
},
decrease (context, price) {
context.commit(‘decrement’, price)
}
}
})
第六步，在子组件apple.vue中添加按钮并对totalPrice进行操作
<template>
<button @click=”add”>add 5<button>
<button @click=”minus”>minus 5</button>
</template>
<script>
export default {
data () {
price: 5
},
methods: {
add () {
this.$store.dispatch(‘increase’, this.price)
},
minus () {
this.$store.dispatch(‘decrease’, this.price)
}
}
}
</script>
PS：actions只能去调用mutations，不能直接修改state；
第一个参数context指当前的store；
在子组件中就不再commit mutations了，而是dispatch actions；
第二种方式把actions作为中介达到执行increment的目的。
PS：actions和mutations的区别：
actions里可以进行异步操作，然后再去触发mutations；而mutations里必须是同步操作数据（即依次向下执行操作）。所以按照之前的图形，跟后端的api接口都必须放在actions里。
举例说明：
actions: {
increase (context, id) {
api(id, function(price){
context.commit(‘increment’, price)
})
}
}
4、vuex除了state、mutations和actions这三个关键的数据流环节以外，还提供了getters用来获取状态集state里的数据。
因此main.js的store实例可改为：
let store = new Vuex.Store({
state: {
totalPrice: 0
},
getters: {
getTotal (state) {
return state.totalPrice
}
},
mutations: {
increment (state, price) {
state.totalPrice += price
},
decrement (state, price) {
state.totalPrice -= price
}
},
actions: {
increase (context, price) {
context.commit(‘increment’, price)
},
decrease (context, price) {
context.commit(‘decrement’, price)
}
}
})
相应地，App.vue中的计算属性computed里可改为：
computed: {
totalPrice () {
return this.$store.getters.getTotal
}
}
5、modules
可以把状态集分成不同的模型，每一个module都维护一套自己的state、mutations、actions和getters，这些状态集module最后合成一个总的对外store接口，我们可以根据不同的参数取不同模型里的状态。
const moduleA = {
state: {...},
mutations: {...},
actions: {...},
getters: {...}
}
const moduleB = {
state: {...},
mutations: {...},
actions: {...},
getters: {...}
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA’s state
store.state.b // -> moduleB’s state
补充：vuex模块化在实际项目中的应用 *****
1、 实际项目结构
2、 根据以上结构：
（1） 数据中心为store文件夹，包括公用的actions.js和getters.js以及index.js、mutations.js，公用的actions.js和getters.js对mutations的动作进行映射
（2） 数据放在modules的对应模块里如cart.js和products.js，每个数据模型里（即js里）也包含actions和mutations
（3） 最终的输出是在store>index.js里，将vuex.store进行实例化并将所有的actions、getters、modules等输出出来。
3、 简单案例：
Store中只包括modules文件夹和index.js
4、 详细步骤：
（1） 安装vuex
npm install vuex --save
（2） 在store>index.js中引入vuex，并使用Vuex.use方法，故还需引入vue
index.js:
import Vuex from ‘vuex’
import Vue from ‘vue’
Vue.use(Vuex)
引入对应的数据模型，并导出实例化的vuex.store:
import OrderList from ‘./modules/orderList’
export default new Vuex.Store({
modules: {
OrderList
}
})
（3） 在入口文件main.js中引入store，并配置到全局
main.js：
（4） 使用router配置orderlist的访问地址http://localhost:8080/orderList/
router>index.js：
并渲染到父组件中，此处为app.vue：
（5） 在每个数据模型中进行设置
PS：
1） state中存放数据
2） 由于页面无法直接调用state中的数据，所以采用getters调用state的值
3） actions中进行异步操作
此处通过es6的解构赋值，把参数可以写成{commit, state}，commit用来调用mutations，state获取状态集里的数据
4） mutations同步地对状态state进行更改
此处有两个参数state和另一个参数，该参数是我们要赋值的state中的某个数据，是在actions或页面要传进去的
严格来讲，只允许mutations对state进行更改，不允许actions
（6） 在相应的页面组件中调用store的方法，采用this.$store
1） 动态获取页面初始化数据tableData
2） mounted时主动调用actions，对orderList进行赋值
此时状态集中的orderList被更新，当然上面computed中依赖于orderList的tableDate也相应更新，template中的渲染层也会相应更新
（7） 另一个功能：参数更改，页面同步刷新
1） 在orderList.js的mutations中增加方法updateParams
2） 在orderList.vue中调用mutations的方法
（8） 采用types方式，把各模块方法或变量都放在同一个js中定义
在modules同级建立types文件夹并新建相应的js
types>orderList.js：
modules>orderList.js：
1） 引入所有相关的types:
2） 使用该变量
标签：route ade 表达式 ant lin 点击 cap imp src
原文地址：http://www.cnblogs.com/uno1990/p/7753599.html
