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

随机推荐

23201826-熊锋-第二次blog
一.前言这三次pta作业第一次为答题判断程序-4,这是答题判断程序的第三次迭代,相较于答题判断三,新增了各种题型及其不同种类的答案,并且出现多选题,使得这次题目相当棘手,具有很大的挑战性.第二次为家 ...
INFINI Gateway 与华为鲲鹏完成产品兼容互认证
何为华为鲲鹏认证华为鲲鹏认证是华为云围绕鲲鹏云服务(含公有云.私有云.混合云.桌面云)推出的一项合作伙伴计划,旨在为构建持续发展.合作共赢的鲲鹏生态圈,通过整合华为的技术.品牌资源,与合作伙伴共享商 ...
推荐一个vs Nuget部署插件
写在前面 nuget部署工具, 无论是直接用web上传还是用命令行工具上传,还是其他第三方工具我都没找到满意,直到那天在群里提了一下,有位大佬说了个NuPackvs插件,用了下,感觉基本满足了我的需求 ...
docker中安装数据库mariadb
背景一般情况下,我们直接拉取mysql的镜像即可.但是如果需要在centos的镜像里安装并启动mysql,那么这篇文章将会给你帮助. 既然可以在容器中安装mysql,本教程同样适用于CentOS中. ...
记录一下第一次webSocket通信成功
webSocket前端代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
『vulnhub系列』doubletrouble-1
『vulnhub系列』doubletrouble-1 下载地址 https://www.vulnhub.com/entry/doubletrouble-1,743/ 信息搜集使用命令,获得存活靶机I ...
攻防世界——CRYPTO新手练习区解题总结<1>(1-4题)
第一题base64: 下载附件,得到一个txt文件,打开得到一串乱码,由题目可知,是base64,解码得到flag 第二题Caesar: 下载附件得到乱码 oknqdbqmoq{kag_tmhq_x ...
基于RK3588的NPU案例分享！6T是真的强！
RK3588 NPU简介作为瑞芯微新一代旗舰工业处理器,RK3588 NPU性能可谓十分强大,6TOPS设计能够实现高效的神经网络推理计算.这使得RK3588在图像识别.语音识别.自然语言处理等人工 ...
Mac下Eclipse打不开了怎么办
其实这个问题能搜到很多答案,但是对我有效的只有下面这一种. 背景我需要使用到Eclipse,就下载了它的特定版本,用于开发RAP的. 连续两次都是使用后关闭,就再也打不开了. 选定的解决方案试了好 ...
MySql常用日期时间查询
-- 某一天所在周的第一天: -- 我们知道国外的星期的第一天是从星期天开始的,所以DAYOFWEEK('2017-3-10')函数的第一天是星期天: SELECT CASE WHEN DAYNAME ...