Vue共通フィーチャー

Vue共通特性
フォームアクション

input単行テキスト

textareaマルチテキスト

selectドロップダウン

radioラジオボックス

checkboxマルチセレクタ

フォームフィールド修飾子

number:数値に変換する(入力ボックスは文字列として入力され、この修飾子は入力文字列を自動的に数値に変換する)

.

trim:開始と終了のスペースを削除

lazy:デフォルトinput(トリガ)イベントをchange(フォーカスを失う)イベント

に切り替える

カスタムコマンド

カスタム命令が必要な理由:内蔵命令が要求を満たしていない

構文規則:(例:要素フォーカスの自動取得)

Vue.directive('focus',{
     
    inserted:function(el){
     
        //el         
        el.focus();
    }
})

用法

<input type="text" v-focus>

パラメータ付きカスタムコマンド(例:要素の背景色を変更)

    <div id="app">
        <input type="text" v-color='msg'>
    div>
    <script src="js/vue.js">script>
    <script>
        //        
        Vue.directive('color',{
      
            bind:function(el,binding){
      
                //el:        
                //binding:    
                el.style.backgroundColor = binding.value.color;
            }
        });
        var vm = new Vue({
      
            el:"#app",
            data:{
      
                msg:{
      
                    color:"red"
                }
            }
        });
script>

ローカルコマンド(適用範囲に制限があります)

        var vm = new Vue({
     
            el: "#app",
            data: {
     
                msg: {
     
                    color: "red"
                }
            },
            //     
            directives: {
     
                color: {
     
                    bind: function (el, binding) {
     
                        el.style.backgroundColor = binding.value.color;
                    }
                },
                focus: {
     
                    inserted: function (el) {
     
                        el.focus();
                    }
                }
            }
        });

計算プロパティ
式の計算ロジックは複雑な場合があります.計算プロパティを使用すると、テンプレートの内容をより簡潔にすることができます.

    <div id="app">
        
        <div>{
    {msg}}div>
        
        <div>{
    {msg.split('').reverse().join('')}}div>
        
        <div>{
    {reverseString}}div>
    div>
    <script src="js/vue.js">script>
    <script>
        var vm = new Vue({
      
            el:'#app',
            data:{
      
                msg:'hello'
            },
            //     
            computed:{
      
                reverseString:function(){
      
                    return this.msg.split('').reverse().join('');
                }
            }
        });
    script>

計算プロパティとメソッドの違い

計算プロパティは、それらの依存に基づいてキャッシュされます.計算結果はキャッシュされ、計算値が変わらない限り、再呼び出しは関数を再実行せず、計算結果

に直接戻ります.

メソッドにキャッシュは存在しません:呼び出しごとに関数

が実行されます.
リスナー
データが変化すると、リスナーにバインドされたメソッドを通知します.
リスナーの適用シーン

データの変化時に非同期またはオーバーヘッドが大きい(比較的時間がかかる)動作を実行する

.
リスナーの使い方

        //     、  
        //          
        var vm = new Vue({
     
            el: '#app',
            data: {
     
                firstName:'Jim',
                lastName: 'Green',
                fullName: 'Jim Green'
            },
            //     
            watch:{
     
                firstName:function(val){
     
                    this.fullName = val + ' '+ this.lastName;
                },
                lastName:function(val){
     
                    this.fullName = this.firstName + ' '+ val;
                }
            }
        });

フィルタ
文字列を頭文字大文字に書式設定したり、日付を指定書式に書式設定したりするなど、データの書式設定
カスタムフィルタ
例:イニシャル大文字

Vue.filter('upper',function(val){
     
    // upper:        
    // val:     
    return val.charAt(0).toUpperCase()+val.slice(1);
});

フィルタの使い方

<div>{
    {msg|upper}}div>

<div>{
    {msg|upper|lower}}div>

<div v-bind:id='msg|upper'>div>
 

ローカルフィルタ(適用範囲に制限があります)

        var vm = new Vue({
     
            el: "#app",
            data: {
     
                msg: {
     
                    color: "red"
                }
            },
            //      
            filters:{
     
                upper:function(val){
     
                    return val.charAt(0).toUpperCase()+val.slice(1);
                }
            }
        });

パラメータ付きフィルタ

構文(例:所定の日付フォーマット)

// 
{
     {date|format('yyyy-MM-dd')}}
Vue.filter('format', function (value, arg) {
     
    //value             
    if(arg=='yyyy-MM-dd'){
     
        var res = '';
        res += value.getFullYear()+'-'+(value.getMonth()+1)+'-'+value.getDate();
        return res;
    }
});

を使用

<div>{
    {date|format('yyyy-MM-dd')}}div>

ライフサイクル
主な段階

マウント(関連属性の初期化)

beforeCreate

created

beforeMount

mounted

更新(要素またはコンポーネントの変更操作)

beforUpdate

update

破棄(関連属性の破棄)

beforeDestory

destoryed

ライフサイクル図
Vueインスタンスの生成プロセス

beforeCreate:インスタンスの初期化後、データ観測およびイベント構成の前に呼び出されます.

created:インスタンスの作成が完了するとすぐに呼び出されます.

beforeMount:マウント開始前に呼び出されます.

mounted:新しく作成されたvm.$elを置き換え、インスタンスにマウントした後、フックを呼び出します.

beforUpdate:データ更新時に呼び出され、仮想DOMパッチが適用される前に発生します.

update:データ変更による仮想DOMの再レンダリングとパッチ適用で、その後フックが呼び出されます.

beforeDestory:インスタンスが破棄される前に呼び出されます.

destoryed:インスタンスが破棄された後に呼び出されます.