VUEJS入门

1.1 VUEJS介绍

• Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

• 官网：https://cn.vuejs.org/

1.2 MVVM模式

• MVVM是Model-View-ViewModel的缩写，它的本质上是MVC的改进版。MVVM就是将其中的View的状态和行为抽象化，让我们将视图UI和业务逻辑分开。

• MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）

• Vue.js是一个提供了MVVM风格的双向数据绑定的JavaScript库，专注于View层。它的核心是MVVM中的VM，也就是ViewModel。ViewModel负责连接View和Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

 

1.3 VUEJS快速入门

    
    
 
 


    
    

       {{message}}
    
    

1.4 插入值表达式

• 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。

    
    
    



    {{message}}
    

    
    {{num==1?'YES':'NO'}}
    

    
    
    

    

 2.1 V-on

• 可以用v-on指令监听DOM事件，并在触发时运行一些JavaScript代码。

2.1.1 V-on:click

• 
  点我呀
  来点我呀

    
    
    
    
    



    {{message}}
    
    点我呀
    来点我呀

 2.1.2 v-on:keydown 键盘按下事件

• 需求：文本框只能输入字符串，不能输入数字。
• 养成查询文档的习惯，在我们这个案例中查询的是W3CSchool手册。

• 获取键盘码使用的是event的那个方法？ event.keyCode
  Event 对象

  Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

  事件通常与函数结合使用，函数不会在事件发生前被执行！

  IE: Internet Explorer, F: Firefox, O: Opera, W3C: W3C 标准.

 

 2.1.3 v-on:mouseover 鼠标悬停事件

    
    
    
    
    




    

        这是文本域
    

2.1.4事件修饰符

• Vue.js为v-on提供了事件修饰符来处理DOM事件细节，如：event.preventDefault()或event.stopPropagation()
• Vue.js通过点( . )表示的指令后缀来调用修饰符。

  .stop

  .prevent

  .capture

  .self

  .once

    
    
    
    
    



    
    

        
    
    

    
    

        百度
    

 2.1.5 按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

全部的按键别名：

.enter

.tab

.delete (捕获 "删除" 和 "退格" 键)

.esc

.space

.up

.down

.left

.right

.ctrl

.alt

.shift

.meta