1. Вью основное использование
Указатель, выражение
Команда, динамические свойства
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. Часы 和 вычислен
Вычисляется There кэш, изменение данных не пересчитывается
смотреть неглубокий монитор по умолчанию, как глубокое прослушивание?
Часы монитор ссылок типа, не может получить 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, double1 и double2 не будут пересчитаны, улучшить связывание .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 если сценарии, и 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-если только вынести Dóm элемент; для об-шоу, данные будут являться проявлением йот элемента, другие варианты будут оказывать дисплей: нет, просто не показывают.)
(Для выбора или данных обновляются часто, выбирает, если V-; при необходимости частого переключения требуется V-шоу, с дисплеем: нет управления, чтобы скрыть и лучшее отображение, либо с V-образным, если приведет к узлам DOM часто разрушение нагрузки)
5. Визуализация списка
Как пройти объект?
(Не каракули) значение ключа
v-за и не может быть использована с v-если
<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 по-, если она больше, чем число арифметической стадии, поэтому определить циклы)
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> </ FORM> |
| При добавлении обработчиков событий с помощью режима захвата событий, событие, которое срабатывает внутри первого элемента в этом процессе, прежде чем он передан внутренние элементы обработки |
| <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. Форма
в модели
Обычный предмет формы текстовое поле, флажок, радио, выберите
Модификаторы ленивый, номер, отделка
(Взятый триммер конечных пробела; Ленивый будет меняться после того, как входной сигнал будет завершен, процесс не меняет входной сигнал; Number цифрового преобразования)
<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>
Описание: Эта записка от учителя двойной Mu курса: https://coding.imooc.com/learn/list/419.html
