Vue基本仕上げ1

MVCとMVVMの関係の図

1. mvc（バックエンド思考）

2. mvvm（フロントエンドの考え方）

簡単な指示

1. vクローク

<div v-cloak>{ { msg }}</div>
補間式のちらつきの問題を解決します（ページが更新されて読み込まれるときに表示される{ {}} 。
$dislpay：なし\ color {red} {注：一致するスタイル[v-cloak] {dislpay：なし}}$
**

タグを解析しない

プレースホルダーのみを置き換え、元のコンテンツを上書きしない

2. v-text

<div v-text = "msg"></div>

デフォルトではちらつきの問題はありません

要素のコンテンツを上書きする

タグを解析しない

3.v-html

<div v-html= "msg"></div>

要素のコンテンツを上書きする

タグを解析します

4.vバインド：（「：」と省略）

<input type='button' v-bind:title='mytitle'></div>
バインディング属性、一方向のデータバインディング
。v-bindが追加されていない場合、「mytitle」は文字列と見なされ、追加された後は変数または正当なjs式になります。

5.v-on：（省略形「@」）

バインドされたイベント

クリック：v-on：click = 'メソッド名' ------- @ click

フローティング：v-on：mouseover = 'method name' ------- @ mouseover

Leave：v-on：mouseout = 'method name' ------- @ mouseout

モバイルタッチスタート、タッチエンド、タッチムーブ...

6.イベント修飾子

バインディングイベント名の後に記述：@ click.stopなど

.stop：バブリングを停止

.prevent：デフォルトの動作を防止

.capture：イベントキャプチャに変更

.self：要素自体がトリガーされると、イベントはコールバックをトリガーします

.once：一度だけトリガー

7.データ双方向バインディング命令vモデル

<input type ='text' v-module = '属性名'>
$注：フォーム要素にのみ適用されます\ color {red} {注：フォーム要素にのみ適用されます}$

8.v-forループトラバーサル

<p v-for = '(值, 索引) in 数组名/对象名' :key=''></p>

keyの値は、srtingまたはnumberタイプのみにすることができます

バインディング属性の形式でキー値を指定します

9.v-if、v-show

<p v-if = '条件'></p>
<p v-show = '条件'></p>

v-if要素の削除または作成

高いスイッチング性能の消費、要素を頻繁に切り替える必要がある場合、v-ifは適用されません

v-showは要素を非表示または表示します。これは、表示値を切り替えるのと同じです=> 'none'

初期レンダリングコストが高いため、要素を表示する必要がない場合、v-showは適用されません。

フィルタ

共通のテキストフォーマットとして使用され、口ひげ補間とvバインド式;
{ {msg |フィルター名（パラメーターを渡す）}} ===>フィルターでデータを処理した後、名前を表示する;
'|' =>パイプ文字;
フィルター呼び出しは近接の原則を採用し、グローバルフィルターとプライベートフィルターが同じ名前の場合、プライベートフィルターが優先されます。

1.グローバルフィルター

すべてのvmインスタンスが共有されます
定義：Vue.filter（ 'filter name'、function（msg、arg）{// data processing}）
定義の場所：vmインスタンスの外部で定義します
パラメーター：

msg：パイプ文字の前のデータ

arg：受け取ったパラメーター

2.プライベートフィルター（部分）

定義の場所：vm内、フィルター：{}、メソッドと同じレベルで
定義：filters:{ 过滤器名称(管道符前数据，接受的参数) {}}
"========="
（小さな知識）：string.padStart（2、 '0'）は、1桁を補足するために使用されますゼロ

カスタム命令

カスタムコマンドの名前は「v-」で始まります

1.全体

定義：Vue.directive（ 'Custom command？'、{}）
パラメーター1：コマンド名を定義するとき、カスタムコマンド名の前に「v-」を付けず、
パラメーター2：オブジェクト、オブジェクトにいくつかあります命令に関連する機能、特定の段階で対応する操作を実行
例：フォーカスイベント
<input type='text' v-focus>
Vue.directive('focus', {
每个函数第一个参数为 el，表示被绑定指令的元素，此时可使用原生的方法
	bind:function(el){ //指令绑定到元素上时执行，仅一次
		el.focus() //元素还未插入到DOM 中,不生效
		//多为与样式相关的操作
	}
	inserted:function(el){ //元素插入到 DOM 中的时候执行，仅一次
		el.focus() //元素已经插入到DOM 中，生效
		//多为与js相关的操作
	}
	updated:function(){ //VNode 更新时执行,可能触发多次

	}
})
関数関連のパラメーター

2.プライベート

定義の場所：メソッドと同じレベルでvmインスタンスに定義されて
います定義：directives: {'自定义指令名': {相关函数}}
関数の省略形（グローバル/プライベート）：

インスタンスのライフサイクル

ライフサイクル機能はメソッドと同じレベルです

**html:**
<div id='app'>
	<input type='button' value='改变msg' @click="msg='No'">
	<p id='p'>{
    
    { msg }}</p>
</div>
**js:**
var vm = new Vue({
	el: '#app',
	data: {
		msg: 'ok'
	},
	methods: {
		show() { console.log('执行了show方法') }
	},
})

***创建期间的生命周期函数***
beforCreate(){ //实例被完全创建之前执行
	//在这个生命周期内，data 和 methods 中的数据未初始化
	console.log(this.msg); //undefined
	this.show()  //报错，this.show() is not a function
}

created() {
	//在这个生命周期内，data 和 methods 中的数据初始化完成
	//可调用 methods 中的方法和操作 data 中的数据
	console.log(msg) //ok
	this.show() //执行了show方法
}

beforeMount() { //模板在内存中编译完成，还未渲染到页面中
	//在这个生命周期内，页面中的元素未被替换，还是原来写好的模板字符串
	console.log(document.getElementById('p').innerHtml) //{
    
    { msg }}
}

mounted() { 实例创建期间的最后一个生命周期函数
	//将编译好的内存中的模板挂在到页面中
	console.log(document.getElementById('p').innerHtml) //ok
}

***组件运行阶段的生命周期函数***
beforeUpdate() {  //界面还未被更新，但数据已被更新
	//组件/数据被改变时触发
	//例：当点击input按钮时：
	console.log(document.getElementById('p').innerHtml) // ok ===>页面未更新
	console.log(this.msg) // No ===>数据已经改变
}
undaated(){ //页面与数据都已更新
	//组件/数据被改变时触发
	//例：当点击input按钮时：
	console.log(document.getElementById('p').innerHtml) // No ===>页面已更新
	console.log(this.msg) // No ===>数据已经改变
}

***组件销毁阶段的生命周期函数***
beforeDestroy() {
	//还未执行销毁过程
}
destroyed() {
	//组件被完全销毁，此时组件中所有的数据、方法、指令、过滤器等 都不可用
}

アニメーション

アニメーションが必要な要素をタグでラップします。
スタイル：
v-enter、v-leave-to {}-> Enterおよびleave
v-enter-active、v-leave-active {}->中間プロセスアニメーション
ここに画像の説明を挿入
クリックして表示：vueアニメーション詳細紹介

部品

定義：Vueインスタンスのコード量を分割し、さまざまなコンポーネントをさまざまな機能モジュールに分割し、必要に応じてそれらを呼び出します

1.グローバルに作成する

<div id='app'>
	<my-com1></my-com1>//引用组件
</div>
<template id='tmp1'>
	<div> //根元素
		<p>创建的组件</p>
	</div>
</template>

****Vue.component('组件名称', { //创建的组件模板对象 })****
Vue.component('myCom1', {
	template: '#tmp1'
}) 
注：
	1.若组件名称使用驼峰命名时，调用时用小写，并且单词之间‘-’连接，若未使用驼峰命名，则直接引用组件名；
	2.常见的模板对象必须有一个根元素包裹

2.部分的な作成（プライベート）

インスタンス内、メソッドと同じレベル

components: { //定义实例内部私有组件
	组件名: {
		template: ''
	}
}

3.コンポーネントのデータとメソッド

Vue.compontent('com1', {
	template: '',
	data: function() {
		return {}
		//组件中的 data 为一个函数，且必须 return 一个对象
	},
	methods: {}
})

4.コンポーネントの切り替え

<component :is="'组件名'"></component>

5.コンポーネントパス値

1.父と子

<div id='#app'>
	<com1 :parentmsg='msg' v-on:func='show'></com1>
</div>

<template id='son'>
	<div>
		<input type='button' value='点击调用父组件传递的方法' @click=‘parentfunc’>
		<p>子组件---{
    
    { parentmag }}</p>
	</div>
</template>

var vm = new Vue({
	el: '#app',
	data: {
		msg: '父组件数据'
	},
	methods: {
		show() {
			console.log('调用了父组件方法')
		}
	},
	//定义子组件：
	components: {
		com1: {
			template: '#son',
			props: ['parentmsg'], //将父组件传递的parentmsg属性在props数组中定义，然后才能使用，但是不做更改
			methods: {
				parentfunc() {
					this.$emit(‘func’)
				}
			}
		}
	}
})
总结：
	（1）在父组件调用子组件的地方，绑定一个自定义属性，属性值为要传递的数据，在子组件定义的地方通过props数组接收
	（2）若调用父组件的方法，在父组件调用子组件的地方，使用事件绑定方式，自定义事件名,在子组件的方法中，通过this.$emit('方法名')调用父组件方法

2.子は、子
コンポーネントを介して親メソッドを親コンポーネントに渡します。親コンポーネントに渡されるデータは、パラメータとして返されます。親コンポーネントでは、メソッドが呼び出されると、パラメータが受け入れられます。渡されたオブジェクトが親コンポーネントである場合データで変数受信を定義する

MVCとMVVMの関係の図

1. mvc（バックエンド思考）

2. mvvm（フロントエンドの考え方）

簡単な指示

1. vクローク

2. v-text

3.v-html

4.vバインド：（「：」と省略）

5.v-on：（省略形「@」）

6.イベント修飾子

7.データ双方向バインディング命令vモデル

8.v-forループトラバーサル

9.v-if、v-show

フィルタ

1.グローバルフィルター

2.プライベートフィルター（部分）