vue源码分析-手写模拟简单源码(2)
要解决一个问题: 使用 ‘xxx.yyy.zzz’ 可以来访问某一个对象,就是用字符串路径来访问对象的成员。
123456789function getValueByPath( obj, path ) { let paths = path.split( '.' ); // [ xxx, yyy, zzz ] let res = obj; let prop; while( prop = paths.shift() ) { res = res[ prop ]; } return res; }
将上一篇的方法改进一下:
12345678910111213141516function compiler( template, data ) { let childNodes = template.childNodes; // 取出子元素 for ( let i = 0; i < childNodes.length; i++ ) { ...
vue源码分析-手写模拟简单源码(1)
使用步骤:
编写 页面 模板
直接在 HTML 标签中写 标签
使用 template
使用 单文件 ( <template /> )
创建 Vue 的实例
在 Vue 的构造函数中提供: data, methods, computed, watcher, props, …
将 Vue 挂载到 页面中 ( mount )
123456789101112131415<!-- 写模板 --> <div id="root"> <p>{{name}}</p> <p>{{message}}</p> </div> <script> // 第二步 创建 实例 let app = new Vue( { el: '#root', data: { name: '张三' ...