【vue 全家桶】1、vue 基础

Vue 核心

Vue 简介

动态构建用户界面的渐进式 JavaScript 框架
特点：

• 借鉴 Angular 的模板和数据绑定技术
• 借鉴 React 的组件化和虚拟 DOM 技术

不推荐直接操作 DOM

• 1. 违反了数据驱动视图的原则
     Vue.js 和其他框架：这些框架的核心思想是数据驱动视图（Data-Driven View）。你通过修改数据来更新视图，而不是直接操作 DOM。这使得代码更加声明式和易于理解。
     一致性：当数据发生变化时，框架会自动更新视图，确保视图与数据保持一致。直接操作 DOM 可能会导致数据和视图不同步。
• 2. 复杂性和维护性
     代码可读性和可维护性：直接操作 DOM 的代码通常更难理解和维护。使用框架提供的模板语法和响应式系统可以使代码更简洁、更具可读性。
     组件化：框架鼓励将 UI 分解为独立的组件，每个组件有自己的状态和行为。直接操作 DOM 会使组件之间的关系变得混乱，难以管理和复用。
• 3. 性能优化
     虚拟 DOM：现代框架通常使用虚拟 DOM 来提高性能。虚拟 DOM 是一个轻量级的内存中表示，框架会在虚拟 DOM 和实际 DOM 之间进行高效的差异计算（diffing），只更新必要的部分。直接操作 DOM 可能会绕过这些优化机制。
     批量更新：框架可以在一次事件循环中批量处理多个 DOM 更新，减少重绘和回流的次数，从而提高性能。
• 4. 跨平台兼容性
     多平台支持：现代框架通常支持多平台开发，例如 Vue.js 可以用于 Web 和移动应用（如 Weex 或 NativeScript）。直接操作 DOM 的代码可能无法在这些平台上运行或需要大量修改。
• 5. 测试
     单元测试：直接操作 DOM 的代码通常更难进行单元测试。使用框架的数据驱动方式可以更容易地编写和维护测试代码。
     隔离性：框架提供了更好的隔离性，使得组件可以在没有实际 DOM 的环境中进行测试。
• 6. 社区和生态系统
     最佳实践：遵循框架的最佳实践可以让你从社区的经验中受益。大多数现代框架都有丰富的文档和社区支持，帮助你写出高质量的代码。
     工具和库：许多工具和库都是为这些框架设计的，直接操作 DOM 可能会使你无法充分利用这些资源。

模板语法

插值语法 {{}}

• 功能：用于解析标签体内容
• 语法：{{xxx}} ，xxxx 会作为 js 表达式解析

指令语法 v-

• 功能：解析标签属性、解析标签体内容、绑定事件
• 举例：v-bind:href = ‘xxxx’ ，xxxx 会作为 js 表达式被解析

数据绑定

单向数据绑定 v-bind

双向数据绑定 v-model

MVVM模型

• M：模型(Model) ：对应 data 中的数据
• V：视图(View) ：模板
• VM：视图模型(ViewModel) ： Vue 实例对象
  

事件代理

• Object.defineProperty(obj, prop, descriptor)

Object.defineProperty(person, 'age', {
	value: 18,
	enumerable: true, //控制属性是否可以枚举
	writable: true, //控制属性是否可以被修改
	configurable: true, //控制属性是否可以被删除
	
	// 读取属性时调用
	get: function(){
	}
	// 修改属性时调用
	set(value){
	}
})

• 数据代理：通过一个对象代理对另一个对象中属性的操作
• vue中的数据代理：
  vm-getter-data.name
  vm-setter-data.name
  

数据处理 methods

showInfo($event, num)
new Vue({
	data: {} //数据代理，数据劫持
	methods:{
		showInfo(event, num){
		// this === vm
		}
	}
})

• 事件修饰符
  @click.prevent:：阻止默认事件
  .stop：阻止事件冒泡
  .once：事件只触发一次
  .capture：使用事件的捕获阶段
  .self：只有event.target是当前操作的元素时才触发事件
  @wheel.passive：事件的默认行为立即执行，无需等待事件回调执行完毕

• 键盘事件
  keydown.tab：当用户按下键盘上的任意键时触发
  keyup.enter：当用户释放键盘上的任意键时触发
  按键别名config.keyCodes：enter, delete, esc, space, tab, up, down, left, right, caps-lock

计算属性与监视属性

计算属性 computed

new Vue({
	data: {
		firstName: '',
		lastName: ''
	} //数据代理，数据劫持
	computed:{
		// 完整写法
		fullName:{
			get(){ // 调用：初次读取；依赖数据变化
				return this.firstName + '-' + this.lastName
			},
			set(value){ // fullName被修改时
				const arr = value.split('-')
				this.firstName = arr[0]
				this.lastName = arr[1]
			}
		},
		// 简写
		fullName(){
		}
	}
})

• 计算属性：通过已有的属性计算得到
• 在vm中直接读取
• 缓存，调用：初次读取；依赖数据变化

监视属性 watch

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  // 一般写法
  watch: {
    user: {
      handler(newVal, oldVal) {
        console.log('User changed:', newVal, oldVal);
      }
    },
  },
  // 深度监视
  watch: {
    // 深度监视 user 对象
    user: {
      handler(newVal, oldVal) {
        console.log('User changed:', newVal, oldVal);
      },
      deep: true, // 开启深度监视
    },
  },
  // 简写
  watch: {
    message(newValue, oldValue) {
      console.log('New value:', newValue);
      console.log('Old value:', oldValue);
    }
  },
});

computed VS watch

• 主要区别
  • 缓存 vs 无缓存
    计算属性：有缓存，只有当依赖的数据发生变化时才重新计算。
    监听器：没有缓存，每次数据变化时都会执行回调函数。
  • 适用场景
    计算属性：适用于简单的、声明式的计算逻辑，特别是当计算结果仅依赖于其他数据且不需要执行副作用操作时。
    监听器：适用于需要执行复杂逻辑、异步操作或有副作用的操作时，例如发送网络请求、更新其他数据等。
  • 只读 vs 可写
    计算属性：默认是只读的，但可以通过设置 get 和 set 方法使其可写。
    监听器：总是可写的，可以执行任意操作。
  • computed可以做的，watch都可以做
• 何时使用
  • 使用 computed：当你需要一个派生状态，并且这个状态可以直接从其他数据计算得出时。
  • 使用 watch：当你需要在数据变化时执行一些副作用操作，或者需要处理复杂的逻辑时。
• vue管理的函数：普通函数；不是vue管理的函数（回调函数等）：箭头函数

class 与 style 绑定

v-bind:class

用于动态地绑定 HTML 元素的 CSS 类，可以根据组件的状态或数据来控制元素的样式

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

// 对象写法
<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

// 数组写法
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

v-bind:style

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

// 对象写法
<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

// 数组写法
<div v-bind:style="[baseStyles, overridingStyles]"></div>

条件渲染 v-if/v-show

v-if

当条件为 true 时，元素会被渲染到 DOM 中；当条件为 false 时，元素不会被渲染，并且从 DOM 中完全移除

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-show

切换元素的 CSS property: display，元素始终存在于 DOM 中，只是通过 display: none 或 display: block 来控制其可见性

<h1 v-show="ok">Hello!</h1>

列表渲染 v-for

// 遍历数组
<li v-for="(p,index) in/of persons" :key="p.id">
	{{p.name}}-{{p.age}}
</li>

// 遍历对象
<li v-for="(val,k) in/of car" :key="k">
	{{k}}-{{val}}
</li>

// 遍历字符串
<li v-for="(char,index) in/of str" :key="index">
	{{char}}-{{index}}
</li>

// 遍历指定次数
<li v-for="(num,index) in/of 5" :key="index">
	{{num}}-{{index}}
</li>

new vue({
	el:'#root',
	data:{
		persons:[
			{id:'001', name:'A', age: 18},
			{id:'002', name:'B', age: 19},
			{id:'003', name:'C', age: 20},
		]
	}
})

key的原理（diff算法）

列表过滤

在这里插入代码片

列表排序

在这里插入代码片

监测数据

收集表单数据

过滤器

内置指令与自定义指令

Vue 实例生命周期

创建流程（数据监测、数据代理）

• beforeCreate
• created

挂载流程 $mount

• beforeMount
• mounted

更新流程 update

• beforeUpdate
• updated

销毁流程 $destroy

• beforeDestroy
• destroyed

Vue 组件化编程

模块与组件、模块化与组件化 component

模块

组件

• 局部功能代码和资源的集合

非单文件组件

// 1、创建组件
const school = Vue.extend({
	data(){
		return {}
	}
})
const student = Vue.extend({
	data(){
		return {}
	}
})


new Vue({
	el:'#root',
	components:{ // 2、注册组件（局部注册）
		school,student
	}
})
// 3、使用组件
<school></school>
<student></student>

单文件组件 .vue

<template></template>
<script>
	export default {
	name: '',
	data(){},
	methods:{}
	}
</script>
<style></style>

• webpack、脚手架
• App.vue

参考

https://v2.cn.vuejs.org/v2/guide/