vue与模板
- 编写页面模板
- 直接在HTML标签中写标签
- 使用template
- 使用单文件()
- 创建vue实例
- 在vue的构造函数中提供:data、methods、computed、watcher、props,…
- 将vue挂载到页面中(mount)
数据驱动模型
#vue的执行流程
- 获得模板:模板中有‘坑’
- 利用vue构造函数提供的数据来‘填坑’,得到可以在页面中显示的‘标签’,
- 将标签替换页面中原来有坑的标签
vue利用我们提供的数据和页面中模板,生成了一个新的HTML标签(node 元素/节点),替换到了 页面中放置模板的位置
我们该怎么实现呢?
简单的模板渲染
步骤拆解
1、拿到模板
2、拿到数据(data)
3、将数据与模板结合,得到的是HTML元素(DOM元素)
4、放到页面中