Vue基础

2021-06-21 本文已影响0人幽月星辰

理解库和框架

一、什么是库

把一些常用的功能封装成一个个函数或对象，并放到一个js里，目的是为简化原生js的操作，它是一个封装好的集合

比如Jquery，它就是一个库

在Jquery 出现之前，我们用原生js操作Dom非常的麻烦，有了Jquery，它帮我们做了很多事，我们操作Dom则变得好多了，它就称之为库，它解决了开发中的一部分问题

小而美

二、什么是框架

一套架构，提供一套整体解决方案，它能够完全搞定整个项目开发，并且很轻松就能解决复杂的问题。比较大，功能比较全

比如：Vue，augular，react

大而全

MVC 与MVVM

一、MVC

M-Model 模型（数据）

V-View 视图（结构）

C-Controller 控制器

二、MVVM

M-Model 模型（数据）

V-View 视图（结构）

VM-ViewModel 控制

认识Vue.js

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

渐进式框架

就是由浅入深，由简单到复杂

1、体积小

压缩后 33k

2、更高的运行效率

基于虚拟dom，一种可以预先通过JavaScript进行各种计算，把最终的Dom操作计算出来并优化的技术，由于这个Dom操作属于预处理操作，并没有真实的操作Dom，所以叫做虚拟Dom。

3、双向数据绑定

让开发者不用再去操作dom对象，把更多的精力投入到业务逻辑上

官网地址：https://cn.vuejs.org/

vue2文档：https://cn.vuejs.org/v2/guide/

Vue cdn:

开发版：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

生产环境：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

下载Vue.js：

开发版本： (在浏览器打开即可自动下载)

https://cn.vuejs.org/js/vue.js

生产版本： (在浏览器打开即可自动下载)

https://cn.vuejs.org/js/vue.min.js

去项目中引入Vue吧

Helle,word，可以执行执行的！去试一试吧！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
    </div>

    <script type="text/javascript">
        var vm=new Vue({
           el:"#app",
           data:{
               message:"你好，hello word"
           }
        });

        //加上前缀$,获取Vue数据属性，以便于与用户定义的属性区分开来
        vm.$data.message="你好啊";

        //观察一个变量的变化，获取变化之前和变化之后的值
        //第一个值，要观察的值
        vm.$watch('message',function(newValue,oldValue){
            //这个回调将在 vm.message 改变后调用
            console.log("新的值是："+newValue);
            console.log("old的值是："+oldValue);
        });

        vm.$data.message="Hello word";

    </script>
</body>
</html>