v-text

v-text指令用于将数据的文本值渲染到DOM中。

<template>
    <p v-text="textValue"></p>
</template>

<script setup>
  
    const textValue = 'Hello, World!';
    
  </script>

v-html

v-html指令用于将数据作为HTML插入。

<template>
    <div v-html="htmlContent"></div>
</template>

<script setup>
    const htmlContent = '<p>Hello, World!</p>';
 </script>

如果这里我们在div标签中使用上面v-text的话那两个p标签就会被当成字符串，而是用v-html就会识别为p标签

v-show

v-show 通过设置内联样式的 display CSS 属性来工作，当元素可见时将使用初始 display 值。当条件改变时，也会触发过渡效果。

<template>
    <h2 @click="happy">{{ count }}</h2>
    <h4 v-show="count<22">我很开心</h4>
</template>

<script setup>
import {ref} from 'vue'
    let count = ref(20)
    const happy = () => {
        count.value++
    } 
</script>

我们来看下效果：

v-if v-else v-else-if

基于表达式值的真假性，来条件性地渲染元素或者模板片段。这里就省得我们在js中去进行判断

<template>
    <nav>
      <span @click="changeTab(1)">基础知识</span> |
      <span @click="changeTab(2)">购物车</span> |
      <span @click="changeTab(3)">待办事项</span>
    </nav>
    <Base v-if="state.index==1" />
    <shopping v-if="state.index==2" />
    <todo v-if="state.index==3" />
</template>

<script setup>
import { reactive } from 'vue'
import Base from './components/base.vue'
import shopping from './components/shopping.vue'
import todo from './components/todo.vue'
let state=reactive({  
  index: 1,
})
const changeTab = (i)=>{
  state.index=i;
}
</script>

<style lang="css" >
*{
  text-align: center;
}
</style>

我们来看看效果：

这里就展现了我们点击不同的事件通过if判断就会跳转不同的组件。

v-for

基于原始数据多次渲染元素或模板块。

<template>
    <table>
        <thead>
            <th>序号</th>
            <th>书籍名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
        </thead>
        <tbody>
            <tr v-for="(item,index) in books" :key="item.id">
                <td>{{ index+1 }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.date }}</td>
                <td>{{ item.price }}</td>
                <td>
                    <button @click="minus(index)" :disabled="item.count<=1">-</button>
                    <span class="counter">{{ item.count }}</span>
                    <button @click="add(index)">+</button>
                </td>
                <td>
                    <button @click="Delete(index)">删除</button>
                </td>

            </tr>
        </tbody>
    </table>
    <h2>总价格:{{ total }}</h2>
</template>

<script setup>
    import { computed, reactive } from 'vue';
    const books=reactive([
        {
          id: 1,
          name: '《算法导论》',
          date: '2006-9',
          price: 85.00,
          count: 1
        },
        {
          id: 2,
          name: '《UNIX编程艺术》',
          date: '2006-2',
          price: 59.00,
          count: 1
        },
        {
          id: 3,
          name: '《编程珠玑》',
          date: '2008-10',
          price: 39.00,
          count: 1
        },
        {
          id: 4,
          name: '《代码大全》',
          date: '2006-3',
          price: 128.00,
          count: 1
        },
      ])
    const total= computed(()=>{
        let sum=0
        for(let item of books){
            sum+=item.price*item.count
        }
        return sum
    })
    const add = (i)=>{
        books[i].count++
    }
    const minus = (i)=>{
        books[i].count--
    }
    const Delete=(i)=>{
        books.splice(i,1)
    }
</script>

<style lang="css" >
    table{
        margin: 0 auto;
        border: 1px solid #aaa;
        border-collapse: collapse
    }
    th,td{
        padding: 8px 16px;
        border: 1px solid #aaa;

    }
    .counter{
        margin: 0 10px;
    }
</style>

我们通过v-for来循环books对象简单实现一个图书购物车

v-on

v-on指令用于监听DOM事件。

也就是v-on:click和@click效果一样

v-bind

v-bind指令用于动态地绑定一个或多个特性，或一个组件的props到表达式。简写形式为:符号。

<template>
  <a :href="url">Visit us</a>
</template>

<script setup>
const url = 'https://www.example.com';
</script>

v-model

v-model指令用于在表单控件元素上创建双向数据绑定。它会根据控件类型自动选择合适的方式更新DOM。

<template>
  <input v-model="inputValue" />
</template>

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

const inputValue = ref('');
</script>

这里双向绑定也体现了vue对比react的双向绑定是更简单的

总结

这些指令是Vue 3中构建动态和响应式用户界面的基石。它们允许开发者以声明式的方式操作DOM，减少了手动管理DOM的复杂度，使得代码更加清晰和易于维护。在实际开发中灵活运用这些指令，可以极大地提高开发效率和用户体验。

Vue简单学习v-前缀的指令