【vue教程】二. Vue特性原理详解

news2024/11/15 6:51:57

目录

    • 回顾
    • 本章涵盖知识点
    • Vue 实例和选项
      • 创建 Vue 实例
      • Vue 实例的选项
    • Vue 模板语法
      • 插值表达式
      • 指令
        • v-bind
        • v-model
        • v-on
    • 自定义指令
      • 创建自定义指令
      • 在模板中使用自定义指令
      • 自定义指令的`钩子函数`
      • 自定义指令的实例演示
    • 指令注册
      • 局部注册指令
      • 过滤器
    • 数据绑定和响应式原理
      • 响应式数据绑定示例
      • 响应式原理解析
    • v-model 的自定义实现
      • 自定义`v-model`
      • 扩展知识点
    • 事件处理和表单输入
      • 事件处理示例
      • 表单输入绑定
    • 深入数据绑定
      • 对象和数组的更新
        • 更新对象属性
        • 更新数组
      • 修饰符
        • 使用修饰符
      • 按键修饰符
        • 监听特定按键
    • 组件基础
      • 组件的创建和使用
      • 组件的 props
      • 组件事件
    • 结语

回顾

  • 【vue教程】一. 环境搭建与代码规范配置

在上一篇文章中,我们介绍了 Vue.js 的起源、设计理念、核心特性 已经项目规范化配置 。我们学习了如何搭建 Vue 开发环境,并熟悉了一些常用的 Vue 开发工具和插件

本章涵盖知识点

  • Vue 实例和选项
  • 模板语法:插值、指令、过滤器
  • 数据绑定和响应式原理
  • 事件处理和表单输入、v-model 原理
  • 组件基础

在这里插入图片描述

正文开始如果觉得文章对您有帮助,请帮我三连+订阅,谢谢💖💖💖


Vue 实例和选项

每个 Vue 应用都是从创建一个新的 Vue 实例开始的。Vue 实例是一个包含选项的对象,这些选项包括数据方法生命周期钩子等。

创建 Vue 实例

var vm = new Vue({
  el: "#app", // 指定Vue应该绑定到的DOM元素
  data: {
    message: "Hello Vue!", // 响应式数据
  },
  methods: {
    sayHello: function () {
      alert(this.message);
    },
  },
});

在这个实例中,el属性指定了 Vue 将接管哪个 DOM 元素,data属性包含了 Vue 实例的数据对象,methods属性包含了 Vue 实例可以调用的方法。

Vue 实例的选项

Vue 实例有多种选项,以下是一些常用的选项:

  • data: 组件的数据对象。
  • methods: 定义组件的方法。
  • computed: 定义计算属性。
  • watch: 定义侦听器。
  • props: 子组件的外部数据。
  • el: 指定 Vue 应该绑定到的 DOM 元素。

Vue 模板语法

Vue 的模板语法让我们能够声明式地将数据渲染进 DOM。

插值表达式

插值表达式允许我们把数据插到模板中。

<span>Message: {{ message }}</span>

message数据变化时,页面上对应的文本也会更新。

指令

指令是 Vue 模板中的特殊标记,带有前缀v-,用于告诉 Vue 框架需要对 DOM 元素进行一些特殊的处理。

v-bind

用于动态地绑定一个或多个属性,或一个组件 prop。

<img :src="imageUrl" :alt="imageDescription" />
v-model

在表单输入和应用状态之间创建双向数据绑定。

<input v-model="username" placeholder="Enter your name" />
v-on

监听 DOM 事件。

<button @click="sayHello">Say Hello</button>

自定义指令

Vue 允许我们通过自定义指令向元素添加自己的功能。自定义指令 可以钩入到 Vue 的编译过程中,允许我们对元素进行低层次操作。

创建自定义指令

// 注册一个全局自定义指令 `v-focus`
Vue.directive("focus", {
  // 当被绑定的元素插入到DOM时……
  inserted: function (el) {
    // 聚焦元素
    el.focus();
  },
});

在模板中使用自定义指令

<input v-focus />

自定义指令的钩子函数

自定义指令有以下几个钩子:

  • bind: 只调用一次,指令第一次绑定到元素时调用。
  • inserted: 被绑定元素插入父组件时调用。
  • update: 所在组件的 VNode 更新时调用。
  • componentUpdated: 父组件更新,该钩子被调用。
  • unbind: 只调用一次,指令与元素解绑时调用。

自定义指令的实例演示

假设我们需要一个指令来控制元素的尺寸,根据数据属性调整大小:

Vue.directive("resize", {
  bind(el, binding) {
    el.style.width = binding.value.width + "px";
    el.style.height = binding.value.height + "px";
  },
  update(el, binding) {
    if (binding.oldValue !== binding.value) {
      el.style.width = binding.value.width + "px";
      el.style.height = binding.value.height + "px";
    }
  },
});

在模板中使用:

<div v-resize="resizeObj"></div>

其中resizeObj是 Vue 实例的数据对象,包含widthheight属性。

指令注册

指令不仅可以全局注册,还可以局部注册到单个 Vue 实例。

局部注册指令

new Vue({
  directives: {
    focus: {
      // 指令定义
      inserted: function (el) {
        el.focus();
      },
    },
  },
});

在实例的模板中使用:

<input v-focus />

过滤器

过滤器用于在插值表达式中转换输出文本。

<p>{{ message | capitalize }}</p>
filters: {
  capitalize: function (value) {
    if (!value) return '';
    value = value.toString();
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}

数据绑定和响应式原理

Vue 的数据绑定是通过响应式系统实现的,该系统确保数据变化时视图能自动更新。

响应式数据绑定示例

data: {
  firstName: 'John',
  lastName: 'Doe'
}

在模板中:

<p>{{ firstName }} {{ lastName }}</p>

firstNamelastName变化时,视图会自动更新。

响应式原理解析

Vue 使用Object.defineProperty来劫持数据对象的属性,当属性值变化时,视图会自动更新。

v-model 的自定义实现

v-model在 Vue 中通常用于创建数据双向绑定,它主要是语法糖,背后是:value@input的结合。在组件中,我们可以自定义v-model的行为。

自定义v-model

在组件中,我们可以通过model选项来自定义v-model

Vue.component("child-component", {
  model: {
    prop: "customValue", // 指定prop的名称
    event: "change", // 指定事件的名称
  },
  props: ["customValue"],
  methods: {
    updateValue: function (event) {
      this.$emit("change", event.target.value); // 触发事件,并传入新值
    },
  },
  template: `
    <input type="text" :value="customValue" @input="updateValue">
  `,
});

使用自定义v-model的组件:

<child-component v-model="parentValue"></child-component>

在这个示例中,parentValue是父组件中的数据,通过v-modelchild-component组件绑定。组件内部,我们监听input事件,并在事件发生时,通过$emit触发一个change事件,并传递新的值。

扩展知识点

  • 修饰符v-model可以与修饰符一起使用,如.lazy.number.trim,以控制输入的更新时机和行为。
  • 不同类型的输入处理:对于radiocheckboxselect等不同类型的表单元素,Vue 提供了不同的处理方式来确保v-model的双向绑定能正常工作。

事件处理和表单输入

Vue 允许我们在模板中直接监听 DOM 事件,并在 Vue 实例的方法中处理这些事件。

事件处理示例

methods: {
  sayHello: function () {
    alert('Hello ' + this.username);
  }
}

在模板中:

<button @click="sayHello">Say Hello</button>

表单输入绑定

<input v-model="username" placeholder="Enter your name" />

当用户在输入框中输入时,username的值将自动更新,并且如果username在数据对象中变化,输入框的内容也会同步更新。

深入数据绑定

Vue 的数据绑定不仅限于简单的文本展示和表单输入,它还包括更复杂的场景。

对象和数组的更新

Vue 可以响应式地更新对象和数组,但需要注意使用Vue.set来保持响应性。

更新对象属性
// 对于新属性
Vue.set(vm.someObject, "newProperty", 123);
更新数组
// 添加元素
vm.someArray.push(123);
// 删除元素
vm.someArray.splice(index, 1);

修饰符

Vue 提供了事件处理的修饰符,如.stop.prevent.capture等,来简化事件处理。

使用修饰符
<button @click.stop="sayHello">Say Hello</button>

按键修饰符

Vue 允许你监听特定的按键,如.enter.tab等。

监听特定按键
<input @keyup.enter="onEnter" />

组件基础

Vue 组件系统是构建大型应用程序的关键。组件允许我们通过组合较小的、可复用的部件来构建大型应用程序。

组件的创建和使用

Vue.component("my-component", {
  template: "<div>A custom component!</div>",
});

在模板中使用:

<my-component></my-component>

组件的 props

组件可以接受外部传入的数据,这些数据被称为 props。

Vue.component("child-component", {
  props: ["greeting"],
  template: "<p>{{ greeting }}</p>",
});

使用:

<child-component :greeting="'Hello from parent!'"></child-component>

组件事件

组件可以触发事件,这些事件可以被父组件监听。

Vue.component("child-component", {
  template: `
    <button @click="notifyParent">Click me</button>
  `,
  methods: {
    notifyParent() {
      this.$emit("notify", "Message from child");
    },
  },
});

父组件监听事件:

<child-component @notify="handleNotification"></child-component>
methods: {
  handleNotification: function (message) {
    alert(message);
  }
}

结语

通过本篇文章,我们全面学习了 Vue 的基础语法,包括 Vue 实例和选项、模板语法、数据绑定、事件处理、组件系统的基础,以及过滤器。这些知识点构成了 Vue 应用开发的基础。在接下来的专栏文章中,我们将继续深入探索 Vue 的高级特性和最佳实践。


欢迎在文章下方留言,分享学习 Vue 基础语法的心得体会,或提出在学习过程中遇到的问题。我将在后续的文章中提供解答和指导。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1923936.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

开源PHP论坛HadSky本地部署与配置公网地址实现远程访问

文章目录 前言1. 网站搭建1.1 网页下载和安装1.2 网页测试1.3 cpolar的安装和注册 2. 本地网页发布2.1 Cpolar临时数据隧道2.2 Cpolar稳定隧道&#xff08;云端设置&#xff09;2.3 Cpolar稳定隧道&#xff08;本地设置&#xff09;2.4 公网访问测试 总结 前言 今天和大家分享…

[Vulnhub] Simple CuteNews-CMS+Kernel权限提升

信息收集 IP AddressOpening Ports192.168.8.104TCP:80 $ nmap -p- 192.168.8.104 --min-rate 1000 -sC -sV PORT STATE SERVICE VERSION 80/tcp open http Apache httpd 2.4.7 ((Ubuntu)) |_http-title: Please Login / CuteNews |_http-server-header: Apache/2.4.7…

2024辽宁省大学数学建模竞赛试题思路

A题 (1) 建立模型分析低空顺风风切变对起飞和降落的影响 模型假设 飞机被视为质点&#xff0c;忽略其尺寸和形状对风阻的影响。风切变仅考虑顺风方向的变化&#xff0c;忽略其他方向的风切变。飞机的飞行速度、高度和姿态&#xff08;如迎角、俯仰角&#xff09;是变化的&am…

Shopee马来西亚站点八月开始强制规定使用电子发票

马来西亚国内税收局 (IRBM) 宣布&#xff0c;从 2024 年 8 月 1 日起&#xff0c;将强制采用电子发票。 所有卖家必须在 2024 年 7 月 31 日之前提交强制性信息/文件&#xff0c;以遵守电子发票要求。 此项电子发票的实施意味着卖家们在平台上的买卖的透明性将会增强&#xff…

将swagger注解导入apifox的IDEA配置

在使用IDEA开发中&#xff0c;经常需要将后端接口导出到Apifox&#xff0c;以便于测试。将swagger注解内容导出到Apifox中&#xff0c;需要进行以下设置: file->settting打开对话框&#xff0c;选择Other Settings -> Apifox Help&#xff0c;如下图&#xff1a; 2.选…

国产精品ORM框架-SqlSugar详解 SqlSugar初识 专题一

国产精品ORM框架-SqlSugar详解 1、SqlSugar初识 2、开始实操 3、增删改操作 4、进阶功能 5、集成整合 6、脚手架应用 sqlsugar 官网-CSDN博客 国产精品ORM框架-SqlSugar详解 SqlSugar初识 专题二-CSDN博客 1、SqlSugar初识 1.1 基本概念和历史 SqlSugar 是一款 老牌 …

eNsp公司管理的网络NAT策略搭建

实验拓扑图 实验需求&#xff1a; 7&#xff0c;办公区设备可以通过电信链路和移动链路上网(多对多的NAT&#xff0c;并且需要保留一个公网IP不能用来转换) 8&#xff0c;分公司设备可以通过总公司的移动链路和电信链路访问到Dmz区的http服务器 9&#xff0c;多出口环境基于带…

Start11 V2(Windows 开始菜单美化工具 )值得购买吗?

去年底 Stardock 正式推出了 Start11 V2&#xff0c;与第一代 Start11 相比&#xff0c;新版带来了超过 50 项的新特性&#xff0c;其中包括&#xff1a; 全新的开始菜单样式、应用图标分组 / 换色、固定任意程序 / 文件 / 文件夹到任务栏、配置备份还原…… 开始菜单的新样…

Vue 最新动态!!!

大家好,我是CodeQi! 一位热衷于技术分享的码仔。 当Vue 3.4在六个月前发布时,整个前端开发社区都为之振奋。这次更新不仅带来了许多新特性,还解决了许多开发过程中遇到的痛点。 然而,时间飞逝,随着我在项目中不断应用这些新特性,逐渐积累了很多宝贵的经验和心得。 今…

Python-PLAXIS自动化建模技术与典型岩土工程案例

有限单元法在岩土工程问题中应用非常广泛&#xff0c;很多软件都采用有限单元解法。在使用各大软件进行数值模拟建模的过程中&#xff0c;岩土工程中的各种问题&#xff08;塑性、渗流、固结、动力、稳定安全、热力TM&#xff09;&#xff0c;一步一步地搭建自己的Plaxis模型&a…

《昇思25天学习打卡营第17天 | CycleGAN图像风格迁移互换》

《昇思25天学习打卡营第17天 | CycleGAN图像风格迁移互换》 目录 《昇思25天学习打卡营第17天 | CycleGAN图像风格迁移互换》模型介绍模型简介模型结构 数据集数据集下载数据集加载可视化 构建生成器构建判别器优化器和损失函数前向计算计算梯度和反向传播模型训练模型推理参考…

大模型-基于大模型的数据标注

方法来自于这篇论文&#xff1a; Can Generalist Foundation Models Outcompete Special-Purpose Tuning? Case Study in Medicine。 一.背景 假设&#xff0c;存在一批标注好的数据D_labeled&#xff0c;其包含m个标注样本(x, y)。 目标是&#xff0c;基于D_labeled&#…

Redis集群和高可用

文章目录 一、Redis主从复制redis主从复制架构主从复制实现主从复制故障恢复主从复制优化主从复制过程 主从同步优化配置 二、哨兵模式 (Sentinel)redis集群介绍哨兵 (Sentinel)工作原理实现哨兵主从复制哨兵配置文件 三、Redis cluster架构工作原理Redis cluster架构实现集群 …

电表及销售统计Python应用及win程序

暑假每天都要填表算账很烦躁&#xff0c;就整了个小程序来减轻压力 程序可以做到记录输入的每一条数据&#xff0c;并用新数据减去旧数据算新增的量&#xff0c;同时记录填写时间 Python代码 import json import os # 导入os模块 from datetime import datetime from tkint…

防火墙NAT智能选举综合实验

目录 实验拓扑 实验要求 实验思路 实验配置 需求7 需求8 需求9 需求10 需求11 实验拓扑 实验要求 7.办公区设备可以通过电信链路和移动链路上网(多对多的NAT&#xff0c;并且需要保留一个公网IP不能用来转换) 8.分公司设备可以通过总公司的移动链路和电信链路访问到d…

Python数据分析案例52——基于SSA-LSTM的风速预测(麻雀优化)

案例背景 又要开始更新时间序列水论文的系列的方法了&#xff0c;前面基于各种不同神经网络层&#xff0c;还有注意力机制做了一些缝合模型。 其实论文里面用的多的可能是优化算法和模态分解&#xff0c;这两个我还没出专门的例子&#xff0c;这几天正好出一个优化算法的例子来…

RocketMQ~架构了解

简介 RocketMQ 具有高性能、高可靠、高实时、分布式 的特点。它是一个采用 Java 语言开发的分布式的消息系统&#xff0c;由阿里巴巴团队开发&#xff0c;在 2016 年底贡献给 Apache&#xff0c;成为了 Apache 的一个顶级项目。 在阿里内部&#xff0c;RocketMQ 很好地服务了集…

优化Cocos Creator 包体体积

优化Cocos Creator 包体体积 引言一、优化图片文件体积&#xff1a;二、优化声音文件体积&#xff1a;三、优化引擎代码体积&#xff1a;四、 优化字体字库文件大小&#xff1a; 引言 优化Cocos Creator项目的包体体积是一个常见且重要的任务&#xff0c;尤其是在移动设备和网…

【高中数学/幂函数】比较a=2^0.3,b=3^0.2,c=7^0.1的大小

【问题】 比较a2^0.3,b3^0.2,c7^0.1的大小 【解答】 a2^0.32^3/10(2^3)^1/108^1/10 b3^0.23^2/10(3^2)^1/109^1/10 c7^0.17^1/10 由于yx^1/10在x正半轴是增函数&#xff0c;底数大的得数就大。 因为9>8>7,所以b>a>c 【图像】 在图像上绘出曲线yx^1/10&…

红日靶场----(三)1.漏洞利用

上期已经信息收集阶段已经完成&#xff0c;接下来是漏洞利用。 靶场思路 通过信息收集得到两个吧靶场的思路 1、http://192.168.195.33/phpmyadmin/&#xff08;数据库的管理界面&#xff09; root/root 2、http://192.168.195.33/yxcms/index.php?radmin/index/login&am…