开发者社区> 流楚丶格念> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Vue指令学习文档(上)

简介: Vue指令学习文档
+关注继续查看

Vue指令


插值表达式


插值表达式语法:{{content}}


使用时请注意以下几点:


  • 插值表达式是vue框架提供的指令


  • 插值表达式中 不可以写代码片段 会报错


  • 属性节点中不能使用插值表达式,如果要为元素节点动态绑定数据,我们要用v-bind动态绑定属性


Vue基本指令


  1. v-text v-text会覆盖元素中原本的内容, Vue中默认 v-text 是没有闪烁问题的


  1. v-cloak Vue提供 v-cloak 能够解决 插值表达式闪烁的问题


  1. v-html 覆盖元素的内容


  1. v-bind Vue提供的属性绑定机制 缩写是 :


  1. v-on Vue提供的事件绑定机制 缩写是 @


Vue指令之v-bind的三种用法


  1. 直接使用指令v-bind


  1. 使用简化指令:


  1. 在绑定的时候,拼接绑定内容::title="btnTitle + ', 这是追加的内容'"


Vue指令使用综合案例


image


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    [v-cloak] {
      /* display: none; */
    }
  </style>
</head>

<body>
  <div id="app">
    <!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题 -->
    <p v-cloak>------------ {{ msg }} ----------</p>
    <h1 v-text="msg">==================</h4>
    <!-- 默认 v-text 是没有闪烁问题的 -->
    <!-- v-text会覆盖元素中原本的内容,但是 插值表达式  只会替换自己的这个占位符,不会把 整个元素的内容清空 -->

    <div>{{msg2}}</div>
    <div v-text="msg2"></div>
    <div v-html="msg2">这个内容不会显示的</div>

    <!-- v-bind: 是 Vue中,提供的用于绑定属性的指令 -->
    <!-- <input type="button" value="按钮" v-bind:title="mytitle + '123'"> -->
    <!-- 注意: v-bind: 指令可以被简写为 :要绑定的属性 -->
    <!-- v-bind 中,可以写合法的JS表达式 -->

    <!-- Vue 中提供了 v-on: 事件绑定机制 -->
    <input type="button" value="按钮" :title="mytitle + '  新加到title中的内容'" v-on:click="alert('hello')">

    <input type="button" value="按钮" @click="show">
  </div>


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

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '数据消息',
        msg2: '<h1>我是一个可爱的 h1 </h1>',
        mytitle: '这是一个自己定义的title'
      },
      methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
        show: function () {
          alert('Hello')
        }
      }
    })
    /* 上面的vue函数就相当于下面的DOM操作 */
    /* document.getElementById('btn').onclick = function(){
      alert('Hello')
    } */
  </script>
</body>

</html>


Vue指令之v-on和跑马灯效果


v-on


v-on 指令,它用于监听 DOM 事件。v-on缩写为‘ @ ’


    <!-- 完整语法 -->
    <view v-on:click="doSomething">点击</view>    
    <!-- 缩写 -->
    <view @click="doSomething">点击</view>


跑马灯效果


image


  1. HTML结构:


<div id="app">
    <p>{{info}}</p>
    <input type="button" value="开启" v-on:click="go">
    <input type="button" value="停止" v-on:click="stop">
</div>


  1. Vue实例:


// 创建 Vue 实例,得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {
    info: '猥琐发育,别浪~!',
    intervalId: null
  },
  methods: {
    go() {
      // 如果当前有定时器在运行,则直接return
      if (this.intervalId != null) {
        return;
      }
      // 开始定时器
      this.intervalId = setInterval(() => {
        this.info = this.info.substring(1) + this.info.substring(0, 1);
      }, 500);
    },
    stop() {
      clearInterval(this.intervalId);
    }
  }
});


跑马灯完整代码


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- 1. 导入Vue包 -->
  <script src="./lib/vue-2.4.0.js"></script>
  <style>
    #app {
      width: 100%;
      height: 200px;
      font-size: 120px;
    }
    #app h4 {
       background-color: pink;
    }
    input {
      width: 20%;
      height: 40px;
    }
  </style>
</head>

<body>
  <!-- 2. 创建一个要控制的区域 -->
  <div id="app">
    <input type="button" value="浪起来" @click="lang">
    <input type="button" value="猥琐一点" @click="stop">
    <h4>{{ msg }}</h4>

  </div>

  <script>
    // 注意:在 VM实例中,如果想要获取 data 上的数据,或者 想要调用 methods 中的 方法,必须通过 this.数据属性名  或  this.方法名 来进行访问,这里的this,就表示 我们 new 出来的  VM 实例对象
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '猥琐发育,别浪~~!',
        intervalId: null // 在data上定义 定时器Id
      },
      methods: {
        lang() {
          // console.log(this.msg)
          // 获取到头的第一个字符
          // this

          if (this.intervalId != null) return;

          this.intervalId = setInterval(() => {
            var start = this.msg.substring(0, 1)
            // 获取到 后面的所有字符
            var end = this.msg.substring(1)
            // 重新拼接得到新的字符串,并赋值给 this.msg
            this.msg = end + start
          }, 400)

          // 注意: VM实例,会监听自己身上 data 中所有数据的改变,只要数据一发生变化,就会自动把 最新的数据,从data 上同步到页面中去
        },
        stop() { // 停止定时器
          clearInterval(this.intervalId)
          // 每当清除了定时器之后,需要重新把 intervalId 置为 null
          this.intervalId = null;
        }
      }
    })


    // 跑马灯分析:
    // 1. 给 【浪起来】 按钮,绑定一个点击事件   v-on   @
    // 2. 在按钮的事件处理函数中,写相关的业务逻辑代码:拿到 msg 字符串,然后 调用 字符串的 substring 来进行字符串的截取操作,把 第一个字符截取出来,放到最后一个位置即可;
    // 3. 为了实现点击下按钮,自动截取的功能,需要把 2 步骤中的代码,放到一个定时器中去;
  </script>
</body>

</html>


Vue指令之v-on的缩写和事件修饰符


事件修饰符


  • .stop 阻止冒泡


  • .prevent 阻止默认事件


  • .capture 添加事件侦听器时使用事件捕获模式


  • .self 只当事件在该元素本身(比如不是子元素)触发时触发回调


  • .once 事件只触发一次


事件修饰符使用案例



image


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <style>
    .inner {
      height: 150px;
      background-color: darkcyan;
    }
    .inner input {
      height: 100px;
      font-size: 50px;
    }
    .outer {
      padding: 40px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="app">

    <!-- 使用  .stop  阻止冒泡 -->
    <div class="inner" @click="div1Handler">
      <input type="button" value="阻止冒泡 戳他" @click.stop="btnHandler">
    </div>

    <!-- 使用 .prevent 阻止默认行为 -->
    <a href="http://www.baidu.com" @click="linkClick">有问题,先去百度   ←-------阻止默认行为 </a>

    <!-- 使用  .capture 实现捕获触发事件的机制 -->
    <div class="inner" @click.capture="div1Handler">
      <input type="button" value="捕获触发事件 戳他" @click="btnHandler">
    </div>

    <!-- 使用 .self 实现只有点击当前元素时候,才会触发事件处理函数 -->
    <div class="inner" @click="div1Handler">
      <input type="button" value="点击当前元素时候,才会触发事件处理函数 戳他" @click="btnHandler">
    </div>

    <!-- 使用 .once 只触发一次事件处理函数 -->
    <a href="http://www.baidu.com" @click.prevent.once="linkClick" >有问题,先去百度  ←--------只触发一次事件处理函数</a>


    <!-- 演示: .stop 和 .self 的区别 -->
    <!-- <div class="outer" @click="div2Handler">
      <div class="inner" @click="div1Handler">
        <input type="button" value="戳他" @click.stop="btnHandler">
      </div>
    </div> -->

    <!-- .self 只会阻止自己身上冒泡行为的触发,并不会真正阻止 冒泡的行为 -->
    <!-- <div class="outer" @click="div2Handler">
      <div class="inner" @click.self="div1Handler">
        <input type="button" value="戳他" @click="btnHandler">
      </div>
    </div> -->

  </div>

  <script>
    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        div1Handler() {
          console.log('这是触发了 inner div 的点击事件')
        },
        btnHandler() {
          console.log('这是触发了 btn 按钮 的点击事件')
        },
        linkClick() {
          console.log('触发了连接的点击事件')
        },
        div2Handler() {
          console.log('这是触发了 outer div 的点击事件')
        }
      }
    });
  </script>
</body>

</html>



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
C++学习——继承与派生
C++学习——继承与派生
13 0
vue指令-6
v-html 指令用于更新元素的 innerHTML,该部分内容作为普通的 HTML 代码插入,不会作为 vue 模板进行编译
16 0
Vue基本指令 (上)
Vue基本指令 (上)
13 0
Vue常用的几个指令
越来越多的人在用Vue,刚开始接触vue的话常接触的指令就几个,统一归纳一下,做个demo演示。 指令 v-text v-html v-bind v-on v-model v-for 代码 学习技术最好还是要看下代码是什么样的。
4286 0
照着官方文档学习react
不晓得啥情况,markdown在csdn识别错误?排版后面的代码被破坏了,正确的排版:https://ryan-miao.github.io/2017/08/03/react-tutorial-1/ 笨人学习法 10000个小时策略来学习,因为笨。
884 0
【DB2学习文档之一】初步安装
作者:gnuhpc 出处:http://www.cnblogs.com/gnuhpc/ 1.以本地语言显示 db2setup 命令 db2setup 命令用于查询操作系统以确定现有的语言设置。
983 0
【DB2学习文档之三】安装后的初步配置
作者:gnuhpc 出处:http://www.cnblogs.com/gnuhpc/ 1.更新节点配置文件(Linux 和 UNIX) 节点配置文件(db2nodes.cfg)位于实例所有者的主目录中,它包含一些配置信息,告诉 DB2有哪些服务器参与分区数据库环境的实例。
854 0
+关注
流楚丶格念
csdn平台优质创作者,51cto TOP博主,360图书馆科技博主,燕山大学目前大三在读,日拱一卒,功不唐捐,加油!!!
1010
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载