vue 学习笔记（二）

一、事件

可以用 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")
	}
})