vue.js基礎學習（2）

vm=new vue({

date:{name:"aa"，

user：{「name」:"lsm"}});

獲取屬性值

1：vm.name

2：vm.$data.name

3：獲取vue關聯的實例  vm.$el

vm.$el.style.color="red"

4:獲取自定義屬性

vm.$options.name

5:獲取全部添加了ref屬性的元素

vm.$refs         <h2 ref="hello"></h2>    vm.$el.hello.style.color="red"

6:$set  $delete  對象屬性的添加和刪除

method:{

add(){

this.$set(this.user,"age",22)

}

del(){

this.$delete(this.user,"age")

}

}

7:全局組件

建立方法1：var Component =vue.extend({

template:'<h1>hello</h1>'

})

vue.component(「hello」,Component)

 建立方法2： vue.component(「wrold」{

template:'<h1>wrold</h1>'

})

引用：<hello></hello>

8:局部組件

1.自動掛載

components:{

"my-adress":{

template:'<h1>wrold</h1>'},

"my-name":{

template:'<h1>{{name}}</h1>',

data(){

return {"name":"lsm"}}}

}

 2.手動掛載

"my-name":{

template:'#myname',

data(){

return {"name":"lsm"}}}

}

 

<template id="myname"><template>

9.$nextTick  用於延時，待頁面渲染之後再獲取dom元素的值

10:組件之間的傳值

1）：父傳子   父使用指定變量傳參（如a="2"b="6"），子組件使用對應的參數(props:["a","b"])接收，參數名對應,若是須要限制類型，

寫法爲

props:{

a:string,

b:string,

name:{

type:string,

required:false

},

age:

{type:number,  數據類型

default:10,  默認值

validator:function(){return value<0}  參數校驗

}

2）：子傳父  $emit發射

this.$emit("name",parm1,parm2)      寫在子組件中

<my-child message1="dddd" message2="ffff"@name=「getSubData「></my-child>

也能夠在生命週期mounted中使用vm.$on("name",name=>{this.name=name})    $on用於監聽指定事件

觸發getSubData爲父組件的方法用於獲取廣播過來的參數

3）：非父子關係組件之間使用$emit發射的方式