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

【星海出品】VUE(一)

Windows安装nvm控制器

Windows里找都PowerShell。右击点击管理员运行。

1.安装choco

 Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

2.安装NVM

 choco install nvm  

3.查看可以安装的版本。

nvm list available
  • 常用命令
    nvm list #查看本地所有node版本
    nvm install 16.13.2 #安装16.13.2 版本
    nvm use 16.13.2 #切换至 16.13.2 版本
    nvm uninstall 16.13.2 #卸载16.13.2 版本

可以在node官网下载

https://nodejs.org/zh-cn

VUE

https://cn.vuejs.org/

npm config set registry https://registry.npm.taobao.org

设置为阿里云的源

npm install -g @vue/cli

安装VUE
vue -V #检查vue是否已经安装

vue create 项目名

创建项目
在这里插入图片描述
创建完成后会有提示。
按照提示继续进行就可以了。

VUE一款渐进式JavaScript框架,所谓渐进式就是逐步实现新特性的意思,如实现模块化开发,路由,状态管理等新特性。其特点是综合了Angular(模块化) 和 React (虚拟 DOM) 的优点;
HTML:页面的结构和内容
CSS:网页的表现央视
JavaScript:控制页面的行为

CSS预处理器

SASS,基于Ruby,通过服务端处理
LESS,基于NodeJS, 通过客户端处理

UI框架

Ant-Design: 阿里巴巴出品,基于React的 UI 框架
ElementUI; 饿了么出品,基于Vue的 UI 框架
Bootsrap: Twitter 推出的一个用于前端开发的开源工具包
AmazeUI: 又叫“ 妹子UI ” 一款 HTMLS 跨屏前端框架

Ant-Desgin圣诞节彩蛋事件

cd vue-demo
root@DevelopmentNode vue-demo $ ls
build  config  index.html  node_modules  package.json  README.md  src  static  test

一。
./index.html

<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>vue-demo</title></head><body><div id="app"></div><!-- built files will be auto injected --></body>
</html>

body中的id=‘app’
会追踪到同级目录下的SRC下的App.vue

root@DevelopmentNode src $ ls
App.vue  assets  components  main.js  router

二。
cat ./App.vue

<template><div id="app"><img src="./assets/logo.png"><router-view/></div>
</template><script>
export default {name: 'App'
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

这个里面使用了<img>的这个标签
还使用的 <router-view/> 这个标签
这个标签可以使得跳转到不同的view中。来实现部分刷新,而不是刷新整个页面。
通过router-view我们会首先进入到router中

三。
在src下有一个目录router

root@DevelopmentNode router $ ls
index.js

打开这个JS文件

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export default new Router({routes: [{path: '/',name: 'HelloWorld',component: HelloWorld}]
})

可以看到这个文件是一些路由的信息。
里面显示如果访问的 path 是 ’/‘
那么使用 component 下的 HelloWorld

四。
还是在 src 下,我们进入 components 目录
然后进入到了这个子组件里

root@DevelopmentNode components $ ls
HelloWorld.vue

里面就是页面的具体实现了

<template><div class="hello"><h1>{{ msg }}</h1><h2>Essential Links</h2><ul><li><ahref="https://vuejs.org"target="_blank">Core Docs</a></li><li><ahref="https://forum.vuejs.org"target="_blank">Forum</a></li><li><ahref="https://chat.vuejs.org"target="_blank">Community Chat</a></li><li><ahref="https://twitter.com/vuejs"target="_blank">Twitter</a></li><br><li><ahref="http://vuejs-templates.github.io/webpack/"target="_blank">Docs for This Template</a></li></ul><h2>Ecosystem</h2><ul><li><ahref="http://router.vuejs.org/"target="_blank">vue-router</a></li><li><ahref="http://vuex.vuejs.org/"target="_blank">vuex</a></li><li><ahref="http://vue-loader.vuejs.org/"target="_blank">vue-loader</a></li><li><ahref="https://github.com/vuejs/awesome-vue"target="_blank">awesome-vue</a></li></ul></div>
</template><script>
export default {name: 'HelloWorld',data () {return {msg: 'Welcome to Your Vue.js App'}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {font-weight: normal;
}
ul {list-style-type: none;padding: 0;
}
li {display: inline-block;margin: 0 10px;
}
a {color: #42b983;
}
</style>

里面有个 {{ msg }} 是个信息绑定。是在 script 字段里,有个data msg

相关文章:

【星海出品】VUE(一)

Windows安装nvm控制器 Windows里找都PowerShell。右击点击管理员运行。 1.安装choco Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString(https://chocolatey.org/install.ps1))2.安装NVM choco install nvm 3.查看可…...

Stable Diffusion 的提示词使用技巧

推荐Stable Diffusion自动纹理工具&#xff1a; DreamTexture.js自动纹理化开发包 什么是提示语&#xff1f; 提示语是人工智能中的一个重要组成部分&#xff0c;尤其是自然语言处理 &#xff08;NLP&#xff09;。在AI自人工智能中&#xff0c;想要获得好的效果&#xff0c;简…...

Hook函数

在嵌入式系统中&#xff0c;hook函数&#xff08;也被称为钩子函数&#xff09;是一种特殊类型的函数&#xff0c;它会在特定的事件发生时被操作系统内部调用。例如&#xff0c;在实时操作系统&#xff08;RTOS&#xff09;中&#xff0c;如果删除了一个任务&#xff0c;就会调…...

USB简介系列-01

文章目录 USB简介一、电气USB简介 通用串行总线(USB)是由Compaq,Intel,Microsoft和NEC开发的规范,后来惠普,朗讯和飞利浦加入。这些公司成立了 USB Implementers Forum, Inc 作为一家非营利性公司,以发布规范并组织 USB 的进一步开发。 USB-IF的目的是为当时使用的PC…...

算法小白的心得笔记:比较小数点后五位,而不会受到浮点数精度问题的影响。

epsilon 来比较浮点数 double epsilon 1e-6; // for 6 decimal places for (const auto &ratio : colorRatio) {std::cout << "__" << inum << "__" << ratio << " ";if ((inum - 1) % 10 0){std::cout &l…...

11月起,33个省份纳入数电票开票试点范围内,发票无纸化已是大势所趋!

10月底&#xff0c;北京、贵州、山东&#xff08;不含青岛市&#xff09;、湖南、宁夏5个地区相继发布开展数电票试点工作的通知&#xff0c;至此&#xff0c;全国已有33个省份纳入数电票开票试点范围内。根据上述5地区发布的相关公告&#xff0c;11月1日将正式推行“数电票”开…...

NLP之Bert多分类实现案例(数据获取与处理)

文章目录 1. 代码解读1.1 代码展示1.2 流程介绍1.3 debug的方式逐行介绍 3. 知识点 1. 代码解读 1.1 代码展示 import json import numpy as np from tqdm import tqdmbert_model "bert-base-chinese"from transformers import AutoTokenizertokenizer AutoToken…...

matlab中的mapminmax函数初步理解和应用

matlab中的mapminmax函数初步认识 一、mapminmax 顾名思义&#xff1a;映射最大最小 二、语法及举例 2.1 语法1 [Y,PS] mapminmax(X) 将矩阵X映射形成矩阵Y, Y中每行中的最小值对应-1&#xff0c;最大值对应1。PS是一个包含映射信息的结构体。 举例&#xff1a; clc cle…...

svc和ingress的关系

在Kubernetes中&#xff0c;SVC有三种类型&#xff0c;分别是ClusterIP、NodePort和LoadBalancer。而Ingress则是一种服务类型的扩展&#xff0c;它主要用于处理HTTP和HTTPS流量&#xff0c;并提供了对集群内部服务的路由和负载均衡功能。 下面简要介绍SVC的三种类型和Ingress…...

可以使用以下代码对数据库查询结果进行分组统计

public static void GroupAndStatistic(string connectionString, string query) {// 创建一个SQLSugar实例var db new SQLSugarClient(connectionString);// 使用QueryHelper类执行查询var dataTable db.Query<DataRow>().From(query).ExecuteDataTable();// 使用LINQ…...

win10提示mfc100u.dll丢失的解决方法,快速解决dll问题

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“mfc100u.dll丢失”。那么&#xff0c;mfc100u.dll是什么&#xff1f;mfc100u.dll是Microsoft Visual C Redistributable文件之一&#xff0c;它包含了用于MFC (Microsoft Foundation Class…...

zookeeper:启动原理

主类&#xff1a; QuorumPeerMain, 其中调用了main对象的initializeAndRun方法&#xff0c; 首先定义了QuorumPeerConfig对象&#xff0c;然后调用了parse方法&#xff0c;parse方法代码如下&#xff1a; 其中调用的parseProperties方法的代码如下&#xff1a; 可以看到&am…...

kafka问题汇总

报错1&#xff1a; 解决方式 1、停止docker服务   输入如下命令停止docker服务 systemctl stop docker 或者service docker stop1   停止成功的话&#xff0c;再输入docker ps 就会提示出下边的话&#xff1a; Cannot connect to the Docker daemon. Is the docker daem…...

C#使用随机数模拟英雄联盟S13瑞士轮比赛

瑞士轮赛制的由来 瑞士制&#xff1a;又称积分循环制&#xff0c;最早出现于1895年在瑞士苏黎世举办的国际象棋比赛中&#xff0c;故而得名。其基本原则是避免种子选手一开始就交锋、拼掉&#xff0c;是比较科学合理、用得最多的一种赛制&#xff1b;英语名称为Swiss System。…...

RabbitMQ(高级特性)利用限流实现不公平分发

在RabbitMQ中&#xff0c;多个消费者监听同一条队列&#xff0c;则队列默认采用的轮询分发。但是在某种场景下这种策略并不是很好&#xff0c;例如消费者1处理任务的速度非常快&#xff0c;而其他消费者处理速度却很慢。此时如果采用公平分发&#xff0c;则消费者1有很大一部分…...

3 网络协议入门

从淘宝买东西举例来说明一次请求中的&#xff0c;网络有关的部分是打开浏览器&#xff0c;输入购物网站的地址&#xff1a; https://www.taobao.com/那么浏览器是怎么打开购物网站的首页的呢&#xff1f; (1)首先受到了一段http报文 HTTP/1.1 200 OK Date: Tue, 27 Mar 2018 …...

【星海出品】VUE(五)

表单 表单输入绑定 只需要v-model声明一下这个变量就可以。 还可以选择不同的类型&#xff0c;例如 type"checkbox“ v-model 也提供了 lazy、number、.trim 功能&#xff0c;只需要在v-model后面加入.lazy 例如&#xff1a;v-model.lazy”message“ <template><…...

项目实战之安装依赖npm install

文章目录 nvmdeasync包和node-gyp报错deasync包node-gyp报错 前言&#xff1a;有些人看着还活着其实已经凉了好一会儿了。 初拿到项目 初拿到项目肯定是先看配置 package.json的啦&#xff0c;看看都需要安装什么依赖&#xff0c;然后 npm install,OK结束 皆大欢喜。 ————…...

Java之图书管理系统

&#x1f937;‍♀️&#x1f937;‍♀️&#x1f937;‍♀️ 今天给大家分享一下Java实现一个简易的图书管理系统&#xff01; 清风的个人主页&#x1f389;✏️✏️ &#x1f302;c/java领域新星创作者 &#x1f389;欢迎&#x1f44d;点赞✍评论❤️收藏 &#x1f61b;&…...

用「埋点」记录自己,不妄过一生

最近有朋友问我「埋点怎么做」&#xff0c;给朋友讲了一些互联网广告的案例&#xff0c;从源头的数据采集讲到末尾的应用分析和流量分配等&#xff08;此处省略N多字&#xff09; 解释完以后&#xff0c;我想到一个问题&#xff1a;有了埋点可以做分析&#xff0c;那我们对自己…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时,会出现小数部分被截断的情况。典型错误模式如下: void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...