vue常用指令

原创 已于 2023-01-03 15:22:12 修改
· 56 阅读 · 0 ·
版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

于 2023-01-03 15:12:51 首次发布

1.vue

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            }
        })
    </script>
</body>

</html>

2单向绑定

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 单项绑定 v-bind -->
    <div id="app">
        <div v-bind:style="msg">单项绑定</div>
        <div :style="msg">单项绑定</div>
      
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg:'color:green;'
            }
        })
    </script>
</body>

</html>

3双向绑定

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{keybord}}
        <br>
        <input type="text" :value="keybord"/>
        <!-- 双向绑定的用法就是 下边动 他们都跟着动  -->
        <input type="text" v-model="keybord"/>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                keybord:'徐源'
            }
        })
    </script>
</body>

</html>

4事件绑定

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <button v-on:click="show()">事件绑定</button>
        <button @click="show()">事件绑定2</button>
        <br>
        <input type="text" :value="keybord"/>
        <!-- 双向绑定的用法就是 下边动 他们都跟着动  -->
        <input type="text" v-model="keybord"/>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                keybord:'事件绑定'
            },
            methods: {
                show(){
                    console.log("show.....")
                }
            }
        })
    </script>
</body>

</html>

5条件指令

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <input type="checkbox" v-model="OK">
        <br/>
        <!-- 选中显示一个内容 不选中不显示内容 -->
        <div v-if="OK">选中了</div>
        <div v-else>没有选中</div>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                OK:false    
            }
        })
    </script>
</body>

</html>

6循环渲染指令

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
            <div v-for="user in userlist">
                
                <!-- 通过遍历list数组中的值 -->
                {{user.name}} -- {{user.age}}
            </div>
            <div v-for="(user,index) in userlist">
                <!-- index 遍历他的索引值 -->
                <!-- 通过遍历list数组中的值 -->
               {{index}}-- {{user.name}} -- {{user.age}}
            </div>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userlist:[
                    {"name":"lucy","age":20},
                    {"name":"mary","age":30}
                ]
            }
        })
    </script>
</body>

</html>

7入门

	<!DOCTYPE html>
	<html lang="en">
	<head>
	    <meta charset="UTF-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>Document</title>
	</head>
	<body>
	    <script src="vue.min.js"></script>
	    <div id="app">
	        <!-- 插值表达式 -->
	            {{message}}
	    </div>
	    <script>
	        new Vue({
	            el:'#app',
	            data:{
	                message:'hello Vue'
	            }
	        })
	    </script>
	</body>
	</html>

7.生命周期

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{msg}}
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg:"hello"
            },
            created(){
                debugger//调试
                // 在页面渲染之前执行
                    console.log('created......')
            },
            mounted(){
                debugger//调试
                 // 在页面渲染之后执行
                 console.log('mounted......')
            }
        })
    </script>
</body>

</html>
answero
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值