Vue实例基础一
数据的双向绑定
//html
<div id="demo">
<input type="text" placeholder="数据双向绑定" v-model='message'>
<input type="checkbox" placeholder="数据双向绑定" v-model='checked' id="checkbox">
<p>{{message}}</p>
<label for="checkbox">{{ checked }}</label>
</div>
//js
new Vue({
el: "#demo",
data:{
message: '我是黄楚才',
checked: ''
}
})
----
v-model 绑定表单的相应事件，和数据实现动态的双向绑定，需要在Vue实例中填写相应的数据来表示对应的表单数据。
指令
v-html 数据以html的形式输出
-
v-bind (和v-model有区别不是动态的，不会修改data里面相应的值)属性的绑定值，简写为：
语法： v-bind:属性=‘值’ （:属性=’值‘）
<div :class='name'> </div> -
v-on 方法的绑定，简写为@
语法：v-on:方法名=’函数名‘ （@方法名=’函数名‘）
传入默认的参数需要加上$($$event)
<div id="demo" :class='name' @click='showMessage'></div> //传入默认的事件处理需要加入$ <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>这是通过event加入的</p>' console.log(event.target) } } }) -
v-for 列表的循环渲染
数组的循环：可以选择性的传递参数，第二个参数是对应的索引位置
//数组的循环 <ul class="demo" > <li v-for="(book,index) in lists">{{index}} {{book.name}} {{book.price}}</li> </ul> //对应的vue实例 new Vue({ el: '.demo', data:{ lists: [ {name:'javascript',price:50}, {name:'node',price:50}, {name:'ajax',price:50}, {name:'vue',price:50}, ] } })对象的循环：可以传递三个参数，value,key,index，多个参数传递需要()
<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' } } })双向绑定：我们通过v-for循环得到后的数据，如果数据本身是数组或者对象，可以迭代循环
<div id="demo" > <li v-for="(book,index) in lists"> {{index}} {{book.price}} //得到的book.name的数组下一个循环 <span v-for="(b,index) in book.name">{{b}} {{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构造的参数中template参数可以传递字符串的模板，里面可以传递data的数据
//样式
.hh{
height: 100px;
background: red;
}
//html
<div id="demo">
{{message}}
</div>
//js模板区域
<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函数创建字符串
render函数接受一个函数参数用来创建字符串模板
render(createElement){ return createElement()}createElement是一个函数接受参数
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的权重大</span>"
}
},
//子元素
[
createElement("li",1),
createElement("li",2),
createElement("li",3)
]
)
},
methods:{
showMessage(){
alert("ggggg")
}
}
})
