前言
刚开始学习vue的时候,都是根据一些简单的demo来理解学习vue,所以今天把之前做的demo都整理出来。
vue的简单绑定
var v1 = new Vue({
el:'#app' //这里是你要绑定的元素id 一般推荐绑定一个div。
data:{ //存放数据用的。
message:'hello! '
},
methods:{
fc:function(){}
}
})
绑定文本
直接在div的内部直接绑定{{message}}
绑定属性
v-bind 语法糖为 :
v-bind就是绑定元素属性所用的。
给span的title属性绑定一个数据。
<span :title = 'message'></span>
绑定DOM结构 v-if
v-if =“seen” 在这里是绑定了if
如果data中的seen属性值为true,那么绑定v-if的元素就可见,反之则不可见。
绑定DOM结构 v-for
v-for可以绑定一个数组的数据,遍历形成一个项目列表
v-for = "a in todos"
{{a.text}}
这里 a 可以随意取,和todos没有关系,
但是text必须是todos的属性
todos:[
{text:'1'},
{text:'2'},
{text:'3'},
]
v-on 绑定一个事件监听器
语法为v-on:click =“fc” 注意这里绑定的是一个事件监听器,所以fc是一个方法的名字。
methods:{
fc:function(){}
}
v-model实现双向绑定
没有语法糖,实现表单输入和应用状态之间的双向绑定。
<input v-model="message">
给message一个默认值,这个默认值就会显示在input框内,如果自己手动填写input值,那么这个message也会跟着改变。