vue3的大致使用

vue姓名2安装

npm init vue@latest

或者在idea搜索vue.js 可能vue.js这个插件不会显示出来 但是搜索的话会显示出来

template的作用

在 Vue 中，`<template>` 是一个特殊的标签，用于包裹组件的模板内容。它作为一个容器，可以包含各种 HTML 元素和 Vue 模板语法，用于定义组件的结构和渲染逻辑。
使用 `<template>` 可以将多个元素包裹在一个父级容器中，而不需要引入额外的包装元素。这对于在组件模板中使用条件渲染、列表渲染、嵌套循环等情况下特别有用。
在给定的代码示例中，`<template>` 标签用于包含整个模板的内容，然后在其中使用了两次 `v-for` 循环来生成重复元素并显示在视图中。
需要注意的是，`<template>` 本身不会在最终渲染的 HTML 中创建对应的元素节点，它仅作为一个占位符存在，方便组织和管理组件模板的结构。在渲染过程中，`<template>` 标签内的内容将被解析和渲染为实际的 HTML 元素，并按照 Vue 的渲染规则进行处理。
总之，`<template>` 在 Vue 中是一个特殊的标签，用于包裹组件的模板内容，提供了一种结构化组织模板的方式，方便进行条件渲染、循环遍历等操作。

vue执行流程(先执行template 再执行script)

<script setup>
import { ref, onMounted } from 'vue'
const list = ref([1, 2, 3])
const itemRefs = ref([])
onMounted(() => {
  alert(itemRefs.value.map(i => i.textContent))
})
</script>
<template>
  <ul>
    <li v-for="item in list" ref="itemRefs">
      {{ item }}
    </li>
  </ul>
</template>

在上面的代码中，<script setup> 部分会先执行，然后才会执行 <template> 部分的代码。
从代码的执行流程来看，首先会执行 <script setup> 部分，在这里定义了 list 和 itemRefs 变量，并注册了 onMounted 生命周期钩子。接着，当组件被挂载到页面上时，onMounted 钩子就会触发，弹出一个包含 itemRefs.value 元素文字内容的提示框。
然后，才会执行 <template> 部分的代码。在这里，使用了 v-for 循环遍历 list 数组，并为每个 <li> 元素设置了 ref 属性为 itemRefs。这意味着在组件渲染完成后，itemRefs 数组中将包含每个 <li> 元素的引用。
因此，先执行 <script setup> 中的代码，然后执行 <template> 中的代码，并在渲染完成后弹出提示框。
个人总结:执行script（不执行onMounted函数)—>然后执行template—>然后执行onMounted

reactive的使用

在 Vue 中，reactive 是 Vue 3 中的一个 API，用于将一个普通的 JavaScript 对象转换为响应式对象。当对象变化时，相关的组件会自动更新。

将对象转换为响应式对象意味着当对象的属性发生变化时，Vue 会自动追踪这些变化，并触发相关组件的重新渲染。这使得开发者无需手动追踪数据变化，并手动更新视图。

在 Vue 3 中，使用 reactive API 时，可以使用 ref 或 reactive 函数将一个对象转换为响应式对象：

import { reactive } from 'vue';

const obj = reactive({
  foo: 'bar',
  count: 0
});

在上述示例中，reactive 函数将传入的对象 { foo: 'bar', count: 0 } 转换为响应式对象 obj。这意味着当 obj 的属性 foo 或 count 发生变化时，相关的组件会自动进行重新渲染。

可以通过简单地修改 obj 的属性来看到效果：

obj.foo = 'baz'; // 触发组件重新渲染

setTimeout(() => {
  obj.count++; // 触发组件重新渲染
}, 1000);

需要注意的是，响应式对象会将第一层属性转换为响应式，但不会递归地转换所有嵌套对象的属性。如果需要对嵌套对象进行响应式转换，可以使用 ref 或将嵌套对象单独转换为响应式对象来实现。

总而言之，reactive 在 Vue 中表示将一个普通对象转换为响应式对象，使得当对象属性发生变化时，相关的组件会自动更新。这是 Vue 3 中用来管理响应式数据的重要 API。

vue3启动(dev代表启动的环境)

基本结构1(script setup的使用方式更加简洁)

<script setup lang="ts">
import { ref } from 'vue'
defineProps({
  msg: {
    type: String,
    required: true
  },
  name: {
    type: String,
    default: "John"
  }
})
const count = ref(0)
function add() {
  count.value++
}
</script>

<template>
  <h1>{{ msg }}</h1>
  <button type="button" @click="add">count is: {{ count }}</button>
</template>

手写代码1

<template>
<div>
{{data.name}}
</div>
</template>
<script setup>
import { reactive } from 'vue';
const data=reactive({
name:"dasd"
})
</script>

vue输出9x9乘法表

<template>
  <div>
    <template v-for="a in 10">
      <template v-for="b in a">
        {{b}}{{"*"}}{{a}}{{"="}}{{b*a}}{{" "}}
      </template>
      <br>
    </template>
  </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
const user = reactive({
  name: 'John',
  age: 20
})
</script>

基本结构2

<template>
 <div>
{{randomNum(2,100)}}
 </div>
</template>

<script>
import { reactive,onMounted,toRefs  } from 'vue'
  export default {
      setup()
      {  
          const data = reactive ({
              option:{
                role:['管理员','教师','学生']
              }
          })
          onMounted(() => {//初始化函数
          })
          const codetrigger = () => {  //自定义函数
         }
          // 随机数
          const randomNum = (min, max) => {
              return parseInt(Math.random() * (max - min) + min)
          }
          return{
              ...toRefs(data),
              codetrigger,
              randomNum
          }
          //
      }
  }
</script>
<style scoped>
</style>

字典遍历 不要加return

<template>
  <div>
    <ul>
      <li v-for="(value, key) in myObject" :key="key">
        {{ key }}: {{ value }}
      </li>
 
    </ul>
  </div>
</template>

<script setup>
import { reactive,onMounted,toRefs} from 'vue'

const myObject = reactive({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})

onMounted(() => {//初始化函数

})

// 随机数
const randomNum = (min, max) => {
    return parseInt(Math.random() * (max - min) + min)
}

          
  

</script>

字典遍历与数组遍历

<template>
    {{ "如果遍历的是数组 第一个是元素  第二个是索引" }}
  <div v-for="(key,a) in sstudent" :key="key">
    {{key}}  {{ a }}
  </div>
  {{ "如果遍历字典，第一个是元素，第二个是属性名称" }}
  <div v-for="(key1,a1) in myObject" :key="key1">
    {{key1}}  {{ a1 }}
  </div>
</template>

<script setup>
import { reactive,onMounted,toRefs} from 'vue'

const myObject = reactive({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10',
  num:0
})


const sstudent=reactive(
  [
{id:1},
{id:2},
{id:3},
  ],
  )
onMounted(() => {//初始化函数
})
// 随机数
const randomNum = (min, max) => {
  myObject.num++;
  alert(myObject.num)
    return parseInt(Math.random() * (max - min) + min)
}
</script>