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

二狗mao2024-07-21 13:16

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

Vue实例

创建Vue实例：new Vue()

在括号中

可以指定一些配置的参数

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

    el:'#root' （root为id） 或 el:'.abc' （abc为class）

  • data：data中用于存储数据，数据供el所指定的容器去使用

javascript 复制代码 
new Vue({
      el:'#root',
      data:{
        name:'李二狗',
        age:20
      }
    })

注：

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

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

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

javascript 复制代码 
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表达式被解析，上同。

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

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

html 复制代码 
    <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就行

例如：

html 复制代码 
<!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中的事件修饰符：

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

例：

html 复制代码 
<!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的别名，有九个按键有着别名，可以使用其别名作为修饰符，指定只有按下相应的按钮才能触发事件

  1. 回车：enter
  2. 删除（backspace键和delete键）：delete
  3. 退出（esc）：esc
  4. 空格：space
  5. 换行：tab（要配合keydown使用）
  6. 上：up
  7. 下：down
  8. 左：left
  9. 右：right

例如：

html 复制代码 
<!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.自定义键名 = 按键编码，可以自定义按键别名

相关推荐
刺客-Andy15 分钟前
React 第十九节 useLayoutEffect 用途使用技巧注意事项详解
前端·javascript·react.js·typescript·前端框架
谢道韫66620 分钟前
今日总结 2024-12-27
开发语言·前端·javascript
嘤嘤怪呆呆狗30 分钟前
【插件】vscode Todo Tree 简介和使用方法
前端·ide·vue.js·vscode·编辑器
ᥬ 小月亮43 分钟前
Js前端模块化规范及其产品
开发语言·前端·javascript
码小瑞1 小时前
某些iphone手机录音获取流stream延迟问题 以及 录音一次第二次不录音问题
前端·javascript·vue.js
weixin_1891 小时前
‌Vite和Webpack区别 及 优劣势
前端·webpack·vue·vite
半吊子伯爵1 小时前
开发过程优化·自定义鼠标右键菜单
前端·javascript·自定义鼠标右键菜单
xcLeigh1 小时前
HTML5实现好看的喜庆圣诞节网站源码
前端·html·html5
Tirzano1 小时前
vue3 ts 简单动态表单 和表格
前端·javascript·vue.js
杰~JIE1 小时前
前端工程化概述（初版）
前端·自动化·工程化·前端工程化·sop
热门推荐
01新手学习VR全景需要知道的几个问题02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间06HCIA-datacom数通题库和录播视频资料07docker安装启动问题解决排查08【一文读懂】NTN（非地面网络）技术介绍09支付宝短视频平台创作分成激励项目10组基轨迹建模 GBTM的介绍与实现（Stata 或 R）