vue2初体验

最新推荐文章于 2022-09-17 15:02:36 发布

坏萝卜

最新推荐文章于 2022-09-17 15:02:36 发布

阅读量57

点赞数

分类专栏： vue2 文章标签： vue

本文链接：https://blog.csdn.net/qq_52135740/article/details/118495248

版权

vue2 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

vue初体验：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue初体验</title>
</head>
<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h3>{{code}}</h3>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    //编程范式：声明式编程
    //创建Vue实例
    const app = new Vue({
        el:'#app',
        data:{
            message:"hello word",
            code:'myName'
        }
    })
</script>
</html>

vue列表展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            movies:['星际穿越','功夫熊猫','魔女']
        }
    })
</script>
</html>

效果图：

在这里插入图片描述

vue计数器案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button v-on:click="add">+</button>   //绑定事件的两种形式
        {{count}}
        <button @click="subtract">-</button>
    </div>
</body>

<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            count:0
        },
        methods:{
            add(){                     
                this.count++;
            },
            subtract:function(){
                this.count--;
            }
        }
    })
</script>
</html>

坏萝卜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2初体验

vue初体验：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>vue初体验</title></head><body> <div id="app"> <h2>{{message}}</h2> <h3>{{code}}
复制链接

扫一扫

专栏目录