Vue.js基础——声明式渲染、Attribute绑定、事件监听

声明式渲染

示例代码：

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

const conster = reactive({count: 0})
const message = ref('Hello Vue！')
</script>
<template>
  <h1>{{ message }}</h1>
  <h2>count is {{ conster.count }}</h2>
</template>

vue的核心功能是声明式渲染，通过扩展与html的模板语法，可以根据JavaScript的状态描述html应该是什么样的，当状态改变时，html随之改变。而改变时触发更新的状态称之为响应式的，可使用vue的api来声明响应式状态。

reactive()创建的对象都是JavaScript proxy，仅适用于对象，包括数组和内置类型。ref()则适用于任何值类型，ref会返回一个包裹对象，在.value属性下暴露内部值。

在<script setup>组件中声明的响应式状态，可以通过双大括号直接在模板中引用。message ref在模板中访问时不需要使用.value，vue会自动解包。

双大括号中也不仅限于使用标识符，包括任何有效的JavaScript表达式也可以使用。

Attribute绑定

<script setup>
import { ref } from 'vue'

const titleclass = ref('title')
</script>
<template>
<h1 :class=titleclass >hello Vue!</h1>
</template>
<style>
.title {
  color: red;
}
</style>

双大括号只能用于文本插值，而为属性绑定动态值需要使用v-bind指令，指令是一种特殊的Attribute，是vue模板语法的一部分，指令的值是可以访问JavaScript状态的表达式。指令后冒号后的值为指令的参数，示例中class的值titleclass将与组件状态中的titleclass绑定。

由于v-bind使用频繁，在vue中有一个语法糖：

原：v-bind:id 现：:id

事件监听

<script setup>
import { ref } from 'vue'

const count = ref(0)

function dianji(){
  count.value++
}
</script>
<template>
  <button @click="dianji">count is {{ count }}</button>
</template>

可以使用v-on监听DOM事件如v-on:click=“test”，由于经常使用，也可简写为@click="test"。示例代码中，可以通过函数修改ref来更新组件状态。