vue常用语法

最新推荐文章于 2024-02-04 14:52:21 发布

大香肠叔叔

最新推荐文章于 2024-02-04 14:52:21 发布

阅读量115

点赞数

分类专栏：教学视频笔记文章标签： vue 监听器计算属性 vuex router

本文链接：https://blog.csdn.net/weixin_37722646/article/details/90691160

版权

教学视频笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1基础语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
</head>
<body>
    <div id="app">
        <div v-bind:id="appbind">
            {{msg}}
        </div>
        {{count + 10}}
        <div v-html="html"></div>
        <a v-bind:href="url">百度</a>
        <a :href="url">百度2</a>
        <button type="button" v-on:click="increade()">increade</button>
        <button type="button" @click="increade">increade2</button>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                appbind:"bindapp",
                html:"<div>heihei</div>",
                url:"https://www.baidu.com",
                count:1,
                msg:"hello world!"
            },
            methods:{
                increade:function () {
                    this.count++;
                }
            }
        })
    </script>
</body>
</html>

2监听器，计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
</head>
<body>
    <div id="app">
        {{msg}}
        {{msg1}}
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                msg:"hello vue!",
                talk:"toooo"
            },
            watch:{
                msg:function (newval,oldval) {
                    console.log('newval->'+newval);
                    console.log('oldval->'+oldval);
                }
            },
            computed:{
                msg1:function () {
                    return "computed->" + this.msg + ',' + this.talk;
                }
            }
        })
    </script>
</body>
</html>

3v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
</head>
<body>
    <div id="app">
        {{msg}}
        <div v-if="count>0">count > 0</div>
        <div v-else-if="count<0">count < 0</div>
        <div v-else>count = 0</div>
        <div v-show="flag">show me</div>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                msg:"hello 2",
                count:0,
                flag:true
            }
        })
    </script>
</body>
</html>

4v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
</head>
<body>
    <div id="app">
        {{msg}}
        <div v-for="item in list">{{item}}</div>
        <div v-bind:style="styleMsg">style</div>
        <div v-bind:class="['a','b','c']"></div>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                msg:"hello 3",
                list:[1,2,3,4,5,6],
                styleMsg:{
                    color:'red',
                    'text-shadow':'0 0 5px #000'
                }
            }
        })
    </script>
</body>
</html>