记录个人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的三大模板