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

前端框架笔记

news 文章来源：https://blog.csdn.net/qq_44771102/article/details/131129456 2025/1/16 17:53:43

Vue.js的安装

安装Vue.js有两种方法：

（1）类似于Bootstrap或jQuery，直接通过HTML文件中的标签引用。为了方便开发者使用，Vue.js提供了相关的CDN，通过如下代码可以引用最新版本的Vue.js：

` <script src="https://cdn.jsdelivr.net/npm/vue"></script>`

通过指定版本号，可以引用不同版本的Vue.js，这样项目工程不会因为新版本的Vue.js而出现不兼容的问题。

` <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>`

除了CDN方式外，还可以下载源代码直接引入。对于一个大型项目而言，直接引入JavaScript文件的方式可能并不便捷，所以笔者采用npm的安装方式。

（2）npm安装方式。
新建项目文件夹，使用npm init命令初始化项目，然后使用如下命令安装Vue.js，与Express的安装步骤一样。
npm install vue
package.json文件会自动添加Vue.js的依赖项，代码如下：

` {"name": "2-3-2","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","dependencies": {"vue": "^2.6.10"}}`用Vue.js编写Hello World——CDN方式

介绍了安装Vue.js的两种方式，第一种是通过CDN方式或引入静态文件，通过CDN方式编写Hello World程序较为简单，下面直接演示。

【示例】用Vue.js编写HelloWorld——1。
新建HTML文件，命名为index.html，引入Vue.js。完整的代码如下：
`

 01 <!--HelloWorld-->02 <html lang="en">03 <head>04     <meta charset="UTF-8">05     <title>Title</title>06 </head>07 <body>08 <div id="app">09     <!--显示文字内容-->10         {{text}}     11 </div>12 <!--引入Vue-->      13   <script src="https://cdn.jsdelivr.net/npm/vue"></script>14 <script>15     <!--实例化Vue-->16     var vm = new Vue({17         el: '#app',                             //指定属性id里的app18         //数据内容19         data: {20             text: 'hello world!!!'21         }22     })23 </script>24 </body>25 </html> `

通过浏览器打开index.html，网页效果如图

1683521467187.png

用Vue.js编写Hello World——Webpack方式

对于Vue.js框架而言，输出一个简单的Hello World程序可能并不简单，浏览器本身不识别后缀为vue的文件，所以vue文件不能通过浏览器直接打开，类似于HTML这样的页面也无法直接引入vue文件。
如果想要使用Vue.js编写程序，需要Webpack打包工具将.vue文件编译成普通的JavaScript文件，再通过页面的引入去执行这个JavaScript文件。

【示例2-5】用Vue.js编写HelloWorld——2。

（1）新建项目工程，使用npm init初始化项目代码，此时生成package.json文件，接着安装Webpack，命令如下：
npm install webpack

（2）Webpack安装后需要再安装webpack-cli（一个使用Webpack的命令行工具），命令如下：
npm install webpack-cli

（3）安装Vue.js，命令如下：
npm install vue

（4）安装vue-loader和vue-template-compiler，这样才可以让Webpack识别Vue.js，安装命令如下：
npm install vue-loader
npm install vue-template-compiler

安装完成后的package.json文件如下：

 `{"name": "2-3-2","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","dependencies": {"vue": "^2.6.10","vue-loader": "^15.7.1","vue-template-compiler": "^2.6.10"},"devDependencies": {"webpack": "^4.39.3","webpack-cli": "^3.3.7"}`

（5）新建一个webpack.config.js文件，用于配置Webpack打包工具。Webpack的配置需要指定入口文件并且引入vue-loader，完整的代码如下：

 `01 const path = require('path');02 const VueLoaderPlugin = require('vue-loader/lib/plugin');03 04 module.exports = {05     //指定入口文件06     entry:path.join(__dirname, 'app.js'),07     //指定输出的文件位置和文件名称08     output: {09         path: path.join(__dirname,'dist'),10         filename: 'build.js'11     },12     plugins: [13         //在使用新版的vue-loader时，必须引入这个插件14         new VueLoaderPlugin()15     ],16     module: {17         //指定不同格式的规则18         rules: [19             //解析.vue文件20             {21                 test: /\.vue$/,22                 loader: 'vue-loader'23             },24         ]25     }26 }`

这里指定了入口文件导出的位置和引入模块时的一些规则，通过这个配置让Webpack可以编译同级目录中的app.js文件，并且在dist文件夹中建立新的build.js作为导出的文件。

（6）编辑app.js中的内容。在app.js中需要引入Vue.js、获取页面中的body节点，并且将所有需要显示的内容挂载在上面，完整的代码如下：

` 01 //引入vue02 import Vue from 'vue'03 import Hello from './helloworld.vue';04 05 const root = document.createElement('div')06 document.body.appendChild(root)07 08 //mount将Hello模块挂载到root根节点中09 new Vue({10     render: (h) => h(Hello)11 }).$mount(root)`

（7）上述代码引入了一个还未建立的Hello模块，其文件名为helloworld.vue，也就是本例的Vue.js部分，该文件中指定了一个变量，赋值为HelloWorld并显示在页面上。

 01 <template>02     <div>03         <p>{{text}}</p>04     </div>05 </template>06 07 <script>08     export default{09         name: "Hello",10         data(){11             return {12                 text: 'HelloWorld!!!'13             }14         }15     }16

其中，{{text}}部分显示下方script/data中text的值“HelloWorld!!!”，而模板的部分将会被挂载在一个HTML文件的body节点中，最终将所有的内容显示在页面中。

（8）Hello World实例到此就完成了。在命令行中使用如下命令打包：
webpack --config webpack.config.js
也可以将此命令添加到package.json中，通过webpack-cli的方式使用，这样会更加方便。修改后的代码如下：

{"name": "2-3-2","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack --config webpack.config.js"},"author": "",……}

在命令行窗口中使用如下命令完成打包操作，
npm run build

相关文章：

前端框架笔记

Vue.js的安装 安装Vue.js有两种方法&#xff1a; &#xff08;1&#xff09;类似于Bootstrap或jQuery&#xff0c;直接通过HTML文件中的标签引用。为了方便开发者使用&#xff0c;Vue.js提供了相关的CDN&#xff0c;通过如下代码可以引用最新版本的Vue.js&#xff1a; <sc…...

编程日记 2023/6/10 16:05:09

详细设计文档

1. 引言 1.1 目的 1.2 范围 1.3 定义、缩略语和缩写 1.4 参考文献 1.5 概述 2. 系统架构设计 2.1 总体架构 2.2 模块划分 2.3 数据流程设计 2.4 接口设计 3. 模块详细设计 3.1 登录模块详细设计 3.1.1 类设计 3.1.2 方法设计 3.1.3 数据库表设计 3.1.4 界面设计 3.2 文章管理模…...

编程日记 2023/6/10 16:00:08

Java011——Java数据类型转换（基本数据类型）

回顾&#xff1a;Java八大基本数据类型 大类 类型名称 关键字 占用内存 取值范围 --------------------------------------------------------------------------------------------|字节型 byte 1 字节 -128~127 整型 |短整型 short 2 字节 -32768~32…...

编程日记 2023/6/10 15:55:07

mybatis-plus用法（二）

(5条消息) mybatis-plus用法&#xff08;一&#xff09;_渣娃工程师的博客-CSDN博客 AR模式 ActiveRecord模式&#xff0c;通过操作实体对象&#xff0c;直接操作数据库表。与ORM有点类似。 示例如下 让实体类User继承自Model package com.example.mp.po; import com.bao…...

编程日记 2023/6/10 15:50:06

SQL笔记-存储过程+循环

存储过程循环使用方法 Oracle Oracle中存储过程的循环使用方法如下&#xff1a; DECLAREi NUMBER; BEGINi : 1;WHILE i < 10 LOOPDBMS_OUTPUT.PUT_LINE(i || i);i : i 1;END LOOP; END;其中&#xff0c;DECLARE用于声明变量&#xff0c;BEGIN和END用于标识存储过程的开始…...

编程日记 2023/6/10 15:45:05

HNU-操作系统OS-作业1（4-9章）

这份文件是OS_homework_1 by计科2102 wolf 202108010XXX 文档设置了目录，可以通过目录快速跳转至答案部分。 第四章 4.1用以下标志运行程序：./process-run.py -l 5:100,5:100。CPU 利用率（CPU 使用时间的百分比）应该是多少？为什么你知道这一点？利用 -c 标记查看你…...

编程日记 2023/6/10 15:40:04

springboot 精华

一、基础 官方文档地址&#xff1a;Spring Boot 注&#xff1a;以下部分例子 有些用到 .properties 方式&#xff0c;有些用 .yml方式&#xff0c;两者可自行学习&#xff0c;这里部分是为了省空间而写 .properties 方式。 1、泛谈 &#xff08;1&#xff09;优势 快速构建…...

编程日记 2023/6/10 15:35:03

我用ChatGPT写2023高考语文作文（三）：新课标I卷

2023年 新课标I卷 适用地区&#xff1a;山东、福建、湖北、江苏、广东、湖南、河北、浙江 好的故事&#xff0c;可以帮我们更好地表达和沟通&#xff0c;可以触动心灵、启迪智慧&#xff1b;好的故事&#xff0c;可以改变一个人的命运&#xff0c;可以展现一个民族的形象……故…...

编程日记 2023/6/10 15:30:02

HTML 标签的学习

1.HTML 的结构 前端三剑客: HTML CSS JS,本章我们学习的是HTML HTML > 超文本标记语言 HTML代码是由"标签"构成的. 形如 <body>hello</body>标签名 (body) 放到 < > 中大部分标签成对出现. 为开始标签, 为结束标签.少数标签只有开始标签…...

编程日记 2023/6/10 15:25:00

计算耗时为微秒的方法(包含：时/分/秒/毫秒/微秒/纳秒)

计算耗时为微秒的方法1 #include<stdio.h> #include <windows.h> int main() {int a[10002];int i 0;double run_time;_LARGE_INTEGER time_start; //开始时间_LARGE_INTEGER time_over; //结束时间double dqFreq; //计时器频率LARGE_INTEGER f; //计时器频率Qu…...

编程日记 2023/6/10 15:19:59

通过 Python 封装关键词搜索阿里巴巴商品api接口

以下是使用 Python 封装关键词搜索阿里巴巴商品列表数据的步骤&#xff1a; 使用 requests 库向阿里巴巴搜索接口发送 HTTP 请求&#xff0c;可以使用 GET 或 POST 方法&#xff0c;请求参数中应包含搜索关键词、每页展示数量、当前页码等信息。 解析返回的 response 中的 HTM…...

编程日记 2023/6/10 15:14:58

分布式光伏消纳的微电网群共享储能配置策略研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/6/10 15:09:57

C语言写网络爬虫总体思路

使用C语言编写爬虫可以实现网络数据的快速获取和处理&#xff0c;适用于需要高效处理海量数据的场景。与其他编程语言相比&#xff0c;C语言具有较高的性能和灵活性&#xff0c;可以进行底层操作和内存管理&#xff0c;适合处理较复杂的网络请求和数据处理任务。 但是&#xf…...

编程日记 2023/6/10 15:04:56

机器学习实战六步法之训练模型、优化模型、部署模型（七）

要落地一个机器学习的项目&#xff0c;是有章可循的&#xff0c;通过这六个步骤&#xff0c;小白也能搞定机器学习。 看我闪电六连鞭&#xff01;&#x1f923; 训练模型 当确定好机器学习算法之后&#xff0c;就可以通过训练数据集中的特征和标签&#xff0c;根据样本数据的…...

编程日记 2023/6/10 14:59:54

《C++高级编程》读书笔记（七：内存管理）

1、参考引用 C高级编程&#xff08;第4版&#xff0c;C17标准&#xff09;马克葛瑞格尔 2、建议先看《21天学通C》 这本书入门&#xff0c;笔记链接如下 21天学通C读书笔记&#xff08;文章链接汇总&#xff09; 1. 使用动态内存 1.1 如何描绘内存 在本书中&#xff0c;内存单…...

编程日记 2023/6/10 14:54:53

Scrum团队的三个角色

Scrum团队中包括三个角色&#xff0c;他们分别是产品负责人、开发团队和 Scrum Master。 Scrum 团队是自组织、跨职能的完整团队。自组织团队决定如何最好地完成他们的工作,而不是由团队外的其他人来指挥他 们。 跨职能的团队拥有完成工作所需要的全部技能,不需要依赖团队外部…...

编程日记 2023/6/10 14:49:52

python环境中使用 requirement.txt 安装依赖

在 Python 项目中&#xff0c;我们通常使用 requirement.txt 文件记录项目所依赖的第三方库&#xff0c;以便在其他机器上部署项目时更方便地安装这些依赖。在使用 requirement.txt 安装依赖时&#xff0c;可以按照以下步骤进行&#xff1a; 安装 pip 要使用 requirement.txt…...

编程日记 2023/6/10 14:44:51

UE5 材质常用大全

名称快捷方式类别计算方式/简介用法/说明Contant1+鼠标左键基础常量定义浮点数，与多通道运算时，自动影响多通道。各种基础参数Constant2Vector2+鼠标左键基础常量2维向量，2通道，影响2个通道。R/G,用于调整UVConstant3Vector3+鼠标左键基础常量3维向量，3通道，影响3个通道R…...

编程日记 2023/6/10 14:39:50

笔记本安装centos操作系统

一、下载centos镜像 centos官方历史版本&#xff1a;Index of / 常用的镜像文件类型介绍&#xff1a; DVD ISO&#xff1a;普通光盘完整安装版镜像&#xff0c;可离线安装到计算机硬盘上&#xff0c;包含大量的常用软件&#xff08;一般选择这种jing&#xff09;。 Everythi…...

编程日记 2023/6/10 14:34:49

Polarion工作流插件(自定义)

创建插件命名插件配置插件Condition&Function package com.polarion.capital.example.conditions;import com.polarion.alm.tracker.model.IWorkItem; import com.polarion.alm.tracker.workflow.IArguments; import com.polarion.alm.tracker.workflow.ICallContext; impo…...

编程日记 2023/6/10 14:29:48

JavaScript库：jQuery,简化编程

1. jQuery介绍 官方网站 : https://jquery.com jQuery 是一个 JavaScript 库 。极大地简化了 JavaScript 编程&#xff0c;例如 JS 原生代码几十行 实现的功 能&#xff0c; jQuery 可能一两行就可以实现&#xff0c;因此得到前端程序猿广泛应用。 发展至今&#xff0…...

编程日记 2023/6/10 14:24:46

[springboot]菜鸟学习- JdbcTemplate用法浅尝

JdbcTemplate 是 Spring Framework 提供的一个非常强大的 JDBC 工具类&#xff0c;它可以显著简化 JDBC 编程的代码量&#xff0c;并提供了许多便捷的方法来执行 SQL 查询、更新等操作。 使用 JdbcTemplate 的步骤如下&#xff1a; 1. 创建 JdbcTemplate 对象&#xff1a;可以…...

编程日记 2023/6/10 14:19:46

11.无监督学习之主成分分析

11.1 降维 降维的两种应用&#xff1a;一是数据压缩&#xff1b;二是可视化数据。 11.1.1 数据压缩 将相关性强的两个特征导致冗余&#xff0c;可以直接去掉其中一个特征&#xff0c;或者将两个特征进行某种转换&#xff0c;得到一个特征。 11.1.2 可视化数据 直接看数据可…...

编程日记 2023/6/10 14:14:44

「HTML和CSS入门指南」figcaption 标签详解

什么是 figcaption 标签？ 在 HTML 中，figcaption 标签用于为与 figure 元素相关的媒体内容提供说明性文本。通常用于包含图像、音频或视频等媒体元素的说明文本。 figcaption 标签的基本语法 以下是 figcaption 标签的基本语法： <figure><!-- 在这里放置您的媒体…...

编程日记 2023/6/10 14:09:43

电子企业实施数字化工厂建设之前，需要注意哪些

随着工业4.0时代的到来&#xff0c;数字化工厂建设已成为越来越多电子企业的重要议题。数字化工厂管理系统能够提高生产效率、降低成本、提高产品质量等多个方面的优势&#xff0c;对于企业的可持续发展具有重要意义。然而&#xff0c;在实施电子企业数字化工厂建设之前&#x…...

编程日记 2023/6/10 14:04:42

迅捷pdf实现多页插入

之前我们使用福昕阅读器实现了在每一页插入logo 这里我们用迅捷pdf再来一次&#xff0c;别问&#xff0c;问就是公司买了会员 首先声明&#xff0c;这里已经有会员了&#xff0c;所以不知道别人操作是不是需要会员&#xff0c;担心的话可以看看上一篇福昕阅读器版本 打开编辑…...

编程日记 2023/6/10 13:59:41

调用阿里云API实现证件照生成

目录 1. 作者介绍2. 算法介绍2.1 阿里云介绍2.2 证件照生成背景2.3 图像分割算法 3.调用阿里云API进行证件照生成实例3.1 准备工作3.2 实验代码3.3 实验结果与分析 参考&#xff08;可供参考的链接和引用文献&#xff09; 1. 作者介绍 王逸腾&#xff0c;男&#xff0c;西安工…...

编程日记 2023/6/10 13:54:40

PHP 转换 excel中读取的时间

首先&#xff0c;我们需要知道PHPExcel的时间和日期格式是以Excel内部的“1900年1月1日”为基础&#xff0c;以天为单位来计算的。即Excel日期与PHP时间戳之间存在一个时间偏移量。通过查阅PHPExcel的官方文档&#xff0c;我们可以得到以下的计算公式&#xff1a; // 读取exce…...

编程日记 2023/6/10 13:49:39

Cmake工具的简单使用

引言 本篇文章讲述如何简单的使用cmake工具构建一个项目&#xff0c;帮助入门的c新手学会如何使用cmake. 我们在Clion新创建一个项目时&#xff0c;会发现&#xff0c;除了main.cpp文件之外&#xff0c;还存在一个build-debug目录和一个CMakelists.txt文件&#xff0c;如图: …...

编程日记 2023/6/10 13:44:38

html选择器

基本选择器 基本选择器 : 标签选择器 , 类选择器 , ID选择器 标签选择器 代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEed…...

编程日记 2023/6/10 13:39:37

咸宁网站设计公司/seo网络营销推广公司深圳

alter any cluster 修改任意簇的权限alter any index 修改任意索引的权限alter any role 修改任意角色的权限alter any sequence 修改任意序列的权限alter any snapshot 修改任意快照的权限alter any table 修改任意表的权限alter any trigger 修改任意触发器的权限alter clust…...

编程日记 2025/1/16 16:01:49

洛阳网站建设优化案例/太原推广团队

最近研究Flash XML的动态图表实现.看了些商业的方案.汇总在这里. AnyChart Flash Chart ComponentAurigma FlashChartB-Line Charting ComponentCordas PopChartFusionChartsGraph ZXPHP/SWF ChartsRich Chart BuilderSwiff ChartWA Dynamic Flash ChartsXPCharting转载于:http…...

编程日记 2025/1/16 14:49:07

美国建网站的价格/百度搜索

一、效果图&#xff1a;...

编程日记 2025/1/16 11:25:01

商城网站建设需要/合肥关键词排名工具

大数据量&#xff0c;海量数据 处理方法总结 来源&#xff1a; 葛林华的日志 大数据量的问题是很多面试笔试中经常出现的问题&#xff0c;比如baidu google 腾讯 这样的一些涉及到海量数据的公司经常会问到。 下面的方法是我对海量数据的处理方法进行了一个一般性的总结&#…...

编程日记 2025/1/16 6:29:00

安徽汽车网网站建设/关键词查询工具

分享一下我老师大神的人工智能教程&#xff01;零基础&#xff0c;通俗易懂&#xff01;http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识&#xff0c;造福人民&#xff0c;实现我们中华民族伟大复兴&#xff01;接着上一篇文章&#xff0c;如何将JPG格式的…...

编程日记 2025/1/15 23:58:47

汕头网站备案/廊坊快速排名优化

D 题意&#xff1a; 就是让你构造一个n个点的数&#xff0c;然后&#xff0c;一个点度为i的权值为va[i]现在问你构造出的树&#xff0c;最大的权值和是多少。 思考&#xff1a; 刚开始看到感觉就是一共2*(n-1)个度&#xff0c;然后直接完全背包跑一遍&#xff0c;但是不对。然…...

编程日记 2025/1/15 23:46:38