[Vue] vue学习笔记(1): 模板语法，数据绑定，生成vue实例，数据代理，事件

vue是一个前端框架

2种模板语法

插值语法

一般用在标签内容里，用双层花括号标明 <h1>hello, {{name}}.</h1>

指令语法

vue自带的指令，一般以v-开头，用途广泛, 比如接下来的两个数据绑定的指令

数值绑定

• v-bind: 单向绑定，实例中的数据会影响模板中的数据，但不会被影响

<a v-bind:url="url">Using v-bind to set a url value</a>
<a :url="url">Using the shorthand of v-bind</a>
 
<input type="text" v-bind:value="value">
Using v-bind to set a value of input box which cannot change the value inside the vue instance
</input>

• v-model：实例和模板中的数据会互相影响，只能用在表单相关元素中，即有value属性的元素

<input type="text" v-model:value="value">
Using v-model to set a url value
</input>
 
<input type="text" v-model="value">
Using the shorthand of v-model, it defaults to read the value
</input>

生成vue实例

建立一个vue实例

// this is an example but it could be modified and improved
new Vue({
	el:'#root', //绑定的元素，#代表id，类似css
	data:{
		url:'http://this_is_a_url.com'
		student:{
			name:'rose',
			age:18
		}
	}
})

另一种写法，且在某些情况下更加推荐

const v = new Vue({
	// data() is a regular function rather than arrow function
	// the [this] of data() is v (vue instance)
	data(){
		return {
			url:'http://this_is_a_url.com'
			student:{
				name:'rose',
				age:18
			}
		}
	}
})
 
// mount to an element - outside the declaration
v.mount('#root')

数据代理

Object.defineProperty

为对象定义/增加一个属性，调用get/set方法返回/修改值

let student = {
	name: "alice",
	gender: "F"
}
let num = 22   // 演示get/set方法, age = num
 
Object.defineProperty(student, age, {
	// enumerable: true  // 属性是否可以被遍历枚举，默认false
	// writable: true  // 属性是否可以被修改，默认false
	// configurable: true  // 属性是否可以被删除，默认false
	
	// getter
	get() {
		console.log("Property read.")
		return num
	},
	
	set(val) {
		console.log("Property changed to ", val)
		num = val
	}
})

数据代理是指通过一个对象代理控制另一个对象的属性

在vue中，是指vue对象中data属性包含的值被修改时，_data下的值也被修改了，从而导致了网页的实时变化（？

事件

利用指令v-on:event=xxxx, 简写为@event=xxxx
事件后就是执行操作的函数（非箭头函数）

@click=showMsg($event, "September 2022")

如果没有其他参数，默认省略掉$event参数

@click=showMsg

事件后可以跟着一些简单的操作，如

@click="isReceived = !isReceived"

可以用分号隔开复数操作（不推荐）⚠️

@click="isReceived = !isReceived;i++"

浏览器内置函数不适用❌

@click="alter(1)"

example

❤️ 点 击 按 钮 获 得 快 乐 ❤️

<div id="root">
	<h2>先来两个按钮</h2>
	<button @click=showJoys1>点  击  按  钮  不  传  参</button>
	<button @click=showJoys2($event, 88)>获  得  快  乐  要  传  参</button>
</div>
 
<script type="text/javascript">
const vm = new Vue({
	el: "#root",
	data: {
		firstName: "Aisen",
		lastName: "Rolwell"
	},
	methods: {
		showJoy1(event){
			alter("小飞棍来喽")
		},
		showJoy2(event, number){
			alter(number)
		}
	},
})
</script>

事件修饰符

• prevent: preventDefault阻止默认事件
• stop：阻止事件冒泡
  子母元素同时绑定相同事件时，该修饰符可以令子元素触发时事件只发生一次
• once：事件只触发一次
• capture：使用事件的捕获模式
• passive：事件的默认行为立即执行，无需等待事件回调执行完毕
• self：只有event.target是当前操作的元素才触发事件
  e.g. @click.stop='xxx'; @wheel.passive

键盘事件

@keyup: 按下键再释放时，事件才触发
@keydown: 按下键时，事件被触发

中文	vue中的别名	备注
回车	enter
删除	delete	contains 'delete' & 'backspace'
退出	esc
空格	space
换行	tab	keydown only
上	up
下	down
左	left
右	right

特殊的修饰符
ctrl, alt, shift

• @keyup.xx.yy: 按下修饰键的同时，按下其他键，释放其他键时时间才会触发 e.g. @keyup.ctrl.y=xxx
• @keydown.xx: 正常触发事件

Vue.config.keyCodes自定义键码