学习笔记《Vue》

继 AngularJS 和 React 之后，Vue 又为前端框架烧起了一把火，作者是华人，刚刚宣布加盟阿里的跨平台移动开发工具 Weex 担任技术顾问，Vue2 即将发布，作者最近一段时间一直在闭关创作

Vue 属于 MVVM 架构，区别于 MVC，这个可以参考网上的一个解释：

在MVC里，View是可以直接访问Model的！从而，View里会包含Model信息，不可避免的还要包括一些业务逻辑。 MVC模型关注的是Model的不变，所以，在MVC模型里，Model不依赖于View，但是 View是依赖于Model的。不仅如此，因为有一些业务逻辑在View里实现了，导致要更改View也是比较困难的，至少那些业务逻辑是无法重用的

MVVM在概念上是真正将页面与数据逻辑分离的模式，它把数据绑定工作放到一个JS里去实现，而这个JS文件的主要功能是完成数据的绑定，即把model绑定到UI的元素上

官网：http://vuejs.org/

部署很简单：

// latest stable $ npm install vue

功能：

模板功能：

  {{ message }}


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

双向绑定机制：

  
{{ message }}
  


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

逻辑：

没有把循环交给模板机制，而是给了 HTML 的属性，非常的智慧

  

    

      {{ todo.text }}
    
  


new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue.js' },
      { text: 'Build Something Awesome' }
    ]
  }
})

支持的逻辑有：

• v-for 循环
• v-if 布尔if 判断
• v-show 对 CSS 的 display 做切换处理
• v-else 布尔else 判断

事件

把事件也交给了 HTML 的属性来处理，防止外部加载的事件在模板处理以后丢失的好方法

  
{{ message }}
  Reverse Message


new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

调试

有一个叫做 Vue.js devtools 的 Chrome Developer Tools 集成插件，可以帮助到 Vue 的调试

代码里面注意要添加：

Vue.config.debug = true
Vue.config.devtools = true

组件机制

Vue 的组件机制，类似于一种使用面向对象的方式来撰写小部件的感觉，看一下这个例子：

HTML里面：

JS里面：

Vue.component('product-list', {
    template: '#productList',

    data: function() {
        return{
            products: []
        }
    },

    ready: function () {
        this.fetchProducts();
    },

    methods: {
        fetchProducts: function () {
            var products = [];
            this.$http.get('/api1.0/product/list')
                .then((response) => {
                    this.$set('products', response.body.data.items);
            }, (response) => {
                products.log(err);
            });
        },
    }
})

new Vue({
    el: '#productListTemplate'
})

一段输出页面和分页的代码：