vue2.0 API
2018-07-25 本文已影响25人
杀个程序猿祭天
-
指令 v-model
-
属性绑定 bind:src/:src
-
事件 @click="click_($event)"
-
过滤器 filter:{ }
-
自定义指令 Vue.directive("hello",{})
-
动画
- 动画 <transition name='fade'></transition>
- 多元素动画 <transition-group></transition-group>
- animation插件 <transition enter-active-class="animated bounceInDown"></transition>
-
生命周期 created(){}
-
计算属性 computed:{}
-
方法 methods:{}
-
监听 watch:{name(newvalue,oldvalue){}}
-
组件通信
- 父传子 <child-com :name="name"></child-com>
- 子传父 自定义事件，在父组件中监听
- 兄弟之间 创建空vue实例
- 组件模板 <template id="web"></template>
- 引用模板 template:'#web',
- 组件
- 定义组件 <child-com ></child-com>
- 动态组件 <component :is="flag2"></component>
- 组件缓存 <keep-alive><component :is="flag2"></component></keep-alive>
- 全局组件
- slot分发
<template id="b">
<div>
<slot>如果有内容就显示组件的内容</slot>
</div>
</template>
- vue实例的属性和方法
- 属性
vm.属性名
vm.$el 获取vue实例相关的元素s DOM元素
vm.$data 获取data数据
vm.$options 获取vue实例里面的参数（methods，created，自定义属性等）
vm.$refs 获取页面中所有添加ref属性的元素
- 方法
vm.$mount() 手动挂载
vm.$destroy() 销毁实例 解除指令和事件 属性还在
vm.$nextTick(callback); DOM元素更新完成以后执行的函数
vm.$set(obj,key,value) 添加属性 Vue.set
vm.$delete(obj,key) 删除属性 Vue.delect
vm.$watch("属性"，function(newValue,oldValue){}) 监听数据发生变化，返回新值和旧值
- 路由
- 路由的使用
<router-link to='/index'>首页</router-link>
<router-view></router-view>
- 路由的嵌套
{
path:'/user',
component:user,
children:[
{
path:'/login',
component:login
}
]
}
- vuex
- state 定义属性
- getters 获取属性
- actions 定义方法
- commit 提交变化
- mutations 定义变化
- this.$store
- mapGetters，mapActions
- LESS
<style lang="less">
@width:100px;
h{
width:@width;
}
</style>
-
Element UI组件库
-
ajax axios
- axios({method:'get',url:""}).then(res=>{}).catch(err=>{})
- axios.get('url',params:{naem:'',age:''}).then(res=>{}).catch(err=>{})
- axios.post('url',{naem:'',age:''}).then(res=>{}).catch(err=>{})
- jsonp resource
$http.jsonp("url",{params:{wd:this.name},jsonp:'cb'}).then(res=>{}).catch(err=>{})
