Vue 条件渲染 列表渲染 事件处理 表单输入绑定
#条件渲染
v-if 指令用于条件性的渲染一块内容.这块内容只会在指令的表达式返回truthy值的时候被渲染.
h1 v-if="awesome">Vue is awesome!</h1>
也可以使用v-else 添加一个 'else' 块
<h1 v-if="awesome">Vue is awesome!</h1> <h1 v-else>Oh no 😢</h1>
指令概括:
v-if
v-else-if
v-else-if
v-else
用法:
<div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div>
v-if 与v-show的区别:
v-if:真干活,真渲染,不满足条件,html 树上,就没有该 节点.
v-show:假干活,真偷懒,只是简单地 控制元素的 display 属性,在html树上是 可以看到的.
如果,html 上的某个模块很重要,不满足条件,不显示的话,请用 v-if,这样就能保证不会通过 调试方式 拿到 越权信息.
如果信息不重要,且切换频繁,可以用 v-show,这方便显示,减少渲染开销.
v-if 与v-for的 使用:
v-if 与v-for 不要同时使用在 同一个元素 节点上.
如果控制某个列表显示与否,可以将 v-if 用在 v-for 节点的上一个节点,或者更上层节点上.
#列表渲染
用v-for 来渲染列表,这是最常用的 操作,没有之一.
语法形式:
v-for ='item in items ' :key='item.message'
例:
<ul id="example-1"> <li v-for="item in items" :key="item.message"> {{ item.message }} </li> </ul>
var example1 = new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } })
在 v-for 块中，我们可以访问所有父作用域的 property。v-for 还支持一个可选的第二个参数，即当前项的索引。
<ul id="example-2"> <li v-for="(item, index) in items"> {{ parentMessage }} - {{ index }} - {{ item.message }} </li> </ul>
var example2 = new Vue({ el: '#example-2', data: { parentMessage: 'Parent', items: [ { message: 'Foo' }, { message: 'Bar' } ] } })
这里面的parentMessage 是父作用域的 property.
在 v-for 里使用对象:使用 v-for 来遍历一个对象的 property(属性)。
v-for 的状态维护,使用key 完成,
<div v-for="item in items" v-bind:key="item.id"> <!-- 内容 --> </div>
建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
在v-for里使用值范围, v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。
<div> <span v-for="n in 10">{{ n }} </span> </div>
在<template>上使用v-for
可以使用使用v-for 来渲染一段包含多个元素的 <template>元素.
<ul> <template v-for="item in items"> <li>{{ item.msg }}</li> <li class="divider" role="presentation"></li> </template> </ul>
#事件处理
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div>
var example1 = new Vue({ el: '#example-1', data: { counter: 0 } })
说明:示例中的 counter +=1 是一个JavaScript语句,counter 是通过vue实例化的 响应变量.
事件处理方法
一般事件会包含复杂的处理逻辑,向上面的例子直接将 JavaScript代码写在v-on的指令中是不可行的,
处理方法: v-on 指令可以接收一个 调用的方法名称
<div id="example-2"> <!-- `greet` 是在下面定义的方法名 --> <button v-on:click="greet">Greet</button> </div>
var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
// 定义的方法
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'
内联处理器中的方法
除了直接使用方法名调用以外,可以在内联JavaScript语句中调用方法:
<div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div>
new Vue({ el: '#example-3', methods: { say: function (message) { alert(message) } } })
注意区别:
上面调用say('hi') 方法的根本方式是,使用了JavaScript 语句的 执行,实现了方法的调用.
并通过上述方式,实现了函数调用时 的传值的目的.
函数不能不需要传值的,传值是一个很重要的需求.
在内联语句中处理原始的DOM时间,可以使用特殊变量$event把它传入方法:
<button v-on:click="warn('这是一句警告贴提示', $event)"> Submit </button>
// ... methods: { warn: function (message, event) { // 现在我们可以访问原生事件对象 if (event) { event.preventDefault() } alert(message) } }
#表单输入绑定
可以使用v-model指令在表单<input> <textare> <select> 等元素上创建元素双向数据绑定.
#文本
<input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>
v-model 的作用是干嘛的呢?
表单数据的双向绑定有啥用呢?
这个后面在回答这个问题!
