vue-指令系统

vue-指令

所谓指令系统，大家可以联想咱们的cmd命令行工具，只要我输入一条正确的指令，系统就开始干活了。

在vue中，指令系统，设置一些命令之后，来操作我们的数据属性，并展示到我们的DOM上。

1. v-if v-else-if v-else

2. v-show

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

3. v-bind 简写为 :

4. v-on 简写为 :@

5. v-for

6. v-html

<!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>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .box2{background-color: green;}
        .box3{background-color: yellow;}
        .lunbo ul{width: 180px; overflow: hidden; list-style: none;}
        .lunbo ul li{float: left; width: 30px; height: 30px; background-color: purple; margin-left: 5px; line-height: 30px; text-align: center;
            color: white;}
    </style>
</head>
<body>
    <div id="app">
        <h3>{{123}}</h3>
        <h3>{{msg}}</h3>
        <h3>{{11>2?'真的':'假的'}}</h3>
        <div v-if='show'>haha</div>
        <div v-if='isShow'>haha</div>

        <!-- <button v-on:click='clickHandler'>切换</button> -->
        <!-- 简写方式 -->
        <button @click='clickHandler'>切换</button> 


        <div v-if='Math.random() > 0.5'>
            Now you see me ! {{Math.random()}}
        </div>
        <div v-else>
            Now you don't {{Math.random()}}
        </div> 

        <!-- <div v-show=' isShow' v-bind:title='title'>我是一个三级标题</div> -->
        <!-- 绑定的简写方式 -->
        <div v-show=' isShow' :title='title'>我是一个三级标题</div>
        <img v-bind:src="imgSrc" :title='title' width="100px" height="100px">

        <!-- 
            v-bind:         简写    :
            v-on:click      简写    @click

         -->

         <div class="box" :class="{box2:isGreen,box3:isYellow}"></div>
         <button @click='changeColor'>切换颜色{{isGreen}}{{isYellow}}</button>

         <button @click='count+=1'>加{{count}}</button>

        <hr>
         <div class="lunbo">
                <img :src="currentSrc" @mouseenter='closeTimer' @mouseleave='openTimer' width="100" height="100">
                <ul>
                    <li v-for = "(item,index) in imgArr" @click='currentHandler(item)'>{{index+1}}</li>
                </ul>

         </div>
         <button @click='nextImg'>下一张</button>


         <h2 v-html='str'></h2>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                msg:'学习vue',
                msg2:'学习vue2',
                show:false,
                isShow:true,
                title:'hahaha',
                imgSrc:'./haha.jpg',
                isGreen:false,
                isYellow:true,
                count:0,
                imgArr:[
                    {id:1,src:'./1.jpg'},
                    {id:2,src:'./2.jpg'},
                    {id:3,src:'./3.jpg'},
                    {id:4,src:'./4.jpg'}
                ],
                currentSrc:'./1.jpg',
                currentIndex:0,
                timer:null,
                str:'<p>嘿嘿嘿</p>'
            },
            created(){
                // 加载dom之前
                // 开启定时器
                // 获取cookie session 提前获取出来
                this.timer = setInterval(this.nextImg,2000)
            },
            methods:{
                clickHandler(){
                    this.show=!this.show
                },
                changeColor(){
                    this.isGreen = !this.isGreen;
                    this.isYellow = !this.isYellow
                    
                },
                currentHandler(item){
                    this.currentSrc = item.src;
                },
                nextImg(){
                    if(this.currentIndex == this.imgArr.length-1){
                        this.currentIndex=-1  
                    }
                    this.currentIndex++
                    this.currentSrc = this.imgArr[this.currentIndex].src
                },
                closeTimer(){
                    clearInterval(this.timer)
                },
                openTimer(){
                    this.timer = setInterval(this.nextImg, 2000)
                }
            }
            
        })
    </script>
</body>
</html>

vue-指令

猜你喜欢