当前位置：首页 > news >正文

Vue学习（一）初识Vue、事件

news 来源：原创 2024/9/21 1:08:07

本人是后端开发的，想着多学些前端丰富自己的技术，感觉总能用的上，而且我觉得前端好玩，有着挺大的兴趣，就准备出这个专栏。本人没系统学过前端，只是大致学了一下三件套，然后来学vue，好多地方写的不好，请见谅。

Vue实例

创建Vue实例：new Vue()

在括号中

可以指定一些配置的参数

el：el用于指定当前Vue实例为哪个容器服务，值通常为css选择器，例如可以为：

el:’#root’ （root为id）或 el:’.abc’ （abc为class）
data：data中用于存储数据，数据供el所指定的容器去使用

new Vue({el:'#root',data:{name:'李二狗',age:20}})

注：

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
root容器中的代码依然符合html规范，只不过混入了一些Vue语法
root容器中的代码被称为Vue模板
一个Vue实例只能对应一个容器
真实开发中只有一个Vue实例，并且会配合着组件一起使用
一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新

el还有一种写法，Vue实例.$mount(’#root’)

data也还有一种写法，写作函数式的方式，函数的返回值要是一个对象，在data的函数式中，this指的是此Vue实例（到了以后学习组件时，要用函数式）（此函数以及Vue实例管理的函数都不要写成箭头函数，否则箭头函数将不会是Vue实例）

const x = new Vue({data:function(){return {name:'李二狗',url1:"<https://www.csdn.net>"}}})x.$mount('#root')//data还可以写作：//data(){//  return{//    name:'xxx',//    ……//  }//}

模板语法

插值语法：在标签体中，要插值的地方写上{{expr}}，其中expr指的是表达式可以是普通的js表达式，可以是data的数据

指令语法：指令语法的格式为v-xxx，在标签的属性前加上v-xxx:属性=”yyy”，此时yyy便会当作一个js表达式被解析，上同。

插值语法用于标签体中插值

指令语法用于决定标签属性的值、绑定事件、也可以解析标签体内容

    <div id="root"><h1>插值语法</h1><hr/><h3>你好，{{name}} </h3><br/><a v-bind:href="url1">csdn进入</a></div>

数据绑定

单向数据绑定：数据只能从data流向页面，不能从页面流向data，使用v-bind

v-bind:属性可以写做 :属性

双向数据绑定：数据既能从data流向页面，也能从页面流向data，使用v-model

v-model只能应用在表单类元素（输入类元素，如input、select、checkbox等）上

v-model:value可以简写成v-model，因为v-model默认收集的就是value值

MVVM

M：模型（Model）：对应data中的数据

V：视图（View）：模板

VM：视图模型（ViewModel）：Vue实例对象

vm的作用是介于视图和模型之间，连接二者，连同二者的数据

数据代理

通过一个对象代理对另一个对象中属性的操作（读/写）就是数据代理

Vue中数据代理的好处：更加方便地操作data中的数据

基本原理：

通过Object.defineProperty()，把data对象中所有属性添加到vm上

为每一个添加到vm上的属性，都指定一个getter和setter

在getter/setter内部区操作（读/写）data中的对应的属性

事件

以点击事件为例：

点击事件：v-on:click=”函数名”，可以简写为@click=”函数名”，函数是在Vue实例里面的methods属性里面的函数，这些回调函数是在vm中的，同样不能用箭头函数，否则this就不是指的vm了

在使用@click=”函数名”时，函数可以有一个event的实参来接收代表此次事件的一个对象，如果要往函数中加入参数，可以使用@click=”函数名(形式参数，形式参数，……)”

如果要在参数中预留一个event对象，在上面的参数中使用$event来代替一个形参，然后在函数的相应参数列表的位置留一个event就行

例如：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite App</title><script type="text/javascript" src="../vue.js"></script></head><body><div id="root"><h3>你好，{{name}} </h3><br/><button v-on:click="showInfo">点我提示信息</button><button v-on:click="showInfo2(666,$event)">点我提示信息2</button></div></body><script type="text/javascript">new Vue({el:'#root',data:function(){return {name:'李二狗'}},methods: {showInfo(){alert("你好二狗")},showInfo2(a,event){alert("你好熊猫" + a)}}})</script>
</html>

事件修饰符

比如使用在超链接标签中使用@click.event=”函数”，在点击超链接后，就可以阻止默认的跳转页面行为

Vue中的事件修饰符：

prevent：阻止默认事件
stop：阻止事件冒泡
noce：事件只触发一次
captrue：使用事件的捕获模式
self：只有event.target是当前操作的元素时才触发事件
passive：事件的默认行为立即执行，无需等待事件回调执行完毕

例：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite App</title><script type="text/javascript" src="../vue.js"></script><style>*{margin-top: 20px;}.demo1{height: 50px;background-color: skyblue;}.box1{padding: 5px;background-color: antiquewhite;}.box2{padding: 5px;background-color: honeydew;}.list{width: 200px;height: 200px;background-color: peru;overflow: auto;}li{height: 100px;}</style></head><body><div id="root"><h3>你好，{{name}} </h3><br/><button v-on:click="showInfo">点我提示信息</button><button v-on:click="showInfo2(666,$event)">点我提示信息2</button><!--阻止默认事件--><a href="<http://www.atguigu.com>" @click.prevent="showInfo">宝贝，点我</a><!--阻止事件冒泡--><div class="demo1" @click="showInfo"><button @click.stop="showInfo">宝，再点我</button></div><!--事件只能触发一次--><button @click.once="showInfo">点我提示信息3</button><!--使用事件的捕获模式，即让其在捕获阶段就开始处理，而不是冒泡阶段处理--><div class="box1" @click.capture="showMsg(1)">div1<div class="box2" @click="showMsg(2)">div2</div></div><!--只有event.target是当前操作的元素时才触发事件，比如下面，只有点击相应容器才会触发事件，不会因为点击了容器内的按钮而冒泡触发事件--><div class="demo1" @click.self="showInfo"><button @click="showInfo2(4,$event)">点我提示信息4</button></div><!--事件的默认行为立即执行，无需等待事件回调执行完毕--><!--在此处，没有passive修饰符时当一万个#符号没有输出完成后，这期间的所有的滚动不会继续计数（事件的默认行为），直到所有的#加载完成，才会继续计数--><!--设置了修饰符passive后，不用特地等回调方法执行完成也可以继续事件的默认行为，比如此处也可以正常计数--><ul @wheel.passive="demo" class="list"><li>1</li><li>2</li><li>3</li><li>4</li></ul></div></body><script type="text/javascript">new Vue({el:'#root',data:function(){return {name:'李二狗'}},methods: {showInfo(){alert("你好二狗")},showInfo2(a,event){alert("你好熊猫" + a)},showMsg(num){console.log(num)},demo(){console.log("@")for(let i = 0;i < 10000;i++){console.log("#")}console.log("累坏了")}}})</script>
</html>

注：事件修饰符可以连着使用，比如@xxxxx.prevent.stop.……

键盘事件

键盘事件分为两个：@keyup（按钮抬起）和@keydown

enter修饰符代表按下enter键才触发事件，这个enter就是enter的别名，有九个按键有着别名，可以使用其别名作为修饰符，指定只有按下相应的按钮才能触发事件

回车：enter
删除（backspace键和delete键）：delete
退出（esc）：esc
空格：space
换行：tab（要配合keydown使用）
上：up
下：down
左：left
右：right

例如：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite App</title><script type="text/javascript" src="../vue.js"></script></head><body><div id="root"><h3>你好，{{name}} </h3><br/><input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo"></div></body><script type="text/javascript">new Vue({el:'#root',data:{name:'李二狗',},methods: {showInfo(e){console.log(e.target.value)}},})</script>
</html>

Vue未提供别名的按键，可以使用按键原始的key值去绑定，但是要注意要转为kebab-case（短横线命名）

系统修饰键：ctrl、alt、shift、meta（一般也叫win键）

配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。比如要ctrl加y才触发，就是@keyup.ctrl.y

配合keydown使用：正常触发事件

也可以使用@keyxxx.按键编码，但是不推荐

Vue.config.keyCodes.自定义键名 = 按键编码，可以自定义按键别名