Vueこまごました記憶2

1:基本使用

                 ，               。              ，                   ，                             。

2:親伝子

 props       ，        ，     。
 props      

静的データ

<pre><code>Vue.component('my-component', {
props: ['warningText'],
template: '<div>{{ warningText }}</div>'
});
var app = new Vue({
el: '#app'
})</code></pre>
<p>ダイナミックデータ

<pre><code>Vue.component('my-component', {
props: ['message '],
template: '<div>{{ message }}</div>'
});
var app = new Vue({
el: '#app',
data: {
parentMessage: ''
}
})</code></pre>
<p>注意:v-bindを使用せずに数値、ブール値、配列、オブジェクトを直接渡す場合は、文字列のみが渡されます.

<pre><code>Vue.component('my-component', {
props: ['message '],
template: '<div>{{ message.length }}</div>'
});
var app = new Vue({
el: '#app',
})</code></pre>
<p>同じコンポーネントを2回使用しましたが、2番目にv-bindを使用したのとは異なり、レンダリング後の結果、1番目は7、2番目は33:データチェック?
Vue.component('my-component', {

props:
    {
        propA：Number //        
         propB: [String, Number] //             
         propC: { //    ，       ，     true
             type: Boolean,
             default: true     
         }, 
         propD: { //   ，      
            type: Number,
            required: true
        },
        propE: { //            ，              。                                  
            type: Array,
            default: function () {
                return [];
            }
        }, 
    }

})3:子伝親

3.1：       

  ：{{ total }}

<pre><code>Vue.component('my-component', {
template: '
<div>
<button @click="handleIncrease"></button>
<button @click="handleReduce"></button>
</div>
',
data: function () {
return {
counter: 0
}
},
methods: {
handleIncrease : function () {
this.counter++;
this.$emit('increase', this.counter);
},
handleReduce : function () {
this.counter--;
this.$emit('reduce', this.counter);
}
}
});
var app = new Vue({
el: '#app',
data: {
total: 0;
},
methods: {
handleGetTotal: function (total) {
this.total = total;
}
}
})</code></pre>
<p>注:$emit()メソッドの最初のパラメータは、カスタムイベントの名前です.

3.2: v-model 

  ：{{ total }}

<br>Vue.component('my-component', {</p>
<pre><code> template: '
<div>
<button @click="handClick">+1</button>
</div>
',
data: function () {
return {
counter: 0
}
},
methods: {
handClick : function () {
this.counter++;
this.$emit('input', this.counter);
}
}
});
var app = new Vue({
el: '#app',
data: {
total: 0;
}
})</code></pre>
<p>注意:$emitのイベント名は特殊なinputです

 3.3：         
    this.$parent 
    this.children                       

4:webpack?

   、   、CSS                  。
4.1：gulp webpack  ？
    gulp             ，           ,           ，          。、
    webpack                ，       webpack         。
4.2：  webpack？
     webpack    ，    、  css                。webpack               ，         。
4.3： webpack  ？
    npm install webpack --save-dev
    npm install webpack-dev-server --save-dev [            、          ]

{

"script": {
    "dev": "webpack-dev-server --host 172.172.172.1 --port 8888 --open --config webpack.config.js"
}

}注意:一般的にローカルエリアネットワークでは、他の同僚がアクセスする必要がある場合にこのように構成できます.そうしないと、デフォルトの127.0.0.1でいいです.

 4.4：webpack   ？
      (Entry)、  (Output)、   (Loders)、  （Plugins）