zoukankan      html  css  js  c++  java
  • (三)vue数据绑定及相应的命令

    vue数据绑定及相应的命令

    1. {{ Text }} 双括号进行数据渲染 动态绑定数据
    例如:{{message}} data: { return{ message: 'Hello Vue!' } }

    2.v-html** 输出真正的HTML 会解析HTML标签**
    例如:
    <p>Using mustaches: {{ rawHtml }}</p>
    <p>Using v-html directive: <span v-html="rawHtml"></span></p>
    Using mustaches: <span style="color: red">This should be red.</span>
    Using v-html directive: This should be red.
    3.v-bind** 显示相应的html的属性(平时的写法为 :属性名)**
    例如:
    <button v-bind:disabled="isButtonDisabled">Button</button>
    isButtonDisabled的值 为false 或者 空啥 disabled的数据值就是false
    4 v-once 只渲染元素的组件一次
    例如:
    这个将不会改变: {{ msg }}
    5.v-if** 指令将根据表达式的值真假 来插入移除 标签元素**
    例如:
    <p v-if="seen">现在你看到我了</p> seen的值为假直接移除元素
    v-else指令来表示v-if的else块
    在这里插入图片描述
    6.v-show** 另一个根据条件展示元素的选项是v-show**
    例如:
    <h1 v-show="ok">Hello!</h1>
    不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
    7.列表渲染:v-for** 基于一个数组进行渲染**
    使用 item(被迭代的数据元素的别名) in items(是源数据组)
    注:在v-for中 还可以访问父作用域的东西 还可以显示当前index索引
    在这里插入图片描述
    同时v for 还可以解析对象 将里面的 键名键值索引进行数据的书写
    在这里插入图片描述
    在此位置进行数组的优化 和 修改 比如检索 什么的
    在这里插入图片描述
    在实际书写的时候 直接在计算属性里面进行数据的优化 写个匿名方法进行数据组的操作

    8.v-on** 指令用于监听DOM的事件**
    例如:
    <a v-on:click="doSomething">...</a>
    动态参数: 使用方括号镜像表示JavaScript的表达式作为一个指令参数 就是动态参数事件名
    在使用的时候 属性 和 方法 会用的比较多 所以在写法上进行了优化 @ 和 : 绑定事件和属性

    v-on内联处理器中的方法
    @click="num=3" 直接在修改变量的数值
    带有更多的事件修饰符

    <!-- 阻止单击事件继续传播 -->
    <a v-on:click.stop="doThis"></a>
    
    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>
    
    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThat"></a>
    
    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>
    
    <!-- 添加事件监听器时使用事件捕获模式 -->
    <!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
    <div v-on:click.capture="doThis">...</div>
    
    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
    <!-- 即事件不是从内部元素触发的 -->
    <div v-on:click.self="doThat">...</div>
    
    <!-- 点击事件将只会触发一次 -->
    <a v-on:click.once="doThis"></a>
    
    <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
    <!-- 而不会等待 `onScroll` 完成  -->
    <!-- 这其中包含 `event.preventDefault()` 的情况 -->
    <div v-on:scroll.passive="onScroll">...</div>
    

    9.按键修饰符
    绑定按键的相关触发方法 有很多 需要时直接百度使用,在这只是让你知道vue是可以有固定的语法操作的 不用像 js jQuery的方式去获取了

    <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
    <input v-on:keyup.enter="submit">
    
  • 相关阅读:
    .NET 异步详解
    spring batch简介
    Nginx 配置文件介绍
    局域网内组播
    qt自定义信号函数的那些坑
    传输文件到远程服务器
    vim复制指定行
    腾讯云获取公网ip
    ifconfig添加或删除ip
    程序中tar压缩文件
  • 原文地址:https://www.cnblogs.com/tcz1018/p/12966440.html
Copyright © 2011-2022 走看看