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 指令的更多相关文章

  1. vue2,vue指令和选项

    vue特点 mvvm框架 响应式(声明式) 组件化(支持自定义组件) 丰富的指令(Dom功能的抽象) 基于选项(template,data,computed,watch,methods) vue文档集 ...

  2. Vue2自定义指令改变DOM值后未刷新data中绑定属性的值

    标签(空格分隔): Vue 自定义指令用于过滤输入框,只允许输入数字: Vue.directive('numberOnly', { bind: function (el, binding) { el. ...

  3. vue2自定义指令-加载指令v-loading和占位图指令v-showimg

    了解自定义指令的钩子函数 bind(){}:每当指令绑定到元素上的时候,就会立刻执行bind这个函数.只调用一次. 和css相关的操作,可以放在这个钩子函数中. inserted(){}:元素插入到D ...

  4. 【转】Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)

    前言 文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么! 有三类人不适合此篇文章: “喜欢站在道德制高点的圣母婊” – 适合去教堂 “无理 ...

  5. Android热修复技术总结

    https://blog.csdn.net/xiangzhihong8/article/details/77718004 插件化和热修复技术是Android开发中比较高级的知识点,是中级开发人员通向高 ...

  6. Vue 常见问题汇总

    Q:我给组件内的原生控件添加事件,怎么不生效了!!! <!--比如用了第三方框架,或者一些封装的内置组件; 然后想绑定事件--> <!--// 错误例子1--> <el- ...

  7. Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)

    前言 发现群里有些问题的提问重复率太高了,每次都去回答,回答的贼烦.这里做一个大体的汇总,废话不多说,直接开始给出方案,不是手把手..若是连问题和解决都看不懂的..应该去补充下基础知识 问题汇总 Q: ...

  8. Vue 脱坑记

    问题汇总 Q:安装超时(install timeout) 方案有这么些: cnpm : 国内对npm的镜像版本 /* cnpm website: https://npm.taobao.org/ */ ...

  9. Vue2.0的变化 ，组件模板，生命周期，循环，自定义键盘指令，过滤器

    组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...

  10. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

随机推荐

  1. css 跑马灯

    html: <view class="in_scro"> <view class="in_scrview">恭喜139******1用户 ...

  2. .NET C#程序启动闪退，在安装或者程序文件下能正常运行，但通过路径却无法运行

    .NET C#程序启动闪退,目录导致的问题 这是第2次踩这个坑了,很小的编程细节,容易忽略,所以写个博客,分享给大家. 1.第一次坑:是windows 系统把程序运行成服务,找不到配置文件,原因是以服 ...

  3. Git简介以及下载安装和配置

    什么是版本控制? ​ 版本控制是指对软件开发过程中各种程序代码,控制文件及说明文档等文件变更的管理,是软件配置管理的核心思想之一 ​ 版本控制最主要的功能就是追踪文件的变更.它将什么时候.什么人更改了 ...

  4. CF914C

    problem & blog 数位 dp 模板题. 经过一次操作,可以把 \(n\) 变成一个小于 \(10^3\) 的数. 所以我们可以把所有小于 \(10^3\) 的数操作的次数全部处理出 ...

  5. JavaScript防抖与节流笔记

    JavaScript防抖与节流 概念 防抖(debounce)与节流(throttle)是两个相似但有本质区别的两个概念,但两个概念的存在都是为了控制在特定条件下函数最大的执行次数.这在例如将函数执行 ...

  6. 面试官：为什么重写equals方法必须要重新hashCode方法？

    网络上解释的很全面但是很枯涩,也有些难懂,其实就是为了保证当该对象作为key时哈希表的检索效率.如HashMap的get方法是分两步获取的 第一步通过key的哈希值找到对应的哈希桶 第二步通过equa ...

  7. Libgdx游戏开发(4)——显示中文文字

    原文: Libgdx游戏开发(4)--显示中文文字-Stars-One的杂货小窝 本文代码示例采用kotlin代码进行讲解,且需要有libgdx入门基础 这里主要介绍关于在Libgdx显示文字的2种方 ...

  8. 文件系统(八)：Linux JFFS2文件系统工作原理、优势与局限

    liwen01 2024.06.23 前言 在嵌入式Linux设备中,经常使用jffs2文件系统来作为参数区的文件系统格式.至于为什么要使用jffs2来作为参数区的文件系统,我猜大部分人都没有做过多的 ...

  9. ASP.NET Core使用Hangfire定时发布文章

    ASP.NET Core使用Hangfire实现定时任务 前言 也是上了5天班,终于迎来了休息,抽空更新下博客,然后就是下周一公司会对我进行考核,希望考核能通过吧!!! 然后我想给博客添加一个定时发布 ...

  10. Qt 之 emit、signals、slot的使用

    背景 ref : https://www.ibm.com/developerworks/cn/linux/guitoolkit/qt/signal-slot/index.html 信号和槽机制是 QT ...