【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的代码 ...

随机推荐

uniapp 跳转指定的tab导航页面
考察的知识点:1.uniapp的页面跳转方法:uni.navigateTo2.页面跳转传值的方法:'?名称=值' 的方式3.参数的接收 onload(option){} 第一个页面的写法: toCom ...
Python实现求多个集合之间的并集-方法2
之前使用过一种方法实现求集合间的并集,参考文章:https://www.cnblogs.com/mrlayfolk/p/12373532.html,这次使用另外一种方法实现,这种方法效率更高. 目的: ...
docker日常使用操作场景
日常使用场景场景1:将自己的镜像从hub中拉取,并压缩成tar.gz文件 # 首先拉取镜像 docker pull docker.images.hub/{namespace}/{servicenam ...
使用Vagrant创建CentOS虚拟机
使用Vagrant创建CentOS虚拟机 Vagrant是一款由HashiCorp公司提供的,用于快速构建虚拟机环境的软件.本节我们将使用Vagrant结合Oracle VM VirtualBox快速 ...
Sealos 5.0 正式发布，云本应该是操作系统
把所有资源抽象成一个整体,一切皆应用,这才是云应该有的样子. 2018 年 8 月 15 日 Sealos 提交了第一行代码. 随后开源社区以每年翻倍的速度高速增长. 2022 年我们正式创业,经历一 ...
R 语言入门学习笔记：软件安装踩坑记录——删除所有包以及彻底解决库包被安装到 C 盘用户目录下的问题，以及一些其他需要注意的点
目录 R 语言入门学习笔记:软件安装踩坑记录--删除所有包以及彻底解决库包被安装到 C 盘用户目录下的问题,以及一些其他需要注意的点软件版本及环境遇到的问题描述问题的分析和探究最终的解决方案 ...
Java面试知识点（四）重写和重载
重写override 在 java 中有很多的继承,继承下来的有变量.方法.在有一些子类要实现的方法中,方法名.传的参数.返回值跟父类中的方法一样,但具体实现又跟父类的不一样,这时候我们就需要重写父类 ...
高通Android UEFI中的LCD分析（2）：关键的函数
# 高通Android UEFI中的LCD分析(2):关键的函数背景在启动流程分析中,看到了几个经常出现的函数,这里实际分析一下有关的实现.以搞清楚高通做了什么,以及我们能做什么. 重要函数 MD ...
《HelloGitHub》第 99 期
兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣.入门级的开源项目. github.com/521xueweihan/HelloG ...
全国产！瑞芯微RK3568J/RK3568B2工业核心板规格书
核心板简介创龙科技SOM-TL3568是一款基于瑞芯微RK3568J/RK3568B2处理器设计的四核ARM Cortex-A55全国产工业核心板,每核主频高达1.8GHz/2.0GHz.核心板CP ...