当前位置: 首页 > news >正文

vue笔记一

#一.常用Markdown语法

1.标题语法

666

666

666

注:依次类推

2.粗体与斜体

粗体:33

斜体:33

同时加粗体与斜体:666

3.列表

有序要创建有序列表,请在每个列表项前添加数字并紧跟一个英文句点。
1.NUO
2.TAN
3.NUO
无序列表
要创建无序列表,请在每个列表项前面添加破折号 (-)、星号 (*) 或加号 (+)。

  • nuo
  • nuo
  • nuo
  • nuo
  • nuo
  • nuo
  • nuo
  • nuo
  • nuo

4.代码块
围栏代码块
Markdown基本语法允许您通过将行缩进四个空格或一个制表符来创建代码块。如果发现不方便,请尝试使用受保护的代码块。根据Markdown处理器或编辑器的不同,您将在代码块之前和之后的行上使用三个反引号((```)或三个波浪号(~~~)

 {<template><viem calss="nuo"><h1>你好</h1></viem></template>}

#二.vue3核心语法CompositionAPI
1.setup

<script lang="ts">export default {name:'person',setup(){
//console.log('@@',this)//setup函数中的this是undefined
//数据let name = '张三' //注意此时的name不是响应式let age = 18  //注意此时的age不是响应式let tel = '111111111'//注意此时的tel不是响应式  
//方法function zzz(){console.log(1)name = 'zzz-san'console.log(name)}

2.setup返回值

<script lang="ts">export default {name:'person',setup(){
//console.log('@@',this)//setup函数中的this是undefined
//数据let name = '张三' //注意此时的name不是响应式let age = 18  //注意此时的age不是响应式let tel = '111111111'//注意此时的tel不是响应式  
//方法function zzz(){console.log(1)name = 'zzz-san'console.log(name)}return{name,age,let,zzz}//return返回值,将数据,方法交出去

3.setup语法

<script lang="ts">export defauit {name:'person',}</setup><script setup>//相当于直接写steup并且省去返回值returnlet a = 666</steup>

#三基本类型的响应数据
1.ref创建

  //ref使数据变为响应式,数据如果需要改变需要变为响应式let name = ref('张三')//此时name变为响应式

2.reactive

 //reactive只能包裹深层次对象类型<template><div class="person"><h2>一辆车{{car.brand}},价值{{car.price}}万</h2><button @click="changePrice">修改汽车价格</button></div></tenplate><script lang="ts" steup name="Person">import{reactive} from 'vur'//数据let car = reactive({brand:'奔驰',price:100})//方法function changePric(){car.price += 10console.log(car.price)
}

3.ref对象类型数据

 //ref包裹对象类型,数据要加.value<template><div class="person"><h2>一辆车{{car.brand}},价值{{car.price}}万</h2><button @click="changePrice">修改汽车价格</button></div></tenplate><script lang="ts" steup name="Person">import{reactive} from 'vur'//数据let car = ref({brand:'奔驰',price:100})//方法function changePric(){car.value.price += 10console.log(car.value.price)
}
http://www.gsyq.cn/news/75811.html

相关文章:

  • 深入解析:⚡️2025-11-08GitHub日榜Top5|AI黑客代理安全测试工具
  • 详细介绍:接口自动化测试框架详解(pytest+allure+aiohttp+ 用例自动生成)
  • P9174 [COCI 2022/2023 #4] Bojanje
  • PCB文档处理工具
  • Manim架构解释
  • P10190 [USACO24FEB] Target Practice II S
  • 仿生手的混合结构设计与神经形态触觉传感
  • AI语料优化新势力:助力企业抢占智能时代先机的优质服务商推荐
  • P10779 BZOJ4316 小 C 的独立集
  • P2475 [SCOI2008] 斜堆
  • P4037 [JSOI2008] 魔兽地图
  • 李宏毅机器学习笔记41 - 实践
  • P3596 [POI 2015 R3] 高速公路现代化 Highway modernization
  • AI Browser:我用 CC 做了个桌面版 Manus
  • P4953 [USACO02FEB] Cow Cycling
  • 用 GitHub issue 寫博客很好,但我要放棄了
  • 周边的车间厂房工厂通风降温工业冷风机源头厂家,有热源的车间通风降温/铁皮厂房车间降温/铁皮房车间厂房降温工业冷风机供应商有哪些
  • 用 Astro 重做網站這件事
  • 美化 BroadcastChannel
  • 克服EMD端点效应的齿轮箱故障特征识别方法
  • Hugging Face 论文页面功能指南
  • 北京上门回收老酒名酒茅台五粮液
  • P5202 [USACO19JAN] Redistricting P
  • 详细介绍:数据结构5:二叉树
  • P10602 [CEOI 2009] Harbingers
  • 2025 Newest Autel BMW G-Chassis IMMO Add Key (1-Year License) for IM508/IM608/IM1/IM2
  • Go 1.25 发布:性能、器具与生态的全面进化
  • 实用指南:OSG多视口与多通道渲染核心技术解析
  • P8313 [COCI 2021/2022 #4] Izbori
  • 2025 最新智能制造服务商 / 厂家 TOP5 评测!科技赋能 + 全周期服务权威推荐榜单发布,引领智慧工厂建设新生态