文章目录

• 前言
• vue的简单绑定
• 绑定文本
• 绑定属性
• 绑定DOM结构 v-if
• 绑定DOM结构 v-for
• v-on 绑定一个事件监听器
• v-model实现双向绑定

前言

刚开始学习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也会跟着改变。