JS问题整理与思考--Vue三要素之模版解析

Vue中如何解析模版

  • 模版是什么?
  • render函数
  • render函数与vdom

模版是什么

  • 本质:字符串
  • 有逻辑:如v-if,v-for等
  • 与html格式很像,但有很大区别
  • 最终还要转换成html来显示

模版最终必须转换成JS代码,因为:

  • 有逻辑(v-if v-for),必须用JS才能实现(图灵完备语言)
  • 转换为html渲染页面,必须用JS才能实现
  • 因此,模版最终要转换成一个JS函数(render函数)
<div id="app">
    <div>
        <input type="text" v-model="title">
        <button v-on:click="add">submit</button>
    </div>
    <ul>
        <li v-for="item in list">{{item}}</li>
    </ul>
</div>

随机浏览