关注我

    我的微信
在线咨询 x
在线咨询
有什么可以帮到你
点击咨询

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

简介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>