第一个vue应用（单页面）

最新推荐文章于 2023-12-27 21:52:57 发布

vue学习

最新推荐文章于 2023-12-27 21:52:57 发布

阅读量163

点赞数

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

本文链接：https://blog.csdn.net/weixin_44180173/article/details/104078678

版权

vue 专栏收录该内容

48 篇文章 2 订阅

订阅专栏

vue

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>

<body class="nodata ">

    <div id="app">
        <div class="demo"> {{msg}} </div>
        <div class="demo">{{msg}}</div>
        <div class="">{{divhtml}}</div>
        <div v-html="divhtml"></div>
        <div>{{count}}</div>
        <a v-bind:href="baiurl">5555</a>
        <a :href="baiurl">简写</a>
        <button type="button" v-on:click="dian()">click</button>
        <button type="button" @click="ten()">加10</button>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: 'hellow',
                divhtml: '<div class="demo"><p>p标签</p></div>',
                baiurl: "www.baidu.com",
                count: 0
            },
            methods: {
                dian: function () {
                    this.count++;
                },
                ten: function () {
                    this.count++;
                },
            }
        })
    </script>
</body>

</html>

vue学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一个vue应用（单页面）

vue<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script></head>...
复制链接

扫一扫

专栏目录