[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自定义键码