Vue基础（一） 基础概念 / 基础操作 / 基础事件

目录

Vue基础概念

Vue是什么？

Vue特点

Vue基础操作

Vue模板语法

插值语法

指令语法

数据绑定

Vue中的数据代理

Vue基础事件

常用事件

点击事件

键盘事件

事件修饰符

    

---

Vue基础概念

Vue是什么？

• 本质是JavaScript框架
• 什么样的框架？一套构建用户界面的渐进式框架

Vue特点

• 组件化模式：提高代码复用率，且更好维护；
• 声明式编码：让编码人员无需直接操作DOM，提高开发效率
• 虚拟DOM + Diff算法：提高结点复用率，提高开发效率

Vue基础操作

Vue模板语法

插值语法

• 功能：解析标签体内容
• 写法: {{xxx}}      xxx是js表达式，且可以直接读取到data中的所有属性。

指令语法

• 功能:用于解析标签(包括:标签属性、标签体内容、绑定事件.....)
• 写法举例: v- bind:href="xxx"或简写为:href="xxx", xx同样要写js表达式，且可以直接读取到data中的所有属性。

数据绑定

• 单向绑定(v-bind):数据只能从data流向页面。
• 双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。双向绑定一般 都应用在表单类元素上(如: input、 select等)

Vue中的数据代理

• 概念：通过vm对象来代理data对象中属性的操作(读/写)；
• 优点：更加方便的操作data中的数据；

Vue基础事件

常用事件

点击事件

• 使用：v-onclick:xxx或@xxx 绑定事件，其中xxx是事件名:
• 回调函数：事件的回调需要配置在methods对象中，最终会在vm上;

回调函数注意：

• @click="demo"和@click= "demo($event)"效果一致， 但后者可以传参;
• methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象； 
• methods中配置的函数，不要用箭头函数!否则this就会指向window;

键盘事件

• 使用：Vue . config. keyCodes.自定义键名=键码     可以去定制按键别名
• 系统修饰键(用法特殊) : ctrl、 alt、shift、 meta（win）
      (1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
      (2).配合keydown使用:正常触发事件。
      (3).按下Ctrl+y 时：@keyup.ctrl.y
• 常用按键别名
      回车=> enter
      删除=> delete ( 捕获“删除”和“退格”键)
      退出=> esc
      空格=> space
      换行=> tab (特殊 必须配合keydown)
      上=>up
      下=>down
      左=> left
      右=> right
      切换大小写=> caps-lock

事件修饰符

•     prevent:阻止默认事件(常用) ;

•     stop:阻止事件冒泡(常用) ;

•     once:事件只触发一次(常用) ;

•     capture:使用事件的捕获模式;

•     self:只有event . target是当前操作的元素时才触发事件;

•     passive:事件的默认行为立即执行，无需等待事件回调执行完毕;