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并且省去返回值return
   let 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 += 10
      console.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 += 10
      console.log(car.value.price)
}