1.vue.js实例:展现helloWord的方式

来源:互联网 发布:kk聊天软件 编辑:程序博客网 时间:2024/05/23 10:15
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>vue helloword</title>
    <script src="js/vue.min.js"></script>
    <style type="text/css">
        #app{width:600px;margin:100px auto; text-align:center; color:red; font-size:22px;}
        #app p{font-size:16px; color:#000; text-align:left;}
    </style>
</head>
<body>
    <div id="app">
        {{ message }}
        <br />
        <br />
        <p>这个很简单。使用一堆 script 标签就可以让代码跑起来。从这里可以看出,利用 Vue 的功能特性的好处就是无需学习任何新的技术。</p>
    </div>
    <script type="text/javascript">
        var helloword=new Vue({
            el: '#app',
            data: {
                message: 'helloWord:问候语来自Vue.js'
            }
        });
    </script>
</body>
</html>
0 0
原创粉丝点击