Vue -- 总结 02

Vue脚手架

安装Vue脚手架:

在cmd中安装(输入):npm install -g @vue/cli

如果下载慢或下载不了,可以安装(cmd输入)淘宝镜像:npm config set registry https://registry.npmmirror.com

用命令创建Vue项目

在要创建的vue项目的文件夹里输入 cmd 回车

创建项目:“vue create 项目名”

注意:项目名不能带大写字母, 中文特殊符号或者和下载的包依赖名称相同

可以选vue2或vue3

进入脚手架项目下, 启动内置的热更新本地服务器 : npm run serve 

创建的文件结构

 hello-vue        # 项目目录
    ├── node_modules # 项目依赖的第三方包
    ├── public       # 静态文件目录
      ├── favicon.ico# 浏览器小图标
      ├── index.html # 单页面的html文件(网页浏览的是它)
    ├── src         # 业务文件夹
      ├── assets     # 静态资源
        └── logo.png # vue的logo图片
      ├── components # 组件目录
        └── HelloWorld.vue # 欢迎页面vue代码文件 
      ├── App.vue    # 整个应用的根组件
      ├── main.js    # 入口js文件
    ├── .gitignore   # git提交忽略配置
    ├── babel.config.js  # babel配置文件--babel是一个JS编译器,兼容低版本浏览器,引入babel,将es6转为es5
    ├── jsconfig.json   #如果想要更改默认的webpack配置时,可以通过jsconfig.json文件
    ├── package.json  # 依赖包列表
    ├── README.md    # 项目说明
    ├── packge-lock.json    # 项目包版本锁定
    ├── vue.config.js   #vue文件编译时的配置文件

assets和public目录的区别:

assets和public两个目录都可以用来放置静态资源,通常将外部引入的第三方的文件放在public中,自己的文件放在assets中。

1、public文件夹

(1)路径设置时无需添加 /public,默认加载 public 文件夹下的文件

(2)public文件夹下的资源会直接编译,而不经过 webpack

2、assets文件夹

(1)assets目录中的文件会被webpack处理解析为模块依赖

(2)大多数用来存放js、css等

App.vue

<template><!-- 一个模版里面只能有一个根标签 --><div id="app"><!-- v-if控制元素的删除 --><h1 v-if="!flag">hello Vue</h1><!-- <h3 v-else-if="flag">我是h3</h3> --><h2 v-else>我else</h2><template v-if="flag"><h1>你好</h1><p>跑步</p><p>打球</p></template><!-- 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。 --><div v-show="!flag">我是v-show</div><!-- v-for的语法是item in items items是数据源(就是你要循环的数据) item 数组的每一项 --><div v-for="(item1,index) in arr">{{ item1 }}---{{ index }}</div><div v-for="(item1,index1) in arrObj"><div>{{ item1.name }}--{{ index1 }}</div><div v-for="(item2,index2) in item1.childern">{{ item2.name }}--{{ index2 }}</div></div><div v-for="(value1,name,index) in obj">{{ value1 }}--{{ name }}--{{ index }}</div></div></template><script>
// 每一个.vue文件就是一个组件后续你写的页面都是以.vue结尾的
// 根组件
// 本地图片先引入在使用
// @直接找src目录下
export default {name: 'App',data(){//data初始化数据return{flag:true,arr:['小明','小蓝','小红'],arrObj:[{name:'oppo',childern:[{name:'一加'}]},{name:'小米',childern:[{name:'红米'}]}],obj:{name:'小小',age:18}}},methods:{}}
</script><style></style>

动态绑定绑定属性

<template><!-- 一个模版里面只能有一个根标签 --><div id="app"><h1>hello Vue</h1><h3>你好</h3><a href="http://www.baidu.com">百度一下</a><div>{{ hrefSrc }}</div><!-- v-bind动态绑定属性 --><a v-bind:href="hrefSrc">动态绑定herf</a><!-- 简写为 --><a :href="hrefSrc">动态绑定herf--简写形式</a><img src="https://img2.baidu.com/it/u=3782187671,1334521936&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334" alt=""><img :src="imgSrc" alt=""><img src="./assets/logo.png" alt=""><img :src="logo" alt=""><div class="box" :class="{active:!isActive}">我是box</div><div :class="obj">小蓝</div><div :class="activeClass">小明</div><div :class="!isActive?'active':''">小红</div><button @click="changeIsActive">修改</button></div>
</template><script>
// 每一个.vue文件就是一个组件后续你写的页面都是以.vue结尾的
// 根组件
// 本地图片先引入在使用
// @直接找src目录下
import logo from "@/assets/logo.png";export default {name:'App',data(){//data初始化数据return{isActive:true,activeClass:'active',obj:{active:true},logo,msg:"hello word",hrefSrc:"http://www.baidu.com",imgSrc:"https://img2.baidu.com/it/u=3782187671,1334521936&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334"}},methods:{ // 方法changeIsActive(){console.log('this',this);let that = this;that.isActive = !that.isActive;}}
}
</script><style>
.box{width: 300px;height: 150px;border: 2px solid red;
}
.active{color:red
}</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/51726.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Java的心灵治愈交流平台

你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;Java语言&#xff1b;Spring Boot框架 工具&#xff1a;IDEA/Eclipse、Navicat 系统展示 首页 心…

学习资料销售平台小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;资料类型管理&#xff0c;学习资料管理&#xff0c;订单管理&#xff0c;系统管理 微信端账号功能包括&#xff1a;系统首页&#xff0c;学习资料&#xff0c;购物车&#xff0c;…

QT实现电子相册

使用带有UI界面的QWidget实现电子相册 1、实现功能 1、定时器的使用&#xff0c;在当前页面的停止总时长。 2、显示当前时间 3、图片的上一张与下一张 4、图片的显示 5、进度展示、一共十张图片、进度条的初始值为10。 2、widget.h #ifndef WIDGET_H #define WIDGET_H#i…

【微信小程序】SpringBoot集成微信小程序(多小程序集成)

SpringBoot集成微信小程序 前言一、前置工作1、获取appId和appSecret核心参数 二、SpringBoot集成微信小程序1、引入pom依赖2、yml配置3、java代码文件3.1、Properties 配置类3.2 Configuration 服务类 4、使用示例4.1、获取登录后的session信息&#xff1a;openId4.2、获取当前…

举办知识竞赛是线上好还是线下好

举办知识竞赛线上和线下各有优势&#xff0c;选择哪种方式取决于具体的需求和条件。 线上举办知识竞赛的优缺点&#xff1a; 优点&#xff1a; 便捷性&#xff1a;线上竞赛不受地域限制&#xff0c;参与者可以在任何有网络的地方参与。 选手数&#xff1a;可以同时满足人数较…

数据丢失?四款数据恢复免费版分享

作为一个办公室的文案策划人员&#xff0c;我深知数据的重要性。电脑里不仅有我辛辛苦苦撰写的文案&#xff0c;还有那些珍贵的创意灵感和客户资料。然而&#xff0c;就在上周&#xff0c;我因为一次不小心的误操作&#xff0c;把一个重要的文件夹给删除了。那一刻&#xff0c;…

基于web网上十字绣专营店设计与实现

&#xff08;一&#xff09;业务流程分析 没有实现网上销售的十字绣专营店&#xff0c;即店面销售方式&#xff0c;店面需要专人看管&#xff0c;而且销售范围有限&#xff0c;面向的对象很受限制&#xff0c;销售情况需要店主手工记录到账簿&#xff0c;以备利润汇总&#xf…

黄力医生谈健康:掌握这几个秘诀,帮你远离冠心病困扰!

随着生活水平的提高&#xff0c;人们的饮食结构和生活习惯发生了显著变化&#xff0c;这使得冠心病的患病率呈现出逐年上升的趋势&#xff0c;且发病年龄也越来越年轻化。面对这一严峻的健康挑战&#xff0c;提高对冠心病的认识&#xff0c;及早进行干预显得尤为重要。今天&…

HarmonyOS鸿蒙开发:在线短视频流畅切换最佳实践

简介 为了帮助开发者解决在应用中在线短视频快速切换时容易出现快速切换播放时延过长的问题&#xff0c;将提供对应场景的解决方案。 该解决方案使用&#xff1a; 视频播放框架AVPlayer和滑块视图容器Swiper进行短视频滑动轮播切换。绘制组件XComponent的Surface类型动态渲染…

10 个最佳网络爬虫工具和软件,零基础入门到精通,收藏这一篇就够了

据 Strait Research 称&#xff0c;数据提取的需求正在不断增加&#xff0c;预计到 2031 年将达到 18 亿美元。 使用最好的网络爬行工具启动您的数据提取项目&#xff0c;并告别烦人的爬行头痛。我们研究和测试了数百种免费和付费软件&#xff0c;然后为您提出了十种最佳网络爬…

JVM 内存参数

文章目录 引言I JVM基础知识Java 语言是解释型的OpenJDK和Sun/Oracle JDK和hotspot的关系JDK、JRE、JVM 之间的关系JVM基础功能JVM组成JIT:Just In Time CompilerJVM内存区域JVM运行时数据区JVM 堆内存布局II JVM 内存参数常用参数JIT编译参数GC信息打印GC参数III 例子引言 J…

disk manager操作教程 如何使用Disk Manager组件 Mac如何打开ntfs格式文件

macOS系统有一个特别明显的弱点&#xff0c;即不能对NTFS格式磁盘写入数据。想要适合Mac系统使用来回转换磁盘格式又十分麻烦&#xff0c;这该怎么办呢&#xff1f;Tuxera ntfs for mac作为一款Mac完全读写软件&#xff0c;大家在安装该软件后&#xff0c;能充分使用它的磁盘管…

centos安装docker并配置加速器

docker安装与卸载&#xff1a; 1、检查当前是否安装docker yum list installed | grep docker2、卸载docker 根据yum list installed | grep docker查询出来的内容&#xff0c;逐个进行删除 yum remove docker.x86 64 -y3、启动与关闭docker 4、删除/etc/docker文件夹 如果…

C#面试题系列--动态更新

C#面试题系列 排版排了半天&#xff0c;也是不好看&#xff0c;那就不排版了&#xff0c;尽量由易到难 高级一些 什么是MVC模式C#中特性是什么&#xff1f;如何使用&#xff1f;C#中什么是反射?C#中的委托是什么 事件是不是一种委托C# 不安全代码C# 隐式类型 varC# linqC# 匿名…

监控域名到期发送钉钉消息通知

目的 想象一下&#xff0c;域名到期都不知道&#xff0c;忘了续费&#xff0c;就像忘了交房租&#xff0c;房东&#xff08;互联网&#xff09;会毫不留情地把你扫地出门&#xff01;所以&#xff0c;及时续费&#xff0c;让顾客轻松找到你&#xff0c;生意红红火火&#xff0…

vs2022 C++ 使用MySQL Connector/C++访问mysql数据库

1、下载MySQL Connector/C&#xff0c;我这里下载的是debug版本&#xff0c;下载链接MySQL :: Download MySQL Connector/C (Archived Versions) 2、解压并且放到MySQL文件夹中&#xff0c;便于使用 3、打开vs2022&#xff0c;右键项目&#xff0c;点击属性 4、在 “C/C” ->…

视频技术未来展望:EasyCVR如何引领汇聚融合平台新趋势

随着科技的飞速发展&#xff0c;视频技术已成为现代社会不可或缺的一部分&#xff0c;广泛应用于安防监控、娱乐传播、在线教育、电商直播等多个领域。本文将探讨视频技术的未来发展趋势&#xff0c;并深入分析TSINGSEE青犀EasyCVR视频汇聚融合平台的技术优势&#xff0c;展现其…

HIVE 数据仓库工具之第二部分(数据库相关操作)

HIVE 数据仓库工具之第二部分&#xff08;数据库相关操作&#xff09; 一、Hive 对数据库的操作1.1 创建数据库1.1.1 创建数据库语法1.1.3 示例 1.2 使用数据库1.2.1 使用数据库语法1.2.2 示例 1.3 修改数据库1.3.1 修改数据库的语法1.3.2 示例 1.4 删除数据库1.4.1 删除数据库…

JetBrains WebStorm 2024.2 (macOS, Linux, Windows) - 最智能的 JavaScript IDE

JetBrains WebStorm 2024.2 (macOS, Linux, Windows) - 最智能的 JavaScript IDE JetBrains 跨平台开发者工具 请访问原文链接&#xff1a;ttps://sysin.org/blog/jetbrains-webstorm/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;sy…

能大致讲一下Chat GPT的原理吗?

AI视频生成&#xff1a;小说文案智能分镜智能识别角色和场景批量Ai绘图自动配音添加音乐一键合成视频百万播放量https://aitools.jurilu.com/ 话题群精选了三位网友的回答&#xff0c;从不同的角度阐释了Chat GPT的原理。 第一位网友的回答&#xff1a; 不给你扯长篇大论&#…