day01
Vue与模板
使用步骤
- 编写 页面 模板
1)直接在html标签中写 标签 作为模板
2)使用 template 作为模板
3) 使用单文件 ( < template /> ) 作为模板 - 创建VUE的实例 ,(new 一个vue对象)
1)在vue的构造函数中提供渲染数据所需要的各种方法:data,methods,… - 将vue挂载到 页面中 (mounted)或者vue源码中实现
数据驱动模型
VUE 的执行流程
- 获得模板:模板中有“坑”
- 利用vue构造函数中所提供的数据来“填坑”,得到可以在页面中显示的“标签”
- 将标签替换页面中原来有坑的标签
vue 利用 我们提供的数据 和页面中模板 生成了一个新的html标签 (node元素),
替换到了 页面中放置模板的位置
示例: vue执行流程
简化版
<div id="root">
<div>
<div>
<p>{{name}} --- {{message}}</p>
</div>
</div>
<p>{{name}}</p>
<p>{{message}}</p>
</div>
let regKuohao = /\{\{(.+?)\}\}/g; // 匹配{{}}括号
// 以{{开始 }}结束,中间匹配除回车换行之外的多个字符, ( ) 里面表示分组
// 1 找到模板
let temNode = document.querySelector('#root'); //模板
// 2 模拟数据
let data = {
name:'名字',
message:'一个消息'
}
// 3. 将数据放到模板中
// 一般都是使用 递归
// 在现在这个案例中,template是DOM 元素
// 在真正的Vue 源码中是字符串 : DOM -> 字符串模板 -> 抽象语法树 -> 虚拟DOM -> 真正的DOM
function compiler(template, data){
// 把 template 的子元素带有 {{ }} 的给处理一下
let childNodes = template.childNodes; // 子元素
for(let i=0; i < childNodes.length; i++ ){
let type = childNodes[i].nodeType; //节点类型 1 元素 3 文本节点
if( type === 3){
// 文本节点,可以判断里面是否有 {{}} 插值
let txt = childNodes[i].nodeValue; // 该属性只有文本节点才有意义
// 有没有双括号? //正则表达式
txt = txt.replace(regKuohao,function( _ , g1 ){ // relace 使用正则匹配一次, 函数就会被调用一次
// 函数的第 0 个参数,表示匹配到的内容
// 函数的第 n 个参数,表示正则中的第n 组
g1 = g1.trim();
//将 {{ xxx }} 用这个 值替换
return data[g1]
})
// 注意 txt 现在和 DOM元素 是没有关系的
childNodes[i].nodeValue = txt;
}else if( type === 1){
// 元素,有没有子元素?是否需要将其子元素 进行判断是否插值
compiler(childNodes[i], data)
}
}
}
let generateNode = temNode.cloneNode(true); // 注意这里是Dom元素,可以这么用,(虚拟DOM就不行)
console.log(temNode)
compiler(generateNode,data);
console.log(generateNode)
//temNode 是引用类型,
//我们没有生成新的template,所以这里看到的是直接在页面中就更新的数据
//这样做 模板就没了
// 4. 放到页面中
root.parentNode.replaceChild(generateNode,root)
以上代码实现了Vue最基本的数据显示。
总结
步骤拆解:
- 拿到模板
- 拿到数据(data 等)computed 、props
- 将数据和模板结合,得到的 是html 元素(dom元素)
- 放到页面中