Vue浅入未出
构建用户界面(User Interface)渐进式框架
基本介绍
对构造函数进行实例化
new Vue();
el: ‘元素’
- el的值也可以是DOM对象,正常情况下是id选择器
- el称之为视图,准确来讲叫模板
- el的值可以是选择器,建议使用id选择器保证唯一性,如果选择器选中的元素有多个,只对第一个生效
template 标签
用于包裹多个子节点,让Vue更好的操控
- 想控制多个同级元素渲染的时候,又不想增加额外的节点
template
上不能使用key标签,因为template
不是一个真实的DOM节点- 不会生成多余节点,条件渲染时
v-show
无效
生命周期-钩子函数
// 创建阶段
beforeCreate 在实例创建之前执行
Create 在实例创建之后执行 // 页面未渲染 加载数据
// 挂载阶段
beforeMount 页面渲染前
mounted 页面渲染完成 // 查询/加载数据 使用$refs来获取dom对象
// 更新阶段
beforeUpdate 数据变化 页面更新前
updated 数据变化 页面更新后
// 销毁阶段
beforeDestroy 视图销毁前
destroyed 视图销毁后
所有钩子函数中的this都是Vue实例,在data中使用
v-model 修饰符
- .lazy 修饰符可将
v-model
的默认input
取代为change
事件,某种程度上可以提升性能;- .number 字符串转为有效的数字;
- .trim 首尾空格过滤;
v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件:
- text 和 textarea 元素使用
value
属性和input
事件- checkbox 和 radio 使用
checked
属性和change
事件- select 字段将
value
作为 prop 并将change
作为事件
transition动画过渡
<transition>
<div>我是动画</div>
</transition> // 只能用于单个元素,使用标签将需要过渡的标签包裹起来
<transition-group>
<div>我是动画</div>
<div>我是图片</div>
<div>我文字</div>
</transition-group> // 对列表使用该标签
v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。
computed 计算属性
实例选项,与el/data/methods等同级
作用:
- 本质是方法,但事只能当属性访问和使用,不能当做方法来调用
- 计算一次,将结果缓存起来,再次使用的时候用的是缓存结果
- 方法在执行多个数据的时候是一次次调用,计算属性只需要一次
- 计算属性一定要有返回值,返回值就是属性的值
watch 侦听器
实例选项:当你需要根据数据变化执行一些特定业务逻辑的时候使用watch
# 监视指定数据变化,执行代码
watch: {
XXX(newVal,oldVal){
console.log('改变了',newVal,oldVal)
}
}// 这种方式只能监视到数组成员的添加 删除,监视不到成员中对象数据
#深度监视: 用于针对复杂数据类型: 数据 对象之类
watch:{
XXX:{
handler(){
},
deep: true // 深度监视,默认是false
}
}
// watch是一个功能,不需要返回值,也不需要在模板中绑定
关于对象的修改
1.没有初始化的对象成员如果修改不会更新视图,会更新到对象中
2.关于数组的赋值,以下两种情况不会更新视图:
- 利用索引值设置一个数组项时
- 直接修改数组长度
解决办法
vue.set(实例对象,属性名,需要修改的值);关于事件处理函数建议使用onXXX来起名
所有的事件处理@xxx 必须是methods函数
需要根据一段逻辑产生数据值的业务,建议选择计算属性
forEach中的index修改无效
指令
v-once
<div id="app">
<!-- 只渲染一次,相当于禁用了响应式 -->
<p v-once>{{text}}</p>
<button @click="changeData">更新数据</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
text: '我只会渲染一次'
},
methods: {
changeData: function () {
this.text = '修改了数据, v-once 所在的元素也会不被重新渲染'
}
}
});
</script>
v-cloak 避免闪烁
<style>
/* 属性选择器 */
[v-cloak] {
display: none;
}
</style>
1.由于代码自上向下解析执行,Vue 来不及渲染而导致 {{text}} 被浏览器显示出来
2.当 Vue 被执行后,才会将 {{text}} 解析并渲染
3. 通过 v-text 是可以避免这个问题的,原因是 v-text 是一个属性,即使被浏览器解析也不会显示到页面
4. 还可以通过 v-cloak 配合 [v-cloak] {display: none;} 来解决
v-pre 保留原始格式
<!-- 所在元素不会被编译处理,可以理解为忽略 -->
<div id="app">
<!-- 添加了 v-pre 后 {{}} 就不会被 vue 识别了 -->
<p v-pre>{{text}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
text: '一段文本'
}
});
</script>