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('迎接进入注册页面')
}
}
}
});