阅读目录
- 1.计算属性
- 2.Class 与 Style的绑定。
- 3.列表渲染
- 4.事件处理器
- 5.表单控件绑定
1.计算属性
在模板内可以对一些属性的计算。如下代码：
DOCTYPE html>
<html>
<body>
<head>
<title>演示Vuetitle>
head>
<div id="app">
<p>正序："{{ message }}"p>
<p>倒序："{{ reversedMessage }}"p>
div>
body>
<script src="./vue.js">script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function() {
return this.message.split('').reverse().join('')
}
}
})
script>
html>
输出结果为：
正序："Hello"
倒序："olleH"
如上我们提供的函数将用作属性 vm.reversedMessage 的 getter 。如下代码：
console.log(vm.reversedMessage) // -> 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // -> 'eybdooG'
我们可以通过调用表达式中的 method 来达到同样的效果：代码如下：
DOCTYPE html>
<html>
<body>
<head>
<title>演示Vuetitle>
head>
<div id="app">
<p>Reversed message: "{{ reversedMessage() }}"p>
div>
body>
<script src="./vue.js">script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
message: 'Hello'
},
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}
});
console.log(vm.reversedMessage()) // -> 'olleH'
script>
html>
那么他们的区别是？
计算属性是基于他们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。也就是说只要message值没有发生变化，多次访问reversedMessage计算属性会立即返回之前的结果，不必再执行函数。
但是method方法只要发生重新渲染，总是会执行该函数。
2.Class 与 Style的绑定。
1. 绑定Html class --- 对象语法
我们可以传给 v-bind:class 一个对象，以动态的切换class。如下代码：
DOCTYPE html>
<html>
<body>
<head>
<title>演示Vuetitle>
head>
<div id="app">
<div class="static" v-bind:class = "{ active: isActive, 'text-danger': hasError }">div>
div>
body>
<script src="./vue.js">script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
isActive: true,
hasError: true
}
});
script>
html>
代码被渲染为如下：
<div id="app"><div class="static active text-danger">div>div>
当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 false ， class列表将变为 "static active "。
也可以直接绑定数据里的一个对象：如下代码
DOCTYPE html>
<html>
<body>
<head>
<title>演示Vuetitle>
head>
<div id="app">
<div class="static" v-bind:class="classObject">div>
div>
body>
<script src="./vue.js">script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
classObject: {
active: true,
'text-danger': true
}
}
});
script>
html>
渲染效果和上面一样。
也可以在这里绑定返回对象的计算属性。如下代码：
DOCTYPE html>
<html>
<body>
<head>
<title>演示Vuetitle>
head>
<div id="app">
<div class="static" v-bind:class="classObject">div>
div>
body>
<script src="./vue.js">script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal',
}
}
}
});
script>
html>
渲染后的代码如下：
<div id="app"><div class="static active">div>div>
2. 数组语法
我们可以把一个数组传给 v-bind:class ，以应用一个 class 列表：如下代码：
DOCTYPE html>
<html>
<body>
<head>
<title>演示Vuetitle>
head>
<div id="app">
<div class="static" v-bind:class="[activeClass, errorClass]">div>
div>
body>
<script src="./vue.js">script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
});
script>
html>
被渲染为如下代码：
<div id="app"><div class="static active text-danger">div>div>
3. 使用在组件上
例如，如果你声明了这个组件:
Vue.component('my-component', {
template: ''
})
var vm = new Vue({
el: '#app'
});
使用组件的时候 添加一些class，如下代码：
<div id="app"> <my-component class='baz boo'>my-component> div>
所有代码如下：
DOCTYPE html>
<html>
<body>
<head>
<title>演示Vuetitle>
head>
<div id="app">
<my-component class='baz boo'>my-component>
div>
body>
<script src="./vue.js">script>
<script type="text/javascript">
Vue.component('my-component', {
template: ''
})
var vm = new Vue({
el: '#app'
});
script>
html>
HTML最终被渲染为：
<div id="app"><p class="foo bar baz boo">Hip>div>
同样的适用于绑定 HTML class :
DOCTYPE html>
<html>
<body>
<head>
<title>演示Vuetitle>
head>
<div id="app">
<my-component v-bind:class="{ active: isActive }">my-component>
div>
body>
<script src="./vue.js">script>
<script type="text/javascript">
Vue.component('my-component', {
template: ''
})
var vm = new Vue({
el: '#app',
data: {
isActive: true
}
});
script>
html>
当isActive为true的时候，HTML最终被渲染成为如下代码：
<div id="app"><p class="foo bar active">Hip>div>
4. 级联内联样式
如下级联样式代码：
DOCTYPE html>
<html>
<body>
<head>
<title>演示Vuetitle>
head>
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">11112222div>
div>
body>
<script src="./vue.js">script>
<script type="text/javascript">
Vue.component('my-component', {
template: ''
})
var vm = new Vue({
el: '#app',
data: {
activeColor: 'red',
fontSize: 30
}
});
script>
html>
页面被渲染为如下代码：
<div id="app"><div style="color: red; font-size: 30px;">11112222div>div>
也可以绑定到一个样式对象通常更好，让模板更清晰：如下代码：
DOCTYPE html>
<html>
<body>
<head>
<title>演示Vuetitle>
head>
<div id="app">
<div v-bind:style="styleObject">11112222div>
div>
body>
<script src="./vue.js">script>
<script type="text/javascript">
Vue.component('my-component', {
template: ''
})
var vm = new Vue({
el: '#app',
data: {
styleObject: {
color: 'red',
fontSize: '22px'
}
}
});
script>
html>
代码被渲染成为如下：
<div id="app"><div style="color: red; font-size: 22px;">11112222div>div>
3.列表渲染
3-1 v-for
我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。
如下面代码：
DOCTYPE html>
<html>
<body>
<head>
<title>演示Vuetitle>
head>
<ul id='app'>
<li v-for="item in items">
{{ item.message }}
li>
ul>
body>
<script src="./vue.js">script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
items: [
{message: 'foo'},
{message: 'bar'}
]
}
});
script>
html>
页面代码被渲染为如下：
<ul id="app"><li>fooli><li>barli>ul>
v-for 我们拥有对父作用域属性的完全访问权限 还支持一个可选的第二个参数为当前项的索引。
如下代码：
DOCTYPE html>
<html>
<body>
<head>
<title>演示Vuetitle>
head>
<ul id='app'>
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
li>
ul>
body>
<script src="./vue.js">script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
parentMessage: 'Parent',
items: [
{message: 'foo'},
{message: 'bar'}
]
}
});
script>
html>
页面被渲染为如下代码：
<ul id="app"> <li>Parent - 0 - fooli> <li>Parent - 1 - barli> ul>
可以用 of 替代 in 作为分隔符。
3-2 在template中也可以使用 v-for , 如下代码：
<ul> <template v-for="item in items"> <li>{{ item.msg }}li> <li class="divider">li> template> ul>
3-3 对象迭代v-for
我们也可以用 v-for 通过一个对象的属性来迭代。
演示Vue
- for="value in object"> {{ value }}
代码被渲染为：
<ul id="app"> <li>kongzhili> <li>longenli> <li>30li> ul>
可以提供第二个的参数为键名：如下代码：
<div v-for="(value, key) in object"> {{ key }} : {{ value }} div>
第三个参数为索引：
<div v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} div>
3-4 整数的迭代
v-for 也可以取整数。如下代码：
DOCTYPE html>
<html>
<body>
<head>
<title>演示Vuetitle>
head>
<div id='app'>
<span v-for="n in 10">{{ n }}span>
div>
body>
<script src="./vue.js">script>
<script type="text/javascript">
var vm = new Vue({
el: '#app'
});
script>
html>
页面代码被渲染为：
<div id="app"> <span>1span> <span>2span> <span>3span> <span>4span> <span>5span> <span>6span> <span>7span> <span>8span> <span>9span> <span>10span> div>
3-5 组件使用v-for
组件有自己独立的作用域。为了传递迭代数据到组件里，我们要用 props. 如下代码：
<my-component v-for="(item, index) in items" v-bind:item="item" v-bind:index="index"> my-component>
下面是一个demo；页面上默认有3项列表数据，当用户在输入框输入值的时候 按enter键的时候 会增加一项，当然也可以点击删除x删除一项。
演示Vue
<input
v-model='newTodoText'
v-on:keyup.enter='addNewTodo'
placeholder="Add a todo"
>
<li
is='todo-item'
v-for="(todo, index) in todos"
v-bind:title='todo'
v-on:remove="todos.splice(index, 1)"
>
查看效果
4.事件处理器
4-1 v-on 监听事件 代码如下：
演示Vue
这个按钮被点击了 {{ counter }}次。
查看效果
4-2 方法事件处理器
直接把 JavaScript 代码写在 v-on 指令中是不可行的，比如当代码变得很复杂的时候，因此 v-on 可以接收一个定义的方法来调用。
演示Vue
查看效果
也可以用 JavaScript 直接调用方法
example1.greet() // -> 'Hello Vue'
4-3 内联处理器方法
除了直接绑定到一个方法，也可以用内联 JavaScript 语句：
演示Vue
查看效果
有时也需要在内联语句处理器中访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法：
演示Vue
查看效果
4-4 事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()。尽管我们可以在 methods 中轻松实现这点。
Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
.stop
.prevent
.capture
.self
.once
<a v-on:click.stop='dothis'>a> <form v-on:submit.prevent='onSubmit'>form> <a v-on:click.stop.prevent='dothis'>a> <form v-on:submit.prevent>form> <div v-on:click.capture="doThis">...div> <div v-on:click.self="doThat">...div> <a v-on:click.once="doThis">a>
4-5 按键修饰符
在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<input v-on:keyup.13="submit"> // Vue 为最常用的按键提供了别名： <input v-on:keyup.enter="submit"> <input @keyup.enter="submit"> // 全部的按键别名： .enter .tab .delete (捕获 “删除” 和 “退格” 键) .esc .space .up .down .left .right
5.表单控件绑定
v-model 负责监听用户的输入事件以更新数据。
5-1 input框如下代码：
演示Vue
Message is: {{ message }}
查看效果
5-2 多行文本 textrea
演示Vue
message is:
{{ message }}
查看效果
5-3 复选框-- 单个勾选框 逻辑值
演示Vue
查看效果
复选框-- 多个勾选框，绑定到同一个数组
演示Vue
Checked names: {{ checkedNames }}
查看效果
单选按钮
演示Vue
Picked: {{ picked }}
查看效果
选择列表 -- 单选列表
演示Vue
Selected: {{ selected }}
查看效果
多选列表（绑定到一个数组）：
演示Vue
Selected: {{ selected }}
查看效果
动态选项，用 v-for 渲染：
演示Vue
Selected: {{ selected }}
查看效果
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值
<input v-model.number="age" type="number">
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：
<input v-model.trim="msg">