Vue

Vue基本概念

Vue基本概念

vue介绍

库和框架的概念

框架和库的区别

Library

库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能

  • 代表：jQuery
  • 使用库的时候，把库当成工具使用，需要自己控制代码的执行逻辑。比如原生和jQuery可以混合使用，没有上下文联系

Framework

框架，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码

  • 框架规定了自己的编程方式，是一套完整的解决方案
  • 使用框架的时候，由框架控制一切，我们只需要按照规则把要求的代码放到空缺中

库和框架的区别

  • 使用库的时候，很自由，只要调用库提供的各种各样的方法就行，也可以不用其他的一些方法
  • 使用框架的时候，需要按照框架的规则写代码，限制会非常多，但同时框架的功能也很强大，可以极大的提升开发的效率。

MVVM的概念

参考资料：从Script到Code Blocks、Code Behind到MVC、MVP、MVVM

MVC

  • MVC是一种软件架构模式，也有人叫做设计模式
  • M: Model 数据模型（专门用来操作数据，数据的CRUD）
  • V：View 视图（对于前端来说，就是页面）
  • C：Controller 控制器（是视图和数据模型沟通的桥梁，用于处理业务逻辑）

MVVM

MVVM，一种更好的UI模式解决方案

  • M：model数据模型(ajax获取到的数据)
  • V：view视图（页面）
  • VM：ViewModel 视图模型

MVC vs MVVM

  • MVC模式，将应用程序划分为三大部分，实现了职责分离，需要自己实现controller的代码，需要操作DOM
  • MVVM通过数据双向绑定让数据自动地双向同步
    • V（修改视图） -> M（数据自动同步）
    • M（修改数据） -> V（视图自动徒步）

Vue中的MVVM

虽然没有完全遵循 MVVM 模型，Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例

注意：

1. 在vue中，不推荐直接手动操作DOM！

2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！

vue初体验

基本使用步骤

  • 安装：npm install vue
  • 引入：通过script标签引入vue，开发期间使用未压缩版vue.js
  • 通过new Vue()创建vue实例，并且指定el和data参数
  • 在页面中，通过双花括号访问数据
1
2
3
4
5
6
7
8
9
10
// 2. 创建vue实例，需要指定el和data属性
let vm = new Vue({
    // 指定vue监管的视图区域,只有id为app的div内部才会受vue的管理
    el: '#app',
    // 提供了vue中使用的数据
    data: {
        msg: 'hello vue'
    }
})

注意：el不能是html和body

插值表达式

插值表达式：也叫Mustache语法，小胡子语法，因为长得像胡子

  • 解释：使用双花括号（插值表达式）从data中获取数据，并展示在模板中
  • 注意：
    1. 不支持if、for等js语句；
    2. 不是data中的数据不能使用；
    3. 标签属性中不能使用插值表达式
  • 说明：数据对象的属性值发生了改变，插值处的内容都会更新
1
2
3
4
5
6
7
8
<!-- 支持三元运算符 -->
<h1>Hello, {{ msg }}.</h1>
<p>{{ isOk ? 'yes': 'no' }}</p> 
<p>{{ 1 + 2 }}</p>

<!-- 不支持if、for等js语句；不是data的数据不能使用；标签属性中不能使用{{}} -->
<h1 title="{{ if(){} }}"></h1>
<h1 title="{{ err }}"></h1>