当前位置: 首页 > 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.jsqmd.com/news/65271/

相关文章:

  • 深入解析:⚡️2025-11-08GitHub日榜Top5|AI黑客代理安全测试工具
  • 电感式编码器线圈生成工具 V2.0
  • 谷歌(Google)浏览器显示内存不足,无法打开此网页
  • dw99各种包备份
  • 详细介绍:接口自动化测试框架详解(pytest+allure+aiohttp+ 用例自动生成)
  • Volt Typhoon攻击:深入分析中国背景黑客组织的工具集与技战术
  • 一文读懂:如何选择适合的RAG环境架构设计模式?
  • P9174 [COCI 2022/2023 #4] Bojanje
  • PCB文档处理工具
  • 原理图库文档处理工具
  • Manim架构解释
  • P10190 [USACO24FEB] Target Practice II S
  • 初识MYSQL —— 复合查询 - 详解
  • 洛谷 P7971 [KSN2021] Colouring Balls 题解
  • 仿生手的混合结构设计与神经形态触觉传感
  • P8272 [USACO22OPEN] Apple Catching G
  • 材料科学每日总结--Day13--数据挖掘
  • 原理图文档处理工具
  • P8187 [USACO22FEB] Robot Instructions S
  • 2025年3D扫描仪十大品牌权威排名:国产化替代首选TOP10
  • P8270 [USACO22OPEN] Subset Equality S
  • P6803 [CEOI 2020] 星际迷航
  • P8271 [USACO22OPEN] COW Operations S
  • P10779 BZOJ4316 小 C 的独立集
  • 街头徒手健身6倒立训练与肩部健康
  • AI语料优化新势力:助力企业抢占智能时代先机的优质服务商推荐
  • 基于MATLAB的位同步提取方法
  • Manim介绍
  • P2475 [SCOI2008] 斜堆
  • CF1970E3 Trails (Hard)