1. 首页
  2. Vuejs

瞧,这就是Vue3新增特性

本Vue3笔记是根据jspang.com视频教程完成,全程由ts编写

前置知识

  • Vue2.x
  • TypeScript
  • npm

Vue3项目的搭建

这里使用 Vue-cli 搭建项目

首先全局安装 vue-cli ,版本需在 4.5 以上


npm install -g @vue/cli

找到一个空目录下,打开终端执行 vue create vue3-1 命令 

出现如下对话,这里选择手动自定义模板,因为我们要使用 TypeScript

瞧,这就是Vue3新增特性

选择完 手动自定义模板 之后,出现如下对话,这里我们选择 TypeScript ,按 空格 进行选择,按 回车 执行下一步

瞧,这就是Vue3新增特性

出现如下对话,我们选择 3.x 的版本,然后 回车 执行下一步瞧,这就是Vue3新增特性

出现如下对话,是否选择编译为 JSX 语法,这里我们选择 No瞧,这就是Vue3新增特性

出现如下选择,直接选择 No 或者 第一项 即可

瞧,这就是Vue3新增特性

这里出现选择 单独写入文件 还是写入 package.json ,这里我们选择第一项单独写入文件

瞧,这就是Vue3新增特性

出现如下对话,询问是否选择将设置保存起来,这里我们选择 No 

瞧,这就是Vue3新增特性

出现如下即表示项目项目构建完成

瞧,这就是Vue3新增特性

执行提示命令  启动项目,至此 vue/cli 搭建 vue3 项目就完成了


cd vue3-1 npm run serve

瞧,这就是Vue3新增特性

使用vue3自动模板详情请见【前端靓仔】

初始目录结构

瞧,这就是Vue3新增特性

node_modules

所有的项目依赖包

public

公共文件夹

  1. favicon.ico
  2. index.html   入口 html 文件

src

所有写的代码

  1. assets  静态文件
  2. components  自定义组件
  3. App.vue  跟组件
  4. main.ts   入口文件
  5. shims-vue.d.ts    类文件/定义文件   定义一个文件让 ts 认识 vue

.browserslistrc

兼容作用,不同前端工具之间功能浏览器对node版本进行配置

.eslintrc.js

eslint的配置文件

.gitignore

配置不上传到git的文件

package.json


{ "name": "vue3-1",//项目名称 "version": "0.1.0",//项目版本 "private": true, "scripts": { "serve": "vue-cli-service serve",//本地启动 "build": "vue-cli-service build",//打包 "lint": "vue-cli-service lint",//代码检测 }, "dependencies": {//生产环境 "vue": "^3.0.0-0" }, "devDependencies": {//开发环境 "@typescript-eslint/eslint-plugin": "^2.33.0", "@typescript-eslint/parser": "^2.33.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-typescript": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/compiler-sfc": "^3.0.0-0", "@vue/eslint-config-typescript": "^5.0.2", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0-0", "typescript": "~3.9.3" } }

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区,你想要的,在这里都能找到

tsconfig.json

ts 的配置文件

src/main.ts 详解


import { createApp } from 'vue' //引入createApp挂载用来App import App from './App.vue'//根组件 createApp(App).mount('#app') //创建App组件挂载到根节点

setup函数和ref函数

首先打开App.vue,将多余的代码都删除掉


<template></template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'App' }); </script>

修改 template 为如下


<template> <div> <h2>欢迎来到XX课堂</h2> <p>请选择学习的语言</p> <div><button></button></div> <!--这里是需要循环生成的--> </div> </template>

修改 script 为如下

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区,你想要的,在这里都能找到


<script lang="ts"> import { defineComponent,ref } from 'vue';//引入ref函数 export default defineComponent({ name: 'App', //在vue2中使用的是 data(){return{}} methods:{} ... //在vue3中直接使用setup函数 将template中需要的事件、数据return出去 setup(){ const languages = ref(['html','css','javascript']);//定义所有的语言 return { languages //并将数据return出去 } } }); </script>

然后修改 template 来循环出来 scriptreturn 的数据


<button v-for="(item,index) in languages" :key="index">{{index}}:{{item}}</button>

这时候就可以先预览一下页面内容

瞧,这就是Vue3新增特性

然后我们需要先在 template 中添加一行用来显示选择的内容


<div>你选择了【{{selectLan}}】语言</div> <!--注意:这里有一个selectLan请接着往下看-->

然后在 scriptsetup 函数中添加方法和选择之后的值


setup(){ const languages = ref(['html','css','javascript']); const selectLan = ref("");//选择的语言,起初让他为空 //定义方法,接受一个参数为选择的下标,因为用的是ts,所以参数可以加一个类型注解 const selectLanFun = (index: number) => { //注意:注解“冒号”后面需要添加空格 //重新赋值选择的数据 设置和获取ref值都需要加value selectLan.value = languages.value[index] } return { languages,//暴露语言数组,用于在template中循环渲染 selectLan,//暴露选择之后的数据 selectLanFun,//因为template中需要使用该方法,所以需要return出去 } }

然后给 template 中的 button 添加点击事件


<button v-for="(item,index) in languages" :key="index" @click="selectLanFun(index)" >{{index}}:{{item}}</button>

瞧,这就是Vue3新增特性

reactive函数

该函数主要是优化上一节的代码

  1. 主要优化 setup 函数中的 方法变量 都进行了混淆
  2. 优化了设置获取``ref值都需要用value的形式

首先我们先进行一个小小的改动

去掉引入的 defineComponent ,并将暴露改成如下写法


import { ref } from 'vue' export default { ... }

检测之后没有报错程序可以正常运行

接下来我们优化 setup 内部


setup(){ //使用一个data来包装,最后只需要返回data即可 const data = reactive({ languages:['html','css','javascript'],//定义数组,template模板中循环需要 selectLan:'',//被选中的语言 selectLanFun:(index: number)=>{//选择语言的方法 data.selectLan = data.languages[index]//这里就不需要使用value,但是赋值是给data下的数据赋值,需要加上data } }) // const languages = ref(['html','css','javascript']); // const selectLan = ref("");//选择的语言 // const selectLanFun = (index: number) => { // selectLan.value = languages.value[index] // } return { data // languages, // selectLan, // selectLanFun } }

修改 template 中的数据,在前面加上 data. 


<div> <button v-for="(item,index) in data.languages" :key="index" @click="data.selectLanFun(index)">{{index}}:{{item}}</button></div><div>你选择了【{{data.selectLan}}】语言</div>

作者:December
链接:https://juejin.im/post/6879355716130308103

看完两件小事

如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:

  1. 关注我们的 GitHub 博客,让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
  3. 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区,目前已经覆盖和服务了超过 300 万开发者,你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有,如若转载,请注明出处

转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题:瞧,这就是Vue3新增特性

链接:https://www.javascriptc.com/4121.html

« 带你看看vue3的进步
nginx支持http3.0»
Flutter 中文教程资源

相关推荐

QR code