vue入门

目录

模板语法之插值

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<br>
<br>
<br>
<div id="app" style="text-align: center">
    <p>name:&nbsp;&nbsp;{{name}}</p>
    <p>age:&nbsp;&nbsp;{{age}}</p>
    <p>数组：&nbsp;&nbsp;{{list}}</p>
    <p>对象：&nbsp;&nbsp;{{obj}}</p>
    <p>标签：&nbsp;&nbsp;{{link}}</p>
    <p>三目表达式：&nbsp;&nbsp;{{wage>15000?"小康":"温饱"}}</p>



</div>



</body>

<script>
    var vm = new Vue(
        {
            el:'#app',
            data:{
                name:'jason',
                age:18,
                list: [111,222,333,444,555],
                obj:{name: 'lqz', age:20},
                link:'<a href="www.m.taobao.com">购物网</a>',
                wage:18000
            }
        }
    )

</script>

</html>

效果

文本指令

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<br>
<br>
<br>
<div id="app" style="text-align: center">
    <p v-text="link"></p>
    <div v-html="link"></div>
    <br>
    <img v-show="show" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fblog%2F201306%2F27%2F20130627111258_3zCiH.jpeg&refer=http%3A%2F%2Fimg4.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658650604&t=62a433e4611b9127fec26897e27b2fb3" alt="" height="250px" width="350px">
    <br>
    <img v-if="show2" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fblog%2F201306%2F27%2F20130627111258_3zCiH.jpeg&refer=http%3A%2F%2Fimg4.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658650604&t=62a433e4611b9127fec26897e27b2fb3" alt="" height="250px" width="350px">





</div>



</body>

<script>
    var vm = new Vue(
        {
            el:'#app',
            data:{
                link:'<a href="http://www.m.taobao.com" target="_blank">购物网</a>',
                show:true,
                show2:true,
            }
        }
    )

</script>

</html>

效果

事件指令

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<br>
<br>
<br>
<div id="app" style="text-align: center">
    <button v-on:click="handleClick1">点我有惊喜╰(*°▽°*)╯</button>
    <br>
    <br>
    <p @click="handleClick2"><button>点我</button>
        <br>
        <br>
        <img v-show="show" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fblog%2F201306%2F27%2F20130627111258_3zCiH.jpeg&refer=http%3A%2F%2Fimg4.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658650604&t=62a433e4611b9127fec26897e27b2fb3" alt="" height="250px" width="350px">
    </p>
    <p @click="handleClick3('qqq','www')"><button>点我带参数</button>
    </p>
    <p @click="handleClick4($event)"><button>事件</button>
    </p>


</div>



</body>

<script>
    var vm = new Vue(
        {
            el:'#app',
            data:{
                show:true
            },
            methods:{
            handleClick1:function(){
                alert('骗你的！！！')

            },
            handleClick2:function () {
                this.show =! this.show
            },
            handleClick3:function (a,b,c) {
                console.log(a,b,c)

            },
            handleClick4:function (event) {
                console.log(event)

            }
            }

        }
    )

</script>

</html>

效果

属性指令

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
    <style>
        .red {
            color: rgba(243, 5, 52, 0.68);
        }
        .blue {
            color: rgba(104, 129, 255, 0.7);
        }
    </style>
<body>
<br>
<br>
<div id="app02" style="text-align: center">
    <p >
        <button @click="handleClick">点我变色</button>
    </p>
    <br>
    <div :class="isActive?'red':'blue'">
        <h1>我是一个p标签</h1>
    </div>

</div>



</body>
<script>
    var vm =new Vue({
        el:'#app02',
        data:{
            change:'red',
            isActive:true,

        },
        methods:{
            handleClick:function () {
                this.isActive = !this.isActive
            }
        },
    })

</script>
</html>

效果

定时切换图片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>

<div id="app03" style="text-align: center">
    <br><br><br>
    <bntton @click="handleClick"></bntton>
    <br>
    <br>
    <img :src="url" alt="" width="600px" height="400px">

</div>


<script>
    var vm = new Vue({
        el:'#app03',
        data:{
            url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fphoto%2F2011-6-1%2Fenterdesk.com-B0FE82B00BF5793BA8A2E37EE4AB16B1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658656220&t=ae39badadd378e799dd072b529a1bb55',
            urlList: ['https://img1.baidu.com/it/u=2328779614,3564451430&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
                'https://img2.baidu.com/it/u=1820379550,1300031829&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
                'https://img1.baidu.com/it/u=1463170695,3985012244&fm=253&fmt=auto&app=138&f=JPEG?w=778&h=500',
                'https://img0.baidu.com/it/u=1410510505,4239539557&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
            ]
        },
        methods:{
            handleClick:function () {
            let url01 = this.urlList.pop();
            this.url = url01;
            this.urlList.unshift(url01);
            },

        },
        mounted(){
        //在mounted中声明周期中创建定时器
        const timer = setInterval(()=>{
            this.handleClick("1")
        }, 2000) // 每两秒执行1次
        this.$once('hook:beforeDestroy',()=>{
            // 在页面销毁时，销毁定时器
            clearInterval(timer)
        })
        }
        }

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

效果图

posted @ 2022-06-24 17:40  一梦便是数千载  阅读(21)  评论(0)  编辑  收藏  举报