详解Vue3.0 + TypeScript + Vite初体验


Posted in Vue.js onFebruary 22, 2021

项目创建

npm:

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

or yarn:

$ yarn create vite-app <project-name>
$ cd <project-name>
$ yarn
$ yarn dev

项目结构

详解Vue3.0 + TypeScript + Vite初体验

main.js

详解Vue3.0 + TypeScript + Vite初体验

在个人想法上,我觉得createApp()是vue应用的实例,createApp支持链式调用

App.vue:

详解Vue3.0 + TypeScript + Vite初体验

这是兼容vue2.0的语法,下面是vue3.0 rfc写法(还处于实验性阶段)。
rfc官方说明

setup

data

详解Vue3.0 + TypeScript + Vite初体验

setup是结合了vue2.0的created生命周期函数和data还有methods(后面会提到)

可直接 export 属性(data)和方法(methods)

详解Vue3.0 + TypeScript + Vite初体验

可以看出现在的name不是响应式的,后面会介绍响应式

methods

详解Vue3.0 + TypeScript + Vite初体验

methods也是跟data一样,直接export

效果:

详解Vue3.0 + TypeScript + Vite初体验

Composition API

ref

声明:

详解Vue3.0 + TypeScript + Vite初体验

Ref可将一些基本属性变成响应式

详解Vue3.0 + TypeScript + Vite初体验

reactive

详解Vue3.0 + TypeScript + Vite初体验

上图是reactive和ref混合使用,至于效果,请各自复制下方代码体验

<template>
 <div id="app">
 <div v-for="(item, index) in state.persons" :key="index">
  {{ item.name }}是{{ item.age }}岁
 </div>
 <div>
  <h3>修改zhangsan的年龄</h3>
  <input type="text" v-model="zAge" />
 </div>
 </div>
</template>

<script lang="ts" setup="props, {emit}">
import { reactive, ref } from 'vue'
export const zAge = ref(12)
export const state = reactive({
 persons: [
 {
  name: 'zhangsan',
  age: zAge
 },
 {
  name: 'lisi',
  age: 20
 }
 ]
})
</script>

computed

声明:

详解Vue3.0 + TypeScript + Vite初体验

效果:

详解Vue3.0 + TypeScript + Vite初体验

watchEffect

声明:

详解Vue3.0 + TypeScript + Vite初体验

效果:

详解Vue3.0 + TypeScript + Vite初体验

组件系统

全局注册

App.vue

详解Vue3.0 + TypeScript + Vite初体验

main.js

详解Vue3.0 + TypeScript + Vite初体验

局部注册

App.vue

详解Vue3.0 + TypeScript + Vite初体验

setup

props

详解Vue3.0 + TypeScript + Vite初体验

声明props对象,在watchEffect中,console.log(props.msg)是可以看到父组件传的值。props的默认值和过滤在研究中。具体作用参考vue2.0 props作用

context

详解Vue3.0 + TypeScript + Vite初体验

组件上下文

emit

详解Vue3.0 + TypeScript + Vite初体验

声明emit函数,在setup="props, { emit }"要写上emit,不然会报错,具体作用参考vue2.0 emit作用。

详解Vue3.0 + TypeScript + Vite初体验

详解Vue3.0 + TypeScript + Vite初体验

这是使用emit函数的一些例子。

attrs

研究ing…

slots

研究ing…

vue指令

重点讲v-model,其他vue指令与2.0一样

v-model

详解Vue3.0 + TypeScript + Vite初体验

vue3.0开始支持多个双向绑定的参数,这是vue2.0没有的,v-model后面没有跟其他属性的话,那么在这个组件内部它的默认值是modelValue,如果想更新v-model,那么就需要emit('update:modelValue', data)去更新v-model的默认值modelValue。那么v-model后面有属性的话(dragValue),那么在这个组件内部它的值就是这个属性名(dragValue),如果想更新v-model:dragValue的值,就需要emit('update:dragValue', data)去更新v-model自定义的值。

更多的用法参考官方的文档:https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md

到此这篇关于详解Vue3.0 + TypeScript + Vite初体验的文章就介绍到这了,更多相关Vue3.0 TypeScript Vite内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
详解vue实现坐标拾取器功能示例
Nov 18 Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
vue监听滚动事件的方法
Dec 21 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 Vue.js
使用这 6个Vue加载动画库来减少我们网站的跳出率
May 18 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 #Vue.js
Vue实现todo应用的示例
Feb 20 #Vue.js
基于vue的video播放器的实现示例
Feb 19 #Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 #Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 #Vue.js
Vue如何实现变量表达式选择器
Feb 18 #Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 #Vue.js
You might like
跟我学小偷程序之成功偷取首页(第三天)
2006/10/09 PHP
PHP实现的功能是显示8条基色色带
2006/10/09 PHP
php获取mysql字段名称和其它信息的例子
2014/04/14 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
在firefox和Chrome下关闭浏览器窗口无效的解决方法
2014/01/16 Javascript
js获取浏览器基本信息大全
2014/11/27 Javascript
javascript中$(function() {});写与不写有哪些区别
2015/08/10 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
简单分析javascript中的函数
2016/09/10 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
从setTimeout看js函数执行过程
2017/12/19 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
python命令行参数sys.argv使用示例
2014/01/28 Python
Python的Flask框架中SQLAlchemy使用时的乱码问题解决
2015/11/07 Python
python实现两个文件合并功能
2018/04/01 Python
Python创建字典的八种方式
2019/02/27 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
html5开发之viewport使用
2013/10/17 HTML / CSS
amazeui模态框弹出后立马消失并刷新页面
2020/08/19 HTML / CSS
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
餐饮加盟计划书
2014/01/10 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
2014年食品安全工作总结
2014/12/04 职场文书
小学四年级学生评语
2014/12/26 职场文书
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers
Python学习之包与模块详解
2022/03/19 Python