Vue中的指令总结

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7 </head>
 8 <body>
 9     <div id="app">
10         <ul>
11             <li v-once>{{message}}</li>
12         </ul>
13     </div>

1   <script src="../js/vue.js"></script>
2     <script>
3         const app = new Vue({
4             el:"#app",
5             data:{
6                 message:'你好呀',
7             }
8         })
9     </script>

v-once:作用：当加上v-once之后DOm中的message的值就是data中得message的初始值；也就说DOM中的message不会随着data中message的值变化而发生变化

2.v-HTML的使用：

作用：将服务器传回来的标签展示到界面；而不是标签本身

用法：请看下面例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id="app">
        <ul>
            <li v-html = "url"></li>
        </ul>
    </div>

 <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:'你好呀',
                url:"<a href = "http://www.baidu,com">百度一下</a>"
            }
        })
    </script>

3.v-text的使用:

v-text作用和Mustache比较相似；都是用于将数据显示在页面当中

v-text通常情况在，接受一个string类型

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 
 7 </head>
 8 <body>
 9     <div id="app">
10         <ul>
11             <li  v-text = "message"></li>
12         </ul>
13     </div>

 <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:'你好呀',
            }
        })
    </script>

4.v-pre用法：

作用：v-pre用于跳过这个元素和他子元素的编译过程，不做任何改变，标签中间是什么就显示什么

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id="app">
        <h2>{{message}}</h2>  //将data中的数据显示出来
        <h2 v-pre>{{message}}</h2> //将标签之间的东西原封不动的显示出来；不做任何改变，标签中间是什么就显示什么
    </div>

<script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{
                message:'你好呀',
            }
        })
    </script>