Vue 声明式渲染 ，Attribute 绑定v-bind ,事件监听v-on,表单绑定v-model,条件渲染v-if，v-else（个人记录-2）

声明式渲染   import {ref} from ‘vue’

Vue 的核心功能是声明式渲染：通过扩展于标准 HTML 的模板语法，我们可以根据 JavaScript 的状态来描述 HTML 应该是什么样子的。当状态改变时，HTML 会自动更新。
例子：

<script setup>
  import {ref} from 'vue'
  import {reactive} from 'vue'
  //逻辑组件
  //此处声明一些响应式状态
  const counter= reactive({
    count:0
  })
  console.log(counter.count)
  counter.count++
  const message= ref('hello world')
</script>  
<template>
  <h1>{
  {message}}</h1>
  <p> count is :{
  {counter.count}}</p>
</template>

Attribute绑定  v-bind

在 Vue 中，mustache 语法 (即双大括号) 只能用于文本插值。为了给 attribute 绑定一个动态值，需要使用 v-bind 指令：

<div v-bind:id="dynamicId"></