10个实例小练习,快速入门熟练 Vue3 核心新特性(一)
ztj100 2024-12-29 07:21 46 浏览 0 评论
作者:xuying 全栈修炼
转发链接:https://mp.weixin.qq.com/s/_n2seDbbiO5hXQfuUGbUCQ
前言
Vue3.0 发 beta 版都有一段时间了,正式版也不远了,所以真的要学习一下 Vue3.0 的语法了。本篇文章总共分两部分,望小伙伴们认真阅读。
下一篇:10个实例小练习,快速入门熟练 Vue3 核心新特性(二)
环境搭建
$ git pull https://github.com/vuejs/vue-next.git
$ cd vue-next && yarn
下载完成之后打开代码, 开启 sourceMap :
- tsconfig.json 把 sourceMap 字段修改为 true: "sourceMap": true
- rollup.config.js 在 rollup.config.js 中,手动键入:output.sourcemap = true
- 生成 vue 全局的文件:yarn dev
- 在根目录创建一个 demo 目录用于存放示例代码,并在 demo 目录下创建 html 文件,引入构建后的 vue 文件
api 的使用都是很简单的,下文的内容,看例子代码就能懂了的,所以下面的例子不会做过多解释。
reactive
reactive: 创建响应式数据对象
setup 函数是个新的入口函数,相当于 vue2.x 中 beforeCreate 和 created,在 beforeCreate 之后 created 之前执行。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Vue3.0</title>
<style> body,
#app {
text-align: center;
padding: 30px;
}
</style>
<script src="../../packages/vue/dist/vue.global.js"></script>
</head>
<body>
<h3>reactive</h3>
<div id='app'></div>
</body>
<script> const { createApp, reactive } = Vue
const App = {
template: `
<button @click='click'>reverse</button>
<div style="margin-top: 20px">{{ state.message }}</div>
`,
setup() {
console.log('setup ');
const state = reactive({
message: 'Hello Vue3!!'
})
click = () => {
state.message = state.message.split('').reverse().join('')
}
return {
state,
click
}
}
}
createApp(App).mount('#app')</script>
</html>
ref & isRef
ref : 创建一个响应式的数据对象 isRef : 检查值是否是 ref 的引用对象。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Vue3.0</title>
<style> body,
#app {
text-align: center;
padding: 30px;
}
</style>
<script src="../../packages/vue/dist/vue.global.js"></script>
</head>
<body>
<h3>ref & isRef</h3>
<div id='app'></div>
</body>
<script> const { createApp, reactive, ref, isRef } = Vue
const App = {
template: `
<button @click='click'>count++</button>
<div style="margin-top: 20px">{{ count }}</div>
`,
setup() {
const count = ref(0);
console.log("count.value:", count.value) // 0
count.value++
console.log("count.value:", count.value) // 1
// 判断某值是否是响应式类型
console.log('count is ref:', isRef(count))
click = () => {
count.value++;
console.log("click count.value:", count.value)
}
return {
count,
click,
}
}
}
createApp(App).mount('#app')</script>
</html>
Template Refs
使用 Composition API 时,反应性引用和模板引用的概念是统一的。
为了获得对模板中元素或组件实例的引用,我们可以像往常一样声明 ref 并从 setup() 返回。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Vue3.0</title>
<style> body,
#app {
text-align: center;
padding: 30px;
}
</style>
<script src="../../packages/vue/dist/vue.global.js"></script>
</head>
<body>
<h3>Template Refs</h3>
<div id='app'></div>
</body>
<script> const { createApp, reactive, ref, isRef, toRefs, onMounted, onBeforeUpdate } = Vue
const App = {
template: `
<button @click='click'>count++</button>
<div ref="count" style="margin-top: 20px">{{ count }}</div>
`,
setup() {
const count = ref(null);
onMounted(() => {
// the DOM element will be assigned to the ref after initial render
console.log(count.value) // <div/>
})
click = () => {
count.value++;
console.log("click count.value:", count.value)
}
return {
count,
click
}
}
}
createApp(App).mount('#app')</script>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Vue3.0</title>
<style> body,
#app {
text-align: center;
padding: 30px;
}
</style>
<script src="../../packages/vue/dist/vue.global.js"></script>
</head>
<body>
<h3>Template Refs</h3>
<div id='app'></div>
</body>
<script> const { createApp, reactive, ref, isRef, toRefs, onMounted, onBeforeUpdate } = Vue
const App = {
template: `
<div v-for="(item, i) in list" :ref="el => { divs[i] = el }">
{{ item }}
</div>
`,
setup() {
const list = reactive([1, 2, 3])
const divs = ref([])
// make sure to reset the refs before each update
onBeforeUpdate(() => {
divs.value = []
})
onMounted(() => {
// the DOM element will be assigned to the ref after initial render
console.log(divs.value) // [<div/>]
})
return {
list,
divs
}
}
}
createApp(App).mount('#app')</script>
</html>
toRefs
toRefs : 将响应式数据对象转换为单一响应式对象
将一个 reactive 代理对象打平,转换为 ref 代理对象,使得对象的属性可以直接在 template 上使用。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Vue3.0</title>
<style> body,
#app {
text-align: center;
padding: 30px;
}
</style>
<script src="../../packages/vue/dist/vue.global.js"></script>
</head>
<body>
<h3>toRefs</h3>
<div id='app'></div>
</body>
<script> const { createApp, reactive, ref, isRef, toRefs } = Vue
const App = {
// template: `
// <button @click='click'>reverse</button>
// <div style="margin-top: 20px">{{ state.message }}</div>
// `,
// setup() {
// const state = reactive({
// message: 'Hello Vue3.0!!'
// })
// click = () => {
// state.message = state.message.split('').reverse().join('')
// console.log('state.message: ', state.message)
// }
// return {
// state,
// click
// }
// }
template: `
<button @click='click'>count++</button>
<div style="margin-top: 20px">{{ message }}</div>
`,
setup() {
const state = reactive({
message: 'Hello Vue3.0!!'
})
click = () => {
state.message = state.message.split('').reverse().join('')
console.log('state.message: ', state.message)
}
return {
click,
...toRefs(state)
}
}
}
createApp(App).mount('#app')</script>
</html>
computed
computed : 创建计算属性
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Vue3.0</title>
<style> body,
#app {
text-align: center;
padding: 30px;
}
</style>
<script src="../../packages/vue/dist/vue.global.js"></script>
</head>
<body>
<h3>computed</h3>
<div id='app'></div>
</body>
<script> const { createApp, reactive, ref, computed } = Vue
const App = {
template: `
<button @click='handleClick'>count++</button>
<div style="margin-top: 20px">{{ count }}</div>
`,
setup() {
const refData = ref(0);
const count = computed(()=>{
return refData.value;
})
const handleClick = () =>{
refData.value += 1 // 要修改 count 的依赖项 refData
}
console.log("refData:" , refData)
return {
count,
handleClick
}
}
}
createApp(App).mount('#app')</script>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Hello Vue3.0</title>
<style> body,
#app {
text-align: center;
padding: 30px;
}
</style>
<script src="../../packages/vue/dist/vue.global.js"></script>
</head>
<body>
<h3>computed</h3>
<div id='app'></div>
</body>
<script> const { createApp, reactive, ref, computed } = Vue
const App = {
template: `
<button @click='handleClick'>count++</button>
<div style="margin-top: 20px">{{ count }}</div>
`,
setup() {
const refData = ref(0);
const count = computed({
get(){
return refData.value;
},
set(value){
console.log("value:", value)
refData.value = value;
}
})
const handleClick = () =>{
count.value += 1 // 直接修改 count
}
console.log(refData)
return {
count,
handleClick
}
}
}
createApp(App).mount('#app')</script>
</html>
最后
本文只列出了笔者觉得会用得非常多的 api,Vue3.0 里面还有不少新特性的,比如 customRef、markRaw ,如果读者有兴趣可看 Vue Composition API 文档。
- Vue Composition API 文档: https://composition-api.vuejs.org/api.html#setup
- vue-next 地址: https://github.com/vuejs/vue-next
本篇文章未完结,请查看下一篇。
推荐Vue学习资料文章:
《10个实例小练习,快速入门熟练 Vue3 核心新特性(二)》
《10个实例小练习,快速入门熟练 Vue3 核心新特性(一)》
《教你部署搭建一个Vue-cli4+Webpack移动端框架「实践」》
《尤大大细品VuePress搭建技术网站与个人博客「实践」》
《是什么导致尤大大选择放弃Webpack?【vite 原理解析】》
《带你了解 vue-next(Vue 3.0)之 小试牛刀【实践】》
《带你了解 vue-next(Vue 3.0)之 初入茅庐【实践】》
《一篇文章教你并列比较React.js和Vue.js的语法【实践】》
《深入浅出通过vue-cli3构建一个SSR应用程序【实践】》
《聊聊昨晚尤雨溪现场针对Vue3.0 Beta版本新特性知识点汇总》
《【新消息】Vue 3.0 Beta 版本发布,你还学的动么?》
《Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5》
《深入浅出Vue3 跟着尤雨溪学 TypeScript 之 Ref 【实践】》
《手把手教你深入浅出vue-cli3升级vue-cli4的方法》
《Vue 3.0 Beta 和React 开发者分别杠上了》
《手把手教你用vue drag chart 实现一个可以拖动 / 缩放的图表组件》
《Vue3 尝鲜》
《手把手让你成为更好的Vue.js开发人员的12个技巧和窍门【实践】》
《2020 年,Vue 受欢迎程度是否会超过 React?》
《手把手教你Vue解析pdf(base64)转图片【实践】》
《手把手教你Vue之父子组件间通信实践讲解【props、$ref 、$emit】》
《深入浅出Vue3 的响应式和以前的区别到底在哪里?【实践】》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《基于Vue/VueRouter/Vuex/Axios登录路由和接口级拦截原理与实现》
《手把手教你D3.js 实现数据可视化极速上手到Vue应用》
《吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【上】》
《吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【中】》
《吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】》
作者:xuying 全栈修炼
转发链接:https://mp.weixin.qq.com/s/_n2seDbbiO5hXQfuUGbUCQ
相关推荐
- Win10预览版10532已知问题汇总(微软win11正式版已知问题一览)
-
IT之家讯微软已向Insider用户推送了Win10预览版10532更新,本次更新对右键菜单、《Windows反馈》应用以及Edge浏览器进行了改进。除此之外还包含一些Bug,汇总如下,有意升级Wi...
- Gabe Aul正测试Win10 Mobile 10532,Insider用户还需等
-
IT之家讯本月中旬微软向Insider用户推送了Win10Mobile预览版10512,该版本修复了一些Bug,增强了系统稳定性,但依然存在一些问题。今天,微软Insider项目负责人GabeAu...
- 微软开始推送Win10预览版10532快速版更新
-
8月28日消息,刚才,微软推送了Win10Build10532快速版,修复了之前的Bug,并带来了三项改进。主要来说,这次的更新改进了右键菜单的UI,使其更具Modern风格(见上图)。此外,更新...
- Win10预览版10532更新内容大全(windows10更新预览版)
-
IT之家讯今天凌晨微软向Insider用户推送了Win10预览版10532快速版更新,本次更新主要带来了三处改进,汇总如下:o改进右键菜单,外观更加Modern。这是基于网友要求界面一致的反馈做出...
- 无法升级Win10预览版10532?也许Hyper-V在搞鬼
-
根据IT之家网友的反映,安装了微软虚拟机Hyper-V的Win10预览版用户无法成功升级Build10532版本,安装过程中会被要求回滚系统。很多朋友在尝试关闭虚拟机之后重启安装程序,结果仍然无法顺...
- Win10预览版10532界面兴起“酷黑”风潮
-
Win10预览版10532的界面改动还是较为明显的,主要体现在右键菜单上面。总体来看,该版本的右键菜单间距更宽,视觉上更大气,操作上更便于触控。具体来说,任务栏右键菜单的变化最为明显。除了增加选项的宽...
- Win10预览版10532上手图集(windows10预览版下载)
-
IT之家讯8月28日,微软今天推送了Win10预览版10532快速版更新,在该版本中,微软主要是加强细节上调整,并且主要是增强Edge浏览器性能等。在Windows10预览版10532中,微软改进了...
- Win10预览版10532上手视频亮点演示
-
IT之家讯8月28日消息,今天凌晨微软向WindowsInsider快速通道用户推送了Win10预览版10532。在Windows10预览版10532中,微软改进了右键菜单,外观更加现代化。另外还...
- 第二篇 前端框架Vue.js(vue前端框架技术)
-
前端三大核心是网页开发的基础,Vue则是基于它们构建的“生产力工具”。通俗理解就是HTML是化妆的工具如眉笔,CSS是化妆品如口红,JavaScript是化妆后的互动,而Vue就是化妆助手。有了化妆工...
- 基于SpringBoot + vue2实现的旅游推荐管理系统
-
项目描述...
- 基于Vue以及iView组件的后端管理UI模板——iview-admin
-
介绍iView-admin是一套后端管理界面模板,基于Vue2.0,iView(现在为ViewUI)组件是一套完整的基于Vue的高质量组件库,虽然Github上有一套非常火的基于ElementUI...
- 别再说你会SPA开发了,这5个核心你真的搞懂了吗?
-
前言此spa非彼spa,不是你所熟知的spa。你所熟知的spa作者肯定是没有你熟悉的。我们这里指的是在前端开发中的一种模型,叫作单页应用程序,顾名思义,就是整个项目只有一个页面,而页面中的内容是动态的...
- React.js Top20面试题(react.js中文官网)
-
概述作为React开发者,对框架的关键概念和原则有扎实的理解是很重要的。考虑到这一点,我整理了一份包含20个重要问题的清单,每个React开发者都应该知道,无论他们是在面试工作还是只是想提高技能。...
- 美媒:特朗普签署行政令后,FBI又发现约2400份、总计超14000页涉肯尼迪遇刺案文件
-
来源:环球时报新媒体1月23日特朗普下令公布肯尼迪遇刺案相关机密文件图源:美媒综合福克斯新闻网和Axios网站10日报道,在总统特朗普签署行政令,要求公布“肯尼迪遇刺案”相关政府机密文件之后,美国...
- 2021 年 Node.js 开发人员学习路线图
-
Node.js自发布以来,已成为业界重要破局者之一。Uber、Medium、PayPal和沃尔玛等大型企业,纷纷将技术栈转向Node.js。Node.js支持开发功能强大的应用,例如实时追踪...
你 发表评论:
欢迎- 一周热门
- 最近发表
-
- Win10预览版10532已知问题汇总(微软win11正式版已知问题一览)
- Gabe Aul正测试Win10 Mobile 10532,Insider用户还需等
- 微软开始推送Win10预览版10532快速版更新
- Win10预览版10532更新内容大全(windows10更新预览版)
- 无法升级Win10预览版10532?也许Hyper-V在搞鬼
- Win10预览版10532界面兴起“酷黑”风潮
- Win10预览版10532上手图集(windows10预览版下载)
- Win10预览版10532上手视频亮点演示
- 第二篇 前端框架Vue.js(vue前端框架技术)
- 基于SpringBoot + vue2实现的旅游推荐管理系统
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)