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

随机推荐

(性能测试)--记录一次高可用场景导致CPU资源升高
测试场景:高可用场景--限流测试: 被测交易:查询类交易,HTTP协议: 交易链路:jmeter - web - coimpre(前置服务) -- coimbp -- cobp (coimbp .co ...
C# JAVA UrlEncode
C# JAVA urlencode 默认是不兼容的.C# 需要encode的部分是小写.JAVA 需要encode的部分是大写. /// <summary> /// java UrlEn ...
安装nodejs易遇到的坑
@ 目录背景描述流程步骤小结背景描述我的服务器是centos7.9,打算先直接通过yum安装,但是yum不能指定node版本,我直接指定显示404找不到,然后我设置了下node下载的源,还是 ...
又跳槽！3年java经验offer收割机的面试心得
中厂->阿里->字节,成都->杭州->成都系列文章目录和关于我 0.前言笔者在不足两年经验的时候从成都一家金融科技中厂跳槽到杭州阿里淘天集团,又于今年5月份从杭州淘天跳槽到 ...
15分钟面试被5连CALL，你扛得住么？
最近一个朋友跳槽找工作,跟V 哥说被15分钟内一个问题5连 CALL,还好是自己比较熟悉的技术点,面试官最后跟他说,面了几十个人,你是第一个回答比较满意的,我好奇都是什么问题,原来是关于锁的问题连环问 ...
C语言自动编译执行脚本
C语言自动编译执行脚本在Linux上面用命令行写一些简单的C语言程序,总是遇到一个问题,代码写完后要先编译后运行,而且编译生成的可执行文件默认还是a.out,自己去加参数去改有觉得十分麻烦,所以干脆 ...
mysql语句大全-工作中常用整理（欢迎大家在评论区继续补充）
1.NOT EXISTS 和 NOT IN SELECT COUNT(ca.aaa) FROM xx ca WHERE NOT EXISTS( SELECT label.* FROM xxx labe ...
手把手教你解决spring boot导入swagger2版本冲突问题，刘老师教编程
手把手教你解决spring boot导入swagger2版本冲突问题本文仅为个人理解,欢迎大家批评指错首先Spring Boot 3 和 Swagger 2 不兼容.在 Spring Boot 3 ...
对于 vue3.0 特性你有什么了解的吗？
Vue 3.0 的目标是让 Vue 核心变得更小.更快.更强大,因此 Vue 3.0 增加以下这些新特性: (1)监测机制的改变3.0 将带来基于代理 Proxy 的 observer 实现,提供全语 ...
Vue 怎么用 vm.$set() 解决对象新增属性不能响应的问题？
受现代 JavaScript 的限制 ,Vue 无法检测到对象属性的添加或删除.由于 Vue 会在初始化实例时对属性执行 getter/setter 转化,所以属性必须在 data 对象上存在才能让 ...