VUE快速入门

1. 来自官网的vue介绍

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

---

2. 后端开发使用VUE

对于我这种小白来说，初读Vue的官方文档，感觉有点不知所云，因此写此博客记录一下自己学习Vue一个过程，以便做后端开发的读者可以明白如何快速使用Vue。

---

3.一个实时运行JS的网站

推荐大家使用这个网站来进行一些小的Vue的代码的编写和效果的查看。
https://jsfiddle.net
对于前端来讲，个人认为可以快速的看到效果和改动的过程是一个很好的学习条件。不需要搭建前端项目，直接在网页上编写代码看实时的效果，对一些语法的理解会更快一些。
这个网站进去之后可以选择你想选择的JS框架，选择Vue后，就可以迅速的进行开发了。简单快捷。

选择后界面就比较清晰明了了。首先整个页面被分成四个方框。左上为Html，左下为JS，右上为CSS，右下为效果。点击左上方run按钮后，就可以实时的看效果。

---

4. Vue的基础语法

4.1 人生的第一个Vue实例

我们需要创建一个Vue实例（对象）。
Html代码如下：

<div id = "firstVue">
  {{ helloWorld }}
</div>

JS代码：

new Vue({
    el : "#firstVue",
    data : {
    helloWorld :"my first Vue"
  }
})

这样我们就创建了一个Vue的实例了。
我们来讲解一下这个Vue对象。首先我们使用new的语法，新建了一个Vue的对象（实例）。在这个vue的对象中会有一些属性。其中“ el : ” 表示你要挂载哪一个DOM元素。因为Vue对象只在某一个DOM元素下有效。因此我们使用“ el : ” 标签来指定我们要挂载的DOM元素。“#”表示Id选择器。因此在我们添加了

el : "#firstVue"

这个属性时，就相当于把当前Vue对象挂载到了id为firstVue的DOM上了。

其次，data属性表示值。我们都知道Vue是一个双向绑定的JS框架。{{ }} 是一个占位符号。如果你写成{{helloWorld}}这个样子，它会在Vue对象中寻找名为helloWorld 的键，并把 {{ helloWorld }} 替换成其中的值。我们将值声明在Vue对象的data中，因此就会将data中的helloWorld的值渲染到HTML上。

4.2 常用语法

由于这些语法的东西可以自己编写，自己理解。我只提出几条做笔记和标注，大家可以参考慕课的视频进行语法的自行学习。学习视频：https://www.imooc.com/video/16987

• 事件： v-on：可使用@ 对其进行简写。
• 数据绑定： v-bind： 可以使用 ： 对其进行简写。
  但是此处绑是单向的、属性绑定。
  
  • v-model ： 双向的数据绑定。
  • 计算属性computed： 当要计算的值并没有发生改变时，取缓存中的值。
  • 监听器 ： watch： 当发生改变时，做业务逻辑
  • v-if： 符合条件时显示。
  • v-show ： 符合条件时显示。
    v-if 和 v-show的区别：
    v-if 会直接给标签删除掉
    而v-show会给标签增加一个隐藏的属性，v-show：更快 因为它不会销毁DOM再创建
  • v-for : 循环： key会增加v-for的效率

---

5.使用Element-UI

这是一个饿了么封装的JS框架，非常适合新手或者后端开发人员或者新手的后端开发人员进行VUE的开发。在这里我粘贴一下官方文档。
http://element-cn.eleme.io/#/zh-CN

---

6. ES6的常用语法

https://www.jianshu.com/p/287e0bb867ae

---

7. 使用webpack打包前端项目。