vue-入门实例2-8-2.html

原创

虾米大王 2023-05-20 00:09:06 ©著作权

文章标签 javascript 前端 vue.js html Vue 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者虾米大王的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>指令参数</title>
</head>
<body>
    <div id="app">
        <a v-bind:href="wangzhi" v-bind:target="target">去淘宝</a><br>
        <img v-bind:src="tupiandizhi" alt="tupian" width="50">
        <br>
        <button v-on:click="myBtn01()">使用vue.js语法的按钮</button>
        <hr>
        <h3>下面是原生JavaScript调用的点击事件</h3>
        <button onclick="myBtn01()">原生JavaScript</button>
    </div>

    <script src="../js/vue.js"></script>

    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                wangzhi:'http://www.baidu.com',
                tupiandizhi:'img/v.png',
                target:'blank',
            },
            methods:{
                myBtn01:function () {
                    alert('v-on事件调用完成');
                }
            }
        });

        function myBtn01() {
            alert('原生事件调用完成');
        }
    </script>
</body>
</html>