vue 從入門到精通(二)

上一篇總結了一些vue的理論知識，如果你沒看懂的話……那返回去繼續去看啊！反正我要開始第二篇了。

vue提供了大量的指令，比如：v-if,v-bind,v-on……太多，多寫項目，多看API，這里就不多說。

1、vue 的三種模塊

html模板：就是基於DOM的一些有效的html標簽，如：

<div id="app">
  <input type="text" v-model="content">
  <span>{{content}}</span>
</div>　　

字符串模板：

如下，先定義字符串模板，然后在vue 的選項對象里面利用template綁定。字符串模板的優先級會比html模板高，如果html和字符串模板中都有內容，會用字符串模板里的內容替換html模板。

需要注意的是定義的字符串模板中根節點只能有一個。還有字符串用 ` 引起來是可以換行的（功能鍵1旁邊的那個鍵）。

let data = {
    content: 'world',
    dataId: '145'
  }
var str = `<div> 你好！{{content}}</div>`
var vm = new Vue({
    el: '#app',
    data: data,
    template: str
  })　　 

除了用變量定義模板字符串，還可以用script標簽，給script 標簽定義Id，如下：

<script type="x-template" id="temp">
  <div>你好！{{content}}</div>
</script>
<script>
  let data = {
    content: 'world'
  }
  var vm = new Vue({
    el: '#app',
    data: data,
    template: "#temp"
  })　　

reder函數模板：更加接近編譯器。

 render(createElement){   
　　"元素名稱"，
    {
    屬性：{
        屬性值：true
    },
    class:{
        fontClass:true
    },
    style:{
    　　color:red
    },
    domProps:{
　　　　innerHTML:"<li>我是html<li>" //當domProps和createElement都要子元素時，以domProps為主。
　　　}
    }，
    [
     createElement("li",1),
     createElement("li",2),
     createElement("li",3)
    ] 
}