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. watch和computed
Computed有缓存,data不变则不会重新计算
watch默认浅监听,如何深度监听?
Watch监听引用类型,拿不到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-model双向数据绑定,要有get和set)
<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>
(在watch中监听值类型的name,和引用类型的info。对于info的浅监听:info可以修改,但是里面的子属性或者子子属性修改就无法监听。监听引用类型拿不到oldVal,因为对于引用类型的值的修改是指针操作,oldVal和val虽然是不同的变量,但是指向同样的地址,一旦修改之后无法拿到之前的值)
3. class和style
使用动态属性,使用驼峰写法
<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-if v-else的用法,可以使用变量,也可以使用===表达式
v-if和v-show的区别?
v-if和v-show的使用场景?
<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-if只会渲染一个dom元素;对于v-show,data是a就会显示a的dom元素,对于其他的选择会渲染display:none,只是不显示而已。)
(对于一次选择或者数据更新不频繁时,选择v-if;如果需要频繁切换,需要v-show,用display:none控制隐藏和显示效果比较好,否则用v-if会导致dom结点频繁的销毁加载)
5. 列表渲染
如何遍历对象?
Key的重要性(不能乱写)
v-for和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-for比v-if运算级高一些,因此会先定义循环)
6. 事件
Event参数和自定义参数的获取
事件修饰符,按键修饰符
事件被绑定到哪里
<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 不需要传参数,则event可以直接获取;increment2有自定义参数,则event事件需要在参数中写出)
(结论: 1. event 是原生的 2. 事件被挂载到当前元素)
事件修饰符
阻止单击事件继续传播 |
<a v-on:click.stop=”doThis”> </a> |
提交事件时不再重载页面 |
<form v-on:submit.prevent=”onSubmit”> </form> |
修饰符可以串联 |
<a v-on:click.stop.prevent=”doThis”> </a> |
只有修饰符 |
<form v-on:submit.prevent> </form> |
添加事件监听器时使用事件捕获模式,即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 |
<div v-on:click.capture=”doThis”> </div> |
只在event.target是当前元素自身时触发处理函数,即事件不是从内部元素触发的 |
<div v-on:click.self=”doThis”> </div> |
按键修饰符
Alt或shift被一同按下也会触发 |
<button @click.ctrl=”onClick”>按钮</button> |
有且只有CTRL被按下才会触发 |
<button @click.ctrl.exact=”onClick”>按钮</button> |
没有任何修饰符被按下时才触发 |
<button @click.exact=”onClick”>按钮</button> |
7. 表单
v-model
常见表单项textarea、checkbox、radio、select
修饰符lazy、number、trim
(Trim截取前后空格;Lazy输入完成之后才会变化,输入过程中不会变化;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>
说明: 此笔记来源于双越老师的慕课课程: https://coding.imooc.com/learn/list/419.html