vue中的一些标签指令

April 16, 2020

1692 views

2519 words

mustache语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../js/vue.js"></script>
    <!--现在可以这样写div中的内容了-->
    <div id="app">
        <h2>{{message}}</h2>
        <h2>{{message}},one</h2>
        <h2>{{firstName + " "+lastName}}</h2>
        <!--mustache语法中不仅可以直接写变量，也可以写简单的表达式-->
        <h2>{{firstName}} {{lastName}}</h2>
        <h2>{{content*2}}</h2>
    </div>
    <script>
        //编程范式：声明式
        const app = new Vue({
            el: '#app', //用于挂载要管理的元素
            data: { //定义数据
                message: 'helloWorld！',
                firstName:'阿尔托莉雅',
                lastName:'潘德拉贡',
                content:100
            }
        });
    </script>
</body>
</html>

v-once的使用
这个指令只会展示第一次message的属性，当后续属性发生改变时，不会跟着改变，这个指令后面没有表达式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../js/vue.js"></script>
    
    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-once>{{message}}</h2>
    </div>
    <script>
    const app = new Vue({
    el: '#app',
    data: { 
        message: 'hellWorld！'
     }
  });
   //这时修改message，但是第二个h2并没有改变
    app.message="xxxxx";
    </script>
</body>
</html>

v-html的使用
这个指令可以直接把字符串里的html代码解析展示出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../js/vue.js"></script>
    
    <div id="app">
        <h2>{{url}}</h2>
        <h2 v-html="url"></h2>
    </div>
    <script>
    const app = new Vue({
    el: '#app',
    data: { 
        message: 'helloWorld！',
        url:'<a href="https://www.baidu.com">百度一下</a>'
    }
    });
    </script>
</body>
</html>

结果如下：

v-text的使用
这个指令和mustache作用一样，但是不够灵活。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../js/vue.js"></script>
    
    <div id="app">
        <h2>{{message}}</h2>
        <!--这个指令和mustache作用一样，但是不够灵活-->
        <h2 v-text="message"></h2>
    </div>
    <script>
    const app = new Vue({
    el: '#app',
    data: { 
      message: 'helloWorld！'
    }
    });
    </script>

</body>
</html>

v-pre的使用
用于跳过这个元素和它子元素的编译过程。
这个指令可以直接将标签中的文本代码不解析直接输出。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="../js/vue.js"></script>
    
    <div id="app">
        <h2>{{message}}</h2>
        <!--这个指令可以直接将标签中的文本代码不解析直接输出-->
        <h2 v-pre>{{message}}</h2>
    </div>
    <script>
    const app = new Vue({
    el: '#app',
    data: { 
    message: 'helloWorld！'
    }
    });
    </script>
</body>
</html>

v-cloak的使用
v-cloak这个指令会在js执行后被删除，有时如果发生js加载卡顿，这下面代码中h2中就会先显现出{{message}}变量名，等js加载后后才会正常显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak]{
            display:none;
        }
    </style>
</head>
<body>
    <script src="../js/vue.js"></script>
    
    <div id="app">
        <h2 v-cloak>{{message}}</h2>
    </div>
    <script>
        //设置个延时函数来模拟js出现加载迟缓
        setTimeout(function(){
            const app = new Vue({
              el: '#app',
              data: { 
               message: 'helloWorld！'
            }
            })
        },1000);
    
    </script>
</body>
</html>

这样加载乱码会给用户带来一种不好的体验，所以我们可以通过这个属性来设置一些样式，js代码加载完成前，让内容隐藏，等加载完成后这个属性被去除，则内容就会正常显示了。