学習ノート『Vue』

5092 ワード

AngularJSとReactに続いて、Vueはまたフロントエンドのフレームワークに火をつけた.著者は華人で、アリのプラットフォームをまたぐモバイル開発ツールWeexに加盟することを発表したばかりで、技術顧問を務めている.Vue 2は間もなく発表される.著者は最近閉鎖的に創作している.
VueはMVVMアーキテクチャに属し、MVCとは異なり、これはネット上の説明を参照することができる.
MVCでは、ViewはModelに直接アクセスできます!そのため、ViewにはModel情報が含まれており、ビジネスロジックも含まれていることは避けられません.MVCモデルはModelの不変に注目しているので,MVCモデルではModelはViewに依存しないが,ViewはModelに依存している.それだけでなく、一部のビジネスロジックがViewで実現されているため、Viewを変更することも困難であり、少なくともビジネスロジックは再利用できません.
MVVMは概念の上で本当にページとデータのロジックを分離するモードで、それはデータのバインディングの仕事を1つの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判断

≪イベント｜Events｜ldap≫
イベントもHTMLの属性に任せて処理し、外部からロードされたイベントがテンプレート処理後に失われるのを防ぐ良い方法


  {{ 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'
})

出力ページとページングのコード:




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

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

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

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

new Vue({
    el: '#product-lists'
})

Zeppelin on spark

FreeTDS接続Sqlserverデータベース一括コミットデータ

学習ノート『Vue』

@{{ product.product.name }}