Vue學習心得記錄之模板語法

下面是我這半年以來總結的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順利！