1.Vue官網(wǎng)

https://cn.vuejs.org

2.引入

通過(guò)script標(biāo)簽引入vue時(shí)最好放在head里，避免抖屏的情況。

Tips：抖屏是指頁(yè)面稍微大些，刷新頁(yè)面會(huì)出現(xiàn){{ }}的樣式十分丑陋

3.實(shí)例

元素通過(guò)id 和new Vue對(duì)象的 el 進(jìn)行綁定，該id對(duì)應(yīng)一個(gè)掛載點(diǎn)，Vue實(shí)例只會(huì)處理掛載點(diǎn)的內(nèi)容；模板是指可以將掛載點(diǎn)的內(nèi)容寫(xiě)入template標(biāo)簽中，同樣會(huì)生效。

{{msg}} 這樣的語(yǔ)法叫做差值表達(dá)式，表示將某元素插入到頁(yè)面中<div id="root"><h1>luhao {{msg}}<h1></div> <script>new Vue({ el: "#root", // template:'<h1>luhao {{msg}}<h1>',data:{ msg:"hello world" ，number:123} }) </script>

1.v-text：直接在頁(yè)面上顯示

<h1 v-text="number"></h1>

text效果：

2.v-html：以html在頁(yè)面上顯示

<h1 v-html="number"></h1>

html效果：

3.點(diǎn)擊觸發(fā)事件 v-on:click

v-on:click=“點(diǎn)擊觸發(fā)的方法名”，再在methods中寫(xiě)上對(duì)應(yīng)的方法名稱(chēng)，即可完成點(diǎn)擊觸發(fā)事件

v-on 可以簡(jiǎn)寫(xiě)成 @

4. v-bind: 屬性綁定

<div id="root"> <div v-bind:title="title">hello world</div></div> <script> new Vue({ el: "#root", data:{ title:"我是可變title" } }) </script>

當(dāng)需要進(jìn)行數(shù)據(jù)對(duì)象綁定時(shí)，比如將title與data中的title綁定，需要用到v-bind指令。

效果如下：

v-bind: 可以簡(jiǎn)寫(xiě)成 :

5.雙向數(shù)據(jù)綁定 v-model

屬性綁定只是單向?qū)傩越壎?#xff0c;并不能通過(guò)頁(yè)面改變Vue對(duì)象里的值，如果要實(shí)現(xiàn)雙向的數(shù)據(jù)綁定，可以通過(guò)給v-model

<div id="root"> <div v-bind:title="title">hello world</div></div><input v-model="content"/><div>{{content}}</div> <script> new Vue({ el: "#root", data:{ title:"我是可變title"，content:"我是綁定content"} }) </script>

效果如下：

6.計(jì)算屬性 computed

當(dāng)需要對(duì)多個(gè)值進(jìn)行計(jì)算時(shí)，可以使用computed獲取最終結(jié)果。例如：要獲得全名，將姓和名拼接起來(lái)。

<div id="root"> 姓:<input v-model="firstName"/>名:<input v-model="lastName"/><div>{{fullName}}</div><div>{{count}}</div> <script> new Vue({ el: "#root", data:{ firstName:'',lastName:''，count:0} ，computed:{ fullName:function () { return this.firstName + ' ' + this.lastName }，,watch:{ firstName:function () { this.count++ }, lastName:function () { this.count++ }}} }) </script>

效果如下：

7.偵聽(tīng)器 watch

當(dāng)需要對(duì)某個(gè)對(duì)象的改變進(jìn)行偵聽(tīng)時(shí)，可以通過(guò)watch來(lái)完成。例如：要計(jì)算姓和名改變的次數(shù)。（代碼見(jiàn)6：計(jì)算屬性）

效果如下：

8.條件判斷 v-if

當(dāng)需要通過(guò)點(diǎn)擊按鈕對(duì)div內(nèi)的對(duì)象進(jìn)行判斷時(shí)，如果對(duì)象為顯示狀態(tài)就隱藏起來(lái)，如果對(duì)象是隱藏狀態(tài)就顯示它，可以通過(guò)v-if來(lái)處理。

<div id="root"> <div v-if="show">hello world</div><button @click="handleClick">toggle</button> </div> <script> new Vue({ el: "#root", data:{ show:true} ，methods:{handleClick: function () { this.show = !this.show;}} }) </script>

效果如下：

點(diǎn)擊前：

點(diǎn)擊后：

9.顯示和隱藏 v-show

當(dāng)需要對(duì)元素進(jìn)行顯示和隱藏時(shí)，可以通過(guò)v-show來(lái)實(shí)現(xiàn)，基本功能和v-if類(lèi)似，但是不會(huì)銷(xiāo)毀dom上的對(duì)象，只是將其隱藏起來(lái)，相當(dāng)于加了一個(gè)display:none的屬性，和v-if相比性能較高，如果是需要頻繁切換隱藏顯示狀態(tài)的元素，使用v-show比較好。

<div v-show="show">hello world</div>

10.遍歷 v-for

當(dāng)需要遍歷一個(gè)列表里的值時(shí)，可以用v-for。index為每個(gè)元素的編號(hào)，可以作為key值，::key可以提升數(shù)據(jù)加載的效率。

<div id="root"> <ul><li v-for="(item,index) of list" :key="item">{{item}}</li></ul> </div> <script> new Vue({ el: "#root", data:{ list:[1,2,3]} }) </script>

4.實(shí)現(xiàn)簡(jiǎn)易TodoList

TodoList：相當(dāng)于一個(gè)任務(wù)列表，要實(shí)現(xiàn)的功能是通過(guò)頁(yè)面添加刪除任務(wù)列表。具體實(shí)現(xiàn)可以查看代碼以及注釋，主要原理是通過(guò)發(fā)布訂閱模式實(shí)現(xiàn)父組件和子組件的屬性傳值來(lái)對(duì)數(shù)組進(jìn)行操作。

<!--組件化開(kāi)發(fā)TodoList--> <div id="root"><div><input v-model="inputValue"/><button @click="handleSubmit">提交</button> <!--click事件--></div> <!--數(shù)據(jù)流轉(zhuǎn):inputValue -> list -> item -> content --><ul><!--content中的內(nèi)容是從list中遍歷出來(lái)的，通過(guò)屬性從父組件向子組件進(jìn)行傳值--><todo-itemv-for="(item,index) of list":key="index":content="item":index="index"@delete="handleDelete"><!--父組件監(jiān)聽(tīng)子組件delete事件，當(dāng)觸發(fā)delete事件時(shí)，進(jìn)行handleDelete操作，此處用到了【發(fā)布訂閱模式】--></todo-item></ul> </div> <script>Vue.component('todo-item', { //子組件(全局組件：可以在任何地方使用)props: ['content', 'index'], //接受從外部傳來(lái)的與名字對(duì)應(yīng)的值template: '<li @click="handleClick">{{content}}</li>',methods: {handleClick: function () {this.$emit('delete', this.index) //向外【發(fā)布】觸發(fā)事件delete，并且該事件攜帶了index值}}})new Vue({ //父組件el: "#root",data: {inputValue: '',list: []},methods: {handleSubmit: function () {this.list.push(this.inputValue) //點(diǎn)擊提交后將數(shù)據(jù)加入到數(shù)組中this.inputValue = '' //清空輸入框的值},handleDelete: function (index) {this.list.splice(index, 1) //刪除數(shù)組中下標(biāo)為index的1條數(shù)值}}}) </script>

實(shí)際效果：

增加list:

點(diǎn)擊后刪除：

總結(jié)

以上是生活随笔為你收集整理的vue判断显示隐藏_web前端进阶之【Vue】10分钟掌握Vue 在学Vue的童鞋过来拿资料的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。