1.class style“`
Style 数组语法
window.οnlοad=function(){
//在这里面写Vue.js代码
var vm = new Vue({
el: ‘div’,
data: {
styleObjectA: {
color: ‘red’,
background:’blue’
},
styleObjectB: {
fontSize: ‘30px’
}
}
})
//—————-
}
2.渲染指令
v-if
在字符串模板中,如Handlebars,我们得像这样写一个条件块:
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
template v-if
因为 v-if 是一个指令,需要将它添加到一个元素上。但是如果我们想切换多个元素呢?此时我们可以把一个 <template> 元素当做包装元素,并在上面使用 v-if,最终的渲染结果不会包含它。
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
<h1 v-show="ok">Hello!</h1>
v-for
可以使用 v-for 指令基于一个数组渲染一个列表。这个指令使用特殊的语法,形式为 item in items,items 是数据数组,item 是当前数组元素的别名:
<ul id="example">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
js代码:
var example1 = new Vue({
el: '#example',
data: {
items: [
{ message: 'one' },
{ message: 'two' }
]
}
})
在 v-for 块内我们能完全访问父组件作用域内的属性,另有一个特殊变量 $index,正如你猜到的,它是当前数组元素的索引:
<ul id="example">
<li v-for="item in items">
{{ parentMessage }} - {{ $index }} - {{ item.message }}
</li>
</ul>
js代码:
var example2 = new Vue({
el: '#example',
data: {
parentMessage: 'Parent',
items: [
{ message: 'one' },
{ message: 'two' }
]
}
})
template v-for
类似于 template v-if,也可以将 v-for 用在 template 标签上,以渲染一个包含多个元素的块。例如:
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider"></li>
</template>
</ul>
Text
可以在表单的input 元素上使用v-model 指令来创建双向数据绑定。它会根据input元素的类型自动选取正确的绑定模式。
<span>Message is:{{msg}}</span>
<input type="text" v-model="msg" placeholder="edit me">
js代码:
var vm = new Vue({
el: 'div',
data: {
msg:"hello world"
}
})
其中placeholder为默认显示提示。
Checkbox
多个勾选逻辑值,如下代码:
<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>
当我们要绑定值时可以用v-bind来绑定,如下代码:
<div>
<input
type="checkbox"
v-model="toggle"
v-bind:true-value="a"
v-bind:false-value="b">
</div>
当checkbox为true时,值为a;当为fals时,值为b。
Radio
<input type="radio" id="one" 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>
我们可以用v-bind指令来绑定数据。如下代码:
<input type="radio" v-model="pick" v-bind:value="a">
select
<html>
<head>
<script src="lib/vue.js"></script>
</head>
<body>
<div>
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
</body>
</html>
window.onload=function(){
//在这里面写Vue.js代码
new Vue({
el: 'div',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
//----------------
}
参数特性
lazy
在默认情况下,v-model 在input 事件中同步输入框值与数据,可以添加一个特性 lazy,从而改到在 change 事件中同步:
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model="msg" lazy>
如下实例,当在文本框中输入完成以后,才更新内容:
<span>Message is:{{msg}}</span>
<input type="text" v-model="msg" lazy>
number
如果想自动将用户的输入保持为数字,可以添加一个特性 number:
<input v-model="age" number>
debounce
debounce 设置一个最小的延时,在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作(例如在输入提示中 Ajax 请求),它较为有用。
<input v-model="msg" debounce="500">
注意 debounce 参数不会延迟 input 事件:它延迟“写入”底层数据。