Vue.js新手入门
首页 > Vue.js新手入门 > 第一个Vue.js程序

第一个Vue.js程序

2021-03-23 22:28:37 5 0

编辑 收藏

安装

我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 <script> 标签引入。Vue 会被注册为一个全局变量。

重要提示:在开发时请用开发版本,遇到常见错误它会给出友好的警告。

下载Vue.js生产版本

下载Vue.js开发版本

代码示例

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>it研习社-第一个Hello Vue程序</title>
    </head>
    <body>
        <div id="app">
            {{message}}
        </div>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/Javascript">
            var app=new Vue({                el:'#app',                data:{                    message:'Hello Vue!'
                }
            });        </script>
    </body></html>

页面输出:

855504590-59388eb69b5ad_fix732.png
第一个Vue.js程序

Hello World


  现在就让我们来写第一个vue.js的实例。如下代码:

html代码:

<div id="demo">  {{ message }}</div>

JavaScript代码:

new Vue({  el: '#demo',  data: {    message: 'Hello World!'  }})

  上面代码中div中的部分 {{ message }}为数据绑定,我们将会在后面的学习中讲到。而vue.js代码是实例化一个Vue对象。在使用vue之前必须要实例化。

按上面的代码去试试吧!


取消回复欢迎 发表评论: