Do it Vue.はじめに整理
すべてを整理
Vue Cli install(2.0 version)
npm install vue-cli -g
vue init webpack-simple or vue init webpack
npm install
npm run dev
npm run build
Vue instance
ビューインスタンスは、ビューで画面を開発するために必要な基本単位です.
new Vue({
...
});
<div id="app">
{{message}}
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
message: 'Hello Vue.js!'
}
});
</script>スクリーンをレンダリングする場合は、スクリーンを描画するドーム要素を指定する必要があります.
data:{}は、予め定義された属性を使用します.
Vue.jsのライフサイクル
Vueインスタンスは、作成、アタッチ、更新、破棄の4つのプロセスを実行します.
このプロセスでは、VueはAPIを提供し、各段階でVueを使用するユーザにHook(Hook)を提供することができる.よく使われるタイプは、beforeCreate、Create、beforeMount、Mount、Mounted、beforeUpdate、Update、beforeDestory、destroyです.
beforeCreate
名前のように最初に実行されるbeforeCreate hook.Vueインスタンスは初期化直後に励起される.DOMに構成部品を追加する前に、this.$elにアクセスできません.また、データ、イベント、およびモニタにアクセスする前に、データおよびメソッドにアクセスできません.
created
created hookでは、データを反作用的に追跡し、computed、methods、watchを有効にしてアクセスできます.
하지만 아직까지 DOM에는 추가되지 않은 상태입니다. data에 직접 접근이 가능하기 때문에.このステップは、コンポーネントの初期時にデータを外部から取得した値に設定する必要がある場合、またはイベントリスナーを宣言する必要がある場合に最適です.beforeMount
DOMの前に呼び出されたbeforeMountフックにアタッチします.この手順の前に、テンプレートが存在するかどうかを確認してレンダーし、仮想DOMを作成しましたが、実際のDOMにはアタッチされていません.
mounted
通常最もよく使われるフックです.
가상 DOM의 내용이 실제 DOM에 부착되고 난 이후에 실행되므로, this.$el을 비롯한 data, computed, methods, watch 등 모든 요소에 접근이 가능합니다 .ただし、子構成部品がサーバから非同期でデータを受信した場合、親のマウントフックはすべての子構成部品がマウントされていることを保証しません.
따라서 이때는 this.$nextTick을 이용한다면, 모든 화면이 렌더링 된 이후에 실행되므로 마운트 상태를 보장할 수 있습니다 .beforeUpdate
構成部品で使用されるデータの値が変化するため、DOMに適用する必要がある場合があります.このとき,変更前に呼び出されるのがbeforeUpdate hookである.この値は、変更する値を使用して仮想DOMをレンダリングする前に使用できます.このhookでは、他の値を変更した場合、landeringは呼び出されません.
updated
가상 DOM을 렌더링 하고 실제 DOM이 변경된 이후에 호출되는 updated훅입니다.で変更されたデータはDOMに適用されました.DOMを使用して変更された値にアクセスする場合は、更新されたhookを使用するのが最適です.ただし、このhookのデータを変更すると無限ループになる可能性がありますので、このhookのデータを直接変更する必要はありません.
マウントと同じです.nextTickを使用すると、すべての画面が更新された状態であることを確認できます.
beforeDestroy
このインスタンスが分解される前にbeforeDestoryフックを呼び出します.インスタンスは分解前に完全に動作するため、すべてのプロパティにアクセスできます.この手順では、イベントリスナーを無効にするなど、インスタンスが消える前に必要なことをすべて処理するだけです.
destroyed
インスタンスが分解されると、破棄フックが呼び出されます.分解が完了すると、インスタンスのプロパティにアクセスできません.サブVueインスタンスも削除されます.
注意:
https://wormwlrm.github.io/2018/12/29/Understanding-Vue-Lifecycle-hooks.html
ビューコンポーネント
構成部品を登録する方法は、次のとおりです.
1.グローバル構成部品-複数のインスタンスで共通
2.ゾーン構成部品-特定のインスタンスでのみ有効な範囲
グローバル構成部品
<div id="app">
<button>컴포넌트 등록</button>
<my-component></my-componont>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
Vue.component('my-component',{
template: '<div>전역 컴포넌트가 등록되었습니다!</div>'
});
new Vue({
el:'#app',
});
</script>전역 컴포넌트가 화면에 나타나기까지1.ライブラリファイルのロード->2.構成部品をビュー作成者として登録する(Vue.component()->
3.インスタンスオブジェクトの作成(オプションのプロパティを含む)->
4.特定のスクリーン要素にインスタンスをアタッチする->
5.インスタンスコンテンツの変換(登録済み構成部品の変換)
my-componentを
<div>に変換)->6.エンドユーザーが変換後の画面要素を確認する
ゾーン構成部品
var cmp = {
//컴포넌트 내용
// data:{},
// methods:{},
template: '<div>지역 컴포넌트가 등록되었습니다!</div>'
}
new Vue({
el: '#app',
components:{
'my-local-component': cmp
}
});グローバルVSゾーン構成部品
<div id="app">
<h3>첫번째 인스턴스 영역</h3>
<my-global-component></my-global-component>
<my-local-component></my-local-component>
</div>
<hr></hr>
<div id="app2">
<h3>두번째 인스턴스 영역</h3>
<my-global-component></my-global-component>
<my-local-component></my-local-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
Vue.component('my-global-component',{
template:'<div>전역 컴포넌트 입니다.</div>'
});
var cmp = {
//컴포넌트 내용
// data:{},
// methods:{},
template: '<div>지역 컴포넌트가 등록되었습니다!</div>'
}
new Vue({
el: '#app',
components:{
'my-local-component': cmp
}
});
new Vue({
el: '#app2'
})
</script>正常に表示されますが、2回目の繰り返しではグローバル構成部品のみが表示されます.
ゾーン構成部品は表示されません.
전역 컴포넌트는 인스턴스를 새로 생성할때마다 인스턴스에 components 속성으로 등록할 필요없이 한번만 등록한다면 어느 인스턴스에서든지 사용이 가능하다, 하지만 지역컴포넌트는 새 인스턴스를 생성할때마다 등록해주어야한다.ビュー構成部品通信(データ転送)
Vue.component('my-global-component',{
template:'<div>전역 컴포넌트 입니다.</div>'
});
var cmp1 = {
template: '<div>첫번째 지역 컴포넌트 : {{cmp1Data}}</div>',
data(){
return {
cmp1Data : 100
}
}
}
var cmp2 = {
template: '<div>두번째 지역 컴포넌트 : {{cmp2Data}}</div>',
data(){
return{
cmp2Data : cmp1.data.cmp1Data
}
}
};
new Vue({
el: '#app',
components:{
'my-component1': cmp1,
'my-component2': cmp2,
}
});これは、各素子に独自の有効範囲があるためです.
これはビューフレームの内部定義の特徴です.
上のcmp 2 Dataの結果は何の値もありません.
これは、エレメントの有効範囲によって、他のエレメントの値が
これは直接近づくことができない結果です.
賞。サブエレメント関係
그래서 뷰에서는 가장 기본적인 데이터 전달방법은 상 . 하위 컴포넌트 관계를 가지는 데이터 전달방법이다.
상위에서 하위로, 하위에서 상위로 보낼때는어떠한 방법을 사용할까???親から子にデータを転送します。
<child-component v-bind:propsdata="message"></child-component>
//하위 컴포넌트
Vue.component('child-component',{
props:['propsdata'],
});
//상위 컴포넌트
new Vue({
el: '#app',
data:{
message: 'Hello Vue!'
}
})하위 컴포넌트에서 -> v-bind:props 속성이름="상위컴포넌트data속성"イベントをサブコンポーネントから親コンポーネントに転送する方法
//$emit()으로 이벤트 발생
this.$emit('이벤트명');
//이벤트 수신
v-on:이벤트명="상위 컴포넌트 메서드명"
<child-component v-on:show-log="printText"></child-component>
<script>
Vue.component('child-component',{
template: '<button v-on:click="showLog">show</button>,
methods: {
showLog: function(){
this.$emit('show-log');
//하위에서 이벤트 발생
}
}
});
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods:{
printText: function(){
console.log("received an event");
}
}
});
</scrpit>イベントバス
//よく使う
var eventBus = new Vue();
//이벤트 보내는 컴포넌트
methods: {
메서드명: function(){
eventBus.$emit('이벤트명', 데이터);
}
}
//이벤트 받는 컴포넌트
methods: {
created: function(){
eventBus.$on('이벤트명', function(데이터){
});
}
}ビュールータ
라우팅? : 웹페이지 간의 이동 방법을 이야기한다.$mount() API
HTTP通信
エシオス
뷰 커뮤니티에서 가장 많이 사용되는 HTTP 통신 라이브러리이다. 엑시오스는 Promise 기반의 API 형식이 다양하게 제공되어 간편한 API만으로 로직을 구현하기 쉽다 //HTTP GET
axios.get('URL 주소').then().catch();
//HTTP POST 요청
axios.post('URL 주소').then().catch();Reference
この問題について(Do it Vue.はじめに整理), 我々は、より多くの情報をここで見つけました https://velog.io/@vmelove/Do-it-Vue.js-입문-정리テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol