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)
}