声明式渲染 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"></