マイVueの研究ノート（A）

マイVueの研究ノート

MVVMのアイデア

MVVMはつまり、モデル-ビュー- ViewModelにの速記です：モデル-ビュー-ビューモデルの
モデルは、のバックエンドのデータ転送を参照する
ビュー我々はページを参照された
モデルのビューは、 MVVMのコア部分が考えられており、それはビューのリンクそれらの間の通信ブリッジとしてモデルは、それが二つの方向を有している：一方は、モデルビューに変換され、すなわち、データ転送ページの後端が鋸に変換され、二人はモデルビュー、すなわちユーザに吸い込まバックエンドデータにページのコンテンツ上で動作して、これら2つの関数はデータバインディングとDOMイベントリスナーによって達成され、我々は呼んで結合双方向のデータを。図示のように：

一般的には：レイヤビューモデル通信によるビューとモデルレイヤ、データを聞き、そして、対応するページを通知することにより、ビュー層を更新することができるデータの変更、この変更ビューモデルは、ユーザがビューレイヤを操作すると、ViewModelにすることが可能ですVue.jsは、効率的かつ強力なフレームワークの軽量かつ高速な開発の両方を構築するためにMVVMのアイデアを使用しながら、ビューを変更し、MVVMを考えられている通知データに変更を加えることが待ち受けます。

インスタンスを作成し、データバインディング、コマンドとイベント

のインスタンスを作成します。

VUE方法は、以下のインスタンスを作成します。

    <div id="app">
        {{myData}}
    </div>
    <script>
        var vueApp = new Vue({
            el:'#app',
            data:{
                myData:'Hello World'
                myData2:'Fuck World'
            }
        });
    </script>
复制代码

エル・コードとデータは、VUEインスタンスの属性を指定したページがすでにVueの例を実装するために存在するため、EL DOM要素であり、データは、双方向のデータのVueを必要とするようにバインドされています。

データバインディング

ロードした後、我々は使用することができvue实例.$vue实例的属性、たとえば、属性VUEのインスタンスを取得するための構文を：vueApp.$elデータの属性にアクセスすることは異なっている、我々は直接使用することができvue实例.data的属性名、たとえば、アクセスに構文：vueApp.myData

ライフサイクルフック

VUEライフサイクルフック方法は、Vueのオブジェクトのライフサイクルの特定の段階で実行するように定義されています。初期化インスタンスオブジェクトからVueが、それが破壊されるまで、オブジェクトは人生のさまざまな段階に続く、具体的な内容は、私は非常に有名なライフサイクルフックマップをカット：

具体的に：

1. beforeCreate：VUEの例の前にフック関数を作成します。
2. 作成：VUEの例を作成しましたが、ページのDOM要素に取り付けられていません
3. beforeMount：マウントし始めます
4. マウント：コンパイルされたHTMLページに装着され、ライフサイクル全体で一度だけ実行マウント
5. BeforeUpdate
6. 更新しました
7. beforeDestroy：破壊されたフック関数以前に行わVUEインスタンス
8. フッキング機能は、インスタンスは破棄実行します

VUEライフサイクルは多くの段階がありますが、我々は、最も一般的にこれらの3つの段階に使用されています。

1. 作成した
2. マウント
3. beforeDestroy

例えば：

var vueApp = new Vue({
        el:'#app',
        data:{
            myData:'Hello World'
        },
        created:function () {
            alert('vue实例创建完毕了,但是还没有挂载到DOM元素上');
        },
        mounted:function () {
            alert('vue实例已经挂载到DOM上了');
        }
    });
复制代码

上記の例のページでは、ブラウザが開き、最初にポップアップ表示されます「完成VUEの例を作成するには、まだDOM要素に取り付けられていない」それは、実際には、例VUE完了している。この段階のために作成されたようなメッセージ、作成、しかし、DOM要素にマウント後、プロンプトボックス「VUEインスタンスがDOMに搭載された」ポップアップし、DOMを呼び出した後マウントVUEのインスタンスを作成するために、ステージを搭載し、私たちの最初のなかったです通常、単語の意味で、beforeDestory段階のために、ここで開始し、ビジネス・ロジックにも、これはイベントの数によって結ばれ、破壊のVUE例前の段階であるが、この段階で溶液を聴いされることを知ることができます。

補間テキスト

この例では、懸念しているために、私たちはHTMLでは、私たちは、このような構文を書き、ページ上の単語のHello Worldが表示されます。

<div id="app">
    {{myData}}
</div>
复制代码

この構文は、単一の式をサポートしているテキストVueの補間構文、ある、その1つの式だけに注意してください。

{{1<0 ? myData:myData2}}
这是三元运算符表达式，因为它属于单个表达式
所以这是合法的，我们会在页面上看到Fuck World
{{var a = 6}}
注意：这是非法的
var a = 6 是一个声明表达式 + 一个赋值表达式
我们提到过 Vue 的文本插值语法只支持单个表达式
所以 这句话会报错
复制代码

フィルタ

「|」vue.jsは{}補間尾の小さなパイプ文字の追加サポートするデータのフィルタリングを、しばしば千などコンマ通貨で区切られた、など、すべて大文字として、テキストの書式設定に使用するだけでなく、フィルタをサポートしていますシリーズの執筆、質量の参加など。例を見てみましょう：
ページがリアルタイムで現在の時刻を表示します。

<div id="app">
        {{currentDate | format}}
    </div>
    <script>
        function formatTime(value) {
            return value <10 ? '0'+value : value;
        }
        var vueApp = new Vue({
            el:'#app',
            data:{
                currentDate: new Date()
            },
            filters:{
                format:function (currentDate) {
                    var date = new Date(currentDate);
                    var year = date.getFullYear(); // 获取当前年
                    var month = formatTime(date.getMonth()+1); // 获取当前月(需要+1)
                    var days = formatTime(date.getDate()); // 获取当前天
                    var hours = formatTime(date.getHours()); // 获取当前小时
                    var minutes = formatTime(date.getMinutes()); // 获取当前分钟
                    var seconds = formatTime(date.getSeconds()); // 获取当前秒

                    return '当前时间为:'+year+'年'+month+'月'+days+'日'+hours+'时'+minutes+'分'+seconds+'秒'
                }
            },
            mounted:function () {
                this.timer = setInterval(()=>{
                    this.currentDate = new Date();
                },1000)
            },
            beforeDestroy:function () {
                window.clearInterval(this.timer);
            }
        });
    </script>
复制代码

我々はまた、我々はコードの小さな変更を行います、フィルタリングするためにパラメータを渡すことができます。

<div id="app">
        {{currentDate | format('当前时间为',':')}}
    </div>
    <script>
        function formatTime(value) {
            return value <10 ? '0'+value : value;
        }
        var vueApp = new Vue({
            el:'#app',
            data:{
                currentDate: new Date()
            },
            filters:{
                format:function (currentDate,arg1,arg2) {
                    var date = new Date(currentDate);
                    var year = date.getFullYear(); // 获取当前年
                    var month = formatTime(date.getMonth()+1); // 获取当前月(需要+1)
                    var days = formatTime(date.getDate()); // 获取当前天
                    var hours = formatTime(date.getHours()); // 获取当前小时
                    var minutes = formatTime(date.getMinutes()); // 获取当前分钟
                    var seconds = formatTime(date.getSeconds()); // 获取当前秒

                    return arg1+arg2+year+'年'+month+'月'+days+'日'+hours+'时'+minutes+'分'+seconds+'秒'
                }
            },
            mounted:function () {
                this.timer = setInterval(()=>{
                    this.currentDate = new Date();
                },1000)
            },
            beforeDestroy:function () {
                window.clearInterval(this.timer);
            }
        });
    </script>
复制代码

私たちは前に、フィルタのパラメータを追加し、同じ結果を持っています。データが前の本実施例では、即ち、属性値|「」最初の着信値に対応するフィルタ関数は：CURRENTDATEはなく、パラメータ、パラメータが渡されることがあることに注意します関数値の値の目以降の転送です。：フィルタはまたなど、同時に「書かれた一連の」使用することができる{{currentDate | filter1 | filter2 | filter3 }}フィルタの処理が順次実行され、それらはフィルタVUEの間でプロパティで定義されています。

命令やイベント

サポート指示操作を覚え、理解して簡単に複雑なDOM APIの必要性を排除する最も一般的なテンプレートVUE機能、ある利点をVUEの枠組みの一つである、と。次は、いくつかの簡単な指示操作を理解してみましょう：

1. V-テキスト

   Vテキスト機能は、テキストとその特異的役割テキスト補間を解析するために、{}毛と同じです

2. V-HTML

   HTMLへのコンテンツ分析

3. V-バインド

   などのID、クラス、などHTMLに動的に更新要素、

4. V-上

   これは、イベントリスナーをバインドするために使用されます

次は、これらの単純な命令イベントを認識するために、一例として残っています。

    <style>
        .active{
            background: red;
            height: 1em;
        }
    </style>
---------------------------------------------------------------
    <div id="app">
        v-text: <br>
        {{apple}} <br>
        <!--v-text 的作用和文本插值 是一样的-->
        <span v-text="apple"></span>
        v-html: <br>
        <span v-html="banana"></span> <br>
        v-bind: <br>
        <div v-bind:class="className"></div>
        v-bind的简写格式: <br>
        <div :class="className"></div>
        v-on: <br>
        <button v-on:click="plusOne">{{originalNum}}</button>
        <br>
        v-on的简写格式: <br>
        <button @click="plusOne">{{originalNum}}</button>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                apple:'苹果',
                banana:'<span style="color: yellow;">香蕉</span>',
                className:'active',
                originalNum:0
            },
            methods:{
                plusOne:function () {
                    this.originalNum = this.originalNum + 1;
                }
            }
        });
    </script>
复制代码

HTMLコンテンツの一部として、命令にV-V-バインドとの省略形式は例のように、対応する二つがあります。

<div v-bind:class="className"></div>
可以简写为：
<div :class="className"></div>


<button v-on:click="plusOne">{{originalNum}}</button>
可以简写为:
<button @click="plusOne">{{originalNum}}</button>

复制代码

計算されたプロパティ

例を見て：私たちは、文字列を反転させる機能を実現したい、「123456789」の文字列を、我々は文字列はなりたい：「321654987」、以下の例示的な手順を：

<div id="app">
    {{text.split(',').map((e)=>{return e.split('').reverse().join('')}).join(',')}}
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            text:'123,456,789'
        }
    });
</script>
复制代码

私たちは、プログラムはまた、テキスト補間構文に沿って、問題ありませんが、このプログラムの心は、承認されたお母さんを販売しなければならない参照が、その頭痛で、メンテナンスのために良くないコードを書くように見えます。私たちは、属性の方法で機能や関数を作成、コンテンツの最適化を行うことができます。

<div id="app">
    <!--将'123,456,789' 这串字符串 变为 '321,654,987'-->
    令人头痛的代码: <br>
    {{text.split(',').map((e)=>{return e.split('').reverse().join('')}).join(',')}} <br>
    methods属性内的方法: <br>
    {{reverseMethod()}} <br>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            text:'123,456,789'
        },
        methods:{
          reverseMethod:function () {
              // ['123',456,'789']
              return this.text.split(',').map((e)=>{
                  return e.split('').reverse().join('');
              }).join(',');
          }
        }
    });
</script>
复制代码

メソッドおよびコールで定義された方法に加えて、我々はまた、使用することができます計算されたプロパティを：

<div id="app">
    <!--将'123,456,789' 这串字符串 变为 '321,654,987'-->
    令人头痛的代码: <br>
    {{text.split(',').map((e)=>{return e.split('').reverse().join('')}).join(',')}} <br>
    methods属性内的方法: <br>
    {{reverseMethod()}} <br>
    计算属性: <br>
    {{reverseText}}
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            text:'123,456,789'
        },
        methods:{
          reverseMethod:function () {
              // ['123',456,'789']
              return this.text.split(',').map((e)=>{
                  return e.split('').reverse().join('');
              }).join(',');
          }
        },
        computed:{
            reverseText:function () {
                return this.text.split(',').map((e)=>{
                    return e.split('').reverse().join('')
                }).join(',');
            }
        }
    });
</script>
复制代码

私たちは、一見、の計算された属性VUEの例ではメソッドを定義し、メソッドと違いはありません、実際には、算出したプロパティはアプローチの方法で達成することができる何かを達成することができますが、両方にも違いがあります。具体的な違いは、我々は再び導入、別の例の後読み：
この例の関数は次のように特定のコードを計算するために、ショッピングカートの価格の合計です。

<div id="app">
    {{prices}}
</div>
<script>
    var app2 = new Vue({
        el:'#app2',
        data:{
            msg:'两个购物车的价格总和为:'
        }
    });
    var app = new Vue({
       el:'#app',
       data:{
           // 购物车1
           package1:[
               {
                   name:'iphone',
                   price:6999,
                   count:2
               },
               {
                 name:'ipad',
                 price:3299,
                 count:2
               }
           ],
           // 购物车 2
            package2:[
                {
                    name:'XiaoMi',
                    price:999,
                    count:6
                },
                {
                    name:'ipod',
                    price:1099,
                    count:2
                }
            ]
       },
       computed:{
           prices:{
               get:function () {
                   var prices = 0;
                   //  第一个购物车的价格总和
                   for(var i = 0;i<this.package1.length;i++){
                       prices += this.package1[i].price * this.package1[i].count;
                   }

                   // 第一个购物车与第二个购物车的价格总和
                   for(var j = 0; j<this.package2.length;j++){
                       prices += this.package2[j].price * this.package2[j].count;
                   }

                   return app2.msg+prices;
               },
               set:function (options) {
                   if(options.package === 'package1'){
                       for(var i = 0;i<this.package1.length;i++){
                           if(this.package1[i].name === options.name){
                               this.package1[i].price = options.price;
                               this.package1[i].count = options.count;
                               break;
                           }
                       }
                   }else if(options.package === 'package2'){
                       for(var i = 0;i<this.package2.length;i++){
                           if(this.package2[i].name === options.name){
                               this.package2[i].price = options.price;
                               this.package2[i].count = options.count;
                               break;
                           }
                       }
                   }
               }
           }
       }
    });
</script>
复制代码

各属性は、我々だけで属性名を計算するメソッドを呼び出す際に、計算されたgetterメソッドとsetterメソッドを持って、実際にプロパティのgetメソッドを呼び出して、それはいくつかのパラメータを設定する必要があるとき、我々はまた、セットを提供することができます手動の特性を計算する方法を変更します。さらに、本実施例では、DOMに取り付けられAPP2はないが、我々は、プロパティがオブジェクトにもVUE他のインスタンスだけでなくによって現在の価格を計算することを確認することができ、その結果は実行される計算は、他のインスタンスの特性に依存し得ることを示します。次のように結果のコードは次のとおりです。

私たちは、メソッドのセットの変更によって必要なパラメータを設定することができます。

変更が完了すると、ページがリアルタイムデータに更新されます。

我々は振り返るとどのような違い財産の次の方法や計算方法について話します：

プロパティおよびメソッドを計算する方法

私たちは、最初の例を見て：

<div id="app">
    {{text}} <br>
    {{getNow()}} <br>
    {{now}} <br>

</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            text:666
        },
        methods:{
            getNow:function () {
                return Date.now();
            }
        },
        computed:{
            now:{
                get:function () {
                    return Date.now(); // 获取 1970年 至现在的时间戳
                }
            }
        }
    });
</script>
复制代码

私たちが今までのタイムスタンプ機能を1970年にプロパティを取得する際に定義された方法と計算方法です以下のように、結果のコードが実行されます。

今、私は、テキストの変更の内容を少し操作を行います。

我々は、テキストデータを変更した後、ページが自然に起こる変化しますが、私たちが見つかりました：
コンテンツは単なるテキストは、ページのHTMLにレンダリングするのgetNow方法方法を変更を受けているされていないにも変化を遂げています：

なぜこれがそうですか？これは、計算プロパティの内部キャッシュを伴うだろう。それをレンダリングしていない場合は、単にページを再レンダリングされている私が述べたことに注意して、限りページが再レンダリングされるよう、そのメソッドが実行されますが、メソッドを呼び出すために、この方法は、自己実行していない、計算された属性は関係なく、ページの、異なっていますレンダリングが発生するかどうか、限りプロパティが変更されていない依存データを計算しているとして、それは変更されることはありません。両方の方法のプロパティとメソッドの違いを計算すると、別のあるものに依存している、それはデータの差に依存するとき、それは変更されます、それに依存する属性データのキャッシュに基づいて計算され、及び方法は時に、キャッシュされませんページが再レンダリングを受け、メソッドが実行されます。上記では、何を達成することができます特性を計算するための方法言及した方法を達成することができ、それらを使用する方法の選択は？実際には、あまりにもそれについて考える私たちはコンピューティングの多くを必要とするとき、結果を考え出すことができ、データのためメモリのコストを計算し、我々はプロパティを計算するために使用されるべき、データ・キャッシュを必要としています。

クラスとスタイルのバインディングのV-バインド

V-バインドの役割は唯一、つまり、一つの文章に生活の結合特性を説明することができ、我々は簡単な例を見ています：

<div id="app">
    <a v-bind:href="url">链接</a>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            url:'http://www.baidu.com'
        }
    });
</script>
复制代码

ジャンプページの後にクリックして百度に接続されます。

クラスのバインドをV-バインド

バインディング・クラスのオブジェクト構文をV-バインド

例を参照してください。

    <style>
        .red{
            background: red;
        }
        .blue{
            background: blue;
        }
    </style>
--------------------------------------------------
<div id="app">
    v-bind绑定对象: 对象的key是类名,对象的value是布尔值<br>
    <button v-bind:class="{red:isRed,blue:isBlue}" v-on:click="transColor">clickMe</button>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            isRed:true,
            isBlue:false,
        },
        methods:{
            transColor:function () {
                this.isRed = !this.isRed;
                this.isBlue = !this.isBlue;
            }
        }
    });
</script>
复制代码

V-バインドしながら、この例では、色のボタンを押しダウンエネルギー変換の関数である：真は、このクラスを結合した場合、オブジェクトの構文を使用してクラスは、オブジェクトクラスのオブジェクト名のキー値は論理値ですそれは偽、そしてそのような名前の団体である場合は、名前を付けます。

V-バインドバインドは、プロパティの構文を計算します

例を参照してください。

    <style>
        .red{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
-----------------------------------------------
<div id="app">
    v-bind绑定计算属性: 计算属性返回的也是对象 key为类名 ; value为 布尔值 <br>
    <div v-bind:class="computedClass"></div>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            isRed:true,
        },
        computed:{
            computedClass:function () {
                return {
                    red:'isRed'
                }
            }
        }
    });
</script>
复制代码

例V-バインド：バインドクラス属性計算、それでも属性を計算し、結果はオブジェクトクラス名でオブジェクトのキーを返された値、要素はこのクラスを実施する場合、値はブール値、前掲真値であり、値がfalseの場合、要素は、クラスを持っていません

V-バインド・バインディング・クラスの配列構文

例を参照してください。

    <style>
        .first{
            font-size: 32px;
            color: red;
        }
        .second{
            background: #000;
        }
    </style>
---------------------------------------
<div id="app">
    绑定class数组语法：数组中的成员为data中的属性，这些属性直接对应类名 <br>
    <div v-bind:class="[classOne,classTwo]">VUE is cool!</div>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            classOne:'first',
            classTwo:'second'
        }
    });
</script>
复制代码

上記の点で、より簡単に比較して結合V-バインド配列構文クラスは、データ・メンバーの配列を直接クラス名に対応する属性、一例として理解することは困難であってはなりません -

V-バインドバインドインラインスタイル

結合より一般的に使用されるクラスに加えて、V-バインドインラインスタイルにもバインドすることができます

<div id="app">
    绑定内联样式：对象语法,key 代表style的属性，value代表属性对应的值 br>
    <div v-bind:style="{'color':color,'fontSize':fontSize}">VUE is cool!</div>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            color:'red',
            fontSize:'32px'
        }
    });
</script>
复制代码

このオブジェクトの構文に加えて、バインドインラインスタイルも「アレイ」構文をサポートしていますが、誰もが別のスタイルを記述しなくなるので、この構文は、愚かであるので、私はここに記載されていないと述べました。~~~~ダッシュで区切らまたは名前付き、CSSプロパティ名は名前のラクダを使用することに注意してくださいが、推奨文言キャメルはまだあります