Vue3入门组合式 API

Vue3 学习

开发环境

tong ~/Projects/EasyVue3 $ node -v
v16.20.1
tong ~/Projects/EasyVue3 $ sw_vers
ProductName:            macOS
ProductVersion:         14.1.1
BuildVersion:           23B81
tong ~/Projects/EasyVue3 $ npm --version
8.19.4 
tong ~/Projects/EasyVue3 $ code -v  
1.84.2
1a5daa3a0231a0fbba4f14db7ec463cf99d7768e
arm64#如果没有安装 vue-cli  ,  -g表示安装在node全局
npm install  @vue/cli -g
#安装好之后查看版本信息
tong ~/Projects/EasyVue3 $ vue --version
@vue/cli 5.0.8
  1. 创建 Vue3 项目
vue create tomyee-vue3

根据提示一次原则 yes/no即可,创建好之后 cd 到项目文件夹内

  1. 了解项目基本结构
    App.vue查看到使用组件 HelloWorld,点进去跳转到 HelloWorld.vue
  2. 组合式 API
    提前安装好 VScode 插件 volar,写代码可以自动提示补全导入等。
<script setup lang="ts">
import { EffectScope, computed, reactive, ref, watch, watchEffect } from 'vue';// 1.reactive (对对象类型值进行响应式处理)
// shallowReactive(浅响应式=>只有第一层可以修改)
const myData = reactive({name: "tong",age : 18,friends : ['kuangshen','wuyou']
})// function clickHandler(){
//   myData.push(10)
// }// 2. ref (支持对基本类型值进行响应式处理)
const count = ref(0)
function clickHandler(){count.value++// content.value += "!"myData.age ++
}// 3. readonly    只读,所以是非响应式的
// shallowReadonly (根属性只读,其他可读写,非响应式查看效果需要刷新)// 4. computed 计算属性
const content = ref("这是测试文本")
const getLen = computed(()=>{console.log('计算属性执行一次')return content.value.length
})// 5. watch 
// 侦听 ref 直接写名称 不需要.value
watch(count,(newValue,oldValue)=>{console.log(newValue,oldValue)
})
// 侦听 reactive 中的属性,需要通过函数的方式来包裹
watch(()=> myData.age,(newValue,oldValue)=>{console.log(newValue,oldValue)
})
// 侦听 reactive 本身直接写名称即可// 6.watchEffect 新功能 ,副作用函数。 
// 只要内部包含的响应式数据发生变化,就会自动触发
watchEffect(()=>{console.log('count:'+count.value+',age:'+myData.age)
})
// 单个监听用 watch  多个监听用 watchEffect
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/163462.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

selenium 简单案例 <批量下载文件> <网页自动化点击上报>

一、批量下载文件 网页分析 点击跳转到下载页面 from selenium import webdriver import timedef get_link_list():# 创建浏览器对象driver webdriver.Chrome(executable_pathrC:\Users\nlp_1\Desktop\chromedriver\chromedriver-win32\chromedriver.exe)url https://www…

微信报名怎么做_轻松便捷的数字化报名体验

微信报名&#xff1a;轻松便捷的数字化报名体验 在这个数字化时代&#xff0c;微信已经成为我们生活中不可或缺的一部分。它不仅仅是一个社交平台&#xff0c;更是一个功能强大的综合性工具。其中&#xff0c;微信报名功能更是给我们的生活带来了极大的便利。本文将详细介绍微…

Django之cookie和session

文章目录 Cookie的介绍Cookie的由来什么是CookieCookie原理Cookie覆盖浏览器查看Cookie 在Django中操作Cookie设置Cookie查询浏览器携带的Cookie删除Cookie Cookie校验登录sessionSession的由来Session设置查看、更新Session值删除Session值Seesion的其他方法Session的其他配置…

企业微信机器人:自动化办公的未来已来!

导语&#xff1a;随着科技的迅速发展&#xff0c;人工智能已经逐渐渗透到我们的日常生活和工作中。而企业微信机器人的出现&#xff0c;更是开启了自动化办公的新纪元。本文将为您详细解析企业微信机器人的功能、优势以及如何为企业带来实质性的价值。 一、企业微信机器人的功…

扩展外部eMMC存储

By Toradex胡珊逢 简介 存储器的嵌入式设备中扮演着重要角色&#xff0c;上面不仅安装有操作系统&#xff0c;同时也保存着应用程序和运行日志等。对于存储器如 eMMC&#xff0c;写入的数据量决定其使用寿命&#xff0c;对于有大量日志记录的应用&#xff0c;通常可以选用一个…

JavaScript:监听事件

该方法用于向浏览器窗口注册事件监听器&#xff0c;当指定的事件&#xff08;如单击、按键按下&#xff09;被触发时&#xff0c;浏览器会自动调用指定的函数&#xff08;回调函数&#xff09;。 window.addEventListener(event, function, useCapture); 参数说明&#xff1a…

洛谷题单--线性表

P3156 【深基15.例1】询问学号 链接 : 【深基15.例1】询问学号 - 洛谷 直接输入&#xff0c;然后输出a[i]即可; 代码 : #include<iostream> #include<cstring> #include<algorithm> #include<vector> using namespace std; int main(){int n, q …

请手写一个发布-订阅的模式

发布-订阅模式也是经典的设计模式之一&#xff0c;它在前端很多地方都有应用&#xff0c;比如javascript事件池&#xff0c;Vue的$on、$off&#xff0c;nodejs的events模块和socket通信等等都有应用&#xff0c;也是前端面试比较火热的考点之一&#xff0c;接下来给大家详细介绍…

cefsharp119.4.30(cef119.4.3,Chromium119.0.6045.159)版本升级体验支持H264及其他多个H264版本

Cefsharp119.4.30,cef119.4.3,Chromium119.0.6045.159 此更新包括一个高优先级安全更新 This update includes a high priority security update. 说明:此版本119.4.3支持H264视频播放(需要联系我),其他版本。.NETFramework 4.6.2 NuGet Gallery | CefSharp.WinForms 119.…

运动规划Motion-Planning随笔

online verification技术 实时安全校验技术&#xff1a;留一手 首先计算能否通过刹车这种方式得到一条安全轨迹&#xff0c;&#xff08;让速不让道&#xff09;&#xff0c;当刹车有可能碰撞到行人或其他车辆时&#xff0c;则判断变道是否会产生碰撞。如果能变道&#xff0…

深度学习之七(深度信念网络和受限玻尔兹曼机器)

概念 深度信念网络(Deep Belief Networks,DBN)和受限玻尔兹曼机器(Restricted Boltzmann Machines,RBMs)都是无监督学习的模型,通常用于特征学习、降维和生成数据。 受限玻尔兹曼机器(RBM): 结构: RBM 是一个两层神经网络,包括一个可见层和一个隐藏层。这两层之间…

qt按照不同编码格式读取文字(UTF-16LE,UTF-8,UTF-8BOM,UTF-16BE)

enum class EncodingFormat : int {ANSI 0,//GBKUTF16LE,UTF16BE,UTF8,UTF8BOM, }; EncodingFormat VideoPlayer::FileCharacterEncoding(const QString &fileName) {//假定默认编码utf8EncodingFormat code EncodingFormat::UTF8;QFile file(fileName);if (file.open(QI…

「 系统设计 」 为什么要做架构分层?

「 系统设计 」 为什么要做架构分层&#xff1f; 参考&鸣谢 3.设计模式之分层思维&#xff1a;为什么要做代码分层架构&#xff1f; 从零开始学架构&#xff08;八&#xff09;分层架构和设计模式 架构模式之分层架构总结 文章目录 「 系统设计 」 为什么要做架构分层&…

解决 IDEA下VUE项目 @符号无法识别的问题

根目录新建jsconfig.json {"compilerOptions": {"baseUrl": "./","paths": {"/*": ["src/*"]}},"exclude": ["node_modules","dist"] }

IT支持团队的绩效指标和最佳实践

一名员工在远程时因笔记本问题寻求IT支持&#xff0c;尽管他们多次尝试排除故障&#xff0c;但由于缺乏专业知识&#xff0c;最终还是无法访问工作所需的应用程序。这时&#xff0c;他们需要一名专业的 IT 技术人员来指导他们&#xff0c;但他们只能等待有人注意到并回应他们的…

海报设计必备:揭秘5款炙手可热的设计工具

1.即时设计&#xff1a;能实现在线协作的海报设计软件 即时设计作为 2020 年上线的国产设计工具&#xff0c;目前已经有了超百万的注册用户&#xff0c;获得了广大设计师的一致好评。与其他传统海报设计软件相比&#xff0c;即时设计具有这几个优点&#xff1a;一是所有功能都…

Chrome 访问不了项目?10080端口 ERR_UNSAFE_PORT:问题原因 / 解决方案

文章目录 被禁用端口列表解决方法方法一、更换端口 / 使用代理 / 使用域名方法二、对浏览器下手WindowsMac 最近有客户反馈&#xff0c;在chrome浏览器中访问不了项目&#xff0c;其他浏览器都是正常的。 &#xff1f;奇了怪了&#xff0c;难道客户对chrome做了什么操作&#x…

Docker | Docker入门安装

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a;Docker系列 ✨特色专栏&#xff1a; My…

探索WebStorm 2023 Mac/win:最强大的JavaScript开发工具

在当今的软件开发领域&#xff0c;JavaScript已经成为了一种不可或缺的编程语言。而在众多的JavaScript开发工具中&#xff0c;WebStorm一直以其强大的功能和友好的用户界面脱颖而出。现在&#xff0c;我们迎来了全新的WebStorm 2023版本&#xff0c;它将带给开发者们更加出色的…

有机纺织品OCS认证

【有机纺织品OCS认证】 有机产品是指按照这种方式生产和加工的产品。产品符合国际或者国家有机产品要求标准&#xff0c;并通过国家认证机构认证的一切农副产品及其加工品&#xff0c;包括粮食、蔬菜、水果、奶制品、禽畜产品、天然纤维等。 有机纺织品认证是指在使用经过国际或…