|
1.模板必须有个根节点,比如加个div
2. Vue.componet(组件名,{
data:{}
methods:{}
template:{}
})
3. Vue.extend
4. var Home = {
template:{}
}
5. new Vue({
el:'',
data:{},
componets:{},
methods:{}
})
6. 组件生命周期
beforeCreate 实例创建之前
created 实例已经创建完成
beforeMount 模板编译之前
mounted 模板编译完成了
beforeUpdate 组件数据更新之前
updated 组件数据更新完毕之后
beforeDestory 组件销毁前
destoryed 组件销毁后
7. this.$destroy() 销毁组件自己
8. v-for
2.0循环里默认可以添加重复数据
2.0去掉了一些隐式的变量 $key $index
<li v-for="(val,index) in array"/>
想用$key和$index,自己添加
默认2.0可以添加重复数据
v-bind:key提高循环性能
9. 自定义按键(新的)
Vue.config.keyCodes.ctrl = 17
10. 系统内置过滤器没了可以自定义过滤器
Vue.filter('toDou', function(input){
})
{{msg | toDou}}
过滤器传参 {{msg|toDou(1,2,3) }}
11. 组件通信
vm.$emit()
vm.$on()
父组件和子组件
props:[]
父组件每次传一个对象给子节点
vuex 管理组件通信的
12、v-on:click="" 可以简写@click=""
@click="show($event)"
$event 传入事件对象
@click.stop 阻止冒泡 ev.cancelBubble
@contextmenu.prevent ev.preventDefault 阻止默认
ev.keyCode
@keydown @keyup
keyCode==13回车键
@keyup.enter="show()"
@keyup.down
@keyup.left / right /up
13、属性是用v-bind:src绑定的
v-bind:src可以简写为:src
:class="[]"是一个数组
:calss="{}"
:style="{}"
14、v-model 这些是扩展的指令 v-for
15、模板
{{}} 数据更新模板变化
{{*}}数据只绑定一次
{{{}}}html转义
16、过滤器
{{‘welcome’ | uppercase}}
{{‘welcome’ | lowercase}}
{{‘welcome’ | capitalize}}首字母大写
{{‘welcome’ | currency '¥'}}
17、交互 (vue本身不支持交互)
引入 vue-resource
this.$http.get();
res.status res.data
this.$http.post(); {emulatorJSON:true}
this.$http.jsonp 跨域取数据 jsonp:cb
keyCode.up == 38 keyCode.down == 40
keyCode.enter == 13
18、更新data里字段值 this.$set(this.$data, 'yxtstitle', 'hahaha');
|
|