Vue全家桶实战02_【从入门到放弃系列】
生活随笔
收集整理的這篇文章主要介紹了
Vue全家桶实战02_【从入门到放弃系列】
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
指令
vue中常用v-指令演示
Demo演示
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue02</title><style type="text/css">.box{width: 300px;height: 300px;background-color: red}.active{background-color: green;}</style></head> <body><div id="app"></div><script type="text/javascript" src="node_modules/vue/dist/vue.js"></script><script type="text/javascript">//創建實例化對象//雙大括號插值//v-text innerText //v-html innerHTML//v-if //數據屬性對應的值，如果為假，則不再頁面中渲染，反之亦然 appendChild() removeChild()//v-show 控制dom元素的顯示隱藏 display:none | block;//v-on :原生事件名 = ‘函數名’ 簡便寫法 @//控制類名對原素顯示隱藏 display:none | block//v-bind綁定標簽上的屬性 （內置的屬性和自定義的屬性） 簡寫 ：//v-for = "(item,index) in menuLists"/*v-if是“真正”的條件渲染,因為它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。v-if也是惰性的:如果在初始渲染時條件為假,則什么也不做一直到條件第一 次變為真時,才會開始渲染條件塊。相比之下, V- show就簡單得多一不管初始條件是什么 ,元素總是會被渲染,并且只是簡單地基于CSS進行切換。-般來說，v-if有更高的切換開銷,而v-show有更高的初始渲染開銷。因此,如果需要非常頻繁地切換,則使用v-show較好;如果在運行時條件很少改變,則使用v-if較好。*/var vm = new Vue({el:"#app",data:function(){return{msg:'指令系統',msg2:'<h2>指令系統2</h2>',isShow:true,isGreen:false,text:'喬治大哥',menuLists:[{id:1,name:'喬治',price:2400},{id:2,name:'科比',price:3400},{id:3,name:'詹姆斯',price:1400},],person:{name:'george',age:23,fav:'籃球'}}},template:`<div class='app'><h2>{{msg}}</h2><p v-text='msg'></p><div v-html='msg2'></div><div v-text='1+1'></div><div v-if='isShow'>科比出場</div><div v-if='!isShow'>曼巴out</div><div v-if="Math.random() > 0.5">已顯示</div><div v-else>已隱藏</div><div v-show='isShow'>顯示</div><div v-show='!isShow'>隱藏</div><div class='box' v-on:click='clickHandler' v-bind:class='{active:isGreen}' :aaa='text'></div><<img src="" alt=""><a href="" title=''></a><ul><li v-for='item in menuLists'><h5 v-text="item.id"></h5><h3>{{item.name}}</h3><em>{{item.price}}</em></li></ul><ul><li v-for = "(value,key) in person">{{key}} = {{value}}</li></ul></div>`,methods:{//點擊切換顏色clickHandler(e){console.log(this);this.isGreen = !this.isGreen;}}});console.log(vm)</script> </body> </html>頁面展示：
雙向綁定
Demo演示
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>vue的雙向數據綁定</title> </head> <body><!-- v-model雙向數據綁定 --><div id="app"><!-- <input type="text" :value='msg'> --><input type="text" v-model='msg'><h3>{{msg}}</h3></div><script type="text/javascript" src="node_modules/vue/dist/vue.js"></script><script type="text/javascript">new Vue({el:"#app",data(){return{msg:"大夢"}}});</script></body> </html>結果展示
即：- v-mode1雙向數據綁定的體現只會體現在UI控件中? ?只能應用在有value屬性的
?Demo
<!doctype html> <html lang="en"> <head><meta charset="UTF-8"><title>vue的雙向數據綁定</title> </head> <body><!-- v-model雙向數據綁定 --><!-- 語法糖： 甜甜的，它是v-bind:value 和 v-on:input 的體現 --><div id="app"><!-- <input type="text" :value='msg'> --><!-- <input type="text" v-model='msg'> --><input type="text" v-bind:value='msg' v-on:input='valueChange'><h3>{{msg}}</h3></div><script type="text/javascript" src="node_modules/vue/dist/vue.js"></script><script type="text/javascript">new Vue({el:"#app",data(){return{msg:"大夢"}},methods:{valueChange(e){console.log(e.target.value);this.msg=e.target.value;}}});</script></body> </html>?其內部的流程為：
?
總結
以上是生活随笔為你收集整理的Vue全家桶实战02_【从入门到放弃系列】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Win10下如何更改默认浏览器
- 下一篇： vue异常——template Sy