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

Vue-2-前端框架Vue基础入门之二

article 2025/9/19 17:13:39

文章目录

1 计算属性
- 1.1 计算属性简介
- 1.2 计算属性示例
2 侦听器
- 2.1 简单的侦听器
- 2.2 深度监听
- 2.3 监听对象单个属性
3 vue-cli
- 3.1 工程化的Vue项目
- 3.2 Vue项目的运行流程
4 vue组件
- 4.1 Vue组件的三个部分
- - 4.1.1 template
  - 4.1.2 script
  - 4.1.3 style
- 4.2 组件之间的关系
- - 4.2.1 使用组件的三个步骤
  - 4.2.2 通过components注册私有子组件
  - 4.2.3 注册全局组件
5 参考附录

计算属性、侦听器的概念。Vue.js开发的标准工具vue-cli。每个vue组件中必须包含template模板结构，而script行为和style样式是可选的组成部分。

1 计算属性

1.1 计算属性简介

计算属性指的是通过一系列运算之后，最终得到一个属性值。
这个动态计算出来的属性值可以被模板结构或methods方法使用。

① 虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性。
② 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算。

1.2 计算属性示例

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8"><title>Title</title><!-- 1、导入vue.js的script脚本文件 --><script src="./lib/vue.global.js"></script></head><body><!-- 2、声明将要被Vue控制的Dom区域 --><div id="app"><p>message 的值是：{{ formatMessage }}</p></div><!-- 3、创建Vue实例并挂载到指定的Dom区域 --><script>Vue.createApp({data() {return {message: 'hello vue.js'}},computed: {// 计算属性：将 message 首字母大写formatMessage() {const first = this.message.charAt(0).toUpperCase();const other = this.message.slice(1);return first + other;}}}).mount('#app')</script></body>
</html>

在这里插入图片描述

2 侦听器

watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
语法格式如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><!-- 1、导入vue.js的script脚本文件 --><script src="./lib/vue.global.js"></script></head><body><!-- 2、声明将要被Vue控制的Dom区域 --><div id="app"><p>用户名的值是：{{ username }}</p></div><!-- 3、创建Vue实例并挂载到指定的Dom区域 --><script>Vue.createApp({data() {return {username: 'lucy'}},// 所有的侦听器，都应该被定义到 watch 节点下watch: {// 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可// 新值在前，旧值在后username(newVal, oldVal) {cons.log( newVal, oldVal )}}}).mount('#app')</script></body>
</html>

2.1 简单的侦听器

实现了一个简单的侦听器来响应数据的变化！

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><!-- 1、导入vue.js的script脚本文件 --><script src="./lib/vue.global.js"></script></head><body><!-- 2、声明将要被Vue控制的Dom区域 --><div id="app"><input v-model="inputText" placeholder="输入一些内容"><p>你输入的内容是：{{ inputText }}</p><p>内容的反转版本是：{{ reversedText }}</p></div><!-- 3、创建Vue实例并挂载到指定的Dom区域 --><script>Vue.createApp({data() {return {inputText: '',reversedText: ''}},// 所有的侦听器，都应该被定义到 watch 节点下watch: {// 当 inputText 改变时，触发该函数inputText(newVal) {// 反转输入内容并更新 reversedTextthis.reversedText = newVal.split('').reverse().join('');}}}).mount('#app')</script></body>
</html>

在这里插入图片描述

2.2 深度监听

如果watch侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用deep选项。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><!-- 1、导入vue.js的script脚本文件 --><script src="./lib/vue.global.js"></script></head><body><!-- 2、声明将要被Vue控制的Dom区域 --><div id="app"><input v-model="user.name" placeholder="输入用户名"><p>当前用户名：{{ user.name }}</p></div><!-- 3、创建Vue实例并挂载到指定的Dom区域 --><script>Vue.createApp({data() {return {user: {name: '张三'}}},// 所有的侦听器，都应该被定义到 watch 节点下watch: {// 深度监听 user 对象user: {handler(newVal) {console.log('user 发生了变化：', newVal);},deep: true, // 开启深度监听immediate: false // 可根据需要设置为 true}}}).mount('#app')</script></body>
</html>

在这里插入图片描述
注意：对象中任何一个属性变化了，都会触发“对象的侦听器”。

2.3 监听对象单个属性

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><!-- 1、导入vue.js的script脚本文件 --><script src="./lib/vue.global.js"></script></head><body><!-- 2、声明将要被Vue控制的Dom区域 --><div id="app"><input v-model="user.name" placeholder="输入用户名"><hr><input v-model="user.company" placeholder="输入公司"><p>当前用户名：{{ user.name }}</p><p>当前公司：{{ user.company }}</p></div><!-- 3、创建Vue实例并挂载到指定的Dom区域 --><script>Vue.createApp({data() {return {user: {name: '张三', company: '字节跳动'}}},// 所有的侦听器，都应该被定义到 watch 节点下watch: {// 如果要侦听的是对象的子属性的变化，则必须包裹一层单引号'user.name'(newVal) {console.log(newVal)}}}).mount('#app')</script></body>
</html>

在这里插入图片描述

3 vue-cli

单页面应用程序(Single Page Application)简称SPA，顾名
思义，指的是一个Web网站中只有唯一的一个HTML页面，所有的功能与交互都在这唯一的一个页面内完成。

vue-cli是Vue.js开发的标准工具，它简化了程序员基于webpack创建工程化的Vue项目的过程。

3.1 工程化的Vue项目

vue-cli是npm上的一个全局包，使用npm install命令，即可方便的把它安装到自己的电脑上：

npm install -g @vue/cli

基于vue-cli快速生成工程化的Vue项目：

vue create 项目的名称

3.2 Vue项目的运行流程

在工程化的项目中，vue要做的事情很单纯：通过main.js把App.vue渲染到index.html的指定区域中。

其中：
① App.vue用来编写待渲染的模板结构。
② index.html中预留被Vue控制的Dom区域。
③ main.js把App.vue渲染到了index.html所预留的区域中。
在这里插入图片描述

4 vue组件

组件化开发指的是：根据封装的思想，把页面上可重用的UI结构封装为组件，从而方便项目的开发和维护。

vue是一个支持组件化开发的前端框架。
vue中规定：组件的后缀名是.vue。
App.vue文件本质上就是一个vue的组件。

4.1 Vue组件的三个部分

每个.vue组件都由3部分构成，分别是：
template -> 组件的模板结构。
script -> 组件的JavaScript行为。
style -> 组件的样式。
其中，每个组件中必须包含template模板结构，而script行为和style样式是可选的组成部分。

4.1.1 template

vue规定：每个组件对应的模板结构，需要定义到 template节点中。

<template>//模板内容
</template>

(1)template是vue提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的DOM元素。
(2)template中只能包含唯一的根节点。

4.1.2 script

vue规定：开发者可以在script节点中封装组件的JavaScript业务逻辑。

<script>
// 默认导出。这是固定写法！
export default {// data 数据源// 注意：.vue 组件中的 data 不能像之前一样，不能指向对象。// 注意：组件中的 data 必须是一个函数data() {// 这个 return 出去的 { } 中，可以定义数据return {username: ''}},methods: {changeName() {// 在组件中， this 就表示当前组件的实例对象console.log(this)this.username = '哇哈哈'}},// 当前组件中的侦听器watch: {},// 当前组件中的计算属性computed: {},
}
</script>

4.1.3 style

vue 规定：组件内的style节点是可选的，开发者可以在style节点中编写样式美化当前组件的UI结构。

<style>
.test-box {background-color: pink;
}
</style>

4.2 组件之间的关系

(1)组件在被封装好之后，彼此之间是相互独立的，不存在父子关系。
(2)在使用组件的时候，根据彼此的嵌套关系，形成了父子关系、兄弟关系。

4.2.1 使用组件的三个步骤

在这里插入图片描述

4.2.2 通过components注册私有子组件

在组件A的components节点下，注册了组件F。
则组件F只能用在组件A中；不能被用在组件C中。

4.2.3 注册全局组件

在vue项目的main.js入口文件中，通过Vue.component()方法，可以注册全局组件。
示例代码如下：

// 导入全局组件
import Count from './components/count.vue'
// 注册全局组件
Vue.component('MyCount',Count)

注意：在组件中无需导入注册，即可以标签形式使用main.js中注册的全局组件。

<template><div><MyCount></MyCount></div>
</template>

5 参考附录

参考vue基础入门

Vue-2-前端框架Vue基础入门之二

文章目录 1 计算属性1.1 计算属性简介1.2 计算属性示例 2 侦听器2.1 简单的侦听器2.2 深度监听2.3 监听对象单个属性 3 vue-cli3.1 工程化的Vue项目3.2 Vue项目的运行流程 4 vue组件4.1 Vue组件的三个部分4.1.1 template4.1.2 script4.1.3 style 4.2 组件之间的关系4.2.1 使用组…...

编程日记 2025/9/14 8:55:05

CPT208 Human-Centric Computing 人机交互 Pt.7 交互和交互界面

文章目录 1. 界面隐喻（Interface metaphors）1.1 界面隐喻的应用方式1.2 界面隐喻的优缺点 2. 交互类型2.1 Instructing（指令式交互）2.2 Conversing（对话式交互）2.3 Manipulating（操作式交互&…...

编程日记 2025/9/9 9:45:17

ubuntu20.04.5arm上使用robotjs #ssh，可选 sudo apt update sudo apt install openssh-server sudo systemctl status ssh sudo systemctl enable ssh sudo systemctl enable --now ssh #防火墙相关，可选 sudo ufw allow ssh sudo ufw allow 2222/tc…...

编程日记 2025/9/9 22:03:36

[网页五子棋][匹配模块]前后端交互接口(消息推送机制)、客户端开发(匹配页面、匹配功能)

让多个用户，在游戏大厅中能够进行匹配，系统会把实力相近的两个玩家凑成一桌，进行对战约定前后端交互接口消息推送机制匹配这样的功能，也是依赖消息推送机制的玩家 1 点击开始匹配按钮，就会告诉服务器&#xff1…...

编程日记 2025/9/9 9:47:39

【数据分析】Matplotlib+Pandas+Seaborn绘图

【数据分析】MatplotlibPandasSeaborn绘图 （一）Matplotlib绘图1.1 matplotlib绘图方式1: 状态接口1.2 matplotlib绘图方式2: 面向对象1.3 通过安斯科姆数据集, 说明可视化的重要性1.4 MatPlotlib绘图-单变量-直方图1.5 MatPlotlib绘图-双变量-散点图1.6 …...

编程日记 2025/9/9 9:50:22

NLP学习路线图（十五）：TF-IDF（词频-逆文档频率）

在自然语言处理（NLP）的浩瀚宇宙中，TF-IDF（词频-逆文档频率） 犹如一颗恒星，虽古老却依然璀璨。当ChatGPT、BERT等大模型光芒四射时，TF-IDF作为传统方法的代表，其简洁性、高效性与可解…...

编程日记 2025/9/9 9:44:20

[Redis] Redis命令在Pycharm中的使用

初次学习，如有错误还请指正目录 String命令 Hash命令 List命令 set命令 SortedSet命令连接pycharm的过程见：[Redis] 在Linux中安装Redis并连接桌面客户端或Pycharm-CSDN博客 redis命令的使用见：[Redis] Redis命令（1&#xf…...

编程日记 2025/9/9 9:45:17

openpnp - 给M4x0.7mm的直油嘴加油的工具选择

文章目录 openpnp - 给M4x0.7mm的直油嘴加油的工具选择概述如果换上带卡口的M4x0.7直油嘴END openpnp - 给M4x0.7mm的直油嘴加油的工具选择概述 X导轨用了一个HG15的滑块滑块上的注油口的黄油嘴是M4x0.7mm的直油嘴。外表面是6边形的柱子，没有可以卡住加油嘴工…...

编程日记 2025/9/9 9:45:18

Azure Devops 系列之三- vscode部署function app

Azure Function App 是 Microsoft Azure 提供的一项无服务器计算服务，它允许您运行事件驱动的应用程序，而无需管理底层基础架构。它使您能够执行代码来响应各种事件，例如 HTTP 请求、队列消息、计时器以及许多其他类型的触发器。 Azure Function App 的主要功能：无服务器…...

编程日记 2025/7/5 10:58:58

EasyExcel复杂Excel导出

效果图展示 1、引入依赖  <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>4.0.2</version> </dependency>2、实体类 import com.alibaba.excel.annotatio…...

编程日记 2025/9/18 23:31:30

1，QT的编译教程

目录整体流程： 1，新建project文件 2,编写源代码 3，打开QT的命令行窗口 4，生成工程文件（QT_demo.pro） 5，生成Make file 6，编译工程 7，运行编译好的可执行文件整体流程： 1，新建project文件新建文本文件，后缀改为.cpp 2,编写源代码...

编程日记 2025/9/16 10:03:19

C++基础算法————深度优先搜索(DFS)

一、DFS算法原理（一）基本思想深度优先搜索（Depth-First Search，DFS）是一种用于遍历或搜索树或图的算法。它从一个起始节点开始，沿着一个方向尽可能深入地探索，直到无法继续为止，然后回溯到上一个节点，继续探索其他方向。这一过程可以用递归或栈结构来实现。（二…...

编程日记 2025/7/26 22:23:07

React 第五十节 Router 中useNavigationType的使用详细介绍

前言 useNavigationType 是 React Router v6 提供的一个钩子，用于确定用户如何导航到当前页面。它提供了关于导航类型的洞察，有助于优化用户体验和实现特定导航行为。一、useNavigationType 核心用途 1.1、检测导航方式： 判断用户是通过…...

编程日记 2025/7/6 22:43:37

【笔记】在 MSYS2（MINGW64）中安装 Python 工具链的记录

#工作记录 📌 安装背景操作系统：MSYS2 MINGW64当前时间：2025年6月1日Python 版本：3.12（默认通过 pacman 安装）目标工具链： pipxnumpypipsetuptoolswheel 🛠️ 安装过程与结果记录…...

编程日记 2025/9/9 9:46:19

npm install命令都做了哪些事情

npm install（或其简写 npm i）是 Node.js 项目中最重要的命令之一，它负责安装项目所需的所有依赖项。下面我将详细解释这个命令的完整执行过程和底层机制，让你彻底理解它背后的工作原理。一、npm install 的完整工作流程 1. 依赖…...

编程日记 2025/8/14 22:46:28

Linux 学习-模拟实现【简易版bash】

1、bash本质在模拟实现前，先得了解 bash 的本质 bash 也是一个进程，并且是不断运行中的进程证明：常显示的命令输入提示符就是 bash 不断打印输出的结果输入指令后，bash 会创建子进程，并进行程序替换证明&#x…...

编程日记 2025/9/9 9:50:19

【中国・珠海】2025 物联网与边缘计算国际研讨会（IoTEC2025）盛大来袭！

2025 物联网与边缘计算国际研讨会（IoTEC2025）盛大来袭！ 科技浪潮奔涌向前，物联网与边缘计算已成为驱动各行业变革的核心力量。在此背景下，2025 物联网与边缘计算国际研讨会（IoTEC2025）即将震撼…...

编程日记 2025/9/9 9:45:17

企业级安全实践：SSL/TLS 加密与权限管理（二）

案例分析：成功与失败的经验教训成功案例分析以一家知名电商企业 ABC 为例，该企业每天处理数百万笔订单，涉及大量用户的个人信息、支付信息和商品数据。在网络安全建设方面，ABC 电商高度重视 SSL/TLS 加密与权限管理。在 SSL…...

编程日记 2025/9/12 21:17:45

Java面试：从Spring Boot到分布式系统的技术探讨

场景一：电商平台的订单处理面试官： “谢先生，假设我们在一个电商平台工作，你将如何使用Spring Boot构建一个订单处理服务？” 谢飞机： “这个简单，我会使用Spring Boot快速启动项目&#xff0…...

编程日记 2025/8/11 9:39:57

NodeJS全栈开发面试题讲解——P7 DevOps 与部署和跨域等

✅ 7.1 如何部署 Node.js 项目到生产环境？用过哪些工具？ 面试官您好，我部署 Node.js 项目通常分为构建 → 上传 → 启动服务三步，常用工具包括 PM2、Nginx、Docker、Git Hooks、CI/CD 工具。 🛠️ 主要部署步骤&…...

编程日记 2025/7/9 22:55:53

中国高分辨率高质量地面CO数据集（2013-2023）

时间分辨率：日空间分辨率：1km - 10km共享方式：开放获取数据大小：9.83 GB数据时间范围：2013-01-01 — 2023-12-31元数据更新时间：2024-08-19 数据集摘要 ChinaHighCO数据集是中国高分辨率高质量近地表空气污…...

编程日记 2025/9/13 12:20:32

GO——内存逃逸分析

一、可能导致逃逸的5中情况 package mainimport "fmt"func main() {f1()f2()f3()f4()f5() }type animal interface {run() }type dog struct{}func (d *dog) run() {fmt.Println("狗在跑") }// 指针、map、切片为返回值的会发生内存逃逸 func f1() (*int,…...

编程日记 2025/9/9 9:44:18

MinVerse 3D触觉鼠标的技术原理与创新解析

MinVerse3D触觉鼠标通过三维交互和触觉反馈技术，彻底颠覆了传统二维鼠标的操作方式。用户在操作虚拟物体时，可以真实感知表面质感、重量和阻力。这种技术不仅为数字环境注入了深度与临场感，还在3D设计、游戏开发和工程仿真等领域展现了广泛潜…...

编程日记 2025/9/13 6:27:54

Spring Boot整活指南：从Helo World到“真香”定律

📌 一、Spring Boot的"真香"本质（不是996的福报） 你以为Spring Boot只是个简化配置的工具？Too young！它其实是程序员的摸鱼加速器。经典场景还原： 产品经理：“这个…...

编程日记 2025/7/7 22:17:23

Python-Selenium报错截图

报错截图设计方案： 功能：截图层主要用来存放selenium运行时的报错截图信息 1. 截图路径管理分层存储：在项目根目录下创建 screenshots 文件夹，并按日期进一步分类（如 20250601）。命名规范&#xff1…...

编程日记 2025/8/9 22:17:16

数论——质数和合数及求质数

质数和合数及求质数一个大于 1 的自然数，除了 1 和它自身外，不能被其他自然数整除的数叫做质数；否则称为合数。其中，质数又称素数。有的资料用的词不同，但质数和素数其实是一回事。规定 1 既不是质数也不是合数。 …...

编程日记 2025/7/9 14:48:41

nc 命令示例

nc -zv 实用示例示例 1：测试单个 TCP 端口（最常见） 目标： 检查主机 webserver.example.com 上的 80 端口 (HTTP) 是否开放。 nc -zv webserver.example.com 80成功输出： Connection to webserver.example.com (19…...

编程日记 2025/7/13 21:03:41