国产成人欧美日韩综合-久久久久无码国产精品不卡-h双腿涨灌捆绑play慎入-啊灬用力灬啊灬啊灬啊灬a片男男-性疼痛tube小坳交hd-国产精品免费大片-日本亚洲成高清一区二区三区-草莓视频在线观看污污-浴室激情hd-欧美午夜理伦三级在线观看激情伦理-91蝌蚪在线,国产黄色大片在线观看一区二区,午夜精品久久久内射近拍高清,特级做a爱片久久久久久

18600329666

咨詢技術專家

掃一掃
與技術專家在線溝通

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

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

上一部分《前端軟件開發技術VUE使用》主要介紹了vue基礎使用，本文主要講解，屬性值相關，以及組件，vue子實例與父實例的自定義事件監聽，傳值，及自定義組件
六、vue中的屬性值的綁定和屬性數據值的雙向綁定
  • 1.html元素屬性值使用data數據（插值表達式無法實現，插值表達式只實用與內容）v-bind:屬性=“dataname”的使用,v-bind:tilte="tiltessss"或者:title="tiltessss",引號中的內容實際是js內容可以寫js語句
<div id="root" ><div v-bind:tilte="tiltessss">dddd</div></div>
new vue ({
el:"#root"
data:{
tiltessss:"is ffffff"
}
})
  • 2.數據雙向綁定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中的數據計算后返回到模板中的一個數據，具體做法是通過定義變量名=方法（方法返回計算后的值），在模板中通過變量名調用，computed是計算后數據的集合，vue主要工作是處理前臺數據問題，computed計算屬性的值是具有緩存功能的，當參與計算的某個值發生變化是才重新計算，否則不進行重新計算
<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中監聽data數據或"計算屬性"變動的屬性，使用watch屬性，也可與用于計算屬性值得監聽
八,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方法屬性等,子實例與父實例的屬性與數據不能共用，必須通過發送事件信號的方式處理機
3.vue組件傳值，在組件元素節點中使用定義屬性的方式賦值，在組件中使用props數組的形式接收傳來的參數，在組件模板中使用插值表達式顯示輸出
4.子實例（組件）與vue實例通信
1）子實例（組件中）綁定方法并發送自定義事件
this.$emit("zdyff",this.index).,zdyff自定義事件的名稱，this.index為傳值
2）在組件元素節點（如global_zj）中監聽之（@zdyff=“xx”）
3)在父實例中定義xx方法并實現之
<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)//發送自定義事件，在組件元素節點中監聽之
}
}
})
app5 = new Vue({
el:"#app5",
data:{
   contents:["fffffffff","aaaaaaaa","bbbbbbbb","cccccccc"]
},
methods:{
  zdyfffff:function(index){
    this.contents.splice(index,1);
  }
}
})