目录
1.vue自定义指令
<body>
<div id="root">
<h1 v-fontsize='"38px"' v-color='"pink"'>55hfgdsjhfsjkfs</h1> //指令使用v-自定义指令名称来使用,如果自定义的指令名称是驼峰命名的话,需要把大写变成小写,前边再加-连接
</div>
<script src="./vue.js"></script>
<script>
// Vue.directive('fontSize', { //全局指令,第一个参数是指令名称,第二个参数是一个回调函数
// inserted (el, data) { //回调函数名字写死,两个参数,第一个参数是自定义指令作用的元素,第二个指令是一个对象,里面的value值就是自定义指令等号后面给的值
// el.style.fontSize=data.value
// },
// });
const app = new Vue({
el: '#root',
directives:{ // 局部指令,只能在这个vue实例中使用,其他用法跟全局指令一样
'fontsize':{
inserted (el,data) {
el.style.fontSize=data.value
}
},
'color':{
inserted(el,data){
el.style.color=data.value
}
}
}
});
</script>
2.vue插槽
<div id="root">
<com1>哈哈哈哈哈哈哈哈哈哈哈</com1> //如果不使用插槽的话,在组件里面写的值会被组件覆盖不显示
</div>
<template id="com1">
<div>
<h1>如果我是dj你会爱我吗</h1>
<slot></slot> //使用插槽,表示插入的值在这个地方显示
</div>
</template>
<script src="./vue.js"></script>
<script>
let com1={
template:'#com1'
}
Vue.component('com1',com1);
const app = new Vue({
el: '#root',
});
</script>
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>
<script src="./vue.js"></script>
<script>
let first={
template:'#first'
}
Vue.component('first',first)
new Vue({
el:'#box'
})
</script>
</body>
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)
})
}
},
})
5.组件/vue生命周期
beforeCreate创建前data,methods还没有创建
created创建后,data,methods都已经创建完成了
beforeMounted页面渲染前,数据都加载完毕了,但是还没渲染到网页上
mounted渲染后,数据都渲染到了页面上
beforeDestroy组件或者vue实例销毁前,数据都还可以使用
destroyed销毁后,组件或者vue实例已经销毁,不能继续使用了