乐清高端网站建设_深圳市龙华区属于哪个区_seo技术培训机构_中国世界排名

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 类，可以根据组件的状态或数据来控制元素的样式

<divclass="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

收集表单数据

过滤器

内置指令与自定义指令

Vue 实例生命周期

Vue 组件化编程

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

非单文件组件

单文件组件

参考

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