vue指令总结

 1 <div id="box">
 2     <ul>
 3         <!--ng-repeat-->
 4         <li v-for="item in arr">
 5             <span>{{item.name}}</span>
 6             <span>{{item.age}}</span>
 7         </li>
 8     </ul>
 9 </div>
10 <script type="text/javascript">
11     new Vue({
12         el:‘#box‘,
13         data(){
14             return{
15 //                arr:[‘module‘,‘views‘,‘controlle‘,‘aaaaa‘]
16                 arr:[
17                     {"name":"xiaohong1","age":12},
18                     {"name":"xiaohong2","age":12},
19                     {"name":"xiaohong3","age":12},
20                     {"name":"xiaohong4","age":12}
21                 ]
22             }
23         }
24     })
25 </script>

<div id="box">
    <div style="width: 100px;height: 100px;background: black;display: none" v-show="show"></div>
</div>
</body>
<script>
    new Vue({
        el: "#box",
        data(){
            return {
                show: true
            }
        }
    })
</script>

<div id="box">
    <div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {
                show: true
            }
        }
    })
</script>

<div id="box">
    <div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
    <div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {
                show: true
            }
        }
    })
</script>

<div id="box">
    <div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
    <div style="width: 100px;height: 100px;background: aqua;" v-else-if=""></div>
    <div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div>



<script>
    new Vue({
        el: "#box",
        data(){
            return {
                show: true
            }
        }
    })
</script>

<div id="box">
    <input type="text" v-bind:value="msg">
    <a :href="link">点击</a>
</div>
<script>
    new Vue({
        el: "#box",
        data(){
            return {
                msg: "12222",
                link:"1、v-model.html"
            }
        }
    })
</script>

<div id="box">
    <!-- v-on -->
    <button v-on:click="say">按钮</button>
    <!--<button @click="say">按钮</button>-->
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {}
        },
        methods: {
            say() {
                alert(111);
            }
        }
    })
</script>

 1 <div id="box">
 2     <div v-text="msg"></div>
 3 </div>
 4 
 5 <script>
 6     new Vue({
 7         el: "#box",
 8         data(){
 9             return {
10                 msg:"11111"
11             }
12         },
13         methods: {
14             say() {
15                 alert(111);
16             }
17         }
18     })
19 </script>

<div id="box">
    <div v-html="msg"></div>
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {
                msg:"<h1>121212</h1>"
            }
        },
        methods: {
            say() {
            }
        }
    })
</script>

 1 <style>
 2         .red {
 3 
 4             background: red;
 5         }
 6 
 7         .blue {
 8             width: 100px;
 9             height: 100px;
10             background: blue;
11         }
12 
13     </style>
14 
15 
16 <div id="box">
17     <div style="width: 100px;height: 100px;" v-bind:class=‘{red:isred}‘></div>
18     <!--<div style="width: 100px;height: 100px;" v-bind:class=‘isred?"red":"blue"‘></div>-->    <!--三元运算符方式-->
19     <!--<div style="width: 100px;height: 100px;" v-bind:class=‘[{red:"isred"}]‘></div>-->
20 
21 </div>
22 
23 
24 <script>
25     new Vue({
26         el: "#box",
27         data(){
28             return {
29                 isred:false
30             }
31         }
32     })
33 </script>

<div id="box">
    <div v-once>{{msg}}</div>
</div>


<script type="text/javascript">
    new Vue({
        el:"#box",
        data(){
            return{
                msg:"qwdqwdqwd"
            }
        }
    })
</script>

<div id="box">
    <div v-cloak="">欢迎--{{msg}}</div>
</div>


<script>
    new Vue({
        el:"#box",
        data(){
            return{
                msg:"111111"
            }
        }
    })
</script>

<div id="box">
    <div v-pre>欢迎--{{msg}}</div>
</div>



<script>
    new Vue({
        el:"#box",
        data(){
            return{
                msg:"111111"
            }
        }
    })
</script>