Vue学习笔记

最新推荐文章于 2022-01-20 21:36:28 发布

不染心

最新推荐文章于 2022-01-20 21:36:28 发布

阅读量224

点赞数 1

分类专栏： Vuejs 文章标签： vue js html

本文链接：https://blog.csdn.net/qq_38234785/article/details/106517405

版权

Vuejs 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Vue学习笔记

一、引入vue.js库

<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.0/vue.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue学习</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>{{msg}}</h2>
</div>
<script>
    new Vue({
        el : '#app',
        data:{
            msg : "vue基本模板",
        },
        methods:{
        }

    })
</script>
</body>
</html>

在这里插入图片描述

二、网址的跳转、点击事件、div中绑定html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue学习</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.0/vue.js"></script>
</head>
<body>
<div id="app" class="appstyle">
    <h2>{{msg}}</h2>
    <br>
    <!--两种网址跳转方式-->
    <a v-bind:href="url">百度</a>
    <a :href="url">百度</a>
    <br>
    <!--绑定html模板-->
    <div v-html="template">
    </div>
    <!--每次点击count++-->
    {{count}}
    <button type="button" @click="submit()">add</button>
</div>
<script>
    new Vue({
        el : '#app',
        data:{
            msg : "vue基本模板",
            url : "http://www.baidu.com",
            count : 0,
            template: '<div>hello template</div>'
        },
        methods:{
            submit : function(){
                this.count++
            }
        }

    })
</script>
</body>
</html>

三、条件渲染

根据数值的大小确定是否渲染

<div id="app3"  class="appstyle">
    <h2>{{msg}}</h2>
    <br>
    <div v-if="count > 0">
        判断一：count 大于0 ，count是{{count}}
    </div>
    <div v-else-if="count < -1 && count > -5">
        判断二：count 不大于0 ，count是{{count}}
    </div>
    <div v-else>
        判断三：count 不大于0 ，count是{{count}}
    </div>
</div>
<script>
    var app3 = new Vue({
        el : '#app3',
        data:{
            msg : "条件渲染",
            count : 0,
        },
        methods:{

        }

    })
</script>

<div id="app3"  class="appstyle">
    <div v-for="item in list">
        <div v-if="item.age > 31">
            {{item.age}} 年龄大于31，没有样式
        </div>
        <div v-else
             :style = "stylemsg"
             :class="['active', 'add', 'more', {'stylemsg' : item.age > 20}]">
            {{item.name}}年龄小于等于31，有样式
        </div>
    </div>
</div>
<script>
    var app3 = new Vue({
        el : '#app3',
        data:{
            msg : "条件渲染",
            count : 0,
            stylemsg:{
                color: "red",
                textShadow:'0 0 5px green'
            },
            list : [{
                name:"zhansan",
                age:30
            },
                {
                    name:"lisi",
                    age:35
                }]
        },
        methods:{

        }

    })
</script>

在这里插入图片描述

四、变量属性监听

<div id="app2"  class="appstyle">
    <h2>{{msg}}</h2>
    <br>
    <p>
        {{msg1}}
    </p>
</div>
<script>
    var app2 = new Vue({
        el : '#app2',
        data:{
            msg : "计算属性与监听器",
            another: "another "
        },
        //监听器：异步场景，一个变量
        watch:{
            msg:function (newval, oldval) {
                console.log("msg新的变量" + newval)
                console.log("msg旧的变量" + oldval)
            }
        },
        //计算属性：数据联动，多个变量
        computed:{
        },
        methods:{

        }

    })
</script>

在这里插入图片描述

<div id="app2"  class="appstyle">
    <!--<h2>{{msg}}</h2>-->
    <!--<br>-->
    <p>
        {{msg1}}
    </p>
</div>
<script>
    var app2 = new Vue({
        el : '#app2',
        data:{
            msg : "计算属性与监听器",
            another: "another "
        },
        //监听器：异步场景，一个变量
        watch:{
        },
        //计算属性：数据联动，多个变量
        computed:{
            msg1: function () {
                return 'computed ' + this.msg +" " + this.another
            }
        },
        methods:{

        }

    })
</script>

在这里插入图片描述

不染心

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue学习笔记

Vue学习笔记一、引入vue.js库<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.0/vue.js"></script><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue学习</title> &lt
复制链接

扫一扫