[前端暴龙机，Vue2.x 进化 Vue3 ] Day5. Vue的起手开发

接下来，开始看看如何着手进行 Vue 的开发吧
这边都是透过最原始、最简单的网页开发模式进行，所以不会介绍到 Cli 的方式~

Hello Vue ，第一个 Vue 网页开发

还记得~ 不管是 Java、Python、C ...每次学习一个新的语言，第一个学会的范例就是跟它 say hello
所以我们也来一个 Hello Vue 吧~

1.引入 Vue 资源

我们要使用别人的功能，第一件做的事就是把资源给引入进来，才可以使用
所以我们可以透过官网，将 Vue 的 CDN 给贴到 html 中

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

2.建立 Vue 实例

每一个 Vue 的应用都是透过 new Vue({}) 的方式来创建实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello Vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <script>
        var vm = new Vue({})
    </script>
</body>
</html>

所以 vm 就会是我们的一个 Vue 的应用

3.Vue 可作用的空间

Vue 的实例已经宣告完毕，接着我们必需告诉它哪里的范围是 Vue 可以提供服务的，透过的是 el 去指定。
假设 : 我们要使用 Vue 提供服务的区块为在 id 为 app 的 div 区块，所以如果不是在 app 区块里面的就没有 vue 的功能了。

<body>
    // 在这里就无法使用 Vue 所提供的服务
    <div id="app">
        // 在此区块才可以使用 Vue 所提供的服务
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
        })
    </script>
</body>

如图，没有在 el 定义的可作用的空间内，就会被当成存文字显示

4.数据与方法

接着，Vue 提供了两个分别管理数据(data)和方法(methods)的区块来集中管理，只要在 data 里所有宣告的变数有渲染到画面上，那麽如果变数的值发生变更，画面就会产生"响应"，即把更新後的值重新渲染到画面上

<script>
    var vm = new Vue({
        el: '#app',
        data:{
            // 宣告变数的地方
        },
        methods:{
            // 做事件处理的地方
        }
    })
</script>

5.将数据渲染到画面上(声明式渲染)

声明式渲染是一个模板语法，可以将数据渲染到 DOM ，透过 {{ 变数 }} 表示，由双花括号 {{ }} 所包住，就可在 DOM 上渲染出变数的值了，又称做插值表示式。

<div id="app">
    {{ msg }}
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data:{
            msg: 'Hello Vue'
        },
        methods:{
      
        }
    })
</script>