記錄個人Vue.js從會用到精通之路 3

Vue的三大模板

HTML模板

• 特色：基於DOM的模板，僅僅能解析一個字符串，若是不使用v-html，則沒法解析標籤。
• 插值：
  • 文本：使用{{ }}雙大括號語法。不管什麼時候，綁定的數據對象上屬性發生了改變，插值處的內容都會更新。經過v-once指令，咱們也能夠一次性地插值，當數據改變時，插值處內容不會更新。

    <span v-once>這個將不會改變：{{message}}</span>
    複製代碼

  • 原始HTML：雙大括號會將數據解釋爲普通文本，而非HTML代碼。爲了輸出真正的 HTML，你須要使用 v-html 指令。

    <div v-html="message2" class="demo">
    這裏面寫的內容都會失效 包括這句話~
    </div>
    let vm = new Vue({
    data : {
       message2 : `
                <div>html模板沒法解析標籤 <em>僅僅能生成字符</em>{{number1}}
                一旦使用v-html 這個元素中全部的內容都會被這條數據所代替
                 標籤會被解析 可是沒法解析{{number}}這樣的vue手法</div>
              `
            }
                })
    // 此時div.demo這個DOM元素會保留的 可是裏面的全部內容
    // 都被替換成了vm.message2中的內容 標籤可以正常的解析並存放在div.demo中
    // 可是存在的問題是{{number}}這樣的vue手法沒法被識別 依然被看成字符串保存出來
    複製代碼

  • 屬性：使用v-bind進行綁定，能夠響應式變化。
  • 使用Javascript表達式：對於全部的數據綁定，Vue.js都提供了徹底的JavaScript表達式支持。

    <div v-bind:id=" 'list' + id "></div>  // success
    <div v-bind:id=" var number = 1 ">  // error
    複製代碼

    請區分表達式與語句

字符串模板

• 特色：vm.template這個屬性直接決定了內容，會將html模板覆蓋掉，只有一個根節點。

<div id="id2"></div>
let vm2 = new Vue({
        template : `
        <div style="background-color: rgb(128, 25, 222)">
            <span>span1</span>
            <span>span2</span>
            <span>span3</span>
        </div>
        `
})
// 一旦正確的設置template屬性 這個div#id2直接沒了
// 取而代之的template中的內容 這也就是一個根節點的必要性
// 這裏與v-html綁定是有所不一樣的
複製代碼

• 其餘引入方式：將html結構寫在一對script標籤中，設置type="x-template"

<script type="x-template" id="app">
    <div>
        <p>你的名字是{{list.name}}</p>
    </div>
</script>

const vm = new Vue({
    ···
    template : "#app",
    ···
})
複製代碼

render函數

• 特色:更加接近底層，直接使用函數與虛擬DOM來生成一個DOM結構。
• 使用：

  const vm = new Vue({
      el : "#wrap",
      render(createElement){
          return createElement{標籤名，數據對象，子元素}
      }
  })
  複製代碼

以上就是Vue的三大模板