【vue3学习之路(一)】

这篇具有很好参考价值的文章主要介绍了【vue3学习之路(一)】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


前言

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

一、vue3项目创建

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

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
【vue3学习之路(一)】,前端,vue
启动
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

【vue3学习之路(一)】,前端,vue
并未运行成功
(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.【vue3学习之路(一)】,前端,vue
若运行出错,检查node版本并切换至高版本
【vue3学习之路(一)】,前端,vue
【vue3学习之路(一)】,前端,vue
【vue3学习之路(一)】,前端,vue
可采用以下方法更轻松

【vue3学习之路(一)】,前端,vue

【vue3学习之路(一)】,前端,vue

二、熟悉流程

【vue3学习之路(一)】,前端,vue
main.ts
【vue3学习之路(一)】,前端,vue
在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里数据文章来源地址https://www.toymoban.com/news/detail-843368.html

<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>

到了这里,关于【vue3学习之路(一)】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue全家桶进阶之路39:Vue3 状态管理

    Vue3 的状态管理主要是通过 Vuex 4 来实现。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 在Vue3的状态管理中,以下是各个属性的作用: state :存储应用程序中的状

    2023年04月18日
    浏览(43)
  • vue全家桶进阶之路34:Vue3 路由基本配置

    在Vue3中,路由的基本配置是通过使用Vue Router库来实现的。以下是Vue3中路由的基本配置步骤: 安装Vue Router 使用npm或yarn在项目中安装Vue Router: 创建路由实例 创建一个路由实例并定义路由规则。路由规则是一个对象数组,其中每个对象都定义了一个路由的路径和组件。 例如

    2023年04月18日
    浏览(49)
  • vue全家桶进阶之路33:Vue3 计算属性computed

    在Vue3中,计算属性可以使用 computed 函数来定义。 computed 函数接受两个参数:第一个参数是一个函数,该函数返回计算属性的值;第二个参数是一个可选的配置对象,可以包含getter和setter函数,以及控制计算属性缓存的缓存配置。 Vue3中的计算属性与Vue2中的计算属性相比有以

    2023年04月18日
    浏览(48)
  • vue全家桶进阶之路46:Vue3 Axios拦截器

    在Vue.js 3中,使用Axios与Vue.js 2.x中类似,但是需要进行一些修改和更新,下面是Vue.js 3中Axios的定义和使用方式: 首先,你需要安装Axios和Vue.js 3.x,可以使用npm或yarn等包管理工具安装: 然后,在你的Vue.js 3应用程序中,你可以使用以下代码来导入和使用Axios: 上面的代码使用

    2023年04月20日
    浏览(55)
  • vue全家桶进阶之路50:Vue3 环境变量+跨域设置实例

    使用.env加后缀的方式来建立某个模式下的环境变量, 例如:项目根目录新建两个环境变量文件(development开发环境和production生产环境):  在新建的两个环境变量文件中设置相同的环境变量名: 环境变量名称必须以\\\"VUE_API_\\\"+名称的格式,否则不生效,这个格式是死的。至于

    2023年04月21日
    浏览(48)
  • vue全家桶进阶之路32:Vue3 WatchEffect和watch 监听

    在 Vue 3 中, watchEffect 是一个用于监听响应式数据变化的 API。它可以在函数内部自动跟踪数据的依赖,并在依赖变化时重新运行函数。 watchEffect  的作用以及各个参数的功能讲解: watchEffect(effect: (onInvalidate: InvalidateCbRegistrator) = void | (() = void) | Promisevoid, options?: WatchEffectOptio

    2023年04月17日
    浏览(79)
  • vue全家桶进阶之路48:Vue3 跨域配置devServer的参数和设置

    devServer 是一个用于配置开发服务器的选项对象。它可以用来配置服务器的各种选项,例如代理,端口号,HTTPS 等。 以下是一些常用的 devServer 参数和设置: port :指定开发服务器的端口号,默认为 8080 。 host :指定开发服务器的主机名,默认为 localhost 。 https :开启 HTTPS,可

    2023年04月21日
    浏览(47)
  • vue全家桶进阶之路47:Vue3 Axios拦截器封装成request文件

    可以将Axios拦截器封装成一个单独的request文件,以便在整个应用程序中重复使用。 以下是一个示例,展示如何将Axios拦截器封装成一个request文件: 1、创建一个名为request.js的新文件,并导入Axios: 2、创建一个名为request的函数,并将其导出: 这将创建一个名为request的函数,

    2023年04月21日
    浏览(60)
  • vue全家桶进阶之路46:Vue3 Axios拦截器和globalProperties全局设置

    在Vue.js 3中,使用Axios与Vue.js 2.x中类似,但是需要进行一些修改和更新,下面是Vue.js 3中Axios的定义和使用方式: 首先,你需要安装Axios和Vue.js 3.x,可以使用npm或yarn等包管理工具安装: 然后,在你的Vue.js 3应用程序中,你可以使用以下代码来导入和使用Axios: 上面的代码使用

    2023年04月20日
    浏览(54)
  • vue全家桶进阶之路43:Vue3 Element Plus el-form表单组件

    在 Element Plus 中, el-form 是一个表单组件,用于创建表单以便用户填写和提交数据。它提供了许多内置的验证规则和验证方法,使表单验证更加容易。 使用 el-form 组件,您可以将表单控件组织在一起,并对表单进行验证,以确保提交的数据符合预期的格式和要求。该组件具有

    2023年04月20日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包