下面是我這半年以來總結的Vue學習筆記，幫助自己復習學習Vue的基本用法。有需要的同志可以參考下。

Vue的模板語法

Vue有很簡單的模板語法,這些Vue指令用來響應式改變渲染DOM可以快速入門上手這個簡單的框架。

---

1.{{}}單向插值表達式，可以把數據從控制器綁定到視圖模型

var my = new Vue({el: '#app',,template: `<div>{{myName}}`,data() {return { myName: 'hello vue!',}},})

data選項就代表著控制器中的數據信息。

---

2.屬性綁定 v-bind: 縮寫為:

template:`<div v-bind:title="myName">hover here</div>`

---

3.v-if與v-show
兩者后面都是跟boolean類型變量，v-if會直接在dom結構移除該dom元素，v-show只是加了一個行內樣式dislplay:none;該元素還是存在的。
在data屬性中聲明初始化需要的變量后在模板中渲染。

data() {return {myName: 'hello vue!',isShow: false,}},`<div v-if="isShow" >show me </div><hr><span v-show="isShow">show me</span>`

---

4.v-for="item in arrOrObject"循環某個DOM.被循環的數據可以是對象也可以是數組item 也可以寫作(item ,index)這樣就會把對象中的key或者數組中的索引index取出來
注意模板必須只能包含一個根節點

template：<div></div><div></div>//寫法錯誤

<ul><li v-for="item in arr">loop {{item}}</li></ul>

---

5.事件綁定v-on縮寫@ 在methods:{}定義方法
然后就可以在模板中調用

methods: {reverse() {//console.log(this.message)this.message = this.message.split(' ').reverse().join(' ')}},<button v-on:click="reverse">消息逆轉</button><p>{{message}}</p>

---

6.表單雙向綁定

• 我們可以采用事件綁定的方式間接實現。即定義表單中的keyup事件回調方法，然后在方法中獲取到value值，然后賦值給data上的數據

• 還可以采用v-model快捷實現方法

<input type="text" v-model="input">

這本質上就是上一種方法的語法糖。

---

7.Vue類的data屬性必須定義一個函數然后返回一個對象，如果直接使用對象對于數組等的引用賦值就會使得改變了數據值會影響別的地方對它的引用。定義成一個函數返回這樣就是把所有的數據復制了一份，不會產生引用賦值的危害。

data() {return {message: "this is a boy",myName: 'hello vue!',time: new Date(),isShow: false,input: 'liyu',arr: [1, 2, 3, 4, 5, 6, 7, 8, 9],}},

---

8.全局子組件的注冊與屬性傳遞

Vue.component('child', {props: ['title'],template: `<div> <hr><h3>{{title}}</h3><p>我是個全局子組件</p></div>` })

• 用props:[' ']這種數據格式來定義接受的屬性名稱
  這樣在調用child時候就可以傳遞屬性進去

<child :title="input"/>

---

今天的筆記學習心得就記錄到這里吧！第一次用SegmentFault順利！

總結

以上是生活随笔為你收集整理的Vue学习心得记录之模板语法的全部內容，希望文章能夠幫你解決所遇到的問題。

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