Vue--缩写

最新推荐文章于 2023-07-18 17:10:42 发布

郭浩326

最新推荐文章于 2023-07-18 17:10:42 发布

阅读量648

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/guohao326/article/details/72785245

版权

vue 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

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

<div id="app">
    <div v-bind:title="msg">将鼠标放上去看看</div>

    <button v-on:click="test">按钮</button>
    <!---
        如下两种写法，是上面两种写法的简略写法
    -->
    <div :title="msg">将鼠标放上去看看</div>
    <button @click="test">按钮</button>

    <!--
        我们使用简略写法有助于代码的编写速度和优雅度，但是不一定就是说简略的一定好
        简略的写法会增加我们的项目开发难度：
            1、维护性
            2、扩展性
            3、可读性
    --->
</div>

<script>

    var app = new Vue({
        el : "#app",
        data : {
            msg : "我要有个女朋友"
        },
        "methods" : {
            "test" : function () {
                alert("你点我干啥？");
            }
        }
    });

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

郭浩326

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue--缩写

html>html lang="en">head> meta charset="UTF-8"> title>内置指令title> script src="js/vue.js" >script>head>body>div id="app"> div v-bind:title="msg">将鼠标放上去看看div> button v-on:click
复制链接

扫一扫