1. Vueの基本的な使い方
ポインター、表現
コマンド、動的プロパティ
V-HTML：リスクがXXS、サブアセンブリカバーします
<template>
<div>
<P>文本插值 {{msg}}</P>
<P>JS表达式 {{flag ? 'yes' : 'no'}}</P>
<P :id="id">动态属性id</P>
<P v-html="rawHtml">
<span>使用v-html后会覆盖子元素</span>
</P>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'hello',
flag: true,
id: `id-${Data.now()}`,
rawHtml: '指令-原始html <b>加粗</b><i>斜体</i>'
}
}
}
</script>2.ウォッチ和計算
そこキャッシュを計算し、データの変更が再計算されません
浅いデフォルトのモニター、どのように深いリスニングを見て？
ウォッチモニタ参照型、OLDVALを取得することはできません
<template>
<div>
<p>num {{num}}</p>
<p>double1 {{double1}}</p>
<input v-model="double2"/>
</div>
</template>
<script>
export default {
data() {
return {
num: 20
}
},
computed: {
double1() {
return this.num * 2
},
double2: {
get() {
return this.num * 2
},
set(val) {
this.num = val/2
}
}
}
}
</script>（numは20となっている場合は、ダブルサイズとダブルサイズが再計算されることはありません、そこに着くとセットしなければならない、運用パフォーマンス.V-モデル双方向のデータバインディング改善）
<template>
<div>
<input v-model="name"/>
<input v-model="info.hobby"/>
</div>
</template>
<script>
export default {
data() {
return {
name: '张三',
info: {
hobby: '打篮球'
}
}
},
watch: {
name(oldVal, val) {
console.log('watch name', oldVal, val) // 值类型，可正常拿到 oldVal 和 val
},
info: {
handler(oldVal, val) {
console.log('watch info', oldVal, val) // 引用类型，拿不到 oldVal 。因为指针相同，此时已经指向了新的 val
},
deep: true // 深度监听
}
}
}
</script>
（ウォッチタイプ名の値で、モニタ、および浅いのモニタの情報の参照型情報:.情報を変更することができますが、修正内部または属性のサブサブサブ属性は、のためので、参照型は、OLDVALを得る聞くために聞くことができなくなります。変更前の値を取得することはできません後）、同じアドレスへの参照型の値がポインタ操作で変更、およびヴァルOLDVAL異なる変数が、しかし点
3.クラス和スタイル
文言のこぶを使用して、動的プロパティを使用します
<template>
<div>
<p :class="{ black: isBlack, yellow: isYellow }">使用 class</p>
<p :class="[black, yellow]">使用 class （数组）</p>
<p :style="styleData">使用 style</p>
</div>
</template>
<script>
export default {
data() {
return {
isBlack: true,
isYellow: true,
black: 'black',
yellow: 'yellow',
styleData: {
fontSize: '50px', // 使用驼峰式
color: 'red',
backgroundColor: '#ccc' // 使用驼峰式
}
}
}
}
</script>
4.条件は、レンダリング
V-場合V-他の使用法は、変数を使用することができ、あなたは===表現を使用することができます
V-IFのとV-ショーの違いは？
V-ifシナリオ、およびV-ショーを使用していますか？
<template>
<div>
<p v-if="type === 'a'">A</p>
<p v-else-if="type === 'b'">B</p>
<p v-else>other</p>
<p v-show="type === 'a'">A</p>
<p v-show="type === 'b'">B</p>
</div>
</template>
<script>
export default {
data() {
return {
type: 'a'
}
}
}
</script>
（V-場合のみ異なるレンダリング結果は、DOM要素をレンダリング; V-ショーのために、データは他のオプションが表示をレンダリングするでしょう、DOM要素の表示になります：どれも、それを表示しません。）
（V-IFを選択して、頻繁に更新選択またはデータは、必要な頻繁な切り替えは、ディスプレイと、必要なV-ショーである場合：なし非表示に制御し、より良い表示、または、もしVとすると、しばしばDOMノードにつながります破壊荷重）
リストをレンダリング5.
オブジェクトをトラバースするには？
キーのの重要性（できない走り書き）
V-用およびV-IFで使用することはできません
<template>
<div>
<p>遍历数组</p>
<ul>
<li v-for="(item, index) in listArr" :key="item.id">
{{index}} - {{item.id}} - {{item.title}}
</li>
</ul>
<p>遍历对象</p>
<ul >
<li v-for="(val, key, index) in listObj" :key="key">
{{index}} - {{key}} - {{val.title}}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
flag: false,
listArr: [
{ id: 'a', title: '标题1' }, // 数据结构中，最好有 id ，方便使用 key
{ id: 'b', title: '标题2' },
{ id: 'c', title: '标题3' }
],
listObj: {
a: { title: '标题1' },
b: { title: '标题2' },
c: { title: '标题3' },
}
}
}
}
</script>
（V-ための演算ステージの数よりも高く、従ってサイクルを定義V-IF）
6.イベント
イベント取得パラメータおよびカスタムパラメータ
イベント修飾、修飾キー
イベントは行くことにバインドされています
<template>
<div>
<p>{{num}}</p>
<button @click="increment1">+1</button>
<button @click="increment2(2, $event)">+2</button>
</div>
</template>
<script>
export default {
data() {
return {
num: 0
}
},
methods: {
increment1(event) {
console.log('event', event, event.__proto__.constructor) // 是原生的 event 对象
console.log(event.target) // 事件被挂载到button上
console.log(event.currentTarget) // 事件在button处触发
// 注意，事件是被注册到当前元素的，和 React 不一样
this.num++
},
increment2(val, event) {
console.log(event.target)
this.num = this.num + val
},
loadHandler() {
// do some thing
}
},
mounted() {
window.addEventListener('load', this.loadHandler)
},
beforeDestroy() {
// 用 vue 绑定的事件，组建销毁时会自动被解绑
// 自己绑定的事件，需要自己销毁！！！
window.removeEventListener('load', this.loadHandler)
}
}
</script>
（Increment1パラメータを渡す必要はありません、イベントを直接得ることができ、カスタムパラメータを持っているincrement2、あなたは、引数でイベントのイベントを記述する必要があります）
（結論：1.イベント2.イベントが現在の要素に対してネイティブであるが搭載されています）
イベント修飾子
| クリックイベントが広がり続け停止 |
| <a v-on:click.stop="doThis">する</a> |
| イベントは、もはやページをリロードされていない場合 |
| <フォームV-上：submit.prevent =」をonSubmit」> </フォーム> |
| 修飾子は、直列に接続することができます |
| <a v-on:click.stop.prevent="doThis">する</a> |
| 唯一の修飾子 |
| <フォームV-上：submit.prevent> </フォーム> |
| それは内部処理要素に引き渡さ前に、イベントのキャプチャモード、このプロセスの最初の要素内にトリガーされるイベントを使用してイベントリスナーを追加する場合 |
| <divのV-上：click.capture =」doThis」> </ div> |
| 現在の要素自体は、そのイベントが内からの要素によってトリガされていない場合にのみ、event.targetハンドラがトリガされます |
| <divのV-上：click.self =」doThis」> </ div> |
キー修飾
| Altキーを一緒に押すかシフトがトリガされます |
| <ボタン@ click.ctrl =」onClickの」>按钮</ボタン> |
| そして唯一CTRLは、トリガーに押され |
| <ボタン@ click.ctrl.exact =」onClickの」>按钮</ボタン> |
| 何の修飾子は、トリガーを押していないとき |
| <ボタン@ click.exact =」onClickの」>按钮</ボタン> |
7.フォーム
モデルで
選択共通フォーム項目のテキストエリア、チェックボックス、ラジオ、
修飾子怠惰な、数、トリム
（末尾のスペースをトリムを取って、入力が完了した後に遅延が変更され、プロセスは、入力を変更しない。番号デジタル変換）
<template>
<div>
<p>输入框: {{name}}</p>
<input type="text" v-model.trim="name"/>
<input type="text" v-model.lazy="name"/>
<input type="text" v-model.number="age"/>
<p>多行文本: {{desc}}</p>
<textarea v-model="desc"></textarea>
<!-- 注意，<textarea>{{desc}}</textarea> 是不允许的！！！ -->
<p>复选框 {{checked}}</p>
<input type="checkbox" v-model="checked"/>
<p>多个复选框 {{checkedNames}}</p>
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<p>单选 {{gender}}</p>
<input type="radio" id="male" value="male" v-model="gender"/>
<label for="male">男</label>
<input type="radio" id="female" value="female" v-model="gender"/>
<label for="female">女</label>
<p>下拉列表选择 {{selected}}</p>
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>下拉列表选择（多选） {{selectedList}}</p>
<select v-model="selectedList" multiple>
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
name: '张三',
age: 23,
desc: '自我描述',
checked: true,
checkedNames: [],
gender: 'male',
selected: '',
selectedList: []
}
}
}
</script>
説明：教師のダブルムーコースからこの注： https://coding.imooc.com/learn/list/419.html
