【Vue2】Direct 指令

1、内容渲染指令

1、插值表达式

2、V - TEXT

3、V - HTML

<!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>Document</title>

  <script src="./../lib/vue.js"></script>

</head>

<body>

  <div id="app">

    {{username}}

    <!-- V-text指令会对元素文本内容整体控制 -->

    <p v-text="aaa"></p>

    <!-- 要操作局部文本展示应该使用模版符号实现(插值表达式) -->

    <p>这是固定文本：{{aaa}}</p>

    <!-- 如果是html格式，需要v-html渲染标签 -->

    <div v-html="info"></div>

  </div>

  <script>

    const VIEW_MODEL = new Vue({

      el: '#app', // 控制的元素实例，

      data: {

        username: '张三李四',

        aaa: 100,

        info: '<h4 style="color: red; font-weight: bold;">欢迎大家来学习vue. js</h4> ',

      }

    })

  </script>

</body>

</html>

备注

1、插值表达式和V-TEXT 不能渲染HTML

2、同样在V-HTML指令中也不能渲染插值表达式

插值表达式支持简单的运算和方法调用：

<!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>Document</title>

  <script src="./../lib/vue.js"></script>

</head>

<body>

  <div id="app">

    <!-- 在vue提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持Javascript表达式的运算，例如: -->

    {{ aaa + 100 }} <br>

    {{ username + 1233 }} <br>

    {{ username.split('').reverse().join('') }}

    <!-- 绑定数值异常 -->

    <!-- <div :class="box"></div> -->

    <!--

      vue.js:525 [Vue warn]:

      Property or method "box" is not defined on the instance but referenced during render.

      Make sure to declare reactive data properties in the data option.

      (found in root instance)

     -->

  </div>

  <script>

    const VIEW_MODEL = new Vue({

      el: '#app', // 控制的元素实例，

      data: {

        username: '张三李四',

        aaa: 100,

        info: '<h4 style="color: red; font-weight: bold;">欢迎大家来学习vue. js</h4> ',

      }

    })

  </script>

</body>

</html>

2、属性绑定指令

<!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>Document</title>

  <script src="./../lib/vue.js"></script>

</head>

<body>

  <div id="app">

    <!--

      <input type="text" placeholder="{{tips}}">

      {{xxx}} 插值表达式只能使用在元素的内容节点中，不能用在属性节点中

      若要给属性绑定值，使用v-bind实现

     -->

     <input type="text" v-bind:placeholder="tips">

     <!-- 可以简写为:属性绑定 -->

     <input type="text" :value="txt">

  </div>

  <script>

    const VIEW_MODEL = new Vue({

      el: '#app', // 控制的元素实例，

      data: {

        tips: '这是输入提示信息',

        txt: 'sajasdoqidwq'

      }

    })

  </script>

</body>

</html>

3、事件绑定指令

<!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>Document</title>

  <script src="./../lib/vue.js"></script>

</head>

<body>

  <div id="app">

    <p>计数器：{{counter}}</p>

    <button v-on:click="increase">点击加一</button>

    <button v-on:click="decrease">点击减一</button>

  </div>

  <script>

    const VIEW_MODEL = new Vue({

      el: '#app', // 控制的元素实例，

      data: {

        counter: 0

      },

      methods: {

        increase: function(event) {

          console.log(VIEW_MODEL)

          console.log(event)

          // this._data.counter ++

          // 因为写在这个作用域中，可以直接操作Vue实例

          VIEW_MODEL._data.counter ++

        },

        decrease(event) {

          console.log(VIEW_MODEL)

          console.log(event)

          // this.counter --

          VIEW_MODEL.counter --

        }

      }

    })

  </script>

</body>

</html>

如果方法需要传递参数：

但是这样写会覆盖掉event事件参数

<!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>Document</title>

  <script src="./../lib/vue.js"></script>

</head>

<body>

  <div id="app">

    <p>计数器：{{counter}}</p>

    <!-- 传参会覆盖 -->

    <button v-on:click="increase(11)">点击加一</button>

    <button v-on:click="decrease(5)">点击减一</button>

  </div>

  <script>

    const VIEW_MODEL = new Vue({

      el: '#app', // 控制的元素实例，

      data: {

        counter: 0

      },

      methods: {

        increase: function(number) {

          console.log(VIEW_MODEL)

          console.log(number)

          // this._data.counter ++

          // 因为写在这个作用域中，可以直接操作Vue实例

          VIEW_MODEL._data.counter += number

        },

        decrease(number) {

          console.log(VIEW_MODEL)

          console.log(number)

          // this.counter --

          VIEW_MODEL.counter -= number

        }

      }

    })

  </script>

</body>

</html>

如果需要获取事件对象，通过注入$event变量参数获取

<!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>Document</title>

  <script src="./../lib/vue.js"></script>

</head>

<body>

  <div id="app">

    <p>计数器：{{counter}}</p>

    <!-- 传参会覆盖 -->

    <button v-on:click="increase(11, $event)">点击加一</button>

    <!--

        注意:原生DOM对象有onclick、oninput、 onkeyup 等原生事件，替换为vue的事件绑定形式后,

        分别为: v-on:click、 v-on:input、 v-on:keyup

     -->

    <button @click="decrease(5)">点击减一</button>

  </div>

  <script>

    const VIEW_MODEL = new Vue({

      el: '#app', // 控制的元素实例，

      data: {

        counter: 0

      },

      methods: {

        increase: function(number, event) {

          console.log(VIEW_MODEL)

          console.log(number)

          // this._data.counter ++

          // 因为写在这个作用域中，可以直接操作Vue实例

          VIEW_MODEL._data.counter += number

          // 通过$event得到原生事件对象, 如果方法无参数，可以写event入参获取事件对象

          console.log(event)

        },

        decrease(number) {

          console.log(VIEW_MODEL)

          console.log(number)

          // this.counter --

          VIEW_MODEL.counter -= number

        }

      }

    })

  </script>

</body>

</html>

阻止默认事件，Vue提供了事件附加修饰：

<!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>Document</title>

  <script src="./../lib/vue.js"></script>

</head>

<body>

  <div id="app">

    <a href="https://www.baidu.com/" @click="printStr">阻止默认事件</a>

    <a href="https://www.baidu.com/" @click.prevent="printStr2">阻止默认事件2</a>

    <!--

        冒泡事件阻止

        @click.capture

        @click.stop ===> event.stopPropagation() 

        .capture

        以捕获模式触发当前的事件处理函数

        .once

        绑定的事件只触发1次

        .self

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

     -->

  </div>

  <script>

    const VIEW_MODEL = new Vue({

      el: '#app', // 控制的元素实例，

      data: { },

      methods: {

        // 使用原生办法阻止默认事件

        printStr(event) {

            event.preventDefault()

            console.log('默认事件被阻止了')

        },

        // 使用vue修饰符处理

        printStr2() {

            console.log('默认事件2被阻止了')

        }

      }

    })

  </script>

</body>

</html>

键盘事件监听

提供了一些直接可获取的事件

<!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>Document</title>

  <script src="./../lib/vue.js"></script>

</head>

<body>

  <div id="app">

    <!-- 监听按键ESC按下的s -->

    <input type="text" @keyup.esc="clearValue">

    <input type="text" @keyup.enter="submitEvent">

  </div>

  <script>

    const VIEW_MODEL = new Vue({

      el: '#app', // 控制的元素实例，

      data: { },

      methods: {

        clearValue(event) {

          console.log(event)

          event.target.value = ''

          // event.value = ''

        },

        submitEvent(event) {

          console.log('回车按键触发')

        }

      }

    })

  </script>

</body>

</html>

一些补充：

https://blog.csdn.net/yy168888/article/details/106312431

4、双向绑定指令：

<!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>Document</title>

  <script src="./../lib/vue.js"></script>

</head>

<body>

  <div id="app">

    <!--

      1.4双向绑定指令

      vue提供了v-model双向数据绑定指令,

      用来辅助开发者在不操作DOM的前提下，

      快速获取表单的数据。

      双向绑定是元素的value值，和自定义的数据key

    -->

    <p>

      <input type="text" v-model="txt" @keyup.enter="clearValue">

      双向绑定：{{txt}}

    </p>

    <p>

      <!--

        value输入项的输入不能把dom元素的value值传递给data属性的aaa

       -->

      <input type="text" :value="aaa">

      单向渲染：{{aaa}}

    </p>

    <!--

      v-model支持的元素类型是带有value属性的元素

      input标签：

        radio

        checkbox

        text

      textarea标签

      select标签

     -->

  </div>

  <script>

    const VIEW_MODEL = new Vue({

      el: '#app', // 控制的元素实例，

      data: {

        txt: '',

        aaa: 'asdasd'

      },

      methods: {

        clearValue(event) {

          console.log(event)

          // 清除dom元素的value不会更新data属性的值

          // event.target.value = ''

          this.txt = ''

          // event.value = ''

        },

      }

    })

  </script>

</body>

</html>

双向绑定的修饰符

<!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>Document</title>

  <script src="./../lib/vue.js"></script>

</head>

<body>

  <!--

      为了方便对用户输入的内容进行处理，vue为v-model指令提供了3个修饰符，分别是:

    修饰符  作用    示例

    .number   自动将用户的输入值转为数值类型  <input v-model.number-"age" />

    .trim     自动过滤用户输入的首尾空白字符  <input v-model.trim="msg" />

    .lazy     在"change"时而非"input" 时更新  <input v-modeL.lazy="msg" />

    作用是对用户输入的内容处理，数据控制和清洗

   -->

<div id="app">

  <input type="text" v-model.number="val1"> +

  <input type="text" v-model.number="val2"> =

  {{ val1 + val2}}

  <br>

  清除空格

  <input type="text" v-model.trim="val3">

  <br>

  懒加载？ <!-- 在失去焦点时触发lazy，model值更新 -->

  <input type="text" v-model.lazy="val4">

</div>

<script>

const VIEW_MODEL = new Vue({

  el: '#app', // 控制的元素实例，

  data: {

    val1: 100,

    val2: 100,

    val3: '',

    val4: '',

  },

  methods: {

    clearValue(event) {

      console.log(event)

      // 清除dom元素的value不会更新data属性的值

      // event.target.value = ''

      this.txt = ''

      // event.value = ''

    },

  }

})

</script>

</body>

</html>

5、条件渲染指令

<!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>Document</title>

  <script src="./../lib/vue.js"></script>

</head>

<body>

<div id="app">

<!--

条件渲染指令用来辅助开发者按需控制DOM的显示与隐藏。条件渲染指令有如下两个，分别是:

●v-if

  直接创建元素或者删除元素处理，

●v-show

  使用style="display: none;" CSS的样式控制，dom对象持续存在

  频繁切换，使用v-show的性能更高，因为dom元素只创建一次

 -->

 <p v-if="flag">这是v-if 控制的元素</p>

 <p v-show="flag">这是v-show 控制的元素</p>

</div>

<script>

const VIEW_MODEL = new Vue({

  el: '#app', // 控制的元素实例，

  data: {

    flag: false

  },

})

</script>

</body>

</html>

如果需要判断多个条件处理：

    <div v-if="flage">111</div>

    <div v-else-if="flage">111</div>

    <div v-else-if="flage">111</div>

    <div v-else="flage">111</div>

6、遍历渲染指令

<!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>Document</title>

  <script src="./../lib/vue.js"></script>

</head>

<body>

<div id="app">

  <!--

    vue提供了v-for列表渲染指令,用来辅助开发者基于一个数组来循环渲染-

    一个列表结构。v-for 指令需要使

    用item in items形式的特殊语法，其中:

    ●items是待循环的数组

    ●item是被循环的每- 项

   -->

   <ul>

     <li v-for="item in list">

       ID:{{item.id}} Name:{{item.name}} Gender:{{item.gender}}

      </li>

   </ul>

   <!--

    推荐写法：

      (row, index) in list，可以附带一个序号变量

    官方建议:

      1、只要用到了v-for 指令，那么一定要绑定一个:key 属性

      2、尽量把id作为key的值, key的数据类型要求数字和字符串

      3、key值不允许重复值 否则会终端报错: Duplicate keys detected

      4、使用数据的ID属性 既提升性能、又防止列表状态紊乱

    -->

   <ul>

    <li v-for="(item, idx) in list" :key="item.id">

      ID:{{item.id}} Name:{{item.name}} Gender:{{item.gender}}

     </li>

  </ul>

</div>

<script>

const VIEW_MODEL = new Vue({

  el: '#app', // 控制的元素实例，

  data: {

    list: [

      {id: 1, name: '25', gender: true},

      {id: 2, name: '22', gender: false},

      {id: 3, name: '23', gender: true},

      {id: 4, name: '24', gender: false},

      {id: 5, name: '26', gender: true},

    ]

  }

})

</script>

</body>

</html>

【Vue2】Direct 指令的更多相关文章

vue2,vue指令和选项
vue特点 mvvm框架响应式(声明式) 组件化(支持自定义组件) 丰富的指令(Dom功能的抽象) 基于选项(template,data,computed,watch,methods) vue文档集 ...
Vue2自定义指令改变DOM值后未刷新data中绑定属性的值
标签(空格分隔): Vue 自定义指令用于过滤输入框,只允许输入数字: Vue.directive('numberOnly', { bind: function (el, binding) { el. ...
vue2自定义指令-加载指令v-loading和占位图指令v-showimg
了解自定义指令的钩子函数 bind(){}:每当指令绑定到元素上的时候,就会立刻执行bind这个函数.只调用一次. 和css相关的操作,可以放在这个钩子函数中. inserted(){}:元素插入到D ...
【转】Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)
前言文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么! 有三类人不适合此篇文章: “喜欢站在道德制高点的圣母婊” – 适合去教堂 “无理 ...
Android热修复技术总结
https://blog.csdn.net/xiangzhihong8/article/details/77718004 插件化和热修复技术是Android开发中比较高级的知识点,是中级开发人员通向高 ...
Vue 常见问题汇总
Q:我给组件内的原生控件添加事件,怎么不生效了!!!   <el- ...
Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)
前言发现群里有些问题的提问重复率太高了,每次都去回答,回答的贼烦.这里做一个大体的汇总,废话不多说,直接开始给出方案,不是手把手..若是连问题和解决都看不懂的..应该去补充下基础知识问题汇总 Q: ...
Vue 脱坑记
问题汇总 Q:安装超时(install timeout) 方案有这么些: cnpm : 国内对npm的镜像版本 /* cnpm website: https://npm.taobao.org/ */ ...
Vue2.0的变化，组件模板，生命周期，循环，自定义键盘指令，过滤器
组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

随机推荐

什么是LLM大模型训练，详解Transformer结构模型
本文分享自华为云社区<LLM 大模型学习必知必会系列(四):LLM训练理论篇以及Transformer结构模型详解>,作者:汀丶. 1.模型/训练/推理知识介绍深度学习领域所谓的&quo ...
绘图与可视化--pandas中的绘图函数
matplotlib API函数都位于matplotlib.pyplot模块中. 本节代码中引入的约定为:import matplotlib.pyplot as plt numpy库也会用到,约定:i ...
Win11系统下的MindSpore环境搭建
技术背景笔者尝试过不少编程环境搭建的方案,例如常见的Ubuntu.Deepin.CentOS,也用过很多人力荐的Manjaro,这些发行版在需要办公的条件下,一般都需要结合Windows双系统使用. ...
LidarView工程搭建指南
前言笔者做过一段时间的车载LiDAR开发,对LidarView开源项目进行过深度定制,摸索了一套LidarView软件的开发和调试方法 1 软件安装 1.1 安装准备以Windows10系统平台为 ...
错误 CS1617 Invalid option '7.3' for /langversion; must be ISO-1, ISO-2, Default or an integer in range 1 to 6.
严重性代码说明项目文件行禁止显示状态错误 CS1617 Invalid option '7.3' for /langversion; must be ISO-1, ISO-2, Defau ...
element-ui 合并行或列 table :span-method（行合并）
element-ui 官网案例:table合并行或列 element-ui官网中关于行合并的例子是根据行号进行合并的,这显然不符合我们日常开发需求,因为通常我们table中的数据都是动态生成的,所以需 ...
DHorse的配置文件
首先看一下DHorse的配置文件,如下: #============================================================================== ...
Kotlin 变量详解：声明、赋值与最佳实践指南
Kotlin 变量变量是用于存储数据值的容器. 要创建一个变量,使用 var 或 val,然后使用等号(=)给它赋值: 语法 var 变量名 = 值 val 变量名 = 值示例 var name ...
Xilinux PS与PL交互：：Linux-App读写REG
Xilinux PS与PL交互::Linux-App读写REG 背景 PL配置好有关的硬件,PS端做验证. 设计方案:针对REG地址,不使用设备树配置. 遇到的问题:暂无. 验证目的验证PL-PS的 ...
IPv6地址的文本表示规范
背景随着IPv6越来越普及,经常要跟IPv6地址打交道,迫切需要一个统一的IPv6地址文本表示规范. RFC4291简单的说明了如何将IPv6地址表示成文本形式,但有很多有歧义和不周全的地方. RF ...