本文共 788 字，大约阅读时间需要 2 分钟。

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的基本结构，来一个实例感受一下吧！

   
      {
  { message }}
   

 

转载地址：http://slqzi.baihongyu.com/