vue.js学习(1)

1.安装vue

# 最新稳定版
$ npm install vue

补充：vue-cli

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$cdmy-project
$ npm install
$ npm run dev

2.介绍vue
下面是官方文档(中文)的说明:

Vue.js（读音 /vjuː/, 类似于 **view**） 是一套构建用户界面的 **渐进式框架**。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用[单文件组件](https://vuefe.cn/v2/guide/single-file-components.html)和 [Vue 生态系统支持的库](https://github.com/vuejs/awesome-vue#libraries--plugins)开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现**响应的数据绑定**和**组合的视图组件**。

估计对于有的初学者同学来说，看到这个说明就已经懵了，不要紧，在后面的学习中会逐渐理解里面的每个概念。目前，只需知道两点就够了:

(1)vue很强大，基本能够满足你能想到的所有需求，你想不到的很多需要，它也能够满足。
(2)vue很简单易用，哪怕是前端初学者，也能很快的上手使用。
如果你坚持学习并使用着vue，相信后面的日子里，你会对于这两点的体会越来越深。

最简单的vue实例

下面这个是官方给出的一个vue入门实例

  {{ message }}

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

千万不要小看这个简简单单的实例，从这个实例里我们能理解到很多vue的理念和思想。
在我理解看来，或许更改把上面的代码上下顺序调过来，把js写在前面，html写在后面或许更能体现vue的思想。什么意思呢?这就回到了前面的官方说明了。

vue的核心库只关注图层。
vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

你会发现vue对视图上的数据使用不要更简单粗暴，如果你想往页面里传入数据，你需要做的，仅仅是在vue的data里定义一下就可以了，不需要再做任何其他的操作，视图就能直接拿来用!我想，什么叫做只关注图层，这就叫只关注图层，它能让你用难以想象的简单方式来实现页面的数据绑定。
同时，这种绑定是动态的，什么意思？就是只要你js中data里的message值发生变化，页面也会自动更新这个值，同样不需要你做任何操作。
可能上面的说法对一些人来说还是有些抽象，没关系，等到你真正应用到了它，你就会感受到它的神奇之处。
条件与循环

有了vue，你可以直接在html里面写循环和条件判断。同样这个只针对初学者同学，可能有一定angular基础的同学对这个早已经见怪不怪了。

下面是个条件判断简单例子

  
显示

var app = new Vue({
  el: '#app',
  data: {
    display: true
  }
})

如果data里的display为true，页面上"显示"两个字就能显现出来，如果display为false，页面上则看不到"显示"，相信不难理解。至于它是怎么实现这个效果的，暂时不在这里解释。当然有兴趣的同学可以自己写个简单案例试一试，很容易就能知道了。

下面是个循环的简单例子

  

    

      {{ student }}
    
  

var app = new Vue({
  el: '#app',
  data: {
    students: [
     '小明',
     '小华',
     '小军',
    ]
  }
})

页面上的效果是:

1.小明
2.小华
3.小军

这个应该也不难理解，不再多说。
处理用户输入

vue里面用v-on绑定监听事件，如下面的例子:

  
{{ student }}
  把小明改为小军

var app = new Vue({
  el: '#app',
  data: {
    student: '小明'
  },
  methods: {
    changeStudent: function () {
      this.message = '小军'
    }
  }
![Uploading 4050018-56daea433a61af49_389470.png . . .]

})

实例很简单，就不多说了。出来的页面效果是:

4050018-56daea433a61af49.png

点击一下按钮，小明就会变成小军。

Vue 也提供了 v-model 指令，它使得在表单输入和应用状态中做双向数据绑定变得非常轻巧。如下例子:

  
{{ message }}
  

var app= new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

出来的页面效果是:

4050018-f232741914f9a832.png

你在输入框输入什么，页面能够实时的显示出来。它的原理可以解释为这样:
当绑定v-model之后，vue就开始监听页面上对应输入框的value的变化，一旦输入框的value发生改变，vue就获取这个value值，并把它赋值给data里的message，当message发生变化的时候，页面回自动更新它所绑定的元素。
小结

vue的基础介绍就是这么多，总结起来vue有如下特点:

(1)对视图的处理十分强大，用户只需要关注数据的运算逻辑就可以，无需关注视图层的变化，vue自会帮你处理好。
(2)极大改善了视图本身的数据处理方式，极大提高了含有多用户交互页面的编写效率。
最后，如果你读到了这里，谢谢你的阅读，下面一句话共勉:
前端路漫漫，保持激情，保持年轻!

参考资料
vue中文文档