vue-自定义指令-渲染函数-标题组件-svg使用

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- 是自动携带的 ,注册的时候不用带

---

3. 自定义指令实现-权限控制

只有管理员才有权限 操作的按钮

3.1 指令定义

directives: {
      permission:{
        inserted(el,binding){
          console.log("binding:",binding)
          if(binding.value == "admin"){
            el.parentElement.removeChild(el)
          }
        }
      },
}

binding 一个对象 更多资料自定义指令

3.2 使用

    解散本群

如果需要在钩子之间共享数据，建议通过元素的 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要写

---

1.png

---

6. 查看 返回的到底是什么

如果好奇 返回的到底是不是VNode可以改下结构 打印下

 render(h){
                    //返回 VNode
                    const vnode =h("h"+this.level, //参数1: tagName
                        this.$slots.default//参数3:子节点数组
                    )
                    console.log("查看",vnode);
                   return  vnode
                }

1.png

---

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:子节点数组
                    )

使用

        传值

鼠标悬浮 查看效果

---

8. 需求分析

实现上述标题组件前面带上svg图片

---

9. svg的使用回顾

iconfont 阿里妈妈网站玩去
下载下来, 在线的或者是本地都行

9.1标签使用

9.2样式

---

10. 组件封装

10.1 组件使用

看着组件的使用 ,可以先考虑下组件应该怎么写

 洋shou? ?番茄?

---

10.2 组件编写 渲染函数的 子数组 用法

1. props接收传值,限定类型
2. 判断有无图标
   3.没有的话正常渲染
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) {
                    //  
                  // 对着写  
                    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.效果

1.png

---

参考资料

自定义指令
dataset传值
渲染函数

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉