Vue浅入未出

Vue浅入未出

构建用户界面(User Interface)渐进式框架

基本介绍

对构造函数进行实例化

new Vue();
el: ‘元素’

• el的值也可以是DOM对象,正常情况下是id选择器
• el称之为视图,准确来讲叫模板
• el的值可以是选择器,建议使用id选择器保证唯一性,如果选择器选中的元素有多个,只对第一个生效

template 标签

用于包裹多个子节点,让Vue更好的操控

1. 想控制多个同级元素渲染的时候,又不想增加额外的节点
2. template上不能使用key标签,因为template不是一个真实的DOM节点
3. 不会生成多余节点,条件渲染时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等同级

作用:

1. 本质是方法,但事只能当属性访问和使用,不能当做方法来调用
2. 计算一次,将结果缓存起来,再次使用的时候用的是缓存结果
3. 方法在执行多个数据的时候是一次次调用,计算属性只需要一次
4. 计算属性一定要有返回值,返回值就是属性的值

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>