【vue3学习之路(一)】

news2024/11/22 14:00:25

文章目录

  • 前言
  • 一、vue3项目创建
    • 1.1环境准备
      • 1.1.1 基于 vue-cli 创建(脚手架创建)
      • 1.1.2 基于 vite 创建(推荐)
  • 二、熟悉流程
  • 总结


前言

参考视频:https://www.bilibili.com/video/BV1Za4y1r7KE?p=10&spm_id_from=pageDriver&vd_source=d4a415289ddc233b050862fba21c8157

一、vue3项目创建

方法一:基于vue-cli创建
方法二:基于vite创建(官网推荐),创建更快
vite官网地址:https://vitejs.cn
在这里插入图片描述
在这里插入图片描述

1.1环境准备

下载好node.js才有npm

1.1.1 基于 vue-cli 创建(脚手架创建)

点击查看官方文档

备注:目前vue-cli已处于维护模式,官方推荐基于 Vite 创建项目。
在powershell
查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version
安装或者升级你的@vue/cli
npm install -g @vue/cli
执行创建命令
vue create vue_test
随后选择3.x
Choose a version of Vue.js that you want to start the project with (Use arrow keys)
》3.x 直接回车
2.x
在这里插入图片描述
启动
cd vue_test
npm run serve

1.1.2 基于 vite 创建(推荐)

官网地址:https://vitejs.cn
https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application
注意node版本要在18以上。在需要创建的位置cmd

//	 创建工程
npm init vite@latest
//	输入项目名称
vite-vue3
//	 选择vue和TypeScript
//	进入创建的文件目录
cd vite-vue3
// 安装默认依赖 先查看当前源,切换淘宝镜像然后再安装
npm config get registry
npm config set registry=http://registry.npm.taobao.org/
npm install
// 运行
npm run dev

在这里插入图片描述
并未运行成功
(node:4960) UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token ‘??=’
at Loader.moduleStrategy (internal/modules/esm/translators.js:145:18)
(Use node --trace-warnings ... to show where the warning was created)
(node:4960) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block
, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:4960) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.在这里插入图片描述
若运行出错,检查node版本并切换至高版本
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
可采用以下方法更轻松

在这里插入图片描述

在这里插入图片描述

二、熟悉流程

在这里插入图片描述
main.ts
在这里插入图片描述
在src文件下的components新建想要添加的组件Person.vue
数据放在data,事件放在methods(这是vue2写法)

<template>
  <div class="person">
     <h2>姓名:{{name}}</h2>
    <h2>年龄:{{age}}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<script lang="ts">
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name:'Person',
  data(){
    return{
      name:'小小',
      age:19,
      tel:'12345566'
    }
  },
  methods:{
    changeName(){
        this.name='xiao'
    },
    changeAge(){
      this.age+=1
    },
    showTel(){
      alert(this.tel)
    }
  }
}

</script>

<style>
.person{
  background-color: #f8f8f8;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button{
  margin:0 5px ;
}
</style>

vue3的写法如下:

<template>
  <div class="person">
<!--     <h2>姓名:{{a}}</h2>-->
<!--    <h2>年龄:{{b}}</h2>-->
    <h2>姓名:{{name}}</h2>
    <h2>年龄:{{age}}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<script lang="ts">
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name:'Person',
  setup(){
    // console.log('@@',this)  // setup函数中的this是undefined,vue3弱化this
    //数据,原来写在data中的
    let name = '小夏'   //不是响应式的
    let age = 19      //注意此时的age不是响应式的
    let tel = '1232332423'

    // 方法
    function changeName(){
        console.log(1)
        name='sun'     // 注意:这样写name,页面是不会变化的
        console.log(name)  // 测试是否修改
    }
    function changeAge(){
        age += 1
    }
    function showTel(){
        alert(tel)
    }

    // 将数据、方法交出去,模版中才可以使用
    // return {a:name,b:age}
    return {name,age,changeAge,changeName,showTel}

    // setup的返回值也可以是一个渲染函数
    // return function (){
    //   return '哈哈哈哈'
    // }
    // return ()=>'哈哈哈哈哈'  // 箭头函数
  }

}

</script>

<style>
.person{
  background-color: #f8f8f8;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button{
  margin:0 5px ;
}
</style>


App.vue
在template里写html内容,script里写js或ts,注册相应组件,并在template里引用该组件

<template>
  <div class="app">
    <h1>你好啊</h1>
    <Person/>
  </div>
</template>

<script lang="ts">
import Person from "@/components/Person.vue";
export default {
  name:'App',  //组件名
  components:{Person}  //注册组件
}

</script>

<style>
.app{
  background-color: #2c3e50;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>


总结

1.Vue3的setup和vue2传统的配置项(data,methods)可不可以同时写?若冲突,以谁为主?
答:vue2的选项式语法可以和vue3的setup共存。data,methods可以和setup同时存在。data可以读取setup里的数据,setup不能读取data里数据

<template>
  <div class="person">
<!--     <h2>姓名:{{a}}</h2>-->
<!--    <h2>年龄:{{b}}</h2>-->
    <h2>姓名:{{name}}</h2>
    <h2>年龄:{{age}}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
    <hr>
    <h2>测试1:{{a}}</h2>
    <h2>测试2:{{c}}</h2>
    <h2>测试3:{{d}}</h2>
    <button @click="b">测试</button>
  </div>
</template>

<script lang="ts">
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name:'Person',
  data(){
    return{
      a:100,
      c:this.name,
      d:200
    }
  },
  methods:{
    b(){
      console.log('b')
    }
  },
  setup(){
    // console.log('@@',this)  // setup函数中的this是undefined,vue3弱化this
    //数据,原来写在data中的
    let name = '小夏'   //不是响应式的
    let age = 19      //注意此时的age不是响应式的
    let tel = '1232332423'
    

    // 方法
    function changeName(){
        console.log(1)
        name='sun'     // 注意:这样写name,页面是不会变化的
        console.log(name)  // 测试是否修改
    }
    function changeAge(){
        age += 1
    }
    function showTel(){
        alert(tel)
    }

    // 将数据、方法交出去,模版中才可以使用
    // return {a:name,b:age}
    return {name,age,changeAge,changeName,showTel}

    // setup的返回值也可以是一个渲染函数
    // return function (){
    //   return '哈哈哈哈'
    // }
   // return ()=>'哈哈哈哈哈'  // 箭头函数
  }

}

</script>

<style>
.person{
  background-color: #f8f8f8;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button{
  margin:0 5px ;
}
</style>

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

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

相关文章

使用uniapp 的 plus.sqlite 操作本地数据库报错:::table xxx has no column named xxxx

背景&#xff1a; 1、使用uniapp 的 plus.sqlite 进行APP本地数据库操作 2、SQLite 模块用于操作本地数据库文件&#xff0c;可实现数据库文件的创建&#xff0c;执行SQL语句等功能。 遇到&#xff1a;在之前创建的表上进行新增字段的操作时候&#xff0c;出现问题&#xff1a…

MyEclipse打开文件跳转到notepad打开问题

问题描述 windows系统打开README.md文件&#xff0c;每次都需要右键选择notepad打开&#xff0c;感觉很麻烦&#xff0c;然后就把README.md文件打开方式默认选择了notepad&#xff0c;这样每次双击就能打开&#xff0c;感觉很方便。 然后某天使用MyEclipse时&#xff0c;双击RE…

java第一次作业(二)

先写思路&#xff0c;再写代码&#xff0c;思路清晰&#xff0c;才能写对代码 7-6 求12...n的和 思路&#xff1a; 运用expression的字符串输出 重点&#xff1a; expression输出 代码&#xff1a; import java.util.Scanner; public class Main {public static void main…

数据运营常用的8大模型

✅作者简介&#xff1a;《数据运营&#xff1a;数据分析模型撬动新零售实战》作者、《数据实践之美》作者、数据科技公司创始人、多次参加国家级大数据行业标准研讨及制定、高端企培合作讲师。 &#x1f338;公众号&#xff1a;风姑娘的数字视角&#xff0c;免费分享数据应用相…

为什么静态成员函数不能是虚函数

在面向对象编程中&#xff0c;静态成员函数和虚函数都是常见的概念&#xff0c;但它们之间存在着本质上的差异。由于其特性上的差异&#xff0c;静态成员函数不能声明为虚函数。下面我们来探讨一下为什么静态成员函数不能是虚函数。 我在网上查到最多的说法是静态函数没有this指…

数字化转型能给企业创造哪些价值?

企业数字化转型能创造哪些价值&#xff1f; 深耕TOB行业 9 年&#xff0c;下面来分享下自己的一些经验和看法。 &#xff08;看完要是觉得有用&#xff0c;记得点个赞哈~&#xff09; 1、从宏观上理解&#xff0c;我们可以分成4个大的方面&#xff1a; &#xff08;1&#x…

PTA L2-031 深入虎穴 dfs与bfs版

著名的王牌间谍 007 需要执行一次任务&#xff0c;获取敌方的机密情报。已知情报藏在一个地下迷宫里&#xff0c;迷宫只有一个入口&#xff0c;里面有很多条通路&#xff0c;每条路通向一扇门。每一扇门背后或者是一个房间&#xff0c;或者又有很多条路&#xff0c;同样是每条路…

机器学习-05-回归算法

总结 本系列是机器学习课程的系列课程&#xff0c;主要介绍机器学习中回归算法&#xff0c;包括线性回归&#xff0c;岭回归&#xff0c;逻辑回归等部分。 参考 fit_transform,fit,transform区别和作用详解&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&am…

结构体讲解

目录 一.结构体类型的声明 (1)结构体的声明 (2)结构体的创建和初始化 (3)匿名结构体 (4)结构体的自引用 二.结构体内存对齐 (1)对齐规则 (2)为什么存在内存对齐&#xff1f; (3)结构体传参 三.结构体实现位段 (1)什么是位段 (2)位段的内存分配 (3)位段的跨平…

GDAL中的地理坐标系、投影坐标系及其相互转换

目录 地理坐标系 国内常用地理坐标系 投影坐标系 国内常用投影坐标系&#xff08;不推荐使用&#xff09; 坐标转换 地理坐标转为投影坐标 投影坐标转为地理坐标 地理坐标系 原理参考这篇文章&#xff1a;地理坐标系与投影坐标系区别与联系 https://yunxingluoyun.blog.…

极智项目 | 基于YOLOv5+DeepSort实现的车流量统计算法

欢迎关注我的公众号「极智视界」&#xff0c;获取我的更多技术分享 大家好&#xff0c;我是极智视界&#xff0c;本文分享一下 基于YOLOv5DeepSort实现的车流量统计算法。 车流量统计的实现一般原理是跟踪画面上检测出来的车辆&#xff0c;并给每个框标上了序号&#xff0c;当…

轨迹预测后处理之非极大值抑制(NMS)

非极大值抑制是图像处理里面的一种算法&#xff08;比如边缘检测会使用到&#xff09; 轨迹预测这里借鉴了其思想&#xff0c;比如说对于某个场景中的某辆车&#xff0c;我们使用模型预测 64 条轨迹或者更多&#xff0c;以很好地捕获多模态性&#xff0c;同时每条轨迹对应一个…

JavaScript 基础、内置对象、BOM 和 DOM 常用英文单词总结

一提到编程、软件、代码。对于英语不是很熟悉的同学望而却步。其实没有想像中的难么难&#xff0c;反复练习加上自己的思考、总结&#xff0c;会形成肌肉记忆。整理一下&#xff0c;初学者每天30遍。 1、JavaScript 基础语法 break&#xff1a;中断循环或 switch 语句的执行。…

蔚来JAVA面试(收集)

先叠加&#xff0c;这个是自己找的答案不一定对&#xff0c;只是给我参考看看而已。 一、项目 这个没有&#xff0c;根据实际项目情况来。蔚来比较喜欢拷打项目&#xff0c;所以要对项目非常熟悉&#xff08;慌&#xff09; 二、JAVA基础 2.1 Java中的IO模型有用到过吗&#…

YOLOv9改进策略:卷积魔改 | SCConv:空间和通道重建卷积,即插即用,助力检测 | CVPR2023

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文改进内容&#xff1a; CVPR2023 SCConv 由两个单元组成&#xff1a;空间重建单元&#xff08;SRU&#xff09;和通道重建单元&#xff08;CRU&#xff09;。 SRU利用分离重建方法来抑制空间冗余&#xff0c;而CRU使用分割-变换-融…

每秒批量插入10000条数据到MySQL中,资源消耗(带宽、IOPS)有多少?

文章目录 &#x1f50a;博主介绍&#x1f964;本文内容起因代码资源情况改造 &#x1f4e2;文章总结&#x1f4e5;博主目标 &#x1f50a;博主介绍 &#x1f31f;我是廖志伟&#xff0c;一名Java开发工程师、Java领域优质创作者、CSDN博客专家、51CTO专家博主、阿里云专家博主、…

http和socks5代理哪个隐蔽性更强?

HTTP代理和SOCKS5代理各有其优缺点&#xff0c;但就隐蔽性而言&#xff0c;SOCKS5代理通常比HTTP代理更隐蔽。以下是它们的比较&#xff1a; HTTP代理&#xff1a; 透明性较高&#xff1a;HTTP代理在HTTP头中会透露原始客户端的IP地址&#xff0c;这使得它相对不太隐蔽。…

算法打卡day28|贪心算法篇02|Leetcode 122.买卖股票的最佳时机 II、55. 跳跃游戏、45.跳跃游戏 II

算法题 Leetcode 122.买卖股票的最佳时机 II 题目链接:122.买卖股票的最佳时机 II 大佬视频讲解&#xff1a;买卖股票的最佳时机 II视频讲解 个人思路 因为只有一只股票&#xff0c;且两天作一个交易单元&#xff0c;那每次只收集正利润就可以最终最多可以获取的利润&#xf…

docker--Dockerfile (三)

1&#xff0c;Dcockerfile是什么 docker推荐使用dockerfile的定义文件和docker build命令来构建镜像。dockerfile使用基本的基于DSL&#xff08;面向领域语言&#xff09;语法的指令来构建Docker镜像。另一种创建Docker镜像的方式是使用docker commit&#xff0c;不推荐使用。 …

深入解析Mybatis-Plus框架:简化Java持久层开发(十三)

&#x1f340; 前言 博客地址&#xff1a; CSDN&#xff1a;https://blog.csdn.net/powerbiubiu &#x1f44b; 简介 本章节介绍下Mybatis-Plus框架的逻辑删除功能。 &#x1f4d6; 正文 1 逻辑删除介绍 1.1 什么是逻辑删除&#xff1f; 首先我们先来了解下与逻辑删除对应…