文本插值

最基本的数据绑定形式是文本插值，在js中定义响应数据，在html中使用{{...}}.双大括号标签会被替换成相应组件实例中表达式/数据属性的值，同时每次属性更改时，他也会同步更新。

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

// 此处声明一些响应式状态
  const message=ref('ref响应，文本插值');
  let obj=ref({count:0,name:'设置obj的响应'});
  const obj2={
    foo:ref(1),
    bar:ref(2)
  }
  //ref被传递给函数或是从一般对象上被解构时，不会丢失响应性
  //将count变成顶级属性
  const { count }=obj;
  let arr=ref([])
  arr.value.push('ref响应式数组','hello world');
</script>

<template>
  <h1>{{message}}</h1>
  <h1>{{obj.name}}</h1>
   <h1>{{obj}}</h1>
  <h1>{{obj2}}</h1>
  <h1>{{obj2.foo }}</h1>
  <h1>{{obj2.foo + 1}}</h1>
  <h1>{{obj.count+6}}</h1>
  <h1>{{arr}}</h1>
</template>

运行结果

类与样式绑定

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

const titleClass = ref('title');
const bg1 = ref('bg');
const bord = ref('bor');
const objOfAttrs={
    id:"bg",
    class:"bor"
};
const isActive = ref(true)
const size=ref(20)
</script>

<template>
  <h1 :class='titleClass'>Make me red</h1> <!-- 此处添加一个动态 class 绑定 -->
  <div v-bind:id='bg1' v-bind:class='bord'>
    属性绑定
  </div>
  
  <div v-bind="objOfAttrs">
    一次性绑定多个属性
  </div>
  
  <div :class='{ bor : isActive }'>
    控制样式的有无，样式有无取决于数据属性isactive的真假值,bor是style中选择器名称
  </div>
   <div :style="{ 'font-size':size+'px'}">
     绑定内联对象
  </div>
</template>

<style>
.title {
  color: red;
}
#bg{
    background-color: #fbb8af;
    padding:5px;
    margin:5px;
  }
.bor{
    border:1px solid black;
  }
</style>

结果：

条件渲染

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

const awesome = ref(true)
function toggle() {
  awesome.value=!awesome.value;
}
</script>

<template>
  <button @click="toggle">toggle</button>
  <h1 v-if='awesome'>Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
  
  <template v-if='awesome'>
   <h3>template上的v-if</h3>
   <p>v-if也可以在template,对一块元素进行设置</p>
  </template>
</template>

列表渲染

基于一个数组，渲染一个列表。使用方法为v-for=(item,index) in array :key='item.id' 或 v-for=(item,index,key) in obj :key='item.id'

渲染数组

数组需要使用（item,index）in items语法，其中item是数组中每一个数组元素，index表示下标，items是数组.

<script setup>
import { ref } from 'vue'
const persons=ref( ["张三", "李四", "王五"]);
  persons.value.unshift('赵大')
</script>

<template>

  <ul>
    <li v-for="(person,index) in persons" >
      {{index}}---{{ person }}    
    </li>
  </ul>
</template>

渲染结果

渲染对象

（item,index,key ）item表示键值,key表示键名,index表示序号

<script setup>
import { ref } from 'vue'
  let id=0;
const personobj=ref({ name: "张三", age: "18", sex: "男" ,id:id++});  
</script>

<template>
  <ul>
    <li v-for="(item,index,key) in  personobj"  :key='item.id'>
      {{index}}---{{ item }} ---{{key}} 
    </li>
  </ul>
</template>

渲染结果：

对数组的操作

在js可以对数组使用数组方法进行操作，这里定义了一个数组，对数组进行添加和删除操作

let id = 0
const newTodo = ref('')
const todos = ref([
  { id: id++, text: 'Learn HTML' },
  { id: id++, text: 'Learn JavaScript' },
  { id: id++, text: 'Learn Vue' }
])

function addTodo() {
  todos.value.push({ id: id++, text: newTodo.value })
  newTodo.value = ''
}

function removeTodo(todo) {
  todos.value = todos.value.filter((t) => t !== todo)
}

与key的绑定

在v-for渲染列表的时候需要使用属性：key='唯一标识符'。

Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。

默认模式是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况。

为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute

事件监听

监听DOM事件，并在事件触发时，执行相应的js代码。使用方法为：v-on:click="methodName" 或 @click="handler"

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

const count = ref(0)
function jian(){
  count.value--;
}
</script>

<template>
  <div> {{ count }}</div>
  <button @click='count++'>+</button>
  <button @click='jian'>-</button>
  
</template>

表单输入绑定

将表单输入框的内容同步给 JavaScript 中相应的变量

v-model 还可以用于各种不同类型的输入，<textarea>、<select> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：

文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；
<input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；
<select> 会绑定 value property 并侦听 change 事件。

<input 
:value="text" 
@input="event => text = event.target.value">

<input v-model="text">

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

const text = ref('')
</script>

<template>
  <input v-model="text" placeholder="Type here">
  <p>{{ text }}</p>
</template>

实时显示结果：

VUE-指令