1.Vue官網

https://cn.vuejs.org

2.引入

通過script標簽引入vue時最好放在head里，避免抖屏的情況。

Tips：抖屏是指頁面稍微大些，刷新頁面會出現{{ }}的樣式十分丑陋

3.實例

元素通過id 和new Vue對象的 el 進行綁定，該id對應一個掛載點，Vue實例只會處理掛載點的內容；模板是指可以將掛載點的內容寫入template標簽中，同樣會生效。

{{msg}} 這樣的語法叫做差值表達式，表示將某元素插入到頁面中<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：直接在頁面上顯示

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

text效果：

2.v-html：以html在頁面上顯示

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

html效果：

3.點擊觸發事件 v-on:click

v-on:click=“點擊觸發的方法名”，再在methods中寫上對應的方法名稱，即可完成點擊觸發事件

v-on 可以簡寫成 @

4. v-bind: 屬性綁定

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

當需要進行數據對象綁定時，比如將title與data中的title綁定，需要用到v-bind指令。

效果如下：

v-bind: 可以簡寫成 :

5.雙向數據綁定 v-model

屬性綁定只是單向屬性綁定，并不能通過頁面改變Vue對象里的值，如果要實現雙向的數據綁定，可以通過給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.計算屬性 computed

當需要對多個值進行計算時，可以使用computed獲取最終結果。例如：要獲得全名，將姓和名拼接起來。

<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.偵聽器 watch

當需要對某個對象的改變進行偵聽時，可以通過watch來完成。例如：要計算姓和名改變的次數。（代碼見6：計算屬性）

效果如下：

8.條件判斷 v-if

當需要通過點擊按鈕對div內的對象進行判斷時，如果對象為顯示狀態就隱藏起來，如果對象是隱藏狀態就顯示它，可以通過v-if來處理。

<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>

效果如下：

點擊前：

點擊后：

9.顯示和隱藏 v-show

當需要對元素進行顯示和隱藏時，可以通過v-show來實現，基本功能和v-if類似，但是不會銷毀dom上的對象，只是將其隱藏起來，相當于加了一個display:none的屬性，和v-if相比性能較高，如果是需要頻繁切換隱藏顯示狀態的元素，使用v-show比較好。

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

10.遍歷 v-for

當需要遍歷一個列表里的值時，可以用v-for。index為每個元素的編號，可以作為key值，::key可以提升數據加載的效率。

<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.實現簡易TodoList

TodoList：相當于一個任務列表，要實現的功能是通過頁面添加刪除任務列表。具體實現可以查看代碼以及注釋，主要原理是通過發布訂閱模式實現父組件和子組件的屬性傳值來對數組進行操作。

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

實際效果：

增加list:

點擊后刪除：

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。