1.前言
vue基础这块想来想去也没太多可以写的
就写下指令和 render吧
2. directives自定义指令
2.1 v-foucs指令 全剧注册
虽然现在经常使用
autofocus自动获取焦点但是有时候还是会有兼容性问题,还需要自己写,正好是个好的切入点
autofocus在移动版Safari上不工作
// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时调用 inserted(el) { // 聚焦元素 el.focus() } })
el指令所绑定的元素，可以用来直接操作 DOM
2.2 局部注册
directives: { focus: { inserted (el) { el.focus() }, },
2.3 使用都一样
注意
v-是自动携带的 ,注册的时候不用带
<input type="text" v-focus />
3. 自定义指令实现-权限控制
只有管理员才有权限 操作的按钮
3.1 指令定义
directives: { permission:{ inserted(el,binding){ console.log("binding:",binding) if(binding.value == "admin"){ el.parentElement.removeChild(el) } } }, }
binding 一个对象 更多资料自定义指令
3.2 使用
<button v-permission="userLevel">解散本群</button>
如果需要在钩子之间共享数据，建议通过元素的 dataset来进行。
4. 渲染函数
Vue推荐在绝大多数情况下使用模板来创建你的HTML。然而在一些场景中，你真的需要JavaScript的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器
4.1 基础语法
render:function(createElement){ // 返回的是VNode return createElement( tag, //标签名称 data, //传递数据 children //子节点数组 ) },
5. 实现头部组件
建议多看看官网
h1 h2 h3 h4 h5 h6
级别可以由用户传入,也可以限制默认值,或者必填项
简写
h是因为底层 通过snabbdom算法实现的,生成DOM的函数就是h,也就是就是createElement
slot插槽 获取内容
Vue.component("heading",{ props:{ level:{ type:String, default:"1" // required:true } }, render(h){ console.log("查看",this.$slots.default); //返回 VNode return h("h"+this.level, //参数1: tagName this.$slots.default//参数3:子节点数组 ) } })
render 参数2不需要的时候也可以省略
注意 return要写
6. 查看 返回的到底是什么
如果好奇 返回的到底是不是
VNode可以改下结构 打印下
render(h){ //返回 VNode const vnode =h("h"+this.level, //参数1: tagName this.$slots.default//参数3:子节点数组 ) console.log("查看",vnode); return vnode }
7. 参数2的传递
添加 porps 接收传值
title:{ type:String, default:"" }
渲染 title属性
const vnode =h("h"+this.level, //参数1: tagName {attrs:{title:this.title}}, //参数2:{} this.$slots.default //参数3:子节点数组 )
使用
<heading level="3" title="标题">传值</heading>
鼠标悬浮 查看效果
8. 需求分析
实现上述标题组件前面带上svg图片
9. svg的使用回顾
iconfont 阿里妈妈网站玩去
下载下来, 在线的或者是本地都行
9.1标签使用
<svg class="icon"> <use xlink:href="#icon-xihongshi" /> </svg>
9.2样式
<script src="https://at.alicdn.com/t/font_2556867_8ksqm2x66z3.js"></script> <style> .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } </style>
10. 组件封装
10.1 组件使用
看着组件的使用 ,可以先考虑下组件应该怎么写
<heading level="3" title="标题" icon="xihongshi">洋shou? ?番茄?</heading>
10.2 组件编写 渲染函数的 子数组 用法
- props接收传值,限定类型
- 判断有无图标
3.没有的话正常渲染- 有的话渲染出来
5.svg是2层 而这个渲染函数是可以嵌套的!!!重点
Vue.component("heading", { props: { level: { type: String, default: "1" }, title: { type: String, default: "" }, icon: { type: String } }, render(h) { // 子节点数组 let children = [] // icon处理 if (this.icon) { // <svg> <use xlink:href="#icon-xihongshi" /> </svg> // 对着写 children.push(h( "svg", { class: "icon" }, [h("use", { attrs: { 'xlink:href': '#icon-' + this.icon } })] )) } children = children.concat(this.$slots.default) const vnode = h("h" + this.level, { attrs: { title: this.title } }, children ) return vnode } })
11.效果
