Vue指令学习文档

清河大善人

于 2021-03-09 17:48:26 发布

阅读量4.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # Vue.js 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45525272/article/details/114591006

文章目录

Vue指令

Vue指令

插值表达式

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

使用时请注意以下几点：

插值表达式是vue框架提供的指令
插值表达式中不可以写代码片段会报错
属性节点中不能使用插值表达式，如果要为元素节点动态绑定数据，我们要用v-bind动态绑定属性

Vue基本指令

v-text v-text会覆盖元素中原本的内容， Vue中默认 v-text 是没有闪烁问题的
v-cloak Vue提供 v-cloak 能够解决插值表达式闪烁的问题
v-html 覆盖元素的内容
v-bind Vue提供的属性绑定机制缩写是 :
v-on Vue提供的事件绑定机制缩写是 @

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

直接使用指令v-bind
使用简化指令:
在绑定的时候，拼接绑定内容：:title="btnTitle + ', 这是追加的内容'"

Vue指令使用综合案例

在这里插入图片描述

<!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>

跑马灯效果

在这里插入图片描述

HTML结构：

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

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

最低0.47元/天解锁文章

200万优质内容无限畅学

Vue指令学习文档

文章目录

Vue指令

插值表达式

Vue基本指令

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

Vue指令使用综合案例

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

v-on

跑马灯效果

跑马灯完整代码

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

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