黑马学习记录--vue v-cloak,v-text,v-html,v-bind,v-on的基本使用

向右看齐 2022-03-20 11:40 137阅读 0赞

## 1.v-cloak ##

使用 v-cloak 防止页面加载时出现 vuejs 的变量名

HTML 绑定 Vue实例，在页面加载时会闪烁  
![在这里插入图片描述][20190212163729432.png]  
v-cloak 可以解决这一问题，在 css 中加上

[v-cloak] {
      display: none;
    }

这段 CSS 的含义是，包含 v-cloak (cloak n. 披风，斗篷；vt. 遮盖，掩盖) 属性的 html 标签在页面初始化时会被隐藏。

**Vue1.x 与 Vue2 中 v-cloak 的不同**  
Vue1 中，允许将 Vue 实例挂载在 body 上，而 Vue2 是不允许的，想对整个页面实例化，需要另外用一个 div 来容纳整个页面内容，对其进行实例化

这样在使用 v-cloak 时，同样需要用到这种方法

**为什么我用的 v-cloak 无效？**  
在实际项目中，我们常通过 @import 来加载 css 文件

@import "style.css"
    @import "index.css"

而 @import 是在页面 DOM 完全载入后才会进行加载，如果我们将 \[v-cloak\] 写在 @import 加载的 css 文件中，就会导致页面仍旧闪烁。

为了避免这种情况，我们可以将 \[v-cloak\] 写在 link 引入的 css 中，或者写一个内联 css 样式，这样就得到了解决。

## 2.v-text ##

`<p v-cloak> { { msg }} </p>`输出的内容和`<h4 v-text="msg"></h4>`  
是一样的，但是后者不会有闪烁问题

该代码浏览器会先显示 ==================，页面加载完成后会显示msg所代表的内容，也就是说v-text会覆盖元素中原本的内容

**但以下代码不同**

![在这里插入图片描述][20190212165340413.png]  
插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空

## 3.v-html ##

当vue实例data里面有HTML格式的代码时

data: {
            msg: '123',
            msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>'
          }

我们不想把msg2像msg一样当成字符串输出，那么就用v-html

div标签之间也可以写入文本，和v-text一样，加载完毕后msg2所表示的东西会替代该文本。

## 4.v-bind ##

vue实例中

data: {
            msg: '123',
            msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>',
            mytitle: '这是一个自己定义的title'
          }

下面第一行代码，在网页中鼠标移动到按钮时会显示**123**，  
第二三行代码，会显示 **这是一个自己定义的title123**，这里用了v-bind

<input type="button" value="按钮" title="123">
    <input type="button" value="按钮" v-bind:title="mytitle + '123'">
    <input type="button" value="按钮" :title="mytitle + '123'">  和上一行是等价的

## 5.v-on ##

<input type="button" value="按钮" :title="mytitle + '123'" v-on:click="alert('hello')">

点击会弹出一个hello的对话框

vue实例中

methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
            show: function () {
              alert('Hello')
            }
          }

上述方式也可以实现，这样就可以不用像下面一样操作DOM来实现了

document.getElementById('btn').onclick = function(){
          alert('Hello')

完整代码

<!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">
        
        <p v-cloak>++++++++ {
       { msg }} ----------</p>
        <h4 v-text="msg">==================</h4>
        
        
    
        <div>{
       {msg2}}</div>
        <div v-text="msg2"></div>
        <div v-html="msg2">1212112</div>
    
        
        
        
        
    
        
         <input type="button" value="按钮" :title="mytitle + '123'" v-on:click="alert('hello')"> 
    
    
       
      </div>
    
    
      <script src="./lib/vue-2.4.0.js"></script>
    
      <script>
        var vm = new Vue({
          el: '#app',
          data: {
            msg: '123',
            msg2: '<h1>哈哈，我是一个大大的H1， 我大，我骄傲</h1>',
            mytitle: '这是一个自己定义的title'
          },
          methods: { // 这个 methods属性中定义了当前Vue实例所有可用的方法
            show: function () {
              alert('Hello')
            }
          }
        })
    
    
        /* document.getElementById('btn').onclick = function(){
          alert('Hello')
        } */
      </script>
    </body>
    
    </html>

[20190212163729432.png]: /images/20220320/217ba642ac31468891b45e7b4230749f.png
[20190212165340413.png]: /images/20220320/3a658584c9a94f9ebd1d7b3f4bf5d298.png