共计 3347 个字符，预计需要花费 9 分钟才能阅读完成。
1.Vue 的使用场景：
* 在 html 中通过 script 引入
* 在 webpack 中，由于配置有处理各种文件的 loader，所以可以用 import 引入
2.Vue 指令
v-cloak
v-bind ==> :
v-on ==> @
v-text
v-html
v-modal
:class : 简单值，数组，对象，数组中对象
:style：数组，对象
v-for
v-if
v-show
自定义全局指令
Vue.derictive(自定义指令名字, 指令生效周期配置对象 {
bind : (被绑定的那个元素的 js 原生对象 el) => {}, ==> 一旦绑上马上调用
inserted : (el 同上) => {}, ==> 元素插入到 DOM 之后再调用
updated : (el 同上, binding) => {}
}
自定义局部指令
var vm2 = new Vue({
el: ‘#app2’,
data: {},
methods: {},
directives: {
‘fontweight’: {
bind: function (el, binding) {
el.style.fontWeight = binding.value
}
},
}
})
3.Vue 事件修饰符
.stop
.prevent
.capture
.self
.once
.self 和.stop 在阻止冒泡行为上的区别
4.Vue 过滤器全局过滤器的参数传递规则一样；如果全局过滤器和局部过滤器的名字相同，在组件内部使用过滤器时，优先使用自己的内部过滤器
全局过滤器
Vue.filter(‘ 自定义过滤器名字 ’ , function( 第一参数来自于管道符 | 前的数据，后面的参数是该过滤器被调用时候传递过来的参数){}
局部过滤器
定义在 Vue 实例中的 filter 属性中
var vm2 = new Vue({
el: ‘#app2’,
data: {},
methods: {},
filters: {
dateFormat: function (dateStr, pattern = ”) {}
}
},
})
5.Vue 按键修饰符按键修饰符像.self 这样的事件修饰符一样，是用在 v -on 事件后面的。
.enter
.tab
.up
.down
.left
.right
.delete
.esc
.space
自定义全局按键修饰符
Vue.config.keyCodes. 自定义按键修饰符名字 = 按键的码值
6.Vue 组件生命周期
beforeCreated(){} ==> data 和 methods 中数据还没初始化好
created(){} ==> data 和 methods 中的数据已经初始化好
beforeMount(){} ==> 模板已经在内存中编译好了，但是没有被渲染到页面上
mounted(){} ==> 内存中的模板已经渲染到了页面行，用户可以看到页面了
beforeUpdate (){} ==> data 中的数据已经更新，但是界面上的数据没有更新
updated (){} ==> 界面上数据更新结束
beforeDestory (){} ==> 此时 data 和 methods 中数据还可以使用
destoryed (){} ==> data 和 methods 中数据都不能使用了，Vnode 被完全销毁
7.Vue-resource 类似于 axios，但是依赖于 Vue.js. 引入后自动给 Vue 实例添加上了 $http 属性
$http.get()
$http.post()
$http.jsonp()
均返回一个 promise
this.$http.get(‘http://vue.studyit.io/api/getlunbo’).then(function (result) {
console.log(result.body)
})
8.Vue 动画
类名
v-enter
v-enter-active
v-enter-to
v-leave
v-leave-active
v-leave-to
使用第三方类名
<transition
name=’my’
enter-active-class=”bounceIn”
leave-active-class=”bounceOut”
:duration=”{enter: 200, leave: 400}”>
<h3 v-if=”flag” class=”animated”> 这是一个 H3</h3>
</transition>
动画的钩子函数
<transition
@before-enter=”beforeEnter”
@enter=”enter”
@after-enter=”afterEnter”>
<div class=”ball” v-show=”flag”></div>
</transition>
beforeEnter (要执行动画的那个对象的原生 DOM 对象 el) {} ==> 动画入场之前，设置动画的起始样式
enter (el , done) {done()} ==> 动画开始后样式，设置动画结束样式
afterEnter () {} ==> 动画完全结束回调
9.Vue 创建组件
（1）组件模板对象创建
方式 1：
Vue.extend({
template : ”
})
方式 2：
直接一个 Object
（2）注册全局组件
Vue.component(自定义组件名字, 组件模板)
（3）组件 data 和 Vue 实例 data 区别
组件 data 必须 return object
10. 组件切换和动画
组件切换
<component :is=”comName”></component>
comName 是变量
组件切换时的动画
<!– 通过 mode 属性, 设置组件切换时候的 模式 –>
<transition mode=”out-in”>
<component :is=”comName”></component>
</transition>
11. 组件父子间传值
父组件传值给子组件
传单纯值：
<com1 v-bind:parentmsg=”msg”></com1>
传函数
<com2 @func=”show”></com2>
this.$emit(‘func’, this.sonmsg)
子组件给父组件传值
通过父组件传入函数的参数
$refs
12.Vue 路由
和 Vue-resource 一样，需要引进一个 vue-router.js 文件
let routeObj = new VueRouter({
routes : [
{path : ” , redrect : ” , component : null}
]
})
var vm = new Vue({
el: ‘#app’,
router: routerObj
});
路由参数
<router-link to=”/login?id=10&name=zs”>login</router-link>
routes: [
{path: ‘/login/:id/:name’, component: login , children : [{path , redrect , component , children}] },
]
$route.params.id
一个路由对应多个组件
<router-view></router-view>
<div class=”container”>
<router-view name=”left”></router-view>
<router-view name=”main”></router-view>
</div>
var router = new VueRouter({
routes: [
{
path: ‘/’, components: {
‘default’: header,
‘left’: leftBox,
‘main’: mainBox
}
}
]
})
13.watch 监视 data 中数据变化或者路由变化
var vm = new Vue({
el: ‘#app’,
data: {firstname: ”,},
watch: {// 使用这个 属性，可以监视 data 中指定数据的变化，然后触发这个 watch 中对应的 function 处理函数
‘firstname’: function (newVal, oldVal) {
this.fullname = newVal + ‘-‘ + this.lastname
},
‘$route.path’: function (newVal, oldVal) {==> 只需要这是一个变量
if (newVal === ‘/login’) {
console.log(‘ 欢迎进入登录页面 ’)
} else if (newVal === ‘/register’) {
console.log(‘ 欢迎进入注册页面 ’)
}
}
}
});