【vue 全家桶】1、vue 基础（更新中）

Vue 核心

Vue 简介

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

• 借鉴 Angular 的模板和数据绑定技术
• 借鉴 React 的组件化和虚拟 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: {// 监听message属性的变化message: function (newValue, oldValue) {console.log('New value:', newValue);console.log('Old value:', oldValue);}}
});

class 与 style 绑定

v-bind:class

v-bind:style

条件渲染 v-if/v-show

列表渲染 v-for

收集表单数据

过滤器

内置指令与自定义指令

Vue 实例生命周期

Vue 组件化编程

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

非单文件组件

单文件组件

参考

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