前端MVC与Vue.js详解-优快云博客

本文链接：https://blog.youkuaiyun.com/yjwnm/article/details/102641268

MV*模式
- mvc引入的原因
- MVC
- MVP
- MVVM
Vue的学习
- Vue如何使用
- 初始Vue
- Vue的学习目标
- Vue源代码的了解
  - 好处
  - 前端模块化
Vue的使用小案例
- 使用的一些介绍
Vue的模板引擎–mustache语法
- 对js语法的支持度
- 使用
指令的学习
- 由来
- 概念
- 属性标识
指令的分类
- 数据展示
- 条件渲染
- 条件展示
- 列表渲染
- 单项数据绑定
- 双向数据绑定

MV*模式

前端的MVC最初是从后端演变过来的
为什么引入mvc
- 为了项目的更好维护(最开始js都是在html文件中实现,导致一改全改)
- 减轻视图的压力(最初大部分任务都是靠视图来实现的)
- 为了更好的解决从服务器获取数据的困难
- 为了更好的解决用户在视图中输入的数据如何更好的后台进行交互
MVC(Model-View-Controller)
- 组成
  - 模型(Model)：数据保存
  - 视图(View):用户界面
  - 控制器(Controller):业务逻辑
- 通信(这里所有通信都是单向的)
  - View传送指令到Controller
  - Controller完成业务逻辑后,要求Model改变状态(保存数据)
  - Model将新的数据发送到View,用户得到反馈
- 互动模式(二选一)
  - 通过View接收指令–>Controller–>Model–>View
  - 通过Controller接收指令–>Model–>View
- 实例：Backbone
  - 用户可以向 View 发送指令（DOM 事件），再由 View 直接要求 Model 改变状态。
  - 用户也可以直接向 Controller 发送指令（改变 URL 触发 hashChange 事件），再由 Controller 发送给 View。
MVP
- 组成
- 是将Controller改成Presenter
- 通信方式：各部分通信都是双向的(这里p是中间人，是链接M 和 V 的桥梁，但是P在两者之间的关系是公平的)
  - View–>Presenter–>Model
  - Model–>Presenter–>View
- View和Model之间没有任何联系，依靠中间人Presenter来传递信息
- 所有的业务逻辑都在Presenter中完成
MVVM
- 组成
- 将Presenter改成ViewModel
 - 这里VM是视图模型，这里VM也是沟通M 和 V的桥梁，但是VM和V的关系更加的亲近
- 与MVP的区别
 - 双向绑定(View<–>ViewModel):一个改变就会影响另一个

Vue的学习

1. Vue如何使用

直接通过script标签对引入(在官网cn.vuejs.org下载)【基础时】
通过npm安装使用【高级时】

2. 初识Vue

当我们用script标签对引入Vue后,我们会获得一个全局变量Vue(是一个构造函数)

console.log(Vue)

  /*
     ƒ Vue(options) {
        if (!(this instanceof Vue)) {
            warn('Vue is a constructor and should be called with the `new` keyword');
        }
        this._init(options);
    }
  */

3.Vue的学习目标

    var vm = new Vue();
    console.log( vm );

vm有如下特点:
- vm身上有很多的属性和方法
- vm.__proto__身上也有很多的属性和方法
- 属性或方法前面加&或者_说明是私有的
我们学习的就是vm的属性和方法

4.Vue的源代码

思考：
引入Vue.js后，会得到一个全局变量 Vue，源代码是怎么实现的
猜想：
全局变量是如何定义的
- 函数外部写入var,但函数内并没有通过var定义相同的变量
- 直接绑定在window下面(正确的)

查看Vue源代码总结

使用的是自执行的匿名函数
格式

( function () {} ) ()

好处
- 避免了命名冲突
- 自执行
- 安全性高
源代码封装的大致原理

(function (global, factory) {//这里的global=window
    global.Fn = factory;
})(this, function (options) {
    function Vue(options) {
        this.name = options.name;
        this.age = options.age;
        this._init()
    }
    function _init() {
        Vue.prototype.score = 100
    }
    return Vue
})

var fn = new Fn({ //new Fn()其实就是factory()其实就是调用第二个实参函数，返回Vue函数
    name: 'zhangsan',
    age: 1
})
console.log(fn)

 /*
  ƒ Vue(options) {
        this.name = options.name;
        this.age = options.age;
        this._init()
        }
    }
*/

前端模块化
- AMD
  - 定义模块 define关键字
  - 模块引入 require
- CMD
  - 定义模块 define关键字
  - 模块引入 require
- Common.js
  - 导出 module.exports
  - 导出 require
Vue的实现方式

5.Vue的使用小案例

new Vue(options)产生的实例可以有多个
- options称为配置，是一个对象，里面有属性和方法

<body>
    <!-- 为什么叫app application的简写 即应用 -->
    <div id="app">
        <!-- 这里是vm的作用范围 -->
        <!-- 我们要在html中使用js代码，那么就需要模板引擎，我们这里采用的模板引擎是mustache -->
        <!--这里的this不能写成vm，因为变量是在下面定义的，在前面访问会出错-->
       <p> {{ this._data.name }} </p>
       <p> {{ this.$data.age }} </p>
       <p> {{ this.name }} </p>
       <p> {{ age }} </p>
    </div>
</body>

<script src="../lib/vue.js"></script>
<script>
    var vm = new Vue({
        el:'#app',//官方称为‘挂载’，element的简写，element简写，它的作用是选取一个已有的DOM作为Vue实例的作用范围
        data:{//data选项中定义的数据相当于全局变量，在app模板中相当于全局变量，可以直接使用
            name:'zhangsan',
            age:100
        }
    })
</script>

6.Vue的模板引擎–mustache语法

研究对js的支持度
- 研究它对数据类型的支持度
 - 数据类型分类
 - 基本数据类型：string number boolean null undefined
 - 引用类型：Object Array Function Date
 - 结果：除了null和undefined不会显示，其他的都可以正常显示
- 研究它对js语法的支持度
 - 主要研究的语法
 - 流程控制(mustache中不写流程控制)
 - 条件判断
 - 循环
 - 三目运算符(支持)
```
 {{ null? 3 : 4 }} //4
```
 - 短路原则(支持)
```
 {{ null && 5 || 6 }} //6
```
 - 挂载在window身上的全局属性，我们都不能用的: 例如console alert
mustache的用法
- 内容：必须加{{}}
- 属性：不用加{{}},但必须依靠指令

7.指令的学习

Vue中指令的由来
- 借鉴angular中的指令概念
指令的概念
- 指令就是封装的函数，元素绑定上函数，我们就获得了元素，就可以进行DOM操作了
属性标识
- 属性是可以随意定义的，但是为了突出是Vue的自定义属性，所以需要添加Vue标识—就是v-

8.指令的分类展示

数据展示

new Vue ({
    el:'#app',
    data:{
        info:'hhh',
        xml:'<span>我是span中的xml类型数据</span>'
    }
})

直接使用双括号

<!--刷新页面时，会有短暂的{{}}显示，这主要是因为数据在下面的代码块中，我们的js执行是有执行顺序的，刚开始刷新页面时，先执行<p> {{ info }} </p>这句代码，再执行  data:{info:'hhh'}这句代码-->
<p> {{ info }} </p>

使用指令 v-html
- 概念：转义输出,可以解析标签，解析xml类型的数据

<p v-html = "xml">我是v-html指令，我能解析标签</p>

使用指令 v-text
- 更新文本内容，非转义输出

<p v-text = "info">我是v-text指令</p>
<p v-text = "xml">我是v-text指令，我不能解析标签，只能显示文本内容</p>

{{}}和v-text的区别
- 在页面刷新时{{}}会有短暂的{{}}显示，而v-text直接显示里面的内容
{{}}、v-text和v-html的区别
- v-html可以解析标签，而其他两者不可以解析标签

条件渲染

data:{
        single_branch:true,
        double_branch:false,
        more_branch:true
    }

单分支

<h4>单分支</h4>
    <p v-if = "single_branch">one</p>

双分支

<h4>双分支</h4>
    <p v-if = "double_branch">one</p>
    <p v-else>two</p>

多分支

<h4>多分支</h4>
    <p v-if = "single_branch">one</p>
    <p v-else-if = "double_branch">two</p>
    <p v-else>three</p>

条件展示
```
data:{
 show:true
 }
```
- 使用指令 v-show(肯定会渲染标签)
```

 我是show条件展示的数据 
```
- v-if和v-show的区别
 - v-if控制的是元素的存在与否(false时不显示，也不会渲染标签);v-show控制的元素的display属性(false时display:none，必会渲染标签)
- 初始值为false时谁的损耗大呢
 - v-show的损耗大，因为false时v-if并不会渲染，而v-show会渲染
- 那么在项目中怎么使用呢
 - 切换不频繁的话使用v-if
 - 切换频繁的话使用v-show

列表渲染(in/of)

data:{
    arr:[1,2,3,4],
        obj:{
            name:'zhangsan',
            age:1,
            score:100
        },
        jsonData:[
            {name:'lisi'},
            {name:'wangwu'},
            {name:'xxx'}
        ],
        moreData:[
            {
                id:1,
                subList:[
                    { score:1 },
                    { score:2 }
                ]
            },
            {
                id:2,
                subList:[
                    { score:3 },
                    { score:4 }
                ]
            },
            {
                id:3,
                subList:[
                    { score:5 },
                    { score:6 }
                ]
            }
        ]
}

一维数组渲染

<!--数组项(item) 索引(index)-->
<h4>一维数组渲染</h4>
    <ul>
        <!--顺序必须是：item,index-->
        <li v-for = "(item,index) in arr">
            <!--这样的代码是无效的 {{ item[0] }}-->
            <p> item:{{ item }} </p>
            <p> index:{{ index }} </p>
        </li>
    </ul>

对象渲染
item,key,index必须是这样的顺序

<!--索引(index) 键(key) 值(item)-->
<h4>对象渲染</h4>
    <ul>
        <!--顺序必须是item,key,index-->
        <li v-for = "(item,key,index) in obj">
            <!--这里的顺序无所谓
            <!--这样的代码是无效的 {{ item.name }}-->
            <p> index:{{ index }} </p>
            <p> key:{{ key }} </p>
            <p> item:{{ item }} </p>
        </li>
    </ul>

json数据渲染

 <h4>json数据渲染</h4>
    <!-- 只有值 -->
    <ul>
        <li v-for = "item in jsonData">
            <p> item:{{ item.name }} </p>
        </li>
    </ul>

json两层数据嵌套渲染

    <h4>json两层数据嵌套渲染</h4>
    <ul>
         <li v-for = "item in moreData">
            <!-- item为最外层数组的每一个数组项(是一个对象) -->
            <h4> id:{{ item.id }} </h4>
                <ul>
                    <!-- value为里层数组的每一个数组项(也是一个对象) -->
                    <li v-for = "value in item.subList">
                        <p> score:{{ value.score }} </p>
                    </li>
                </ul>
        </li>
    </ul>

普通数字数据渲染

<h4>普通数字数据渲染</h4>
    <ul>
        <!-- num为1-10的数字 -->
        <li v-for = "num of 10">
            <p> {{ num }} </p>
        </li>
    </ul>

普通字符串数据渲染

  <h4>字符串 info</h4>
    <ul>
        <!-- str为字符串中每一个字符 -->
        <li v-for = "str of info">
            <p> {{ str }} </p>
        </li>
    </ul>

单项数据绑定

data:{
    imgs:'https://ftp.bmp.ovh/imgs/2019/09/0dcaa328806c6bf5.jpg'
}
        <h4> 单项数据绑定 </h4>
        <!-- v-bind的作用：将一个数据赋值给已有属性(像a标签的href、img的src属性) -->
        <img v-bind:src="imgs" alt="">
        <!-- 简写 -->
        <img :src="imgs" alt="">

表单空间绑定(v-model)

双向数据绑定
- VM改变，V也改变
- V改变，VM也改变

data:{
    info:'hhh'
}

        <h4>双向数据绑定</h4>
        <!-- 双向数据绑定是有一方数据改变就会引起另一方数据改变 -->
        <!-- v-model只能作用在表单元素上(form:表单标签；input、checkbox表单元素--即在form标签内的) -->
        <input type="text" v-model = "info">