vue公式チュートリアルノート(基礎編)

vue公式チュートリアルノート1

基礎部

紹介

宣言レンダリング

条件とサイクル

処理ユーザ入力

コンポーネント化アプリケーション構築

vueインスタンス

完全な構成要素APIドキュメント

vueインスタンス

を作成する

データと方法

ライフサイクルフック

テンプレート構文

補間

指令

略(文法糖)

計算属性およびリスナー

計算属性

リスナー

ClassとStyleバインド

条件レンダリング

v-if

v-show

v-if vs v-show

v-if v-forとともに

を使用

リストレンダリング

イベント処理

リスニングイベント

イベント処理方法

内蔵プロセッサ方法:

イベント修飾子

キー修飾子

キーコード(廃棄済み)

システム修飾子

フォーム入力バインディング

基礎用法

値バインド

修飾子

コンポーネント上でv-model

を使用

コンポーネントベース

基本例

コンポーネントの多重化

コンポーネントの組織

Propを介してサブアセンブリにデータを渡す

.

単一ルート要素

サブアセンブリイベント

を傍受する

スロットを介してコンテンツを配信する

.

ダイナミックコンポーネント

DOMテンプレートを解析する際の注意事項

きそぶ
紹介する
宣言レンダリング
{ {}}
条件とループ
v-if/v-for
ユーザー入力の処理
v-on
コンポーネント化アプリケーション構築
vueインスタンス
vueインスタンスの構成要素を簡単に説明します
完全な構成要素APIドキュメント
APIドキュメント
vueインスタンスの作成
データとメソッド

dataオブジェクトのすべてのpropertyがVueの応答システムに組み込まれる.

は、インスタンスが作成されたときにdataにすでに存在するpropertyのみが応答式である.

Object.freeze()が加わると、応答システムは変化を追跡できない(応答しない)

.

インスタンス属性およびメソッド参照APIドキュメント

ライフサイクルフック

定義:各Vueインスタンスが作成されるときに一連の初期化プロセスによって実行されるいくつかの関数.ユーザーは、異なるフェーズで独自のコードを追加できます.

ライフサイクルフックのthisコンテキストは、呼び出されたVueインスタンスを指します.

オプションpropertyまたはコールバックでcreated:()=>console.などの矢印関数を使用しないでください.log(this.a)またはvm.$watch(‘a’, newValue => this.myMethod()). 矢印関数にはthisがないため、thisは変数として上位の構文の役割ドメインに検索され、見つかるまで常にUncaaught TypeError:Cannot read property of undefinedまたはUncaaught TypeError:this.myMethod is not a functionなどのエラー.

ライフサイクルフック関数beforeCreated created beforeMount mounted beforeUpdate beforeDestroy destroyed

テンプレート構文
補間
テキスト

"Mustache"構文(括弧)のテキスト補間:{}}

は一度に補間され、データが変更されると補間箇所の内容は更新されません:v-once

オリジナルHTML

v-html

Attribute

属性変数:v-bind

JavaScript式の使用

二重かっこ、v-bind内に単一式

を書くことができます.
インストラクション
パラメータ

v-bind応答式更新HTML attribute

v-onモニタdomイベント

ダイナミックパラメータ

2.6.0新コードは次の

です.
修飾子

.prevent

略語(文法糖)

v-bind: -> :

v-on: -> @

	//     
	
	//   attributeName herf    :href="url"
	<a v-bind:[attributeName]="url">a>
	
	// eventName   click,focus     @click="doSomething"
	<a v-on:[eventName]="doSomething">a>

	// 1.      null ，            。
	// 2. **      **     ， **     **        
	// 3.                 
	// 4.         

計算プロパティとリスナー
計算プロパティ

基礎例

	<p>{
    {reversedMessage}}}p>

	computed: {
		reversedMessage: function() {
			return this.xxx.join('')
		}
	}

計算属性キャッシュvsメソッド計算属性は、それらの応答式依存に基づいてキャッシュされたキャッシュであり、オーバーヘッド

を低減する.

計算属性vsリスニング属性

	computed: {
     
		fullName: {
     
			get: function () {
     
				return this.firstName + ' ' + this.lastName
			},
			set: fucntion (newValue) {
     
				var names = newValue.split(' ')
				this.firstName = names[0]
				this.lastName = names[names.length - 1]
			}
		}
	}

リスナー

この方法は、データの変化時に非同期またはオーバーヘッドの大きい操作を実行する必要がある場合に最も有用である.

	<div id="watch-example">
		<p>
			Ask a yes/no question:
			<input v-model="question">
		p>
		<p>{
    { answer }}p>
	div>

	//       （  API）      
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
	
	var watchExampleVM = new Vue({
     
		el: '$watch-example',
		data: {
     
			question: '',
			answer: 'I cannot give you an answer until you ask a question!'
		},
		watch: {
     
			question: function (newQ, oldQ) {
     
				this.answer = 'Waiting for you to stop typing...'
				this.debouncedGetAnswer()
			}
		},
		created: function () {
     
			this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
		},
		methods: {
     
			getAnswer: function () {
     
				if (this.question.indexOf('?') === -1) {
     
					this.answer = 'Questions usually contain a question mark. ;-)'
					return
				}
				this.answer = 'Thinking...'
				var vm = this
				axios.get('https://yesno.wtf/api')
					.then(function (res) {
     
						vm.answer = _.capitalize(res.data.answer)
					}).catch(function (err) {
     
						vm.answer = 'Error! Could not reach the API.' + err
					})
			}
		}
	})

ClassとStyleのバインド

	//  、  HTML Class
	// 1.    
	<div 
		v-bind:class="{ active: isActive }"
	>div>
	
	<div
	  v-bind:class="{ active: isActive, 'text-danger': hasError }"
	>div>
	
	<div 
	  v-bind:class="classObject"
	>div>
	
	computed: {
	  classObject: function () {
	    return {
	      active: this.isActive && !this.error,
	      'text-danger': this.error && this.error.type === 'fatal'
	    }
	  }
	}
	
	// 2.    
	<div v-bind:class="[activeClass, errorClass]">div>
	
	<div v-bind:class="[isActive ? activeClass : '', errorClass]">div>
	
	// 3.      
	<div v-bind:class="[{ active: isActive }, errorClass]">div>
	
	// 4.   class
	<my-component class="baz boo">my-component>
	<my-component v-bind:class="{ active: isActive }">my-component>

	//  、      
	// 1.  
	<div v-bind:style="{
         color: activeColor, fontSize: fontSize + 'px' }">div>
	// 2.    
	<div v-bind:style="styleObject">div>
	data: {
	  styleObject: {
	    color: 'red',
	    fontSize: '13px'
	  }
	}
	// 3.  （      ）
	<div v-bind:style="[baseStyles, overridingStyles]">div>
	// 4.              
	// 5.   （      ）
	<div :style="{
         display: ['-webkit-box', '-ms-flexbox', 'flex'] }">div>

条件付きレンダリング
v-if
1.v-if v-else-if v-else条件のレンダリング