Vue實(shí)例基礎(chǔ)一
數(shù)據(jù)的雙向綁定
//html
<div id="demo">
<input type="text" placeholder="數(shù)據(jù)雙向綁定" v-model='message'>
<input type="checkbox" placeholder="數(shù)據(jù)雙向綁定" v-model='checked' id="checkbox">
<p>{{message}}</p>
<label for="checkbox">{{ checked }}</label>
</div>
//js
new Vue({
el: "#demo",
data:{
message: '我是黃楚才',
checked: ''
}
})
----
v-model 綁定表單的相應(yīng)事件毕源，和數(shù)據(jù)實(shí)現(xiàn)動(dòng)態(tài)的雙向綁定近顷，需要在Vue實(shí)例中填寫(xiě)相應(yīng)的數(shù)據(jù)來(lái)表示對(duì)應(yīng)的表單數(shù)據(jù)鞋喇。
指令
v-html 數(shù)據(jù)以html的形式輸出
-
v-bind (和v-model有區(qū)別不是動(dòng)態(tài)的缤灵，不會(huì)修改data里面相應(yīng)的值)屬性的綁定值怠蹂，簡(jiǎn)寫(xiě)為：
語(yǔ)法： v-bind:屬性=‘值’ （:屬性=’值‘）
<div :class='name'> </div> -
v-on 方法的綁定虐唠，簡(jiǎn)寫(xiě)為@
語(yǔ)法：v-on:方法名=’函數(shù)名‘ （@方法名=’函數(shù)名‘）
傳入默認(rèn)的參數(shù)需要加上$($$event)
<div id="demo" :class='name' @click='showMessage'></div> //傳入默認(rèn)的事件處理需要加入$ <div id="demo" :class='name' @click='showMessage($event)'> {{message}} {{true?'three':'two'}} </div> new Vue({ el:"#demo", methods:{ showMessage(event){ console.log(event) event.target.innerHTML+='<p>這是通過(guò)event加入的</p>' console.log(event.target) } } }) -
v-for 列表的循環(huán)渲染
數(shù)組的循環(huán)：可以選擇性的傳遞參數(shù)搀愧，第二個(gè)參數(shù)是對(duì)應(yīng)的索引位置
//數(shù)組的循環(huán) <ul class="demo" > <li v-for="(book,index) in lists">{{index}} {{book.name}} {{book.price}}</li> </ul> //對(duì)應(yīng)的vue實(shí)例 new Vue({ el: '.demo', data:{ lists: [ {name:'javascript',price:50}, {name:'node',price:50}, {name:'ajax',price:50}, {name:'vue',price:50}, ] } })對(duì)象的循環(huán)：可以傳遞三個(gè)參數(shù)，value,key,index疆偿，多個(gè)參數(shù)傳遞需要()
<ul class="demo" > <li v-for=" (key,value,index) in lists">{{value}} {{key}} {{index}}</li> </ul> //js new Vue({ el: '.demo', data:{ lists: { name: 'hcc', age: 24, hobby: 'live yx' } } })雙向綁定：我們通過(guò)v-for循環(huán)得到后的數(shù)據(jù)咱筛，如果數(shù)據(jù)本身是數(shù)組或者對(duì)象，可以迭代循環(huán)
<div id="demo" > <li v-for="(book,index) in lists"> {{index}} {{book.price}} //得到的book.name的數(shù)組下一個(gè)循環(huán) <span v-for="(b,index) in book.name">{杆故} {{index}}</span> </li> </div> //js層面 new Vue({ el: '#demo', data:{ lists: [ {name:['a','e','f'],price:50}, {name:['a'],price:50}, {name:['a','e'],price:50}, {name:['a','e','a','e'],price:50}, ] } })
模板字符塊
字符串模板
Vue構(gòu)造的參數(shù)中template參數(shù)可以傳遞字符串的模板迅箩，里面可以傳遞data的數(shù)據(jù)
//樣式
.hh{
height: 100px;
background: red;
}
//html
<div id="demo">
{{message}}
</div>
//js模板區(qū)域
<script>
new Vue({
el:"#demo",
data: {
name: 'hh',
message: '我是黃楚才',
},
// template:'<div :class=name @click=showMessage>{{message}}hello this is template<span>heel</span></div>',
template:`<div :class=name @click=showMessage>
{{message}}hello this is template
<span>heel</span>
</div>`,
methods:{
showMessage(){
alert("ggggg")
}
}
})
</script>
render函數(shù)創(chuàng)建字符串
render函數(shù)接受一個(gè)函數(shù)參數(shù)用來(lái)創(chuàng)建字符串模板
render(createElement){ return createElement()}createElement是一個(gè)函數(shù)接受參數(shù)
new Vue({
el:"#demo",
data: {
name: 'hh',
message: '我是黃楚才',
showStyle: true,
hideStyle: false
},
render(createElement){
return createElement(
//元素
"ul",
//屬性
{
'class':{
hh:'{{showStyle}}',
fontSize:false
},
attrs:{
'data-img': 'hello',
id : 'ul',
},
domProps:{
innerHTML: "<span>這是domProps的權(quán)重大</span>"
}
},
//子元素
[
createElement("li",1),
createElement("li",2),
createElement("li",3)
]
)
},
methods:{
showMessage(){
alert("ggggg")
}
}
})
