1. 样式绑定
1.1 class绑定
使用方式:v-bind:class="expression"
expression的类型:字符串、数组、对象
1.2 style绑定
v-bind:style="expression"
expression的类型:字符串、数组、对象
2. 事件处理器
事件监听可以使用v-on 指令
2.1 事件修饰符
Vue通过由点(.)表示的指令后缀来调用修饰符,
.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="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次 -->
<a v-on:click.once="doThis"></a>
注1:什么是事件冒泡?
见“事件冒泡模型.png”
2.2 按键修饰符
Vue允许为v-on在监听键盘事件时添加按键修饰符:
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
Vue为最常用的按键提供了别名
<!-- 同上 -->
<input v-on:keyup.enter="submit">
全部的按键别名:
.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
3. vue表单
用v-model指令在表单控件元素上创建双向数据绑定
3.1 常用控件
文本框/密码框/文本域/隐藏域
单选复选框/多选复选框
单选按钮
下拉框
3.2 修饰符
.lazy
默认情况下, v-model在input事件中同步输入框的值与数据,但你可以添加一个修饰符lazy,从而转变为在change事件中同步
.number
将用户的输入值转为 Number 类型
.trim
自动过滤用户输入的首尾空格
注1:H5提供的新方法
JSON.parse():只能解析json形式的字符串变成json,安全性高一些
JSON.stringify():json转换为字符串,解析的时候会自动加上引号
4. 自定义指令
除了Vue自带的指令(v-on|v-model)等, Vue也允许注册自定义指令,根据作用范围又分为:全局指令/局部指令
Vue.directive("focus",{});//全局指令
new Vue({
el:"#d1",
directives:{//局部指令
focus:{}
}
});
案例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js"></script>
</head>
<style>
.cl{
color: blue;
}
</style>
<body>
<div id="app">
<p>{{title}}{{ts}}</p>
<div :class="textColor">
hhhh
</div>
<button @click="onClick">显示</button><br />
{{ret}}<br />
<input type="text" v-model="text" />
<button @click="onClick">传递</button>
<button @click.once="onClick">传递</button><br />
<!-- 按回车键 -->
<!-- <input type="text" @keyup.enter="onClick" v-model="text" />
<button @click="onClick">传递</button><br /> -->
<!-- 按esc键 -->
<!-- <input type="text" @keyup.esc="onClick" v-model="text" />
<button @click="onClick">传递</button> -->
<div v-for="d in data">
<input type="checkbox" v-model="ids" :value="d.id" />{{d.name}}
</div>
{{ids}}<br />
<input type="text" v-model.number="text" />
<button @click="onClick">传递</button><br />
{{text}}
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:function(){
return{
title:'Hello Vue',
ts:new Date().getTime(),
textColor:'cl',
text:'',
ret:'',
data:[
{'id':'1','name':'zs'},
{'id':'2','name':'ls'},
{'id':'3','name':'ww'},
{'id':'4','name':'zl'}
],
ids:[]
}
},
methods:{
onClick:function(){
/* console.log(this.stu); */
/* console.log('调用');
this.ret=this.text; */
console.log(this.text);
}
},
})
</script>
</html>