声明式渲染 ? 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"></div>
由于?v-bind?使用地非常频繁，它有一个专门的简写语法：template
现在，试着把一个动态的?class?绑定添加到这个?
?上，并使用?titleClass?的?ref?作为它的值。如果绑定正确，文字将会变为红色。
例:
<script setup>
import { ref } from 'vue'
const titleClass = ref('title')
</script>
<template>
<h1 :class="titleClass">Make me red</h1> <!-- 此处添加一个动态 class 绑定 -->
</template>
<style>
.title {
color: red;
}
</style>
事件监听 v-on
我们可以使用?v-on?指令监听 DOM 事件：
<button v-on:click="increment"> {{count}}</button>
因为其经常使用，v-on?也有一个简写语法：
<button @click="">{{count}}</button>
在此处,incrertment引用了一个在
<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment(){
count.value++
}
</script>
<template>
<!-- 使此按钮生效 -->
<button @:click='increment'>count is: {{ count }}</button>
</template>
表单绑定 v-model
我们可以同时使用?v-bind?和?v-on?来在表单的输入元素上创建双向绑定：
<input :value="text" @input="onInput">
function onInput(e) { // v-on 处理函数会接收原生 DOM 事件 // 作为其参数。 text.value = e.target.value
}
为了简化双向绑定，Vue 提供了一个?v-model?指令，它实际上是上述操作的语法糖：
<input v-model="text">
例：
<script setup>
import { ref } from 'vue'
const text = ref('')
function onInput(e) {
text.value = e.target.value
}
</script>
<template>
<input v-model="text" placeholder="Type here">
<p>{{ text }}</p>
</template>
条件渲染 v-if v-else
我们可以使用?v-if?指令来有条件地渲染元素：
<h1 v-if="awesome">Vue is awesome!</h1>
我们也可以使用?v-else?和?v-else-if?来表示其他的条件分支：
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
例：
<script setup>
import { ref } from 'vue'
const awesome = ref(true)
function toggle() {
// ...
}
</script>
<template>
<button @click="toggle">toggle</button>
<h1 v-if='awesome'>Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
</template>
|