vue自学笔记-指令（一）

最新推荐文章于 2024-05-15 17:59:30 发布

hush_Pc

最新推荐文章于 2024-05-15 17:59:30 发布

阅读量105

点赞数

本文链接：https://blog.csdn.net/weixin_42715209/article/details/102805566

版权

指令学习：

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>