Neden Vue.js ?

JavaScript nesne modeli
Genişletilebilir Arayüz Bileşenleri
SPA Odaklı

Boyut & Performans & Öğrenme Süresi

JSX yerine Template

Veri değişimi nasıl izlenir?

Redux,

Flux veya Vuex olmadan veri yönetimi

Component

Bileşen Özel


    var Child = {
      template: '<div>A custom component!</div>'
    }
    
    new Vue({
      // ...
      components: {
        // <my-component> will only be available in parent's template
        'my-component': Child
      }
    })

Uygulama geneli

    
    <tempate>
        <div id="example">
          <my-component></my-component>
        </div>
    </template>


    
    <script>
    Vue.component('my-component', {
      template: '<div>A custom component!</div>'
    })
    // create a root instance
    new Vue({
      el: '#example'
    })
    </script>

Mixins


    // define a mixin object
    var myMixin = {
      created: function () {
        this.hello()
      },
      methods: {
        hello: function () {
          console.log('hello from mixin!')
        }
      }
    }
    
    // define a component that uses this mixin
    new Vue({
      mixins: [myMixin]
    })

    // -> "hello from mixin!"

Mixins Vue.js için ortak bileşenler arası kod paylaşımı yapmanın esnek bir yoludur.

Vue.js Monolitik mi?


    
    
    
    //Global register
    Vue.component('user-card', { /*....*/ })
    
    
    
    // Local Registration
    
    var Child = {
      template: '<div>A custom component!</div>'
    }
    
    new Vue({
      // ...
      components: {
        // <my-component> will only be available in parent's template
        'my-component': Child
      }
    })

Monolitik Vue


   
    var vmOne = Vue.extend({});
    var vmTwo = Vue.extend({});


    
    vmOne.component('my-component',{
      template: '<div>A custom component!</div>'
    })
    
    
    new vmOne({/**/})
    <my-component/>


    new vmTwo({/**/}
    <my-component/> 
    // vmTwo doesn't have my-component.

Monolitik olmayan Vue

    
    // feedStore.js
    
    var feedStore = {
      state: {
      	activeVideo: null
      }
    }
    
    export default feedStore
    
    

    // VideoItem
    
    play() {
    	feedStore.state.activeVideo = this.video 
    }
    
    ...
    	<video :src="item.src" :muted="feedStore.state.activeVideo.id != item.id"></video>
        <play-button :onClick="play"/>
    ...

Olayları state üzerinden yakalamak

PLEKAN

github.com/abdullah/plekan

    
    import { mixinComponent } from 'plekan'
    
    var DEFAULT_CONTENT = `<section>
                                <div class="es6-tutarsiz">
                                  I LOVE plekan
                                </div>
                           </section>`
    
    export default {
        mixins: [mixinComponent],
        data() {
            return {
                DEFAULT_CONTENT: DEFAULT_CONTENT
            }
        },
        /**
         * *
         * This method contains a magic variable
         */
        updated() {
            this.me.contents[this.displayLanguage]
                .fields["src"] = this.$el.querySelector('img').src
        }
    }

core/mixin.js

ComponentManager (Mixin) -> Register Component -> Infinity Component ^^

CLİV


    -h, --help        output usage information
    -V, --version     output the version number
    -c, --components  Components name
    -f, --folder      Folder name
    -s, --super       Super template

    
    cliv -f src/pages/blog -c ReadBlog BlogModal BlogLabels BlogNavigation
    
    
    ✓ BlogNavigation.vue
    ✓ ReadBlog.vue
    ✓ BlogLabels.vue
    ✓ BlogModal.vue