vue自定义指令，vue插槽，具名插槽，vue常用API,vue生命周期

最新推荐文章于 2022-11-07 18:18:44 发布

O-v-O

最新推荐文章于 2022-11-07 18:18:44 发布

阅读量129

点赞数

本文链接：https://blog.csdn.net/qq_45058395/article/details/119758934

版权

Vue.js 自定义指令插槽生命周期 API

关键词由CSDN通过智能技术生成

1.vue自定义指令

<body>
<div id="root">
<h1 v-fontsize='"38px"' v-color='"pink"'>55hfgdsjhfsjkfs</h1> //指令使用v-自定义指令名称来使用，如果自定义的指令名称是驼峰命名的话，需要把大写变成小写，前边再加-连接
</div>

2.vue插槽

<div id="root">
<com1>哈哈哈哈哈哈哈哈哈哈哈</com1> //如果不使用插槽的话，在组件里面写的值会被组件覆盖不显示
</div>
<template id="com1">
<div>
<h1>如果我是dj你会爱我吗</h1>
<slot></slot> //使用插槽，表示插入的值在这个地方显示
</div>
</template>

3.具名插槽

<body>
<div id="box">
<first>
<h3 slot='one'>此树是我栽</h3> //具名插槽，相当于有个slot属性，给个名字one
<h4 slot="two">要从此路过</h4>
留下买路财
</first>
</div>
<template id="first">
<div>
<h2>此山是我开</h2>
<slot name='one'></slot> //想把哪个放在这个地方，就用slot标签，name值就是上面slot的值
<slot name='two'></slot>
<slot></slot>
</div>
</template>

4.vue常用API

<body>
<div id="app">
<h1>
姓名：{{user.name}}
</h1>
<h1>
性别：{{user.sex}}
</h1>
<h1>年龄：{{user.age}}</h1>
<div class="div" ref='box'></div>
<button @click='getWgh'>获取div的宽度</button>
</div>
</body>
<script src="../vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
user:{
name:"张三",
sex:"男"
},
},
// 如果想要在vue实例渲染后生命周期添加新的属性到实例中的data上，它不会触发更新。若必须要在渲染后添加新的属性更新视图就需要用到$set方法
mounted(){
// 参数一将要处理的数据参数二添加的属性名参数三属性值
this.$set(this.user,"age",24)
},
methods: {
getWgh(){
// vue中dom更新是一个异步的过程
console.log( this.$refs.box.offsetWidth+"-----------------") // 获取标签宽度
this.$nextTick(()=>{ // $nextTick当DOM更新完毕后执行回调
// 此时dom已经完全更新结束
console.log( this.$refs.box.offsetWidth)
})
}
},
})