vue常用指令及生命周期

最新推荐文章于 2024-04-11 19:18:43 发布

学食

最新推荐文章于 2024-04-11 19:18:43 发布

阅读量165

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_48128217/article/details/137016794

版权

新手级入门简单易懂

一.vue常用指令

v-bind和v-model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app">
<a v-bind:href="url">百度一下</a>
<a :href="url">百度一下</a>
<input v-model="url"></input>
</div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app=new Vue({

el:"#app",
data() {
    return {
        url:"https://www.baidu.com"
    }
},
})
</script>
</body>
</html>

v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div id="app">
        <input type="button" value="单击事件" v-on:click="show()">
        <input type="button" value="单击事件" @click="show()">
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<script>
var app= new Vue({
    el:"#app",
    methods: {
        show(){
            alert("hello")
        }
    },
})

</script>
</body>
</html>

v-if，v-else-if,v-else:不满足条件不渲染

v-show:不满足条件切换display属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-if="count==1">div1</div>
        <div v-else-if="count==2">div2</div>
        <div v-else>div3</div>
        <div v-show="count==1">div puls</div>
        <input type="text" v-model="count"> 
        
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>

var app=new Vue({

    el:"#app",
    data() {
        return {
            count:3,
        }
    },
})

</script>
</body>
</html>

v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-for="add in adds">
            {{add}}<br>
        </div>
<hr>
        <div v-for="(add,i) in adds">
          {{i+1}}--{{add}}<br>
        </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>

    var app=new Vue({
        el:"#app",
        data() {
            return {
                adds:["北京","上海","广州"]
            }
        },
    })
</script>

</body>
</html>

二.vue生命周期

mounted挂载完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-for="add in adds">
            {{add}}<br>
        </div>
<hr>
        <div v-for="(add,i) in adds">
          {{i+1}}--{{add}}<br>
        </div>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>

    var app=new Vue({
        el:"#app",
        data() {
            return {
                adds:["北京","上海","广州"]
            }
        },

        mounted() {
            alert("挂载完成")
        },
    })
</script>

</body>
</html>

学食

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue常用指令及生命周期

新手级入门简单易懂。
复制链接

扫一扫

vue常用指令及生命周期

一.vue常用指令

二.vue生命周期

“相关推荐”对你有帮助么？