本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
选择完 手动自定义模板
之后,出现如下对话,这里我们选择 TypeScript
,按 空格
进行选择,按 回车
执行下一步
出现如下对话,我们选择 3.x
的版本,然后 回车
执行下一步
出现如下对话,是否选择编译为 JSX
语法,这里我们选择 No
出现如下选择,直接选择 No
或者 第一项
即可
这里出现选择 单独写入文件
还是写入 package.json
,这里我们选择第一项单独写入文件
出现如下对话,询问是否选择将设置保存起来,这里我们选择 No
出现如下即表示项目项目构建完成
执行提示命令 启动项目
,至此 vue/cli
搭建 vue3
项目就完成了
cd vue3-1
npm run serve
使用vue3自动模板详情请见【前端靓仔】
初始目录结构
node_modules
所有的项目依赖包
public
公共文件夹
- favicon.ico
- index.html 入口
html
文件
src
所有写的代码
- assets 静态文件
- components 自定义组件
- App.vue 跟组件
- main.ts 入口文件
- 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
来循环出来 script
中 return
的数据
<button v-for="(item,index) in languages" :key="index">{{index}}:{{item}}</button>
这时候就可以先预览一下页面内容
然后我们需要先在 template
中添加一行用来显示选择的内容
<div>你选择了【{{selectLan}}】语言</div> <!--注意:这里有一个selectLan请接着往下看-->
然后在 script
的 setup
函数中添加方法和选择之后的值
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>
reactive函数
该函数主要是优化上一节的代码
- 主要优化
setup
函数中的方法
和变量
都进行了混淆 - 优化了
设置
和获取``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
看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
- 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
- 关注公众号 「画漫画的程序员」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程
本文著作权归作者所有,如若转载,请注明出处
转载请注明:文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com