Vue基本结构

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链接以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

注：本教程适合已掌握HTML、CSS、JavaScript基础知识的同学

---

首先要知道Vue需要在HTML中你的什么位置

Vue的本质是JavaScript函数所以Vue对象需要些在写在<script></script>标签之内：

<script>

vue.....

</script>

---

其次HTML中的元素可以通过id或class来绑定一个Vue的作用域，以div为例：

<div id="app"/class="app">

名为app的Vue对象的作用域

</div>

---

说完了Vue框架的注意事项后咱们来具体聊聊Vue的具体结构：

<div id="id"/class="class">Vue作用域</div>

<script>

//新建一个名为app的Vue对象
   var app = new Vue({

//el后跟作用域的id名或class名，绑定作用域
        el:"#id"/".class"
//data为一个Vue的对象数据存放的地方，其中可以为简单数据类型，也可以为数组和对象 
        data:{
            message1:"内容", //基本数据类型 
            array[], //数组
            obj:{}, //对象
            ...
            }

//methods为函数存放的地方
            methods:{
                方法1:function(){
                    ...
                }
                方法2:function(){
                    ...
                }
            }
    })

</script>

---

以上就是Vue的基本结构，来一个实例感受一下吧！

<div id="app">
  {{ message }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
      data: {
            message: 'Hello Vue!'
        }
    })
</script>