vue.js下载和安装

最新推荐文章于 2024-04-26 07:47:31 发布

前端小白进阶之路

最新推荐文章于 2024-04-26 07:47:31 发布

阅读量583

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/sinat_32696403/article/details/113610255

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

要下载安装vue首先得下载安装node.js和npm。下载安装好这两样以后就可以安装vue了。

直接在在官网上下载vue.js。并用< script >标签引入

网址：https://vuejs.org/v2/guide/installation.html

一个是开发环境版本，一个是生产环境版本
在这里插入图片描述

1.单元素显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello vue</title>
    <script src="../static/js/vue.js"></script>
</head>
<body>
    <div id="app"><h2>{{message}}</h2></div>
    <script>
        const vue = new Vue({
            el: '#app',
            data: {
                message: 'hello vue!!'
            }
        })
    </script>
</body>
</html>

el属性：它决定了对象挂载到哪个元素上；这里是将创建的vue对象挂载到id为app的元素上；
data属性：通常会存储一些数据；

2.列表显示

li的个数会随着列表movies的个数增减

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <script src="../static/js/vue.js"></script> 
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>
    </div>
    <script>
        const vue = new Vue({
            el: '#app',
            data: {
                movies: ["教父1", "教父2", "教父3"]
            }
        })
    </script>
</body>
</html>