条件渲染、列表渲染、事件处理、表单输入绑定基本使用
条件渲染
v-if 基本用法
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js" charset="UTF-8"></script>
</head>
<body>
<div id = "test">
<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>
</div>
<script>
var watchExampleVM = new Vue({
el:"#test",
data: {
type: "A"
}
})
</script>
</body>
</html>
v-if还可以与template、v-for结合使用，请参考官网：https://cn.vuejs.org/v2/guide/conditional.html
v-show 基本用法
另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js" charset="UTF-8"></script>
</head>
<body>
<div v-show="isLook">hahh</div>
<script>
var watchExampleVM = new Vue({
el:"#test",
data: {
isLook: false
}
})
</script>
</body>
</html>
注意：v-show 不支持 template 元素，也不支持 v-else。
v-if 与 v-show 使用场景
-
v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 -
v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 - 相比之下，
v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 - 一般来说，
v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。
官网链接：https://cn.vuejs.org/v2/guide/conditional.html
列表渲染
v-for 渲染数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js" charset="UTF-8"></script>
</head>
<body>
<div id = "test1">
<ul>
<!-- index为索引,通过index可以访问到父作用域 -->
<li v-for="(products,index) in product" v-bind:key = "index">
{{ParentMessage}}--{{index}}--{{products.message}}
</li>
</ul>
</div>
<script>
var example1 = new Vue({
el: ‘#test1‘,
data: {
ParentMessage: ‘Mother‘ ,
product: [
{ message: ‘Hello‘ },
{ message: ‘Vue‘ }
]
}
})
</script>
</body>
</html>
输出结果为：
v-for渲染对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js" charset="UTF-8"></script>
</head>
<body>
<div id = "test1">
<ul>
<!-- tian属性为键名,index为主键 -->
<li v-for="(hashMap,tian,index) in object" v-bind:key = "tian">
{{index}}--{{tian}}--{{hashMap}}
</li>
</ul>
</div>
<script>
var example1 = new Vue({
el: ‘#test1‘,
data: {
object: {
title: ‘How to do lists in Vue‘,
author: ‘Jane Doe‘,
publishedAt: ‘2016-04-10‘
}
}
})
</script>
</body>
</html>
输出结果为：
注意：建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。因为它是 Vue 识别节点的一个通用机制，key 并不仅与 v-for 特别关联。后面我们将在指南中看到，它还具有其它用途。
关于数组、对象的列表渲染及维护参考官网：https://cn.vuejs.org/v2/guide/list.html
事件处理
可以用 v-on指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
以下是监听事件的简单例子，点击按钮实现counter +1 的效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js" charset="UTF-8"></script>
</head>
<body>
<div id = "test1">
<ul>
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
</ul>
</div>
<script type="text/javascript">
var example1 = new Vue({
el: ‘#example-1‘,
data: {
counter: 0
}
})
</script>
</body>
</html>
效果如下，每点击以下实现 counter + 1：
事件处理方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js" charset="UTF-8"></script>
</head>
<body>
<div id="example-1">
<button v-on:click = "tclick(‘hello‘)"> please click me</button>
</div>
<script type="text/javascript">
var example1 = new Vue({
el: ‘#example-1‘,
data: {
counter: 0,
},
methods: {
tclick : function(str) {
alert("you already click me"),
console.log(str),
alert("you also click me")
}
}
})
</script>
</body>
</html>
效果如下：
目前是初学者，关于事件修饰符及其他更多用法请参考官网链接：https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86%E6%96%B9%E6%B3%95
表单输入绑定
你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理
下面是对于单选框、复选框、值绑定以及表单提交的基本写法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="vue.js" charset="UTF-8"></script>
</head>
<body>
<div id="example-2">
<div>
<!-- 文本输入 -->
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<!-- 多行文本 -->
<textarea v-model="messageArea" placeholder="also edit me"></textarea>
<p>messageArea is :{{ messageArea }}</p>
<br />
<!-- 单复选框，绑定布尔值 -->
<input type="checkbox" id="test" value="change" v-model="changed"/>
<label for="test"> 单复选框：{{changed}}</label>
<br />
<br />
<!-- 多复选框，绑定数组 -->
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
<br />
<br />
<!-- 单选框,通过v-bind动态改变value值，称为值绑定 -->
<input type="radio" id="one" v-bind:value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
<br />
<br />
<!-- 下拉单选框 -->
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
<br />
<br />
<!-- 下拉复选框，绑定数组 -->
<select v-model="selectList" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>selectList: {{ selectList }}</span>
</div>
<!-- 表单提交，绑定submit事件 -->
<button type="button" v-on:click="submit">submit</button>
</div>
<script type="text/javascript">
var example1 = new Vue({
el: ‘#example-2‘,
data: {
message: 0,
messageArea: "",
changed:false,
checkedNames: [],
picked:"",
selected:"",
selectList:[],
One:"fhasdfj",
},
methods: {
submit: function() {
var pm = {
ms1: this.message,
ms2: this.messageArea,
}
console.log(pm)
},
},
})
</script>
</body>
</html>
效果如下：
修饰符以及更多的用法参考官网链接：https://cn.vuejs.org/v2/guide/forms.html