Vue--DOMレンダリングの方法

1611 ワード

DOMレンダリング
1.マウントされる要素の指定
elオプションVueインスタンスのマウントターゲットを指定するには、次の3つの方法があります.

CSSセレクタ方式

let app = new Vue({
            el:'#app',  //   
            data(){
                return{
                    msg:'    。。。'
                }
            }
        });

DOMノード方式

let app2 = new Vue({
            el:document.getElementById("app2"),  //DOM  
            data(){
                return{
                    msg:'    。。。'
                }
            }
        });

手動マウント

let handleMount = function () {
            app3.$mount('#app3');
        }

2.レンダー関数render
render関数は、Domノードを作成するためのコールバックメソッドcreateElementを提供するレンダリングビューにも使用できます.

render(createElement){
    return createElement('p','Hello World')
}

イベント修飾子接頭辞
修飾子
接頭辞
説明
.passive
&
yidongduan
.capture
!
イベントがトリガーされると、イベントのキャプチャがブロックされます.
.once
~
イベントが1回トリガーされるとリスニングが解除されます
.capture.once/.once.capture
~!
イベントが1回トリガーされると、リスニングが解除され、イベントのキャプチャが阻止されます.
一部のイベント修飾子とオリジナルjsの対照表
修飾子
原生JS
.stop
event.stopPropagation()
.prevent
event.preventDefault()
.self
if(event.target !== event.currentTarget) return
.enter/.13
if(event.keyCOde != 13) return
.ctrl
if(! event.ctrlKey) return
オプションの優先順位
el、template、renderの3つのオプションの機能は一致しています.インスタンステンプレート(指定または作成)を取得します.この3つのオプションが同時に存在する場合、renderが優先的に実行され、次いでtemplateが優先されます.

vueプロジェクトは2級ドメイン名パッケージ構成で実行されます

(一)VUE入門