vue入门

AyayaOVO

于 2020-06-23 15:03:42 发布

阅读量136

点赞数 1

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

本文链接：https://blog.csdn.net/AyayaOVO/article/details/106923853

版权

vue全家桶专栏收录该内容

28 篇文章 0 订阅

订阅专栏

1，安装

CDN导入

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

NPM安装

npm install vue

HELLO WORLD

<!--第一步：创建文件夹及html文件-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门之Helloworld</title>
    <!--第二步：引入Vue库-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!--第三步:创建一个Div-->
    <div id="app">
        <!--Vue的模板的绑定数据的方法，用两对花括号进行绑定Vue中的数据对象的属性 -->
        {{message}}
    </div>

    <!--第四步：创建Vue的对象，并把数据绑定到上面创建好的div上去。-->
    <script type="text/javascript">
        var app=new Vue({ // 创建Vue对象。Vue的核心对象。
            el:'#app', // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
            data:{    // data: 是Vue对象中绑定的数据
                message:'hello Vue!' // message 自定义的数据
            }
        })
    </script>
</body>
</html>

AyayaOVO

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue入门

1，安装CDN导入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>NPM安装npm install vueHELLO WORLD<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &lt
复制链接

扫一扫