Vue.js - 数据代理&方法

原创已于 2024-11-29 11:03:36 修改 · 1.1k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #ajax #css #node.js

于 2024-10-28 08:14:53 首次发布

Vue3.js 专栏收录该内容

9 篇文章

订阅专栏

1. Vue导入

最简单的方式，通过联网接入Vue3的接口

<script type="text/javascript" src="https://unpkg.com/vue@3"></script>

2. Vue实例

2.1 创建Vue实例

const vm = Vue.createApp({})

使用Vue中的createApp方法创建对应实例，其中以对象的形式{}进行自定义

2.2 Vue实例挂载

<div id='information'>
<p></p>
</div>

vm.mount('选择器')

需要将Vue实例搭载在对应标签上，标签及对应的子标签都会被Vue实例所涵盖

请注意，内嵌属性中想要运用Vue内容，需要使用“”，冒号中的变量对应Vue中的内容

3. 数据代理

3.1 MVVM模型

了解数据代理需要先了解MVVM模型，是数据代理的底层逻辑

MVVM模型

M：模型，存储在内部中的数据
V视图，模版代码，需要向用户展示的窗口
VM：视图模型，通过VM，将我们的M展示在V中

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://unpkg.com/vue@3"></script>
    </head>
    <body>
        <div id="information">
            <p>Name:{{name}}</p>
            <p>Age:{{age}}</p>
        </div>
        <script>
            const vm = Vue.createApp({
                data(){
                    return{
                        name:'Ricardo',
                        age:22
                    }
                }
            })
            vm.mount('#information')
        </script>
    </body>
</html>

在Vue3中数据代理是 Vue 的响应式系统的核心机制。当数据发生变化时自动更新视图。数据代理的目的是使开发者能轻松操作数据并与界面保持同步，而不需要手动更新视图。

在常规Javascript中，开发者常常需要手动获取Dom的标签解析其中数据，之后再改变对应数据再传入至文档中，Vue则可以实现快速完成数据的更替工作

-此处引用B站教程尚硅谷教学视频截图

Vue将用户所创建的data对象引入给内部$data(Vue3)，从而保存对应内容的数值

3.2 数据

创建一个data函数，返回我们所需要的数据对象内容，数据对象内容中可以继续嵌套数据对象

data(){
    return {
        name:'Louis',
        age:22
    }
}

data 是一个对象而不是函数，所有实例会共享同一个数据对象，导致数据污染。

使用data函数确保每次创建组件实例时，都会返回一个新的数据对象，使每个实例的状态彼此独立。

3.3 插值表达式

用于将 JavaScript 表达式的值动态插入到 HTML 模板中，Vue 会在模板编译时将插值表达式解析，并将相应的结果渲染到页面上。

{{相关变量名}} //插值

3.4 指令语法

""中的值对应的是存储在Vue中data的数据

• 单向绑定属性

v-bind:

<a v-bind:href='webpage'></a>

或者使用缩写形式

<a :href='webpage'></a>

可以对标签内部属性进行自定义，达到快速更改的效果，单向绑定只可以data流向页面

• 双向绑定属性

v-model:

<a v-model:href='webpage'></a>

双向绑定顾名思义，data可以流向页面，页面对相关属性进行修改之后，所对应Vue实例中的数据也会被修改

select元素

对于select元素绑定双向数据需要在select标签中声明

    <select v-model="userInfo.education">
      <option value="大专">大专</option>
      <option value="本科">本科</option>
      <option value="硕士">硕士</option>
    </select>

checkbox元素

在vue实例中需要使用数组进行接受，不然默认是布尔类型

    <input v-model="userInfo.hobby" type="checkbox" value="Game" />打游戏<br />
    <input v-model="userInfo.hobby" type="checkbox" value="Book" />看书<br />
    <input v-model="userInfo.hobby" type="checkbox" value="Swim" />游泳<br />

4. 事件处理

4.1 事件对象

事件对象，事件发生之后默认返回一个事件对象，其中包含了许多与当前事件相关的信息，比如哪个元素触发了事件、事件类型、鼠标位置等

在Vue中，使用v-on监听时间，并调用对应方法

<button v-on:click="handleClick">点击我</button>
<!-- 简写 -->
<button @click="handleClick">点击我</button>

不含（）函数输入默认参数为事件对象

双向绑定修饰符

.lazy	v-model.lazy只有在回车或者失去焦点之后数据才会同步
.number	将用户的输入限制为数字类型
.trim	自动过滤用户输入的首尾空白字符

4.2 键盘事件

4.2.1 基本键盘事件

方法会自动传入原生事件对象event，可以通过$event进行标识

keydown：按下键盘触发

<input @keydown="方法名" placeholder="提示">

keyup：松开键盘时触发

<input @keyup="方法名" placeholder="">

4.2.2 键位修饰符

对于特定的键位进行事件绑定

<input type="text" @keyup.enter="onEnter" placeholder="按回车提交">

键位修饰符	描述
.enter	回车键
.delete	删除键
.esc	Escape键
.up	上方向键
.down	左方向键
.space	空格键

鼠标中也可以进行声明特定的案件按键

.left	鼠标左键 @click.left
.right	鼠标右键
.middle	鼠标中

4.3 Vue方法

vue对象中使用methods去定义对象内的方法，函数与正常定义函数语法一致

methods:{
    display(){
        alert('Hello world')
    }
}

display()自动传入vm实例，可以任意读取vm中的data

vm.name = xx

4.4 事件修饰符

Vue提供了一系列修饰符来简化常见的事件处理逻辑

修饰符	作用	事例
.stop	阻止事件冒泡，针对于子标签中的事件，父标签中设定stop不会进行冒泡调用。简而言之不会向上传播事件	@click.stop=''
.prevent	阻止默认行为	@click.prevent=''
.capture	使用事件捕获模式，以此从上到下执行，默认情况是从下到上执行	@click.capture=''
.self	只有在当前元素触发事件才会执行	@click.self=''
.once	事件处理器只执行一次	@click.once=''
.passive	事件默认行为立即执行，无需等待时间	@click.passive=''