【Vue】2.第一个Vue程序

待我学业归来。

于 2020-12-16 11:53:37 发布

阅读量101

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_44859586/article/details/111254482

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--导入vue.js  官方:https://cn-                                                          .vuejs.org/v2/guide/installation.html-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

    <!--视图层 view-->
    <div id="vue">
        {{message}}
    </div>
</head>
<body>
<script type="text/javascript">

        //Vue.js 的核心是实现了 MVVM 模式，她扮演的角色就是 ViewModel 层
        //简单来说，浏览器不需要刷新界面，改变 vm.message的值就会自动改变数据，展现到view层（数据双向绑定）
        //如果没有用vue.js，就需要刷新页面才会改变数据
    var vm=new Vue({
        el:'#vue',

        //Model层：数据
        data:{
            message:'hello Vue!'
        }
    })
</script>
</body>
</html>