一、事件
可以用 v-on
指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
1、也可以使用表达式完成事件操作
<h1>点击次数:{{count}}</h1>
<!-- 可以使用表达式完成事件操作 -->
<button type="button" @click="count+=1">点击</button>
<!-- 获取事件对象 -->
<button @click="clickEvent">点击2</button>
var app = new Vue({
el:"#app",
data:{
count:0
},
methods:{
clickEvent:function(event){
this.count++;
}
}
})
2、事件传参
<ul>
<li v-for="item,index in stars" @click="clickEvent(index,item,$event)">
索引值:{{index}}----内容:{{item}}
</li>
</ul>
var app = new Vue({
el:"#app",
data:{
stars:['蔡徐坤','范冰冰','李晨']
},
methods:{
clickEvent:function(index,value,event){
console.log(index)
console.log(value)
console.log(event)
}
}
})
3、事件修饰符
通过由点 . 表示的指令后缀来调用修饰符。
.stop
- 阻止冒泡.prevent
- 阻止默认事件.capture
- 阻止捕获.self
- 只监听触发该元素的事件.once
- 只触发一次.left
- 左键事件 (鼠标).right
- 右键事件(鼠标).middle
- 中间滚轮事件(鼠标)
<!-- 阻止单击事件冒泡 -->
<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 事件只能点击一次,2.1.4版本新增 -->
<a v-on:click.once="doThis"></a>
4、按键修饰符
允许为 v-on 在监听键盘事件时添加按键修饰符:
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
全部的按键别名:
.enter
.tab
.delete
(捕获 "删除" 和 "退格" 键).esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
二、表单输入绑定
公共数据
let app = new Vue({
el:"#app",
data:{
username:"小明",
fruits:['苹果','雪梨',"香蕉","葡萄"],
checkFruits:[],
radioFruits:"",
citys:['北京',"上海","深圳","广州"],
chooseCity:"",
moreCity:[],
age:16
},
})
1、输入框
<div id="app">
<p>input 元素:</p>
<input v-model="username" placeholder="单行文本输入……">
<p>消息是: {{ username }}</p>
<p>textarea 元素:</p>
<p style="white-space: pre">{{ username }}</p>
<textarea v-model="username" placeholder="多行文本输入……"></textarea>
</div>
2、复选框
<h1>复选框:选择喜欢的水果</h1>
<span v-for="item in fruits">
{{item}}
<input type="checkbox" name="fruit" v-model="checkFruits" :value="item" />
</span>
<h2>{{checkFruits}}</h2>
3、单选框
<h1>单选框:选择最喜欢的水果</h1>
<span v-for="item in fruits">
{{item}}
<input type="radio" name="zfruit" v-model="radioFruits" :value="item" />
</span>
<h2>{{radioFruits}}</h2>
4、选项框
<h1>选项框:选择你居住的城市</h1>
<select v-model="chooseCity">
<option disabled value="">请选择</option>
<option v-for="item in citys" :value="item">{{item}}</option>
</select>
<h3>{{chooseCity}}</h3>
<h1>选项框:选择你喜欢的城市</h1>
<select v-model="moreCity" multiple="multiple">
<option v-for="item in citys" :value="item">{{item}}</option>
</select>
<h3>{{moreCity}}</h3>
修饰符
.lazy
在默认情况下, v-model 在 input 事件中同步输入框的值与数据,但你可以添加一个修饰符 lazy ,输入完成鼠标离开触发:
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
.number
如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值:
<input v-model.number="age" type="number">
这通常很有用,因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。
.trim
如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入:
<input v-model.trim="msg">
三、生命周期
let app = new Vue({
el:'#app',
data:{
msg:"helloVue",
className:"redBg"
},
beforeCreate() {
console.log('beforeCreate')
// 此时数据data和事件方法methods还未绑定到app对象上
},
created() {
console.log('created')
// 数据data和方法methods绑定到应用对象app上
console.log(this)
console.log(this.msg)
console.log(this.clickEvent)
},
beforeMount(){
//渲染之前,根据数据生成的DOM对象是获取不到的
console.log('beforeMount')
let dom = document.querySelector(".redBg")
console.log(dom)
},
mounted(){
console.log('mounted')
//渲染之后,可以获取数据生成的DOM对象
let dom = document.querySelector(".redBg")
console.log(dom)
},
beforeUpdate() {
//数据更改,但内容未更改之前
console.log('beforeUpdate')
},
updated() {
//内容已更新完毕
console.log('update')
},
beforeDestroy() {
//应用销毁之前
console.log("beforeDestory")
},
destroyed(){
//应用销毁之后
console.log("Destory")
}
})