vue.js下载与使用入门

2025-10-28 06:47:33

1、下载vue.min.js。

下载地址:https://vuejs.org/js/vue.min.js

如果浏览器没有直接提示下载,可以单击鼠标右键,再点击另存为。

具体步骤参考这个动态图。本次下载后保存到 D:\vue学习。

vue.js下载与使用入门

2、新建一个simple.html文件。

在下载vue.min.js的同一个文件夹中新建一个simple.text文本,并重命名为simple.html(修改文件后缀),完成新建一个空白的html文件。

vue.js下载与使用入门

3、使用Nodepad++(推荐)或其它文本编辑器打开simple.html。

步骤为:单击simple.html,右键,点击 Edit with Nodepad++。

或者单击simple.html,右键,点击打开方式,用记事本打开。 

vue.js下载与使用入门

4、html页面引入vue.min.js。

使用<script type="text/javascript" src="vue.min.js"></script>语句引入。

这里的src是vue.min.js文件所在的相对路径或者绝对路径。

具体内容复制以下代码到simple.html,保存。

<!DOCTYPE html>

<html>

<head>

      <meta charset="utf-8">

      <title>hello vue!</title>

      <script type="text/javascript" src="vue.min.js"></script>

</head>

<body>

      <div id="vueDiv">

            <h1> 名称: {{name}}</h1>

            <h1>{{details()}}</h1>

      </div>

<script type="text/javascript">

      var vm = new Vue({

            el: '#vueDiv',

            data: {

                  name: "hello! ",

                  alexa: "10000"

            },

            methods: {

                  details: function() {

                        return  this.name + "好好学习,天天向上。";

                  }

            }

      })

</script>

</body>

</html>

vue.js下载与使用入门

5、保存后,直接双击使用浏览器打开simple.html。

展示以下内容,可以正常使用vue.js了。

vue.js下载与使用入门

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢