vue 指令

最新推荐文章于 2024-08-28 11:43:01 发布

前端新手2022

最新推荐文章于 2024-08-28 11:43:01 发布

阅读量1.3k

点赞数

分类专栏： vue 文章标签：前端 javascript 开发语言 vue

本文链接：https://blog.csdn.net/qq_35112578/article/details/126858426

版权

本文详细介绍了Vue中的指令，包括内容渲染的v-text、{{}}、v-html，属性绑定的v-bind，事件绑定的v-on及其修饰符，如.prevent、.stop，以及v-model的双向绑定和修饰符。还讨论了v-if和v-show的条件渲染，v-for的列表渲染，强调了在使用v-for时设置key的重要性。

摘要由CSDN通过智能技术生成

v-bind:实际工作中，‘v-bind:’可以简写为“：”

事件绑定指令：v-on：“v-on：”可以简写为：@

事件修饰符

阻止默认行为：.prevent 如a链接的跳转，表单的提交等

阻止事件冒泡：.stop

捕获模式触发当前事件处理函数：.catch

只触发一次：.once

只有当e.target是当前自身元素时触发事件处理函数：.self

双向绑定：v-module,只能配合表单元素一起使用，不同于v-bind只能单向绑定

v-model.lazy:在变化时更新而不是实时更新，相当于防抖

条件渲染函数

v-if:每次动态地移除或添加元素，如果刚进入页面，某些元素不需要被显示，后期也很可能不需要被显示，v-if性能更好

v-show:给元素添加CSS样式，频繁切换显示状态，用v-show性能更好

实际开发中不用考虑性能问题时，直接使用v-if就可以

v-else和v-else-if:必须和v-if配套使用，否则不会被识别

列表渲染指令

内容渲染指令

v-text：几乎不用，会覆盖原有内容。
差值表达式{ {}}：常用，不能渲染标签
v-html:可以渲染带标签的内容

属性绑定指令

v-bind:实际工作中，‘v-bind:’可以简写为“：”

<input type="text":placeholder="tips">

<img :src="photo" >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性绑定指令</title>

    <script type="text/javascript"  type="module" src="./vue-2.6.12.js"></script>
</head>

<body>
    <!-- 定义vue操作的区域 -->
    <div id="app">        
        <!-- v-bind:属性绑定指令：冒号后面不能有空格 -->
       <input type="text" 
       v-bind:placeholder="tips">     
       <hr>
       <img :src="photo" >  
    </div>


    <!-- 引入vue -->

    <script>
        const vm = new Vue({
            // 使用el知道vue要控制的区域
            el: '#app',
            // 数据源
            data: {
            
                tips:'请输入用户名',
                photo:'http://www.itheima.com/images/logo.png'
            }
        })

    </script>
</body>

</html>

事件绑定指令：v-on：“v-on：”可以简写为：@

    <div id="app">
       <h1 >count的值为：{
  {count}}</h1>
       <button v-on:click="conNum">+1</button>

    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: { count: 0 },
            methods: {
                conNum() {
                    this.count += 1
                }

            }
        })
    </script>