Vue入门教程 第一篇 （概念及初始化）

注：为了本教程的准确性，部分描述引用了官网及网络内容。

安装Vue

---

1、使用npm安装vue：

 npm install vue 

2、下载使用js文件：

https://vuejs.org/js/vue.min.js

 

Vue概念

---

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

由于其响应式设计依赖于ES6中的一些特性，因此Vue 不支持 IE8 以及更低版本浏览器（ES5）。

 

初始化

---

每个 Vue 应用都需要通过实例化 Vue 来实现。

 var vm = new Vue({
   // 选项
 })

范例：

 <div id="vue_det">
     <h1>name : {{name}}</h1>
     <h1>{{details()}}</h1>
 </div>
 <script type="text/javascript">
     var vm = new Vue({
         el: '#vue_det',
         data: {
             name: "Jimmy"
         },
         methods: {
             details: function() {
                 return  this.name + " welcome！ ";
             }
         }
     })
 </script>

执行结果：

 

data 用于定义属性，实例中属性：name。

methods 用于定义的函数，可以通过 return 来返回函数值。

{{ }} 用于输出对象属性和函数返回值。