「Vue学习之路」—— vue的常用指令

前几天初识了一下Vue.js这个框架，感觉还是蛮不错的，用起来非常方便，最近也学了Vue的路由，做了一点点小demo，路由我们下一篇vue文章聊，今天给jym分享一下vue的指令操作，看完你会觉得，vue非常优雅，好用！

vue指令

Vue.js 框架提供了多种内置指令来帮助我们更方便地操作DOM。下面是一些常用的Vue指令：

1. v-bind : 用于动态绑定属性。例如，<a v-bind:href="url">Link</a>。

   • : 符号是 v-bind 指令的缩写。v-bind 用于动态地将属性绑定到表达式的值。当你在属性前使用 :，Vue 会自动将它解释为 v-bind。

   例如，如果你有一个属性需要绑定到某个表达式的值，你可以这样写：

   <a :href="url">Link</a>

   这等同于使用完整的 v-bind 写法：

   <a v-bind:href="url">Link</a>

   例子中的url 数据属性的值会被绑定到 <a> 元素的 href 属性上，这样链接就会根据 url 的值动态更新。在处理动态属性绑定时使用 : 或 v-bind 是实现数据绑定的一种方式。

   

   如果:没给数据属性绑定，则vue识别不出它的值,只会当成字符串了。点击连接不会跳转，而是把url当成字符串了。

2. v-on/@ : 用于监听DOM事件并触发组件内的方法。例如，<button v-on:click="doSomething">Click Me</button>。

   <template>
   <div>
       <h4 @click="changeVal">{{ val }}</h4>
   </div>
   </template>
   
   <script setup>
   import { ref } from 'vue'  
   const val = ref('hello');          // 使用ref函数来声明响应式状态
   
   const changeVal = ()=>{
       val.value +='0'
   }
   
   </script>
   
   <style lang="css" scoped>
   
   </style>

   代码的意思是给<h4>的值设为响应式的，并给该标签绑定一个@click,点击事件，触发一个叫changeVal的函数,@是v-on:的缩写。当<h4>标签被点击时，执行的函数会将响应式val的值添加一个字符0。

   、

3. v-model : 这是一个双向数据绑定指令，常用于表单元素如输入框、复选框等。例如，<input v-model="message" placeholder="edit me">。

   下面我们用个例子给你展示一下用v-model实现数据的双向奔赴吧。只需要给输入框写入属性v-model绑定一个响应式数据，ok完成。

   <template>
       <div>
           <h4 @click="changeVal">{{ val }}</h4>
           <input type="text"  v-model="val">
       </div>
   </template>
   
   <script setup>
   import { ref } from 'vue'
   const val = ref('hello');
   
   const changeVal = ()=>{
       val.value +='0'
   }
   
   </script>
   
   <style lang="css" scoped>
   
   </style>

   

   

   

4. v-if : 根据条件渲染或不渲染一个块。例如，<p v-if="seen">Now you see me</p>。

   <template>
       <h2 @click="happy">{{count}}</h2>
       <h3 v-if="count < 30">我很痛苦</h3>
       <h3 v-else-if="count < 40">我不开心</h3>
       <h3 v-else="count > 40">我很开心</h3>
       <!-- <h4 v-show="count < 30">我很开心</h4> -->
   </template>
   <script setup>
   import { ref } from 'vue'
   let count = ref(20)
   
   const happy = ()=>{
       count.value += 5
   }
   </script>
   
   <style lang="scss" scoped>
   
   </style>

   每点击一下数字，可以加5，当达到一定的值，可以响应式渲染某一个符合条件的标签。v-if和v-else的作用都可以在这个例子中显示。

5. v-else : 与v-if一起使用，当v-if条件为假时渲染。例如，<p v-if="seen">Now you see me</p><p v-else>Now you don't</p>。

6. v-show : 与v-if类似，但是无论条件真假，元素都会被渲染到DOM中，只是通过CSS控制显示或隐藏，而v-if条件为真，DOM元素显示，不为真，则不显示。例如，<p v-show="seen">Hello!</p>。

7. v-for : 用于遍历数组或对象。例如，<li v-for="item in items">{{ item }}</li>。通常变量每个item的时候会拿到其下标可以这样写<li v-for="(item,index) in items">{{ item }}</li>,index默认从0开始。

vue指令实战demo

一个像购物车结算列表一样的小demo：

页面显示如下：

1. 先用v-for指令将响应式数据读取到页面：

   

2. 然后加上增加减少数量的函数：

   

3. 计算总数 totle = item.count * item.price:

   

   这里涉及到一个computed()函数，它是vue3的一种写法，首先，你需要导入 computed 函数和 ref 函数（如果你使用的是响应式引用类型）。ref 用于创建基本数据类型的响应式引用，而 reactive 用于创建对象或数组的响应式引用。

   • watch vs computed
     1. watch 默认不会主动执行一次，且watch是监听某个变量的变更，会执行内部的回调，无返回值
     2. computed 会默认主动执行一次，当回调函数中任意变量值发生改变时，computed都会重新执行，有返回值

   我们这里的计算总价格是需要自动计算的，且一开始进入页面的时候就需要执行一次，所以选择使用computed函数实现。

   • 删除操作就简单一点，就是操作数组了。

完整代码如下：

App.vue文件代码：

    <template>
      <shopping />
    </template>

    <script setup>
      import shopping from './components/shopping.vue'

    </script>

    <style lang="css">
      *{
        text-align: center;
      }
    </style>
    ```
    `shopping` 组件内部代码如下：
    
    ```
    <template>
        <table>
            <thead>
                <th>序号</th>
                <th>书籍名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </thead>
            <tbody>
               <tr v-for="(item,index) in books">
                    <td>{{ index+1 }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.date }}</td>
                    <td>{{ item.price }}</td>
                    <td>
                        <button @click="minus(index)" :disavble="item.count <=1">-</button>
                        <span class="counter">{{ item.count }}</span>
                        <button @click="add(index)">+</button>
                    </td>
                    <td><button @click="deleteBtn(index)">删除</button></td>
               </tr>
            </tbody>
        </table>
        <h2>总价格：{{ total }}</h2>
    </template>

    <script setup>
    import {ref,computed} from 'vue'
        const books = ref([
            {
              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 minus = (index)=>{
            books.value[index].count--
        }
        const add = (index)=>{
            books.value[index].count++
        }
        const total = computed(()=>{
            let sum = 0;
            for(let item of books.value){
                sum +=item.count * item.price
            }
            return sum;
        })
        const deleteBtn = (index)=>{
            books.value.splice(index,1)
        }
    </script>

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

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

当你做完这个小demo，会对vue指令更加熟悉，可能还有几个指令没有写入，后续在项目中也会经常用到，所以如果还有不熟悉的指令，可以去vue官方文档再学习一下。链接给你放这哦 ------> vue官方文档。