【Vue】Re01 理论概念和入门上手

一、Vue概述

什么是渐进式？
1、把Vue作应用的一部分嵌套项目中
2、如果完全抛弃其他组件和框架，Vue又具有丰富的生态和库莱支持
3、Core + Router + VueX 满足项目绝大多数的需求
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
特点和特性：
1、解耦视图与数据
2、可复用的组件
3、前端路由技术
4、状态管理
5、虚拟Dom
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Vue 安装
1、使用cdn引用
生产版本和开发版本的区别：
开发版本：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
保留代码格式，保留警告、打印、提示
所以文件大小较大
生产版本：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
格式压缩，移除所有的警告、打印、提示
文件大小被压缩到很小

2、下载到本地进行引用
开发：
https://vuejs.org/js/vue.js
生产：
https://vuejs.org/js/vue.min.js

3、使用NPM安装
通过webpack & CLI的使用进行安装
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
原始的JS开发：【编程范式：命令式编程】
1、创建一个div标签
2、设置该标签的id值为app
3、在js中定义message变量
4、把message变量放置在div标签中进行显示

Vue的开发：【编程范式：声明式编程】
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
方法和函数的区别
Method
Function
方法一般被实例所调用，声明定义在类中
函数不具有实例特性，直接声明直接调用

二、上手案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- 界面的部分只需要处理HTML标签，不需要更改Mustache模板 -->
<div id="app">
    <h3>{{message}}</h3>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el : '#app', // 绑定挂载的元素
        data : { // 定义和声明数据
            message : '哈哈哈哈' /* 在这里处理数据 实现页面和数据的解耦 */ /* 另外数据更新也不需要操作Dom实现，直接就能进行重新渲染 */
        }
    });
</script>

</body>
</html>

展示列表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h3>{{message}}</h3>
    <p>{{movies}}</p>
    <ul>
        <li v-for="movie in movies">{{movie}}</li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
        el : '#app',
        data : {
            message : 'sda',
            movies : [
                '大话西游',
                '星际穿越',
                '盗梦空间',
                '1911'
            ]
        }
    });
</script>

</body>
</html>

计数器案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!-- 列表显示 -->
<div id="vue-application">
    <h3>当前计数值 ： {{varCount}} </h3>
    <p>
        <button @click="increase">增加1</button>
        <button @click="decrease">减少1</button>
    </p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    let vueObj = new Vue({
        el : '#vue-application' ,
        data : {
            varCount : 0
        },
        methods : {
            increase() {
                // 对计数器的增加进行上限处理
                if (this.varCount === 10) {
                    alert('已达到上限'); return;
                }
                this.varCount ++
            },
            decrease() {
                // 对计数器的增加进行下限处理
                if (this.varCount === 0) {
                    alert('已达到下限'); return;
                }
                this.varCount --
            }
        }
    });
</script>

</body>
</html>

三、理解MVVM

MVVM = Model + View + ViewModel

Model层：
数据层
来自服务请求提供的数据

View层：
视图层
前端开发中Dom结构即视图的显现
主要用来给用户呈现数据处理后的信息

ViewModel层：
视图模型层
VM桥接了 View + Model，是两者沟通建立的桥梁
实现了Data-binding也就是数据绑定