// 生成ast语法树
const ast = parse(template.trim(), options)
// 标记静态内容（以免diff的时候需要重复比较）
optimize(ast, options)
// 生成render function code
const code = generate(ast, options)

// 编译入口
src/compiller/index.js
// html解析
src/compiller/parser/html-parser.js
// src/compiller下的其它文件

//template
 <div id="app">
  <p>普通属性：{{ message }}</p>
  <p>{{msg()}}</p>
  <p>{{ct}}</p>
  <input v-model="message">
  <div v-for="item in items">
   {{ item.text }}
  </div>
  <button v-on:click="bindClick">点我抓同伟</button>
 </div>

 // js
 new Vue({
  el: '#app',
  data: {
  message: '以vue的名义',
  items: [{
   text: '达康书记'
  }, {
   text: '育良书记'
  }]
  },
  methods: {
  bindClick: function() {
   this.message = '这就抓同伟去';
  },
  msg: function() {
   return this.message + "这个方法每次都会执行";
  }
  },
  computed: {
  ct: function()　{
   return this.message + "计算属性并不会每次都执行";
  }
  }
 })

with(this) {
 return _c('div', {
  attrs: {
   "id": "app"
  }
 },
 [_c('p', [_v("普通属性：" + _s(message))]), _v(" "), _c('p', [_v(_s(msg()))]), _v(" "), _c('p', [_v(_s(ct))]), _v(" "), _c('input', {
  directives: [{
   name: "model",
   rawName: "v-model",
   value: (message),
   expression: "message"
  }],
  domProps: {
   "value": (message)
  },
  on: {
   "input": function($event) {
    if ($event.target.composing) return;
    message = $event.target.value
   }
  }
 }), _v(" "), _l((items),
 function(item) {
  return _c('div', [_v("\n\t\t " + _s(item.text) + "\n\t ")])
 }), _v(" "), _c('button', {
  on: {
   "click": bindClick
  }
 },
 [_v("点我出奇迹抓同伟")])], 2)
}

 _l((items),
 function(item) {
  return _c('div', [_v("\n\t\t " + _s(item.text) + "\n\t ")])
 })

_c('button', {
  on: {
   "click": bindClick
  }
 }

constructor (
 tag"color: #ff0000">总结

以上就是这篇文章的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。