学习vue的第一天

一.下载相关node,vscode,配置环境

二.打开cmd，输入npm create vite@lastest,搭建vue+vite项目

三.找到App.vue,可以将其理解成java中的主线程main，在components文件中下面使用组件（创建.vue文件），其中所用的vue文件的格式如下

<template>

 </template>

<script setup>

</script>

<style scoped>

</style>

在App.vue在script中建立import引用components文件中的组件，在template中使用相应的引用举例如下

<script setup>

import First from './components/First.vue'，

</script>

<template>

  <First />

</template>

四.接下来，重点是学习组件

1.template中写html script中写js style中写css

js中写变量，对应的在html中发挥作用如

<template>

   <div>{{ msg }}</div>

</template>

<script setup>

let msg = '你好,李焕英'

</script>

页面会动态显示：你好,李焕英

2.响应式-ref

（1）<template>

    <button @click="count++">

{{ count }}

</button>

</template>

<script setup>

import { ref } from 'vue'

let count = ref(0)

</script>

<style scoped>

</style>

简单使用ref

（2）<template>

    <button @click="shu">

{{ count }}

</button>

</template>

<script setup>

import { ref } from 'vue'

let count = ref(0)

function shu(){

    count.value++

    console.log(document.querySelector('button').innerText)

}

</script>

<style scoped>

</style>

通过函数使用ref

（3）<template>

    <button @click="shu">

{{ count }}

</button>

</template>

<script setup>

import { nextTick, ref } from 'vue'

let count = ref(0)

async function shu(){

    count.value++

    await nextTick()

    console.log(document.querySelector('button').innerText)

}

</script>

<style scoped>

</style>

使用异步方法nextTick完成异步操作是的操作台上面数据和点击产生的数据一致

3.响应式-和ref对比reactive只能运用到引用类型中

4.计算属性 计算属性缓存 vs 方法 计算属性可以缓存没有必要重复调用，而方法则不行

5.class与style绑定

6.条件渲染v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。你也可以使用 v-else 为 v-if 添加一个“else 区块”。

7.列表渲染v—for

8.事件监听