Vue文档

一. vue简介

1. 传统前端开发模式（MVP）
   MVP 全称：Model-View-Presenter ；MVP 是从经典的模式MVC演变而来

• Model：模型层，负责提供数据
• View：视图层，负责显示。
• Controller/Presenter：控制器，负责逻辑的处理

MVP模式.png

2. Vue 的MVVM模式
   MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。
   MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。

   
   
   MVVM模式.png

二. Vue 简单了解

• 组件创建
  通过new Vue({})接管元素，进行Vue处理。
  通过Vue.component({})创建组件
• 简单的组件间传值和函数处理。
  父组件向子组件传值，通过v-bind传值
  子组件接受父组件的传值，通过props接受
  通过methods进行事件处理。

v-model //数据的双向绑定

v-on //处理用户输入

v-for //条件与循环
v-if //条件与循环

v-bind //声明式渲染

三. Vue的生命周期函数

1. 生命周期函数，就是vue实例在某一个时间点会自动执行的函数。
2. vue 的模板语法

v-text  //和{{}}一样
v-html //不会转义 
等标签

四. vue基础语法

1. 模板语法

插值

• 文本
  数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
  Message: {{ msg }}
v-once //执行一次性的插值
• 原始HTML
  v-html //绝不要对用户提供的内容使用插值，容易导致XSS攻击

指令

指令 (Directives) 是带有 v- 前缀的特殊特性。

• 参数
  一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

v-bind
v-on

• 动态参数
• 缩写

v-bind:herf="url" //缩写 :href="url"
v-on:click="doSomething" //缩写 :@click="doSomething"

2. 计算属性和侦听器

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。
所以，对于任何复杂逻辑，你都应当使用计算属性。

• 计算属性缓存vs方法
  计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
• 计算属性vs侦听属性
  Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。
• 计算属性的setter
  计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

3. Class与Style绑定

绑定HTML Class

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

• 对象语法
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
• 数组语法
  
• 用在组件上
  当在一个自定义组件上使用 class 属性时，这些类将被添加到该组件的根元素上面。这个元素上已经存在的类不会被覆盖。

绑定内联样式

• 对象语法
  v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
• 数组语法
• 自动添加前缀
• 多重值

4. 条件渲染

v-if

v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

• 在