一、列表渲染 v-for
** v-for 能够渲染输出的有 :字符串、数值**
字符串类型:
<div id="app">
<h2> str </h2>
<ul>
<li v-for = "item in str"> //item是固定的,类似遍历输出
{{ item }}
</li>
</ul>
<script>
new Vue({ //这里记得V是大写的!!!经常写错!!
el:'#app',
data:{
str:'I LOVE U'
}
})
</script>
数值型:
<ul>
<li v-for = "item in num">
{{ item }}
</li>
</ul>
new Vue({
el:'#app',
data:{
num: 10})
** v-for 可以循环的对象**
- 对象
- 表达式: v-for = “(key,val,index) in obj”
- key 就是对象的 属性
- val 就是对象的 属性值
- index 就是对象的索引
- 表达式: v-for = “(key,val,index) in obj”
<h2> person </h2>
<ul>
<li v-for = "(val,key,index) in person">
{{ key }} -- {{ val }} -- {{ index }} //会按照这个格式输出
</li>
</ul>
new Vue({
el:'#app',
data:{
person: {
name: 'kenzi',
age: 18,
sex: 'man'
}
}
})
- 数组
- == 表达式: v-for = “(item,index) in arr”==
- item 就是数组中的每一个
- index 就是数组的下标
<h2> arr </h2>
<ul>
<li v-for = "(item,index) in arr">
<p> <span>数组中的每一个是: {{ item }} </span> </p>
<p> <span>数组的下标是: {{ index }} </span> </p>
</li>
</ul>
new Vue({
el:'#app',
data:{
arr: ['a','b','c','d']
}
})
- json数据类型
- json类型数据循环必须添加key属性
- key属性的值最好是唯一的,不改变的,比如: id
- 什么是json类型数据
- [{},{},{}],
- {content: [{},{}]}
- …
- 为什么我们json数据要添加key属性?
- 因为vue使用了vdom的技术,vdom有新旧的区别,我们是通过一个叫做diff算法的来对比新的和就得vdom,是通过同层级来进行比对的,所以key为我们提供了同层级比较的一个标识符
<h2> json类型数据 </h2>
<ul>
<!-- key属性是必须加的、 -->
<li
v-for = "item in todos"
:key = "item.id" //这里得冒号是v-bind的简写,将数据赋值给属性值,单项数据绑定
>
<span> {{ item.task }} </span> //输出的时候记得写上item.
</li>
</ul>
new Vue({
el:'#app',
data:{
arr: ['a','b','c','d'],
todos: [ //json格式的数组,数组里面又包含对象
{
id: 1, ///这里的 json对象的属性值可以加双引号,也可以不加双引号
task: '吃饭'
},
{
id: 2,
task: '敲代码'
}
]
}
})
二、事件 v-on(下面的代码都是在div id=“app” 里面写的)
格式: <div v-on:事件类型 = “事件名称”>
- 事件类型: click change focus blur mouseover …
先定义事件处理程序,在绑定事件
- vue提供了一个叫做 methods 的选项用于放置 事件处理程序
事件
- 普通事件
<div id="app"> //这个app作为挂载点
<!-- 可以通过vue将 {{ msg }} => 做解析 -->
{{ msg }}
<button v-on:click = "handler"> 事件 </button> //**调用函数时都不用写括号的!!**
new Vue({
el: '#app',
methods: {
// 这里面放的都是函数
handler () {
alert('事件')
}
- 带有参数的事件
<ul>
<li v-for = "(item,index) in todos" :key = "item.id">
<p> {{ item.task}} </p>
<button v-on:click = "alertNum( index )"> 点击输出第几个任务 </button> /这里的index是上面那里拿来的参数,这里阿index是实参
</li>
</ul>
new Vue({
el: '#app',
methods: {
// 这里面放的都是函数
alertNum ( index ) { //这里放的形参
alert( index )
},
- 事件对象
- 这个事件对象就是原生事件对象(event),但是这个不用传参的
<h2> 事件对象 </h2>
<button v-on:click = "eventHandler"> 事件对象 </button>
new Vue({
el: '#app',
methods: {
// 这里面放的都是函数
eventHandler ( e ) {
console.log('e',e)
}
- 事件对象 + 事件传参
- 在调用事件处理程序时,一定要传入 $event 和 e 来对应
<h2> 事件对象 + 事件传参 </h2>
<button @click = "eventAndArguments($event,2)"> event + arguments </button>
new Vue({
el: '#app',
},
methods: {
// 这里面放的都是函数
eventAndArguments (e, msg) {
console.log(msg)
console.log( e )
}
v-on的简写形式:@
<h2> v-on 简写模式 </h2>
<button @click = "easyHandler"> v-on简写 </button>
修饰符 减少一些代码的重复书写
修饰符是添加在事件类型之后
- @click.修饰符 = ‘事件名’
<h2> 事件修饰符 </h2>
<div class="big" @click.stop = "bigHandler">
<div class="middle" @click.stop = "middleHandler">
<div class="small" @click.stop = "smallHandler"></div>
</div>
</div>
注:这里的stop相当于在在方法定义中的阻止事件冒泡
- == stopPropagation ==
- 写在方法中 e.stopPropagation,这样就重复书写了三次,直接在后面写stop会更快
提交事件:
<form action="" @submit.prevent = "onSubmit">
<input type="submit" value="提交">
</form>
new Vue({
el: '#app',
methods: {
// 这里面放的都是函数
onSubmit () {
alert('表单提交')
}
键盘事件
<h2> 按键修饰符 </h2>
<input type="text" @keydown.13 = "getUsername"> //回车键触发这个函数
<input type="text" @keydown.enter = "getUsername">//可以直接写键盘的英文字母
new Vue({
el: '#app',
methods: {
// 这里面放的都是函数
getUsername ( e ) {
// if (e.keyCode === 13 ) {
// alert( e.target.value )
// }
alert( e.target.value )
}
}
})