<!DOCTYPE html>
<body>
<div id="app">
<p></p>
<p>{
{
message }}</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Java无难事'
}
}
});
app.mount('#app')
</script>
</body>
</html>
自定义指令，不是很懂。
<!DOCTYPE html>
<body>
<div id="app">
<p v-pin:top="400">Java无难事</p>
<p v-pin:[direction]="50">Java无难事</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
direction: 'left'
}
}
})
app.directive('pin', {
beforeMount(el, binding, vnode) {
el.style.position = 'fixed';
let s = binding.arg || 'left';
el.style[s] = binding.value + 'px'
}
})
//console.log(s)
app.mount('#app')
</script>
</body>
</html>
let s = binding.arg || 'left';
el.style[s] = binding.value + 'px'
这是些什么鬼