vm = new Vue({
el: "#content",
data: {
name: "taro",
}
})
src/viewmodel.js
こんな感じでViewModelのコンストラクタはCompilerに委譲されているだけ
function ViewModel (options) {
// just compile. options are passed directly to compiler
new Compiler(this, options)
}
src/compiler.js
まずは渡されたオプションを処理している
var compiler = this,
key, i
// default state
compiler.init = true
compiler.destroyed = false
// process and extend options
options = compiler.options = options || {}
utils.processOptions(options)
// copy compiler options
extend(compiler, options.compilerOptions)
// repeat indicates this is a v-repeat instance
compiler.repeat = compiler.repeat || false
// expCache will be shared between v-repeat instances
compiler.expCache = compiler.expCache || {}
ここでelをセットしている
var el = compiler.el = compiler.setupElement(options)
src/compiler.js setupElement
elが文字列ならquerySelectorに渡して、違ったらそのまま使って、ない場合はtagNameがあればそれでなければdivでcreateElementする
var el = typeof options.el === 'string'
? document.querySelector(options.el)
: options.el || document.createElement(options.tagName || 'div')
var template = options.template,
child, replacer, i, attr, attrs
if (template) {
elが子要素を持っている場合はthis.rawContentにdiv作ってその下に突っ込んでいく firstChildをappendChildで追加していくことで移動させている
// collect anything already in there
if (el.hasChildNodes()) {
this.rawContent = document.createElement('div')
/* jshint boss: true */
while (child = el.firstChild) {
this.rawContent.appendChild(child)
}
}
replaceオプションがあってtemplateの子要素が一つだけの場合はelと置き換える
elの親要素がある場合はtemplateの子要素を追加してel自体はDOMから削除する
elが持っていた属性は置き換えた要素にコピーされる
上記にマッチせずに置き換えでない場合はelにtemplateを追加するだけ
// replace option: use the first node in
// the template directly
if (options.replace && template.firstChild === template.lastChild) {
replacer = template.firstChild.cloneNode(true)
if (el.parentNode) {
el.parentNode.insertBefore(replacer, el)
el.parentNode.removeChild(el)
}
// copy over attributes
if (el.hasAttributes()) {
i = el.attributes.length
while (i--) {
attr = el.attributes[i]
replacer.setAttribute(attr.name, attr.value)
}
}
// replace
el = replacer
} else {
el.appendChild(template.cloneNode(true))
}
後はid、className、attributesのオプションをセットして返す
// apply element options
if (options.id) el.id = options.id
if (options.className) el.className = options.className
attrs = options.attributes
if (attrs) {
for (attr in attrs) {
el.setAttribute(attr, attrs[attr])
}
}
return el
プロパティの準備してる。vmとemitterもセットされている
// set other compiler properties
compiler.vm = el.vue_vm = vm
compiler.bindings = utils.hash()
compiler.dirs = []
compiler.deferred = []
compiler.computed = []
compiler.children = []
compiler.emitter = new Emitter(vm)
methodsとcomputedのバインディングを生成している
// create bindings for computed properties
if (options.methods) {
for (key in options.methods) {
compiler.createBinding(key)
}
}
// create bindings for methods
if (options.computed) {
for (key in options.computed) {
compiler.createBinding(key)
}
}
binding.mdに続く...