标签指令:v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TodoList</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text">
<button>提交</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
//键值对【Vue实例中的具体数据】
list:["第一课的内容","第二课的内容","第三课的内容"]
}
})
</script>
</body>
</html>
总结:
- v-for:用于循环数据
- v-for="item in list" 告诉vue:li中要循环list 循环后的每一项都放在item中 然后即可使用item
- list:data中的list数据
- item:即指循环过程中list的每一项内容【list中的每一项】
标签指令:v-on【在VUE中绑定事件】
- v-on:在模板的button上绑定事件
- 用:修饰这个事件 绑定的事件是click事件
- 事件名称为handleBtnClick 将这个方法定义在VUE实例中的metnods键值对中
- 简写@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TodoList</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text">
<button v-on:click="handleBtnClick">提交</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
list:["第一课的内容","第二课的内容","第三课的内容"]
},
methods:{
handleBtnClick(){
alert("click")//只要button点击 就会执行handleBtnClick方法
}
}
})
</script>
</body>
</html>
标签指令:v-model【使用Vue.js实现TodoList:http://www.todolist.cn/】
- v-model:数据的双向绑定 当input框中的内容发生变化的时候 VUE实例中的data中的inputValue也会发生变化;当VUE实例中的data中的inputValue变量发生变化时页面也会跟着发生变化【将input的value值和data中的inputValue做了绑定 一个变化另一个就会跟着变】
点击button时拿到input输入框的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>TodoList</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue">
<button v-on:click="handleBtnClick">提交</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<script>
var app=new Vue({
el:'#app',
data:{
list:["第一课的内容","第二课的内容","第三课的内容"],
inputValue:"",//数据绑定
},
methods:{
handleBtnClick(){
// 在handleBtnClick方法中获取inputValue
console.log(this.inputValue)//VUE实例会自动去data中找inputValue
this.list.push(this.inputValue)
this.inputValue=""//清空
}
}
})
</script>
</body>
</html>
标签指令:v-bind
-
传入绑定值
- v-bind简写: