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

框架的使用

news 2026/3/27 18:29:11

什么是框架？

盖房子，框架结构

框架结构就是房子主体，基本功能

把很多基础功能已经实现（封装了）

框架：在基础语言之上，对各种基础功能进行封装，方便开发者，提高开发效率

举例：操作网页

现在：点击一个按钮，触发事件，获得我们要操作的标签，再对标签内容进行操作

框架：操作网页时，程序员之关注要操作的内容即可，对标签内容的更新等操作都由框架完成

Vue官网：Vue.js (vuejs.org)

前端框架

Vue.Js 是一个js框架，不是代替js的，是对js进行了封装。

Vue官网：Vue.js (vuejs.org)

后端Java框架

mybatis--jdbc

spring...

今天先来入门Vue.js

什么是 Vue.js

Vue (读音 /vju ː /，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue
的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
Vue.js 是前端的主流框架之一，和 Angular.js、React.js 一起，并成为前端三
大主流框架！ https://v2.cn.vuejs.org/

Vue.js 优点

1.体积小 压缩后 33K
2.更高的运行效率
用 JQuery 或者原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的
时候，浏览器要不停的渲染新的 DOM 树，导致页面看起来非常卡顿。
基于虚拟 dom，一种可以预先通过 JavaScript 进行各种计算，把最终的
DOM 操作计算出来并优化的技术，最后在计算完毕才真正将 DOM 操作提交。
3.双向数据绑定,简化 Dom 操作
通过 MVVM 思想实现数据的双向绑定，让开发者不用再操作 dom 对象,
把更多的精力投入到业务逻辑上.
MVVM 是 Model-View-ViewModel 的简写。MVVM 就是将其中的 View 的
状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

如图：

view就是网页标签

viewmodel是vue框架

model是js中的数据对象

4 生态丰富、学习成本低
市场上拥有大量成熟、稳定的基于 vue.js 的 ui 框架、常用组件！来即用实现
快速开发！对初学者友好、入门容易、学习资料多.
vue.js是一个js框架，不是代替js的，是对js进行了封装

element.UI框架：将前端常用的一些组件（表单，表格，消息提示）进行封装（对html和css进行了封装）

Vue 安装

方式 1:直接用 <script> 引入
下载 Vue.js 并导入 js 文件
<script src="js/vue.js"></script>

方式 2:命令行工具 (CLI) *不推荐新手使用
安装教程给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使
用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。

Vue 指令

指令带有前缀 v- 开头，以表示它们是 Vue 提供的特殊属性。
v-text
作用是设置标签的文本内容
默认写法会替换全部内容，使用差值表达式可以替换指定内容
内部支持写表达式
<p v-text="message"></p>
<p>{{message}}</p>
v-html
作用是设置元素的 innerHTML
内容中有 html 结构会被解析为标签
内部支持写表达式
<p v-html="message"></p> 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="file:///C:/code/web/vuepro/js/v2.6.10/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2"></script></head><body><!-- 创建一个标签{{message}}插入一个值，不影响标签中的其他内容v-html="message",v-text="message"会覆盖标签中的其他内容{{message}},v-text="message" 不能解析标签中的html标签{{message}},v-html="message" 可以解析标签中的html标签--><div id="app">{{ message }}<p v-text="message">aaa</p><p v-html="message">1</p></div><script>// 创建了一个vue对象var app = new Vue({el: '#app',/* 绑定挂载点 */data: {message: 'Hello Vue!',}})</script></body>
</html>
v-on
作用是为元素绑定事件
事件名不需要写 on 指令可以简写为@
绑定的方法定义在 methods 属性中,可以传入自定义参数
<input type="button" value="按钮" v-on:click="test(1,2)" />
<input type="button" value="按钮" @click="test" />
methods:{
test(a,b){ alert(a);
}
} 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="file:///C:/code/web/vuepro/js/v2.6.10/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2"></script></head><body><!-- 创建一个标签{{message}}插入一个值，不影响标签中的其他内容v-html="message",v-text="message"会覆盖标签中的其他内容{{message}},v-text="message" 不能解析标签中的html标签{{message}},v-html="message" 可以解析标签中的html标签--><div id="app"><!-- {{ message }}<p v-text="message">aaa</p><p v-html="message">1</p> --><input type="button" value="按钮1" v-on:click="test1()"/><input type="button" value="按钮2" @click="test2()"></div><script>// 创建了一个vue对象var app = new Vue({el: '#app',/* 绑定挂载点 */data: {message: '<b>Hello Vue!</b>',},methods:{test1(){alert(this.message = "aaaaaa");},test2(){alert(this.message);}}})</script></body>
</html>
v-model
作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素值相关联
绑定的数据<---->表单元素的值 双向数据绑定
<input type="text" v-model="message"/>
<p>{{message}}</p>
data:{
message:""
} 
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="file:///C:/code/web/vuepro/js/v2.6.10/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/vue@2"></script></head><body><!-- 创建一个标签{{message}}插入一个值，不影响标签中的其他内容v-html="message",v-text="message"会覆盖标签中的其他内容{{message}},v-text="message" 不能解析标签中的html标签{{message}},v-html="message" 可以解析标签中的html标签--><div id="app"><!-- {{ message }}<p v-text="message">aaa</p><p v-html="message">1</p> --><input type="button" value="按钮1" v-on:click="test1()"/><input type="button" value="按钮2" @click="test2()"><input v-model="name" /><p>{{ message }}</p><p>{{ name }}</p></div><script>// 创建了一个vue对象var app = new Vue({el: '#app',/* 绑定挂载点 */data: {message: '<b>Hello Vue!</b>',name:""},methods:{test1(){alert(this.message.split('').reverse().join(''));//翻转},test2(){this.name = "tom";}}})</script></body>
</html>

相关文章：

框架的使用

什么是框架&#xff1f; 盖房子&#xff0c;框架结构 框架结构就是房子主体&#xff0c;基本功能 把很多基础功能已经实现&#xff08;封装了&#xff09; 框架&#xff1a;在基础语言之上&#xff0c;对各种基础功能进行封装&#xff0c;方便开发者&#xff0c;提高开发效…...

编程日记 2024/6/17 5:40:36

Autosar-DEM诊断事件管理流程

文章目录 前言一、故障事件监控二、故障信息上报三、故障信息处理Event的使能条件四、故障信息存储五、故障系统降级关联文章：Autosar实践——DEM配置 前言 DEM全称“Diagnostic Event Management”，该模块是AUTOSAR架构中的BSW模块之一。谈到故障，我们首先会想到如何去监控…...

编程日记 2024/6/17 5:38:33

LabVIEW输送机动态特性参数监测系统

开发了一套基于LabVIEW软件和STM32F103ZET6单片机的带式输送机动态特性参数监测系统。该系统通过电阻应变式压力传感器和光电编码器实时采集输送带的张力和带速信息&#xff0c;通过5G模块将数据传输至上位机&#xff0c;实现数据的可视化处理与实时预警&#xff0c;有效提高输…...

编程日记 2024/6/17 5:37:32

绿色版DirectoryOpus功能强大且高度可定制的Windows文件管理器

Directory Opus&#xff08;通常简称为DOpus&#xff09;是一款功能强大且高度可定制的Windows文件管理器。它提供了许多超越Windows默认文件资源管理器&#xff08;Explorer&#xff09;的功能&#xff0c;使得文件和文件夹的管理变得更加高效和直观。以下是对Directory Opus的…...

编程日记 2024/6/17 5:36:30

Cocos Creator，Youtube 小游戏！

YouTube 官方前段时间发布了一则重磅通知&#xff0c;宣布平台旗下小游戏功能 Youtube Playables 正式登录全平台&#xff08;安卓、iOS、网页&#xff09;&#xff0c;并内置了数十款精选小游戏。 Youtube Playables 入口&#xff1a; https://www.youtube.com/playables Coco…...

编程日记 2024/6/17 5:35:30

分层解耦

三层架构 controller:控制层&#xff0c;接收前端发送的请求&#xff0c;对请求进行处理&#xff0c;并响应数据&#xff0c; service:业务逻辑层&#xff0c;处理具体的业务逻辑。 dao:数据访问层(Data Access Object)(持久层)&#xff0c;负责数据访问操作&#xff0c;包括数…...

编程日记 2024/6/17 5:31:26

GenICam标准（六）

系列文章目录 GenICam标准&#xff08;一&#xff09; GenICam标准&#xff08;二&#xff09; GenICam标准&#xff08;三&#xff09; GenICam标准&#xff08;四&#xff09; GenICam标准&#xff08;五&#xff09; GenICam标准&#xff08;六&#xff09; 文章目录 系列文…...

编程日记 2024/6/17 5:30:24

JavaFX VBox

VBox布局将子节点堆叠在垂直列中。新添加的子节点被放置在上一个子节点的下面。默认情况下&#xff0c;VBox尊重子节点的首选宽度和高度。 当父节点不可调整大小时&#xff0c;例如Group节点&#xff0c;最大垂直列的宽度基于具有最大优选宽度的节点。 默认情况下&#xff0c;…...

编程日记 2024/6/17 5:28:21

xss+csrf项目实例

项目背景&#xff1a; 如下&#xff1a;我们是在一个类似文章管理系统的网站上面发现的该漏洞。我们将其运行在本地的phpstudy集成环境上面。 源码地址下载链接&#xff1a;https://pan.baidu.com/s/1MpnSAq7a_oOcGh4XgPE-2w 提取码&#xff1a;4444 考察内容&#xff1a; …...

编程日记 2024/6/17 5:26:19

速盾：cdn加速怎么计费？

CDN加速&#xff08;Content Delivery Network&#xff09;是一种将内容部署在全球多个节点上&#xff0c;通过就近访问提供服务的技术。它可以加快网站的速度和可靠性&#xff0c;同时减轻源服务器的负载。在使用CDN加速服务时&#xff0c;计费是一个重要的问题&#xff0c;下…...

编程日记 2024/6/17 5:23:15

Vue3 中 props 与 emit 用法

在 Vue3 中&#xff0c;props 和 emit 的用法有所改变&#xff0c;主要的变化在于它们现在都通过 setup 函数来访问和使用。 props: props 用于父组件向子组件传递数据。在 setup 函数中&#xff0c;props 是一个参数&#xff0c;我们可以通过它访问到父组件传入的所有 prop 值…...

编程日记 2024/6/17 5:20:12

【python】如何import 另一个路径下的py文件内容

目录结构&#xff1a; ├─common │ └─config.py └─own_module │ └─run.py问题描述&#xff1a; 如何在run.py 中调用 config.py 中的函数或类&#xff1f; 解决办法&#xff1a; import os import sys # 为了引用自定义模块&#xff0c;可临时将module的绝对路径…...

编程日记 2024/6/17 5:19:10

C/C++ Adaline自适应线性神经网络算法详解及源码

个人名片 &#x1f393;作者简介&#xff1a;java领域优质创作者 &#x1f310;个人主页&#xff1a;码农阿豪 &#x1f4de;工作室&#xff1a;新空间代码工作室&#xff08;提供各种软件服务&#xff09; &#x1f48c;个人邮箱&#xff1a;[2435024119qq.com] &#x1f4f1…...

编程日记 2024/6/17 5:17:06

UniApp+Vue3使用Vant-微信小程序组件

第一步&#xff1a;打开创建好的UniappVue3的项目 第二步&#xff1a;下载Vant-Weapp npm i vant/weapp -S --production 第三步&#xff1a;修改目录名称 wxcomponents 必须是wxcomponents 第四步&#xff1a;将下载好的vant中的dist目录剪切到当前wxcomponents目录下 第五…...

编程日记 2024/6/17 5:15:03

python IP 端口 socket tcp 介绍

IP 端口 介绍 1、IP IP地址是分配给网络设备上网使用的数字标签&#xff0c;它能够标识网络中唯一的一台设备 windows环境可以使用 ipconfig 来查看自己的iplinux环境可以使用 ifconfig 来查看自己的ip 2、端口 端口是传输数据的通道&#xff0c;每个操作系统上都有 65535个…...

编程日记 2024/6/17 5:14:02

【动态规划】| 路径问题之最小路径和 力扣64

&#x1f397;️ 主页&#xff1a;小夜时雨 &#x1f397;️专栏&#xff1a;动态规划 &#x1f397;️如何活着&#xff0c;是我找寻的方向 目录 1. 题目解析2. 代码 1. 题目解析 题目链接: https://leetcode.cn/problems/minimum-path-sum/description/ 这道题目和之前一道…...

编程日记 2024/6/17 5:13:00

如何在vector中插入和删除元素？

在C的std::vector中插入和删除元素通常使用其成员函数来完成。以下是如何在std::vector中插入和删除元素的示例&#xff1a; 插入元素 在末尾插入元素&#xff1a;使用push_back函数。 cpp复制代码 #include <vector> int main() { std::vector<int> v; v.push_…...

编程日记 2024/6/17 5:08:54

独具韵味的移动端 UI 风格

独具韵味的移动端 UI 风格...

编程日记 2024/6/17 5:07:52

【SpringBoot】SpringBoot：构建实时聊天应用

文章目录 引言项目初始化添加依赖 配置WebSocket创建WebSocket配置类创建WebSocket处理器 创建前端页面创建聊天页面 测试与部署示例&#xff1a;编写单元测试 部署扩展功能用户身份验证消息持久化群组聊天 结论 引言 随着实时通信技术的快速发展&#xff0c;聊天应用在现代We…...

编程日记 2024/6/17 5:06:51

基于Matlab的车牌识别停车场出入库计时计费管理系统（含GUI界面）【W6】

简介&#xff1a; 在当今城市化进程加快的环境下&#xff0c;停车管理成为了一个日益重要和复杂的问题。城市中的停车资源有限&#xff0c;如何高效利用和管理这些资源&#xff0c;不仅关乎市民出行便利性&#xff0c;也涉及到城市交通拥堵、环境污染等诸多问题的解决。 传统的…...

编程日记 2024/6/17 5:05:50

Windows 11终极清理优化指南：用Win11Debloat快速提升系统性能

Windows 11终极清理优化指南&#xff1a;用Win11Debloat快速提升系统性能 【免费下载链接】Win11Debloat 一个简单的PowerShell脚本&#xff0c;用于从Windows中移除预装的无用软件&#xff0c;禁用遥测&#xff0c;从Windows搜索中移除Bing&#xff0c;以及执行各种其他更改以…...

编程新知 2026/3/27 18:16:13

Docker 容器中文字体及 matplotlib 环境应用

为了避开 Noto CJK 这种复杂的 TTC（TrueType Collection）大包带来的识别问题，最理想的选择是使用独立打包的 OTF 或 TTF 字体。 0. 环境检查 # 1. 更新源并安装 fontconfig apt-get update apt-get install -y fontconfig# 2. 现在 fc-cache 命令可用了，刷新系统字体 fc-…...

编程新知 2026/3/27 17:43:59

Windows下RedisInsight保姆级安装教程：从下载到连接Redis全流程详解

Windows平台RedisInsight全流程实战指南&#xff1a;从零搭建高效Redis可视化环境 Redis作为当下最流行的内存数据库之一&#xff0c;其强大的性能与丰富的数据结构深受开发者青睐。但在日常开发中&#xff0c;仅通过命令行操作Redis难免效率低下——这正是RedisInsight的价值所…...

编程新知 2026/3/27 17:19:55

Python多线程真能并行了吗？（GIL绕过技术全图谱：subprocess/numba/multiprocessing/cython/rustpy）

第一章&#xff1a;Python无锁GIL环境下的并发模型面试题汇总Python 的全局解释器锁&#xff08;GIL&#xff09;长期被视为多线程并发的瓶颈&#xff0c;但近年来随着 CPython 3.13 引入实验性无锁 GIL&#xff08;--without-pymalloc 配合 --with-per-object-gil 原型&#x…...

编程新知 2026/3/27 16:47:32

Llama-3.2V-11B-cot部署教程：WSL2环境下双4090识别与分配验证

Llama-3.2V-11B-cot部署教程&#xff1a;WSL2环境下双4090识别与分配验证 1. 项目概述 Llama-3.2V-11B-cot是基于Meta Llama-3.2V-11B-cot多模态大模型开发的高性能视觉推理工具。该工具针对双卡4090环境进行了深度优化&#xff0c;特别适合在WSL2环境下部署使用。通过本教程…...

编程新知 2026/3/27 16:43:31

炸穿 2026 技术圈！AI Agent 从 0 到 1 商业落地全攻略，附 Python 可跑源码 + 双场景变现

引言:“AI Agent&#xff1a;程序员效率革命的最后一公里”前言&#xff1a;还在死磕 CRUD、熬夜改 BUG、被重复研发工作榨干精力&#xff1f;2026 年的技术风口早已彻底转向 ——AI Agent&#xff0c;从华为虚拟工程师、蘑菇物联工业智能体&#xff0c;到全行业自动化落地&…...

编程新知 2026/3/27 16:35:29

墨语灵犀在互联网产品设计中的应用：用户需求分析与PRD生成

墨语灵犀在互联网产品设计中的应用&#xff1a;用户需求分析与PRD生成 每次产品评审会前&#xff0c;你是不是也经历过这样的夜晚&#xff1f;面对一堆零散的用户反馈、模糊的市场数据和脑子里盘旋的初步想法&#xff0c;要在短短几天内把它们梳理成一份逻辑清晰、结构完整的产…...

编程新知 2026/3/27 16:25:22

ROS Noetic下大陆ARS408雷达点云数据解析：从CAN原始帧到RVIZ可视化，一个脚本全搞定

ROS Noetic下大陆ARS408雷达点云数据全链路解析与自动化实践 毫米波雷达在自动驾驶、机器人导航等领域扮演着关键角色。大陆ARS408作为一款高性价比的毫米波雷达&#xff0c;其点云数据的获取与可视化是许多开发者需要掌握的核心技能。本文将带您从底层CAN总线通信开始&#xf…...

编程新知 2026/3/27 15:45:08

Anaconda Prompt卡在solving environment？别慌，三步搞定清华镜像源配置（附.condarc文件）

Anaconda环境配置卡顿&#xff1f;清华镜像源优化全指南 刚接触Python数据科学的新手们&#xff0c;十有八九会在Anaconda环境配置这一步栽跟头。特别是当看到命令行窗口里"solving environment"的提示一直转圈却迟迟没有进展时&#xff0c;那种等待的煎熬简直让人抓…...

编程新知 2026/3/27 15:35:02

保姆级教程：在Windows 11上用VSCode和Conda搞定Depth-Anything-3（含常见报错修复）

Windows 11深度估计实战&#xff1a;VSCodeConda环境下的Depth-Anything-3全流程指南 深度估计作为计算机视觉领域的重要技术&#xff0c;正在自动驾驶、增强现实等场景中发挥关键作用。本文将带你在Windows 11系统上&#xff0c;使用VSCode和Conda搭建Depth-Anything-3开发环境…...

编程新知 2026/3/27 14:42:42