• 　　　　　　{{item}} 　　　　
　　

　　

{{price}}

',
　　　　　　{
　　　　　　　　attrs:{"id":"app"}
　　　　　　},
　　　　　　[
　　　　　　　　_c('p',[_v(_s(price))])
　　　　　　]
　　　　)
　　}
}

这个this就是vm这个实例，这个_c就是vm._c，用来创建dom标签的。第一个参数是个div。第二个参数是个对象，对象里面有属性。第三个参数是个数组，数组里面只有一个元素，这个_c肯定也是vm._c。这个_c第一个参数是p，第二个参数是个数组，里面也是一个数组，_v(_s(price))，这里面的price肯定是vm.price，就是data.price。然后前面的_s就是vm._s，就是toString函数。_v也是vm._v，用来创建文本节点的。

总结：

模板中所有信息都包含在render函数中。

this即vm

price即this.price即vm.price即data.price。

_c即this._c即vm._c

render函数

从哪里可以看到render函数？

看一下todo-list demo的render函数

　　 　　 　　 　　 　　 　　

　　　　 　　 　　 　　

然后通过这个例子，看看vue的render函数是什么样子的，在源码搜索code.render，然后打印出来

with(this) {
　　return _c('div',
　　　　　　　　{
　　　　　　　　　　attrs: {
　　　　　　　　　　　　"id": "app"
　　　　　　　　　　}
　　　　　　　　},
　　　　　　　　[
　　　　　　　　　　_c('input',
　　　　　　　　　　　　{
　　　　　　　　　　　　　　directives: [{ // 当title发生变化，会赋值给value，从而响应到input
　　　　　　　　　　　　　　　　name: "model",
　　　　　　　　　　　　　　　　rawName: "v-model",
　　　　　　　　　　　　　　　　value: (title),
　　　　　　　　　　　　　　　　expression: "title"
　　　　　　　　　　　　　　}],
　　　　　　　　　　　　　　domProps: {
　　　　　　　　　　　　　　　　"value": (title)
　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　on: { // input里面的数据改变，事件监听到，会赋值给 title
　　　　　　　　　　　　　　　　"input": function($event) {
　　　　　　　　　　　　　　　　　　if ($event.target.composing) return;
　　　　　　　　　　　　　　　　　　title = $event.target.value
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　}
　　　　　　　　　　　　}),
　　　　　　　　　　　　_v(" "),
　　　　　　　　　　　　_c('button',
　　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　on: {
　　　　　　　　　　　　　　　　　　"click": add
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　[_v("submit")]
　　　　　　　　　　　　),
　　　　　　　　　　　　_v(" "),
　　　　　　　　　　　　_l(
　　　　　　　　　　　　　　(list),
　　　　　　　　　　　　　　function(item) {
　　　　　　　　　　　　　　　　return _c('ul', [_v("\n " + _s(item) + "\n ")])
　　　　　　　　　　　　　　}
　　　　　　　　　　　　)
　　　　　　　　], 2)
　　　　　　}

是这个样子的。这就是这个demo所对应的render函数。在创建input的时候第二个参数有个directives。叫做指令，指令名字是model。value是title，也就是vm.title。后面_v('')，_v表示创建文本节点，主要是input和button有个换行，如果不换行，就不会有_v去创建一个空的文本节点。_l就是一个数组，针对list返回li的标签。