vue-指令系統
阿新 • • 發佈：2018-09-21
獲取cookie color ati ESS 方式 真的 val 命令行工具 運行
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> <scriptsrc="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-指令系統