vue笔记-指令(一)

指令学习:

v-cloak 可以解决插值显示闪烁的问题。
v-text  内容赋值。
v-html  把内容当html渲染。
v-bind  用于绑定属性的指令【可以简写为:】。(当表达式解析,可以做拼接)
v-on    绑定事件【可以简写为@】

v-cloak解决闪烁:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            [v-cloak]{
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <p v-cloak>{{message}}</p>

        </div>
        
        <script type="text/javascript" src="./lib/vue-2.6.10.js"></script>
        <script>
            var vm = new Vue({
                el: '#app',
                data:{
                    message: 'vue的学习'
                }
            })
        </script>
    </body>
</html>

示例代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
    </head>
    <body>
        <div id="app">
            <p>{{message}}</p>
            <p v-text="message2"></p>
            <p v-html="message3"></p>
            
            <button type="button" v-bind:title="titleContent">按钮</button>
            <button type="button" :title="titleContent + '12345'">按钮</button>
            
            <input type="button" value="按钮" v-on:click="alert('hello')"/>
            <input type="button" value="按钮" v-on:click="alertInfo"/>
            <input type="button" value="按钮" @click="alertInfo"/>

        </div>
        
        <script type="text/javascript" src="./lib/vue-2.6.10.js"></script>
        <script>
            var vm = new Vue({
                el: '#app',
                data:{
                    message: 'vue的学习',
                    message2: 'vue的学习2',
                    message3: '<h1>vue的学习3</h1>',
                    titleContent:'绑定属性的指令'
                },
                methods:{
                    alertInfo: function(){
                        alert("hello");
                    }
                }
            })
        </script>
    </body>
</html>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容