vue2.0学习笔记

eumnq8

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');