色婷五一,精品亚洲欧美一区二区三区日产 ,精选国产AV剧情,无码丰满少妇2在线观看

18600329666

咨詢技術(shù)專家

掃一掃
與技術(shù)專家在線溝通

Menu
前端軟件開發(fā)技術(shù)VUE使用(第二部分)

來源：未知　時間：2018-41-21　瀏覽次數(shù)：105次

上一部分《前端軟件開發(fā)技術(shù)VUE使用》主要介紹了vue基礎使用，本文主要講解，屬性值相關(guān)，以及組件，vue子實例與父實例的自定義事件監(jiān)聽，傳值，及自定義組件
六、vue中的屬性值的綁定和屬性數(shù)據(jù)值的雙向綁定
  • 1.html元素屬性值使用data數(shù)據(jù)（插值表達式無法實現(xiàn)，插值表達式只實用與內(nèi)容）v-bind:屬性=“dataname”的使用,v-bind:tilte="tiltessss"或者:title="tiltessss",引號中的內(nèi)容實際是js內(nèi)容可以寫js語句
<div id="root" ><div v-bind:tilte="tiltessss">dddd</div></div>
new vue ({
el:"#root"
data:{
tiltessss:"is ffffff"
}
})
  • 2.數(shù)據(jù)雙向綁定v-model=“values”，是指html元素（如input）屬性值改變vue data中的值改變，vue data中的值改變則html元素屬性值，
<div id="root" >
<input v-model="content">
<div >{{content}}</div>
</div>
new vue ({
el:"#root"
data:{
content:"dddd"
}
})
七、計算屬性（computed）與偵聽器
1.計算屬性，computed屬性用于定義幾個data中的數(shù)據(jù)計算后返回到模板中的一個數(shù)據(jù)，具體做法是通過定義變量名=方法（方法返回計算后的值），在模板中通過變量名調(diào)用，computed是計算后數(shù)據(jù)的集合，vue主要工作是處理前臺數(shù)據(jù)問題，computed計算屬性的值是具有緩存功能的，當參與計算的某個值發(fā)生變化是才重新計算，否則不進行重新計算
<div id="root" >
姓 <input v-model="firstname">
名 <input v-model="lastname">
<div >{{fullname}}</div>
<div >{{count}}</div>
</div>
new vue({
el:"#root"
data:{
firstname:"",
lastname:"",
count:0
},
computed:{
fullname:function(){
return firstname+" "+lastname;
}
}，
watch:{
firstname:function(){
count++
}
}
})
2.偵聽器，vue中監(jiān)聽data數(shù)據(jù)或"計算屬性"變動的屬性，使用watch屬性，也可與用于計算屬性值得監(jiān)聽
八,vue組件component的使用
1.全局組件
<div id="app">
<div></div>
<global_zj></global_zj>
<zj></zj>
</div>
vue.component("global_zj",{
template:"<li>ddddd</li>"
})
var zj = {
template:"<li>zjzjzjzjzz</li>"
}
app= new Vue({
el:"#app" ,
component:{
zj:zj
}
})
2.局部組件，如上,局部組件,需要在vue實例中注冊
vue組件也是vue實例，是vue實例的子實例，組件也可以定義mehods方法屬性等,子實例與父實例的屬性與數(shù)據(jù)不能共用，必須通過發(fā)送事件信號的方式處理機
3.vue組件傳值，在組件元素節(jié)點中使用定義屬性的方式賦值，在組件中使用props數(shù)組的形式接收傳來的參數(shù)，在組件模板中使用插值表達式顯示輸出
4.子實例（組件）與vue實例通信
1）子實例（組件中）綁定方法并發(fā)送自定義事件
this.$emit("zdyff",this.index).,zdyff自定義事件的名稱，this.index為傳值
2）在組件元素節(jié)點（如global_zj）中監(jiān)聽之（@zdyff=“xx”）
3)在父實例中定義xx方法并實現(xiàn)之
<div id="app5">
       <div></div>
  <global_zj v-for="(itm,index) of contents" :content="itm"  :index="index" @zdyff="zdyfffff"></global_zj>     
</div>
//全局組件
Vue.component("global_zj",{
     props:["content","index"],
     template:"<li  @click='ccclc'>{{content}}</li>",
methods:{
    ccclc:function(){
   this.$emit("zdyff",this.index)//發(fā)送自定義事件，在組件元素節(jié)點中監(jiān)聽之
}
}
})
app5 = new Vue({
el:"#app5",
data:{
   contents:["fffffffff","aaaaaaaa","bbbbbbbb","cccccccc"]
},
methods:{
  zdyfffff:function(index){
    this.contents.splice(index,1);
  }
}
})