052——VUE中使用vue-cli初始化单页面应用

weixin_34174422

于 2018-01-16 14:53:00 发布

阅读量111

点赞数

文章标签： javascript ViewUI

本文通过一个示例展示了如何在Vue.js中使用自定义指令来实现动态样式更改、输入焦点和元素隐藏等功能。介绍了基本的HTML结构，并通过JavaScript代码详细解释了如何定义和使用这些自定义指令。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>使用vue-cli初始化单页面应用</title>
    <script src="vue.js"></script>
</head>
<body>
<!--
    directive:
        bind  inserted:插入的  update
-->
<div id="demo">
    <h1 v-star="color">我是标题内容</h1>
    <input type="text" v-model="color" value="color" v-focus>
    <h3 v-hide="true">{{title}}</h3>
</div>
<script>
    new Vue({
        el: "#demo",
        data: {
            title: "百度一下就知道了",
            color: "red"
        },
        directives: {
            star(el,bind){
                var color=bind.value?bind.value:'red';
                el.style.cssText="color:"+color;
            },
            focus:{
                inserted(el,bind){
                    el.focus();
                }
            },
            hide(el,bind){
                if(bind.value){
                    el.style.cssText="display:none";
                }
            }
        }
    });
</script>
</body>

</html>