如何快速上手一个vue框架

news2025/10/31 1:12:11

安装nvm

下载nvm-setup.zip：
https://github.com/coreybutler/nvm-windows/releases
解压安装nvm：
创建两个文件夹，一个是nvm的安装位置，另一个是node.js的下载位置。不需要配置环境变量和修改setting文件了
检查nvm是否安装成功：
window+r输入：cmd
nvm -v
下载使用node.js:
window+r 输入：cmd
nvm list available    --查看网络可以安装的版本
nvm install           --要下载的node.js 的版本
nvm ls                --查看已经安装好的所有node.js的版本
nvm use node.js 的版本 -- 切换使用node.js的版本
nvm uninstall         --删除不要的版本
检查node和npm：
window+r 输入：cmd
node -v     --查看node的版本
npm -v      --查看npm的版本

创建vue3项目：

第一种方式创建vue3项目：
--在cmd窗口里面：
npm init vue@latest
cd 创建好的项目名字
npm/cnpm i    --下载依赖
npm run dev   --运行项目

 

第二种方式创建vue3项目：
--在cmd窗口里面
① vue create 项目名字
② 选择vue2或者vue3
③ cd 刚刚创建的项目
④ npm run serve

 

vs Code快速生成vue代码块：

第一步：

ctrl+shift+p

第二步：

输入：snippets
选择配置用户代码块：

 

第三步：

输入：vue
选择新建，全局代码片段文件(名字自己起)

 

第四步：

把下面的复制到里面去
{
    "Print to console": {
        "prefix": "vue",
        "body": [
            "<template>",
                
            "",
            "</template>",
            
            "",
            "<script>",
            "export default {",
           
            "}",
            "</script>",
            
            "",
            "<style>"
                
            "",
            "</style>"
        ],
        
    }
}

 

测试：

在新建的 xxx.vue组件里面
输入：vue 回车即可

vue3项目的目录结构：

目录结构解释：
.vscode        --vscode工具的配置文件
node_modules   --Vue项目的运行依赖文件
public         --资源文件（浏览器图标）
src            --源码文件夹
.gitignore     --git忽略文件
index.html     -- HTML文件
package.json   --信息描述文件
README.md      --注释文件
vite.config.js --vue配置文件
删除项目一些原有的页面：

在写项目前，把components里面所有的内容先删除掉：

删除完之后点击app.vue会报错，把所有关于，关于刚才删除的信息引用都删除掉。

删除成这个样子

运行查看项目：

然后运行项目，在浏览器查看删除后的效果：

删除全局css样式：

然后在把一些css样式删除掉，找到main.js:

删除里面的 import './assets/main.css'

在把下面公共资源文件夹下面的，base.css，logo.svg，main.css删掉：

模板语法：

vue使用一种基于HTML的模板语法，使我们能够声明式的将器组件实例的数据呈现到DOM上，所有的vue模板语法层面合法的html，可以被符合规范的浏览器和ltml解析器解析。

文本插值：

最基本的数据绑定形式是文本插值，它使用的是‘’Mustache‘语法（即双大括号）：

响应式数据：
在data中声明的数据，通过{{}}（模板语法绑定的数据）

在App.vue里面写的：

<template>
  <h3>模板语法：</h3>
  <p>{{ msg }}</p>
</template>
​
<script >
export default {
  data(){
    return{
      msg:'我是模板取值的',
      hello:'你好世界'
    }
  }
}
​
</script>

浏览器运行效果：

使用JavaScript表达式：

每个绑定仅支持单一表达式，也就是说一段能够被求值的JavaScript代码。一个简单的判断方法是否可以合法的写在 return 后面

有效的：
<template>
  <h3>模板语法：</h3>
  <p>{{ msg }}</p>
  <p>{{ num +1 }}</p>
  <p>{{ flag ? 'yse' : 'no' }}</p>
  <p>{{message.split('').reverse().join('')}}</p>
</template>
​
<script >
export default {
  data(){
    return{
      msg:'我是模板取值的',
      num:10,
      flag:true,
      message:'大家好'
    }
  }
}
​
</script>

浏览器运行效果：

无效的：

这样写会报错

<!-- <p>{{ var a = 1 }}</p> -->
  <!-- <p>{{ if(flag){return message} }}</p> -->
原始HTML：

双大括号会将数据插值为纯文本，而不是HTML。若想插入HTML，需要使用 v-html 指令：

<template>
    <p>
        {{url}}
    </p>
<p v-html="url"></p>
</template>
​
<script>
data(){
    return{
        url:"<a href='http://www.baidu.com>百度</a>'"
    }
}
</script>

效果：

属性绑定：

双大括号不能在html attribute中使用。想要响应式地绑定一个attribute，因该使用 v-bind 指令。

v-bind
<template>
  <!-- 这个显示不出来 -->
  <div class="{{ msg }}">测试</div> 
  <!-- 这样可以添加上id -->
  <div v-bind:id="addId">测试2</div>
  <!-- 这样可以添加上class -->
  <div v-bind:class="msg">测试3</div>
</template>
​
<script >
export default {
  data(){
    return{
      msg:'hello world',
      addId:'addId'
    }
  }
}
​
</script>

 

v-bind 指令指示，Vue将该元素的 id attribute 与组件 addId 保持一致。如果绑定的值是 null 或者 undefined ，那么该attribute将会从渲染的元素是移除。

简写：

因为 v-bind 非常的常用，我们提供了特定的简写方法。

<div :id="addId" :class="msg"></div>

测试：

<template>
  <!-- 加上null -->
  <div :title="addTitle">测试4</div>
  <!-- 按钮 -->
  <button :disabled="isDisabled">按钮</button>
</template>
​
<script >
export default {
  data(){
    return{
      addTitle:null,
      isDisabled:true,
    }
  }
}
​
</script>

效果：

布尔型 Attribute

布尔型 attribute 依据 true/false 值来决定 attribute是否应该存在于，该与元素上，disabled就是最常见的例子。

<template>
  <!-- 按钮 -->
  <button :disabled="isDisabled">按钮</button>
</template>
​
<script >
export default {
  data(){
    return{
      isDisabled:true,
    }
  }
}
​
</script>
动态绑定多个值：

如果我有想这样一个包含多个attribute的JavaScript对象：

<template>
  <!-- 动态绑定多个值 -->
  <div v-bind="objectAdd">测试</div>
 
</template>
​
<script >
export default {
  data(){
    return{
      objectAdd:{
        class:'helloClass',
        id:'helloId'
      }
     
    }
  }
}
​
</script>

测试：

条件渲染：

在vue中，提供了条件渲染，类似于

JavaScript中的条件语句。

v-if
​
v-else
​
v-else-if
​
v-show
​
v-if

v-if:指令用于条件性的渲染一块内容，这块内容只会在指令的表达式返回值为true时，才被渲染：

<template>
    <h3>条件渲染</h3>
    <!-- v-if 和v-else -->
    <div v-if="flag">你能看见我吗？</div>
    <div v-else="flag">那你还是看看我吧</div>
    <!-- v-if-else-if -->
    <div v-if="type === 'A'">A</div>
    <div v-else-if="type === 'B'">B</div>
    <div v-else="type === 'C'">C</div>
    <div v-else>not A/B/C</div>
</template>
​
<script>
    export default{
        data(){
            return{
                flag:false,
                type:"D"
            }
        }
    }
</script>

效果：

v-show

另一个可以用来按条件显示一个元素的指令是 v-show，用法一样

<template>
    <h3>条件渲染</h3>
<!-- v-show -->
<div v-show="flag">你能看见我吗</div>
​
<div></div>
</template>
​
<script>
    export default{
        data(){
            return{
                flag:true,
            }
        }
    }
</script>

效果：

v-if VS v-show 的区别：

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。vf也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为true时才被渲染。

相比之下，v-show简单许多，元素无论初始条件如何，始终会被渲染，只有CSS display属性会被切换。总的来说，v-if 有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要频繁切换，则使用v-show较好；如果在运行时绑定条件很少改变，则 v-if会更合适

列表渲染：

v-for

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据，而item是迭代的别名。

<template>
    <h3>列表渲染</h3>
    <p v-for="item in names">{{ item }}</p>
</template>
​
<script>
export default{
    data(){
        return{
            names:['道恩','你好','金刚','IT']
        }
    }
}
</script>

效果：

复杂数据：

大多数情况下，我们渲染的数据来源于网络请求，也就是json格式：

<template>
    <h3>列表渲染</h3>
    <p v-for="item in names">{{ item }}</p>
    <div v-for="item in result">
        <p>{{ item.id }}</p>
        <p>{{ item.title }}</p>
        <a :href="item.url"  alt="">链接</a>
    </div>
</template>
​
<script>
export default{
    data(){
        return{
            names:['道恩','你好','金刚','IT'],
            result:[
                {
                    "id":1111,
                    "title":'河南河南，的时刻近乎疯狂的撒JFKv接                                    口是否',
                    "url":'http://www.baidu.com'
                },
            {
                    "id":2424,
                    "title":'悲伤的故事大纲公司',
                    "url":'http://www.baidu.com'
                },
                {
                    "id":7645,
                    "title":'放松的地方是的夫是德国',
                    "url":'http://www.baidu.com'
                } 
            ]
        }
    }
}
</script>

效果：

v-for 也支持使用可选的第二个参数表示当前的位置索引：

<p v-for="(item,index) in names">{{ item }}:{{ index }}</p>

v-for 也可以使用 of 作为分隔符来替代 in ，这更接近与JavaScript的迭代器语法。

<p v-for="item of names">{{ item }}</p>

v-for 与 对象：
<template>
    <h3>列表渲染</h3>
   <p v-for="item of userInfo">{{ item }}</p>
     <p v-for="(value,key,index) of userInfo ">
     {{value}}--{{ key }}--{{ index }}
    </p>
</template>
​
<script>
export default{
    data(){
        return{
            userInfo:{
                name:'孙道恩',
                age:18,
                sex:'男'
            }
         
        }
    }
}
</script>

效果：

通过key管理状态：

Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue不会随之移动DOM元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。

为了给Vue一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute:

<template>
    <h3>key属性添加到v-for中</h3>
    <p v-for="(item,index) of names" :key="index">{{ item }}</p>
</template>
​
<script>
    export default{
        data(){
            return{
                names:['孙道恩','IT','大神']
            }
        }
    }
​
</script>

效果：

提示：

key在这里是一个通过 v-bind 绑定的特殊 attribute
推荐在任何可行的时候为v-for提供一个key attribute
key绑定的值期望是一个基础类型的值，例如字符串或 number 类型

key的来源：

请不要使用index作为key的值，我们要确保每一条数据的唯一索引不会发生变化。

比如在原来的数组数据，前面添加数据，原来的下标为0的，新增完数据后，原来为0的下标就不为0了。

<div v-for="(item,index) of result" :key="item.id">
            <p>{{ item.title }}</p>
            <a :href="item.url">链接</a>
    </div>

事件处理：

v-on

我们可以使用 v-on 指令（简写为 @ ）来监听事件，并在事件触发时执行对应的JavaScript。

用法： v-on:click="methodName" 或者 @click="methodName"

事件处理器的值可以是：

① 内联事件处理器：事件被触发时执行的内联JavaScript 语句（与onclick 类似）
② 方法事件处理器：一个指向组件上定义的方法的属性名或是路径
内联事件处理器：

内联事件处理器通常使用的简单场景：

<template>
    <h3>内联事件处理器</h3>
    <!-- <button v-on:click="count++">Add</button> -->
    <!-- 简写 -->
    <button @click="count++">Add</button>
    <p>{{ count }}</p>
</template>
​
<script>
    export default{
        data(){
            return{
                count:0,
            }
        }
    }
</script>

效果：

方法处理器：
<template>
    <h3>内联事件处理器</h3>
    <!-- <button v-on:click="count++">Add</button> -->
    <!-- 简写 -->
    <button @click="addCount">Add</button>
    <p>{{ count }}</p>
</template>
​
<script>
    export default{
        data(){
            return{
                count:0,
            }
        },
        //所有的方法和函数都在这里
        methods:{
            addCount(){
                console.log('被点击了');
                //读取到data里面的数据方案： this.count
                this.count++;
            }
        }
    }
</script>

效果：

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Redis客户端之Redisson（三）Redisson分布式锁

Redis客户端之Redisson（三）Redisson分布式锁

一、背景&#xff1a; 高效的分布式锁设计应该包含以下几个要点&#xff1a; 1、互斥&#xff1a; 在分布式高并发的条件下&#xff0c;我们最需要保证&#xff0c;同一时刻只能有一个线程获得锁&#xff0c;这是最基本的一点 2、防止死锁&#xff1a; 在分布式高并发的条…
阅读更多...
【vue3源码】vue源码探索之旅：项目介绍

【vue3源码】vue源码探索之旅：项目介绍

简言 记录下我眼中的vue源码项目。 gitHubvue3项目仓库 项目要求： vue版本 3.4.15nodeV18.12.0以上使用pnpm包管理器vitest测试框架Vue3 vue3是渐进式JavaScript框架，易学易用，性能出色，适用场景丰富的 Web 前端框架。 Vue 是一个框架，也是一个生态。其功能覆盖了大部分…
阅读更多...
VBA技术资料MF111：将表对象转换为正常范围

VBA技术资料MF111：将表对象转换为正常范围

我给VBA的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。我的教程一共九套&#xff0c;分为初级、中级、高级三大部分。是对VBA的系统讲解&#xff0c;从简单的入门&#xff0c;到…
阅读更多...
【Linux C | 进程】Linux 进程间通信的10种方式（1）

【Linux C | 进程】Linux 进程间通信的10种方式（1）

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; &#x1f923;本文内容&#x1f923;&a…
阅读更多...
python14-Python的字符串之原始字符串

python14-Python的字符串之原始字符串

由于字符串中的反斜线都有特殊的作用。 因此当字符串中包含反斜线时,就需要对其进行转义。 比如写一条Windows的路径:D:\pythonStudy\demo，如果在Python 程序中直接这样写肯定是不行的，需要写成:D:\\pythonStudy\\demo，这很烦人. 此时可借助于原始字符串来解决这个问题。…
阅读更多...
LeNet跟LeNet5详解

LeNet跟LeNet5详解

1 LeNet结构 主要是为了手写数字识别 具体结构讲解&#xff1a;从图中例子可得 1 先传入一个灰度图像尺寸为1x28x28&#xff0c;通道数为1&#xff0c;尺寸为28x28的灰度图像 2 第一层5x5卷积&#xff0c;经过公式 输入图像尺寸-卷积核尺寸2padding/步长1&#xff0c;&#…
阅读更多...
网络编程小总结

网络编程小总结

【一】网络编程 互联网的本质就是一些网络协议 【1】网络开发架构 &#xff08; 1 &#xff09; C / S 架构 C : client &#xff08;客户端&#xff09; S: server (服务端) APP - 就是服务端 C/S 架构通过客户端软件和服务器之间的交互&#xff0c;实现了前端界面和后…
阅读更多...
32GPIO输入LED闪烁蜂鸣器

32GPIO输入LED闪烁蜂鸣器

一.GPIO简介 所有的GPIO都挂载到APB2上&#xff0c;每个GPIO有&#xff11;&#xff16;个引脚 内核可以通过APB&#xff12;对寄存器进行读写&#xff0c;寄存器都是32位的&#xff0c;但每个引脚端口只有&#xff11;&#xff16;位 驱动器用于增加信号的驱动能力 二.具体…
阅读更多...
Android系统开发之TimeZoneDetectorService浅析--下

Android系统开发之TimeZoneDetectorService浅析--下

TimeZoneDetectorService类图 可以看出TimeZoneDetectorService类&#xff0c;其具体实现是由TimeZoneDetectorStrategy类完成的。 在TimeZoneDetectorService类中&#xff0c;三种更新时区的接口分别为&#xff1a; suggestGeolocationTimeZone() //更新时区主要有三种方式…
阅读更多...
linux安装docker-compose

linux安装docker-compose

前言 如果你的docker版本是23&#xff0c;请移步到linux安装新版docker&#xff08;23&#xff09;和docker-compose这篇博客 查看docker版本命令&#xff1a; docker --version今天安装docker-compose的时候&#xff0c;找了很多教程&#xff0c;但是本地一直报错&#xff0…
阅读更多...
【mongoDB】图形化界面工具（mongoDB Compass)

【mongoDB】图形化界面工具（mongoDB Compass)

官网地址&#xff1a;https://www.mongodb.com/try/download/compass 下载完之后直接安装 桌面上会产生一个快捷方式 双击就会进入mongoDB图形化界面工具
阅读更多...
MMDetection

MMDetection

什么是MMDetection MMDetection实际上是一个用于目标检测的工具包&#xff0c;面向深度学习时代的。 任务支持 目标检测 实例分割 覆盖广泛 440个预训练模型 60篇论文复现 常用学术数据集 算法丰富 两阶段检测器 一阶段检测器 级联检测器 无锚框检测器 Transform…
阅读更多...
【HTML 基础】介绍

【HTML 基础】介绍

文章目录 定义作用基本概念1. 标签&#xff08;Tags&#xff09;2. 元素&#xff08;Elements&#xff09;3. 属性&#xff08;Attributes&#xff09;4. 文档结构 总结 HTML&#xff08;HyperText Markup Language&#xff09;是构建世界各地互联网页面的基本构建块之一。作为…
阅读更多...
BIOS与CMOS的区别

BIOS与CMOS的区别

在日常操作和维护计算机的过程中&#xff0c;常常可以听到有关BIOS设置和CMOS设置的一些说法&#xff0c;许多人对BIOS和CMOS经常混为一谈。下面介绍一些BIOS设置和CMOS设置在基本概念上的区分与联系。 BIOS是什么? 所谓BIOS&#xff0c;实际上就是微机的基本输入输出系统&…
阅读更多...
实现上下文初始化参数

实现上下文初始化参数

实现上下文初始化参数 问题方案 要解决上述问题，需要执行以下任务： 创建Web应用程序。创建检索初始化参数的servlet。指定初始化参数。构建Web应用程序。访问servlet。1. 创建Web应用程序 要使用NetBeans IDE创建Web应用程序，需要执行以下步骤： 选择“开始”→“所有程序”…
阅读更多...
MySQL-进阶-SQL优化

MySQL-进阶-SQL优化

一、insert优化 插入大量数据 二、主键优化 1、数据组织方式 2、页分裂 3、页合并 4、逐渐设计原则 三、order by优化 四、group by优化 五、limit优化 六、count优化 七、update优化
阅读更多...
如何通过 Nginx 反向代理提高网站安全性和性能？

如何通过 Nginx 反向代理提高网站安全性和性能？

如何通过 Nginx 反向代理提高网站安全性和性能&#xff1f; 引言Nginx 反向代理的基本原理什么是反向代理&#xff1f;反向代理的工作方式反向代理的好处 配置 Nginx 反向代理的基本步骤1. 安装 Nginx2. 编辑 Nginx 配置文件3. 设置反向代理配置4. 测试并重启 Nginx 提高安全性…
阅读更多...
函数式接口当参数使用

函数式接口当参数使用

如果函数式接口作为一个方法的参数&#xff0c;就以为着要方法调用方自己实现业务逻辑&#xff0c;常见的使用场景是一个业务整体逻辑是不相上下的&#xff0c;但是在某一个步骤有不同的逻辑&#xff0c;例如数据处理有不同的策略。上代码 package com.dj.lambda;import java.…
阅读更多...
Docker Image(镜像）

Docker Image(镜像）

Docker镜像是什么 Docker image 本质上是一个 read-only 只读文件&#xff0c;这个文件包含了文件系统、源码、库文件、依赖、工具等一些运行 application 所必须的文件。我们可以把 Docker image 理解成一个模板&#xff0c; 可以通过这个模板实例化出来很多容器。image 里面…
阅读更多...
Nestjs 全局拦截器

Nestjs 全局拦截器

一、拦截器 拦截器作用&#xff1a; 在函数执行之前、之后绑定额外的逻辑转换函数的返回结果转换从函数抛出的异常扩展基本函数的行为根据所选条件重写函数 期望接口返回一个标准的json格式&#xff0c;利用拦截器对数据做全局的格式化 {code: "200",data: [],mess…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023