Vue研究ノート-2：Vueの共通機能

Vueの一般的な機能

フォーム操作

Vueベースのフォーム操作

• 1行のテキストを入力
  • vモデルを介した双方向バインディング
• textarea複数行のテキスト
• ドロップダウンの複数選択を選択
• ラジオラジオ
• チェックボックスチェックボックス

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

• 数値：数値に変換されます（デフォルトは文字列です）
• トリム：最初と最後のスペースを削除します
• 怠惰：入力イベントを切り替えてイベントを変更する

 <div id="app">
        <!-- <input type="text" name="" id="" v-model="age"> -->
        <input type="text" v-model.number='age'>
        <input type="text" v-model.trim='trimc'>
        <input type="text" v-model.lazy='changet'>
        <div>{
    
    {
    
    changet}}</div>
        <input type="submit" value="点击" @click="handle">
    </div>
    <script>
        let vm = new Vue({
    
    
            el:"#app",
            data: {
    
    
                age: '',
                trimc: '',
                changet: ''
            },
            methods: {
    
    
                handle(){
    
    
                    console.log(this.age);
                    console.log(this.trimc);
                    console.log(this.changet);
                }
            }
        });
    </script>

カスタムインストラクション

1. なぜカスタムの指示が必要なのですか

   組み込みの命令は需要を満たしていません

2. カスタム命令の構文規則（要素フォーカスを取得）

   Vue.directive('focus' ,{
        inserted: function(el){
            //获取元素的焦点
            el.focus();
        }
    })
   

3. カスタム命令の使用法

<div id="app">
        <input type="text" v-focus>
    </div>
    <script>
        Vue.directive('focus' ,{
    
    
            inserted: function(el){
    
    
                //获取元素的焦点
                el.focus();
            }
        })
        let vm = new Vue({
    
    
            el:"#app",
            data: {
    
    },
            methods: {
    
    }
        });
    </script>

フック機能パラメータ

• el：DOMを直接操作するために使用できる、命令によってバインドされた要素
• バインディング：以下を含むオブジェクト：
  • name：コマンド名（v-を除く）、プレフィックス
  • value：命令のバインディング値、
  • oldValue：命令によってバインドされた前の値

ローカル指導

追加の命令を追加します。

directives: {
	focus: {
		//指令的定义
		inserted: function(el){
			el.focus()
		}
	}
}

計算された属性

式の計算ロジックはより複雑になる可能性があり、計算された属性を使用すると、テンプレートのコンテンツがより簡潔になる可能性があります。

computed:{
	reversedMessage: function(){
		return this.msg.split('').reverse().join('')
	}
}

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

• 計算された属性は、それらの依存関係に基づいてキャッシュされます
• メソッドがキャッシュに存在しません

<div id="app">
        <input type="text" v-model="msg" name="" id="">
        <div>{
    
    {
    
    reversed}}</div>
    </div>
    <script>
        let vm = new Vue({
    
    
            el:"#app",
            data: {
    
    
                msg:""
            },
            methods: {
    
    },
            computed:{
    
    
                reversed: function(){
    
    
                    return this.msg.split('').reverse().join('');
                }
            }
        });
    </script>

フィルタ

フィルタの役割

文字列を最初の文字を大文字にするようにフォーマットするなどのデータをフォーマットし、日付フォーマットを指定されたフォーマットに変換します。

フィルタの定義

Vue.filter('过滤器名称', function(value){
	//过滤器业务逻辑
}

フィルタの使用

//upper:过滤器得名称 
<div>{
   
   {msg | upper}}</div>
<div>{
   
   {msg | upper | lower}}</div>
<div v-bind:id | formatId></div>

ローカルフィルター

filters:{
	capitalize: function(){}
}

<div id="app">
        <input type="text" v-model="msg">
        <div>{
    
    {
    
    msg | upper}}</div>
        <div>{
    
    {
    
    msg | upper | lower}}</div>
        <div :upp="msg | upper" >{
    
    {
    
    msg}}</div>
    </div>
    <script>
        Vue.filter('upper', function(val){
    
    
            return val.toUpperCase();
        });
        Vue.filter('lower', function(val){
    
    
            return val.toLowerCase();
        })
        let vm = new Vue({
    
    
            el:"#app",
            data: {
    
    
                msg: ''
            },
            methods: {
    
    },
        });
    </script>

リスナー

リスナーはデータを監視するために使用され、データが変更されると、リスナーにバインドされたメソッドに通知します

アプリケーションシナリオ

データが変更されたときに非同期またはコストのかかる操作を実行する

（計算された属性との類似点があります）

watch: {
	//方法，val表示当前数据的最新值
	firstName: function(val){
		this.fullName = val + this.lastName;
	},
	lastName: function(val){
		this.fullName = this.firstName + val;
	}
}

ケーススタディ

ユーザー名が使用可能であることを確認します

要件：入力ボックスに名前を入力し、フォーカスが失われたときに存在するかどうかを確認します。すでに存在する場合は、再入力するように求めます。存在しない場合は、プロンプトを使用できます。

オペレーティング：

1.vモデルを介してデータバインディングを実現します

2.リマインダーを提供する必要があります

3.入力情報の変化を監視するにはリスナーが必要です

4.トリガーされたイベントを変更する必要があります

<div id="app">
        用户名：<input type="text" v-model.lazy="msg">
        <div>{
    
    {
    
    tip}}</div>
    </div>
    <script>
        let vm = new Vue({
    
    
            el: "#app",
            data: {
    
    
                msg: '',
                tip: ''
            },
            methods: {
    
    
                checkname: function (uname) {
    
    
                    //调用接口，可用定时任务模拟接口调用
                    let that = this;
                    setTimeout(function () {
    
    
                        //模拟接口调用
                        if (uname == 'admin') {
    
    
                            that.tip = '用户名已经存在'
                        }else{
    
    
                            that.tip = '可以注册'
                        }
                    },2000)
                }
            },
            watch: {
    
    
                msg: function (val) {
    
    
                    //调用后台接口验证用户名的合法性
                    this.checkname(val);
                    this.tip = "正在验证。。。"
                }
            }
        });
    </script>

リスナー

1.リスナーを使用してユーザー名の変更を監視します

2.確認のためにバックグラウンドインターフェイスを呼び出します

3.検証結果に応じてプロンプト情報を調整します

ライフサイクル（ライフサイクルフック機能）

メインステージ

• マウント（関連するプロパティを初期化します）
  1. beforeCreate
  2. 作成した
  3. beforeMount
  4. マウント
• 更新（要素またはコンポーネントの操作の変更）
  1. beforeUpdate
  2. 更新しました
• 破壊する（関連する属性を破壊する）
  • beforeDestroy
  • 破壊されました

<div id="app">
        <input type="text" name="" id="" v-model="msg">
        <button @click="destroy">销毁</button>
    </div>
    <script>
        let vm = new Vue({
    
    
            el:"#app",
            data: {
    
    
                msg: ""
            },
            methods: {
    
    
                destroy: function(){
    
    
                    this.$destroy();
                }
            },
            beforeCreate() {
    
    
                console.log("beforeCreate...");
            },
            created() {
    
    
                console.log("create...");
            },
            beforeMount(){
    
    
                console.log("beforeMount...");
            },
            mounted(){
    
    
                console.log("mounted...");
            },
            beforeUpdate(){
    
    
                console.log("beforeUpdate...");
            },
            updated(){
    
    
                console.log("updated...");
            },
            beforeDestroy(){
    
    
                console.log("beforeDestroy...");
            },
            destroyed(){
    
    
                console.log("destroyed...");
            },
        });
    </script>

ライフサイクル図

【公式サイトからの写真】

破壊することはいくつかの資源を解放することです

マウント済み：初期化が完了し、テンプレートがすでに存在することを示します。

Vueインスタンスを生成するプロセス

• beforeCreateは、インスタンスが初期化された後、データの監視とイベントの構成の前に呼び出されます
• createdは、インスタンスが作成された直後に呼び出されます
• beforeMountは、マウントの開始前に呼び出されます
• マウントされたelは、新しく作成されたvm。$ elに置き換えられ、インスタンスにマウントされた後にサンプルが呼び出されます。
• beforeUpdateは、データが更新されたときに呼び出されます。これは、仮想DOMにパッチが適用される前に発生します。
• データ変更による更新された仮想DOMの再レンダリングとパッチ適用、この後に呼び出します
• beforeDestroyは、インスタンスが破棄される前に呼び出されます
• 破棄されたインスタンスが破棄された後に呼び出されます