vue学习第16天,渲染
2017-11-03 18:47
260 查看
1,多数的代码复用通过组件来实现 组件创建 HTML 的时候 还是需要 javascript 的完全编程能力的
2,render 函数 更像是一个编译产出 HTML 的编译器 template 不太像编译器
3,组件中 当不使用插槽 slot 的时候 子元素是放在 组件实例的 $slot.default 中
4,浏览器在读到 HTML 代码的时候 为了保持对代码的追踪 会根据 HTML 的结构 生成一棵树 就是 DON 树
5,虚拟DOM 通过 createElement();生产的不是一个实际的DOM 只是对一个要渲染的 DOM 节点的描述 可以看作一个虚拟节点 VNode 由所有的 VNode 组成的这棵树就是 虚拟 DOM 树
6,createElement(a,b,[]) 一般是三个参数 一个HTML 标签字符串 一个数组选项对象 一个返回值类型为 String 或者 Object 的函数
7,VNode 数据对象 更接近 DOM对象
innerHTML 优先级比 v-html 高
‘class’:{}高于 v-bind:class;
style:{} 高于 v-bind:style
on:{click:} 高于 v-on:click
8,自定义指令也不能再修改值 会持续追踪
9,可以给插槽制定名称 slot:'slotname'
10,可以设置组件的 标志 key :'myKey'
11,可以设置组件的 索引 reference ref:'myRef'
2,render 函数 更像是一个编译产出 HTML 的编译器 template 不太像编译器
3,组件中 当不使用插槽 slot 的时候 子元素是放在 组件实例的 $slot.default 中
4,浏览器在读到 HTML 代码的时候 为了保持对代码的追踪 会根据 HTML 的结构 生成一棵树 就是 DON 树
5,虚拟DOM 通过 createElement();生产的不是一个实际的DOM 只是对一个要渲染的 DOM 节点的描述 可以看作一个虚拟节点 VNode 由所有的 VNode 组成的这棵树就是 虚拟 DOM 树
6,createElement(a,b,[]) 一般是三个参数 一个HTML 标签字符串 一个数组选项对象 一个返回值类型为 String 或者 Object 的函数
7,VNode 数据对象 更接近 DOM对象
innerHTML 优先级比 v-html 高
‘class’:{}高于 v-bind:class;
style:{} 高于 v-bind:style
on:{click:} 高于 v-on:click
8,自定义指令也不能再修改值 会持续追踪
9,可以给插槽制定名称 slot:'slotname'
10,可以设置组件的 标志 key :'myKey'
11,可以设置组件的 索引 reference ref:'myRef'
相关文章推荐
- vue学习笔记---class与style绑定以及条件渲染
- Vue学习日志:条件渲染(6)
- Vue.js入门学习--列表渲染--v-for遍历数组生成元素(四)
- Vue.js学习 Item7 -- 条件渲染与列表渲染
- vue学习:解决vue变量未渲染前代码显示问题
- Vue.js 学习6 条件渲染与列表渲染
- Vue.js 学习(6) -- Vue指令之:条件渲染
- Vue.js学习 Item7 -- 条件渲染与列表渲染
- Vue.js学习教程之列表渲染详解
- Vue入门学习-使用服务器传来的JSON数据交给Vue渲染HTML页面
- 学习vue.js条件渲染
- Vue.js学习(一):用render函数渲染组件
- Vue.js实例学习:条件渲染
- vue学习第17天,渲染 JSX 插件
- 学习使用vue.js(二)声明式渲染 和 指令绑定
- Vue学习-声明式渲染
- Vue.js入门学习--v-if 组合 v-else-if条件指令渲染DOM(三)
- vue学习第3天,基础知识,条件渲染,列表渲染,事件处理,内联样式
- Vue.js源码学习四 —— 渲染 Render 初始化过程学习
- vue学习笔记1——v-if和templete 条件渲染 使用 key 控制元素的可重用