Vue起步概念

柔情只为你懂 2021-10-01 07:24 347阅读 0赞

# Vue #

## Vue.js 优势 ##

1.  简洁：HTML 模板 + Vue 实例 + JSON 数据
2.  轻量：17kb，性能好
3.  设计思想：视图与数据分离，无需操作DOM
4.  社区：大量的中文资料和开源案例

## 小结 ##

**Vue.js 概念：Vue.js 是 MVVM 结构的前端框架**  
**Vue.js特点：简介、轻量、性能好、社区活跃**

# MVC 框架 #

## 1. 什么是框架 ##

**封装与业务无关的重复代码，形成框架**

## 2. 框架的优势 ##

**使用框架提升开发效率（虽然使用框架要遵循框架的语法但是使用框架可以大大提高对于业务逻辑的操作）**

## 3. MVC - 表示软件可分成三部分 ##

1.  模型（Model）
2.  视图（View）
3.  控制器（Controller）

## 4. 为什么要使用 MVC ##

1.  MVC 是一种专注业务逻辑，而非显示的设计思想
2.  MVC中没有DOM操作
3.  将数据独立出来，方便管理
4.  业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。

## Vue.js是一套构建用户界面的MVVM框架 ##

**MVVM分为三个部分：分别是M（Model，模型层 ），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器MVC的C层）**

1.  M：模型层，主要负责业务数据相关
2.  M：模型层，主要负责业务数据相关
3.  VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

### MVVM思想关系图 ###

![MVVM思想关系图][MVVM]

## MVP思想 ##

### 1. MVP的全称为Model-View-Presenter，Model提供数据，View负责显示，Presenter负责逻辑的处理 ###

### 2. MVP与MVC有着一个重大的区别：在MVP中View并不直接使用Model，它们之间的通信是通过Presenter来进行的.而在MVC中View会直接从Model中读取数据而不是通过Controller。 ###

## 小结 ##

1.  什么是框架：封装与业务逻辑无关的重复代码形成框架
2.  MVC 思想：一种将数据层和设计蹭分离的设计思想
3.  MVVM思想：意思就是当M层进行数据修改时，VM层会监测到数据的变化，通知V层进行相应的修改，反之相同
4.  MVP思想：MVP的全称为Model-View-Presenter，Model提供数据，View负责显示，Presenter负责逻辑的处理

## 声明式渲染与数据驱动 ##

### Vue声明式渲染 ###

1.  Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM，也就是将模板中的文本数据写进DOM中
2.  命令式渲染 ： 命令我们的程序去做什么，程序就会跟着你的命令去一步一步执行
3.  声明式渲染 ： 我们只需要告诉程序我们想要什么效果，其他的交给程序来做。

### Vue数据驱动 ###

**通过控制数据的变化来显示vue的数据驱动是视图的内容随着数据的改变而改变**  
![Vue数据驱动][Vue]

### Vue渲染方式 ###

**\{ \{\}\}–表达式**  
**将双大括号中的数据替换成对应属性值进行响应式的展示**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    
    <body>
        
        <div id="demodiv">
            <p>{
       {name}}</p>     
            <p>{
       {age}}</p>
            <p>{
       {age+num}}</p>
            <p>{
       {arr}}</p>
            <p>{
       {arr[4]}}</p>
            <p>{
       {obj.name}}</p>
            <p>{
       {bool?"你好":"你坏"}}</p>
        </div>
    </body>
    
    </html>
    
    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script>
        //创建视图模型VM层（实例化vue实例）---->把视图和模型关联起来
        new Vue({
            el:"#demodiv",//在视图模型中关联视图层
            data:{
                name:"王大锤",
                age:23,
                num:1,
                arr:[1,2,3,4,5,6,7],
                obj:{
                    name:"王小锤"
                },
                bool:false
            }
        })
        /* 
        总结：
        在传统的js中，如果想把一个数据放到页面中，必须通过DOM的方式进行操作
        但是在vue（MVVM）框架中，不需要任何的DOM操作，一切的数据绑定全部交给vue进行操作
        对于开发者来说，我们跟需要关注的是逻辑，而不是重复的DOM操作
        */
    </script>

## 模板语法基本用法 ##

### 模板语法中可以写入哪些内容 ###

1.  数字
2.  字符串
3.  计算  
    **mvc设计思想，是为了使页面和数据进行很好的分离；如果在表达式中写入过多的逻辑代码，那么违背了最初的设计思想；也就使代码看起来很复杂，难以维护**

## 表达式基本用法 ##

### 表达式中可以写入哪些内容 ###

1.  JSON数据
2.  数组

## 表达式基本用法 ##

### 注意 ###

**避免在双括号中使用复杂的表达式**

### 常见问题 ###

**如何区分插值中的内容是表达式还是普通文本？**  
*Vue.js 会通过是否带引号区分两者*

## 小结 ##