文章分类

关注我

友情链接

杨青个人博客

在线咨询 x

有什么可以帮到你

点击咨询

Vue学习笔记（2） —— v-cloak、v-text、v-html、插值表达式{{}}、v-bind、v-on的学习

作者：王浩铭
分类：WEB前端
时间：2020-10-01
共552人围观

简介Vue中的几个常用命令，v-cloak、v-text、v-html、插值表达式{{}}、v-bind、v-on 的学习

Vue官方对应文档：API——Vue.js

一、v-cloak 指令

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。

在简单项目中，使用 v-cloak 指令是解决屏幕闪动的好方法。但在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令。

二、v-text指令和v-html指令

1、v-text指令，用于渲染普通文本，无论何时，绑定的数据对象上 msg属性发生了改变，插值处的内容都会更新。

2、v-html指令，如果你想输出真正的 HTML，你需要使用 v-html指令，v-text仅渲染标签，不能解析 HTML 代码标签。

3、v-text指令和{{}}表达式渲染数据，不解析HTML标签。

4、v-html指令不仅可以渲染数据，而且可以解析HTML标签。　

三、插值表达式{{}}

主要作用是进行数据绑定，最常见的形式是使用“Mustache”语法（双大括号）的文本插值。例如：<span>Message:{{msg}}</span>Mustache标签将会被替代为对应数据对象上msg属性（msg定义在data对象中）的值。无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。

插值表达式{{}}对JavaScript表达式支持

{{number + 1}}
{{ok===true ? 'yes' : 'no'}}
{{message.split('').reverse().join('')}}

四、v-bind指令

v-bind用于绑定数据和元素属性（如href属性和class属性等等）

v-bind指令由于使用频繁，通常将v-bind:属性名=" "的格式简写成 :属性名=" "

v-bind 的三种用法

1、直接使用指令v-bind

2、使用简化指令 :

3、在绑定的时候，拼接绑定内容：:title="btnTitle + ', 这是追加的内容'"

五、v-on指令

v-on指令就是用于绑定事件的（如有个按钮，我想点击的时候执行一些操作）

v-on:事件名可以简写为 @事件名

注意：后面的值是一个方法，可以写成myclick()，如没有参数也可以写成myclick。另外这种事件对应的方法不是定义在data里面，而是定义在vue实例的methods里

v-on指令的主要几种使用情况

一、直接绑定事件

@事件名="方法" => @click="onClick"
   methods:{
       onClick:function(){
          console.log('onClick')
       }
   }
        

二、绑定事件类

v-on="{事件:方法}" => v-on="{mouseenter:onEnter,mouseout:onOut}"
   methods:{
       onEnter:function(){
           console.log("onEnter")
       },
           onOut:function(){
           console.log("onOut")
       }
   }
   
         
三、阻止默认形为（提交时刷新）

v-on:事件="方法($event)" =>  @submit="onSubmit($event)"
      methods:{
          onSubmit:function(e){
             e.preventDefault();
             console.log("onSubmit")
          }
      }

            
四、阻止默认形为二（提交时刷新）

v-on:事件.行为="方法" => @submit.prevent="onSubmit2"
                                           //  @submit.stop="onSubmit2"
    methods:{
        onSubmit2:function(){
          console.log("onSubmit2")
        }
    }
    
        
五、键盘事件（最好配合阻止默认行为一起使用）

v-on:事件.键值="方法" => @keyup.enter="onEnter"
    methods:{
      onKeyup:function(){
          console.log("onKeyup")
      }
    }

五、v-cloak、v-text、v-html、插值表达式{{}}、v-bind、v-on的示例代码

<!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>v-cloak、v-text、v-html、插值表达式{{}}、v-bind、v-on的学习</title>
  针对 v-cloak 指令 的样式
  [v-cloak]{
  display: none;
  }
</head>

<body>
  <div id="app">

    <!-- 1. 如何定义一个基本的Vue代码结构 -->
    <!-- 2. 插值表达式 和  v-text   -->
    <!-- 3. v-cloak -->
    <!-- 4. v-html -->
    <!-- 5. v-bind   Vue提供的属性绑定机制   缩写是 : -->
    <!-- 6. v-on     Vue提供的事件绑定机制   缩写是 @ -->

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

    <div>{{msg_h1}}</div>
    <div v-text="msg_h1"></div>
    <div v-html="msg_h1">1212112</div>

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

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


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


  <script src="https://www.whmblog.cn/static/js/lib/vue-2.4.0.js"></script>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '123',
        msg_h1: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>',
        mytitle: '这是一个自己定义的title'
      },
      methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
        alert: function (alert_msg) {
          alert(alert_msg)
        },
        show: function () {
          alert('Hello')
        }
      }
    })
  </script>
</body>

</html>

上一篇：Vue学习笔记（1） —— 为什么要学习Vue ？

下一篇：Vue学习笔记（3） —— Vue事件修饰符