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要写
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:子节点数组
)
使用
<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.效果
1.png
