Vue框架相关知识day01

一、vuejs简单入门

1.1 VueJS介绍 

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

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 快速入门

1.4 插值表达式 

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

        示例：

            {{ number + 1 }} 

            {{ ok ? 'YES' : 'NO' }}

        这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

            //这是语句，不是表达式

            {{ var a = 1 }}

            //流控制也不会生效，请使用三元表达式  

            {{ if (ok) { return message } }}

二、VueJS 常用系统指令

2.1 v-on 

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

2.1.1 v-on:click

2.1.2 v-on:keydown

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

2.2 v-text与v-html

2.3 v-bind

        插值语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind指令

2.4 v-model

2.5 v-for

2.5.2 操作对象

2.5.2 操作对象数组

2.6 v-if与v-show

        v-if是根据表达式的值来决定是否渲染元素 

        v-show是根据表达式的值来切换元素的display css属性