v-if
和 v-show
v-if
不渲染不满足判断条件的模块,v-show
渲染但不显示,使用场景:是否多次切换或频繁更新条件状态v-for
中添加唯一的 key
为了高效的更新虚拟 DOM,会根据 key
值去判断某个值是否修改,如果修改,则重新渲染这一项,否则复用之前的元素,添加方式:key="'list_' + index"
mixin
抽离多个组件里的公共逻辑
缺点:变量来源不明确,不利于代码阅读;多个 mixin
可能会造成命名冲突;mixin
和组件可能会出现多对多关系,复杂度高$nextTick
Vue 是异步渲染,data
改变后,DOM 不会立刻渲染,页面渲染时会将 data
的做整合,$nextTick
会在 DOM 渲染完之后执行延迟回调,减少 DOM 操作次数,提高性能data
为什么返回函数
两个实例都引用同一个对象,当其中一个实例属性改变时,另一个实例属性也随之改变,只有当两个实例拥有自己的作用域时,才不会互相干扰Component.prototype.data = {
message: 'hello'
}
Component.prototype.data = function() {
return {
message: 'hello'
}
}
:is
// 列表页:轮播图、文章、视频、图片
<div v-for="(item, index) in newsData" :key="index">
<component :is="item.type"/>
</div>
import
comments: {
Tab: () => import('../comments/Tab')
}
computed
有缓存,data
不变则不会重新计算,监听值类型可正常拿到 oldVal
watch
一般用于监听数据变化的同时,进行异步操作或者是比较大的开销,监听引用类型拿不到 oldVal
,因为指针相同,此时已经指向了新的 Val
beforeCreate
created
页面还没有渲染,但 Vue 实例已经初始化了,可以调用 methods
中的方法、改变 data
中的数据,使用场景:发送请求获取数据
beforeMount
mounted
页面已经渲染完毕,可以获取到 el
中的 DOM 元素,进行 DOM 操作
beforeUpdate
updated
beforeDestroy
清除定时器、自定义事件
destroyed
created
子组件 created
子组件 mounted
父组件 mounted
父组件 beforeUpdate
子组件 beforeUpdate
子组件 updated
父组件 updated
props
子组件给父组件传值通过 $emit
触发回调
其他组件通信,通过实例一个 Vue
实例 event
作为媒介,要相互通信的组件之中,都引入 event
{
path: '/user/:id',
component: () => import('../components/User')
}
hash
模式 url
多了 #
号,它的特点在于:hash
虽然出现 URL
中,但不会被包含在 HTTP
请求中,对后端完全没有影响,不需要后台进行配置,因此改变 hash
不会重新加载页面
history
模式 利用了 pushState()
和 replaceState()
方法,history
模式改变了路由地址,因为需要后台配置地址History.pushState()
方法用于在历史中添加一条新记录,浏览器地址栏立刻显示新地址,但并不会跳转,它只是成为浏览历史中的最新记录
History.replaceState()
的使用与 history.pushState()
非常相似,区别在于 replaceState()
是修改了当前的历史记录项而不是新建一个
<!-- 阻止单击事件继续传播 -->
<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>
<template>
<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>
<p>复选框{{checked}}</p>
<input type="checkbox" v-model="checked"/>
<p>多个复选框{{checkedNames}}</p>
<input type="checkbox" id="beijing" value="beijing" v-model="checkedNames"/>
<label for="beijing">北京</label>
<input type="checkbox" id="shenzhen" value="shenzhen" v-model="checkedNames"/>
<label for="shenzhen">深圳</label>
<input type="checkbox" id="guangzhou" value="guangzhou" v-model="checkedNames"/>
<label for="guangzhou">广州</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 disable value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<p>下拉列表选择(多选){{selectedList}}</p>
<select v-model="selectedList" multiple>
<option disable value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
</template>
<script>
export default {
data() {
return {
name: '年糕',
age: 17,
desc: 'lalalala',
checked: true,
checkedNames: {},
gender: 'male',
selected: '',
selectedList: []
}
}
}
</script>