【星海出品】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自动纹理工具： DreamTexture.js自动纹理化开发包 什么是提示语？ 提示语是人工智能中的一个重要组成部分，尤其是自然语言处理 （NLP）。在AI自人工智能中，想要获得好的效果，简…...
Hook函数
在嵌入式系统中，hook函数（也被称为钩子函数）是一种特殊类型的函数，它会在特定的事件发生时被操作系统内部调用。例如，在实时操作系统（RTOS）中，如果删除了一个任务，就会调…...
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月底，北京、贵州、山东（不含青岛市）、湖南、宁夏5个地区相继发布开展数电票试点工作的通知，至此，全国已有33个省份纳入数电票开票试点范围内。根据上述5地区发布的相关公告，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 顾名思义：映射最大最小 二、语法及举例 2.1 语法1 [Y,PS] mapminmax(X) 将矩阵X映射形成矩阵Y, Y中每行中的最小值对应-1，最大值对应1。PS是一个包含映射信息的结构体。 举例： clc cle…...
svc和ingress的关系
在Kubernetes中，SVC有三种类型，分别是ClusterIP、NodePort和LoadBalancer。而Ingress则是一种服务类型的扩展，它主要用于处理HTTP和HTTPS流量，并提供了对集群内部服务的路由和负载均衡功能。 下面简要介绍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问题
在计算机使用过程中，我们经常会遇到一些错误提示，其中之一就是“mfc100u.dll丢失”。那么，mfc100u.dll是什么？mfc100u.dll是Microsoft Visual C Redistributable文件之一，它包含了用于MFC (Microsoft Foundation Class…...
zookeeper:启动原理
主类： QuorumPeerMain, 其中调用了main对象的initializeAndRun方法， 首先定义了QuorumPeerConfig对象，然后调用了parse方法，parse方法代码如下： 其中调用的parseProperties方法的代码如下： 可以看到&am…...
kafka问题汇总
报错1： 解决方式 1、停止docker服务 输入如下命令停止docker服务 systemctl stop docker 或者service docker stop1 停止成功的话，再输入docker ps 就会提示出下边的话： Cannot connect to the Docker daemon. Is the docker daem…...
C#使用随机数模拟英雄联盟S13瑞士轮比赛
瑞士轮赛制的由来 瑞士制：又称积分循环制，最早出现于1895年在瑞士苏黎世举办的国际象棋比赛中，故而得名。其基本原则是避免种子选手一开始就交锋、拼掉，是比较科学合理、用得最多的一种赛制；英语名称为Swiss System。…...
RabbitMQ（高级特性）利用限流实现不公平分发
在RabbitMQ中，多个消费者监听同一条队列，则队列默认采用的轮询分发。但是在某种场景下这种策略并不是很好，例如消费者1处理任务的速度非常快，而其他消费者处理速度却很慢。此时如果采用公平分发，则消费者1有很大一部分…...
3 网络协议入门
从淘宝买东西举例来说明一次请求中的，网络有关的部分是打开浏览器，输入购物网站的地址： https://www.taobao.com/那么浏览器是怎么打开购物网站的首页的呢？ (1)首先受到了一段http报文 HTTP/1.1 200 OK Date: Tue, 27 Mar 2018 …...
【星海出品】VUE（五）
表单 表单输入绑定 只需要v-model声明一下这个变量就可以。 还可以选择不同的类型，例如 type"checkbox“ v-model 也提供了 lazy、number、.trim 功能，只需要在v-model后面加入.lazy 例如：v-model.lazy”message“ <template><…...
项目实战之安装依赖npm install
文章目录 nvmdeasync包和node-gyp报错deasync包node-gyp报错 前言：有些人看着还活着其实已经凉了好一会儿了。 初拿到项目 初拿到项目肯定是先看配置 package.json的啦，看看都需要安装什么依赖，然后 npm install,OK结束 皆大欢喜。 ————…...
Java之图书管理系统
🤷♀️🤷♀️🤷♀️ 今天给大家分享一下Java实现一个简易的图书管理系统！ 清风的个人主页🎉✏️✏️ 🌂c/java领域新星创作者 🎉欢迎👍点赞✍评论❤️收藏 😛&…...
用「埋点」记录自己，不妄过一生
最近有朋友问我「埋点怎么做」，给朋友讲了一些互联网广告的案例，从源头的数据采集讲到末尾的应用分析和流量分配等（此处省略N多字） 解释完以后，我想到一个问题：有了埋点可以做分析，那我们对自己…...
KubeSphere 容器平台高可用：环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界，看笔记好好学多敲多打，每个人都是大神！ 题目：KubeSphere 容器平台高可用：环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API，用于在函数组件中使用 state 和其他 React 特性（例如生命周期方法、context 等）。Hooks 通过简洁的函数接口，解决了状态与 UI 的高度解耦，通过函数式编程范式实现更灵活 Rea…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制，因此这个了16进制的数据既可以翻译成为这个机器码，也可以翻译成为这个国标码，所以这个时候很容易会出现这个歧义的情况； 因此，我们的这个国…...
测试微信模版消息推送
进入“开发接口管理”--“公众平台测试账号”，无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息： 关注测试号：扫二维码关注测试号。 发送模版消息： import requests da…...
idea大量爆红问题解决
问题描述 在学习和工作中，idea是程序员不可缺少的一个工具，但是突然在有些时候就会出现大量爆红的问题，发现无法跳转，无论是关机重启或者是替换root都无法解决 就是如上所展示的问题，但是程序依然可以启动。 问题解决…...
synchronized 学习
学习源： https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖，也要考虑性能问题（场景） 2.常见面试问题： sync出…...
以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：
一、属性动画概述NETX 作用：实现组件通用属性的渐变过渡效果，提升用户体验。支持属性：width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项： 布局类属性（如宽高）变化时&#…...
中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试
作者：Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位：中南大学地球科学与信息物理学院论文标题：BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接：https://arxiv.…...
iPhone密码忘记了办？iPhoneUnlocker，iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版分享
平时用 iPhone 的时候，难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵，或者买了二手 iPhone 却被原来的 iCloud 账号锁住，这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...