Vue入门

最新推荐文章于 2023-04-02 11:15:07 发布

禁止喧哗

最新推荐文章于 2023-04-02 11:15:07 发布

阅读量90

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_41555595/article/details/104958671

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue入门

1.简介

什么是Vue

Vue是一套用于构建用户界面的渐进式 （将vue作为项目的一部分嵌套进去，例如重构jQuery的项目，可以没重构保留原有的jQuery，重构用Vue，可以一点点的引用进去）框架。
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue的优点

解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟DOM

2.Vue的安装方式

方式一：下载与引用
Vue开发版本
 Vue生产版本
也可以到官网下载
加粗样式 **

方式二：直接CDN引入
你可以选择引入开发环境版本还是生产环境版本

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

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

方式三：NPM安装

3.Vue 声明式渲染HelloWorld

思路：
1.引入vue
2.定义一个div
3.创建一个Vue对象
4.将div交给Vue管理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
    <!--1.引入vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!--2.定义一个div-->
    <div id="app">{{msg}}</div>
    <script>

        // 3.创建一个Vue对象
        //在用vue 之前呢我们要创建一个Vue的对象,在我们引入的js中已经定义过来vue这个对象
        //要注意这里的V要大写
        var app = new Vue({
            // 4.将div交给Vue管理
            //这里指的时管理哪一个元素, el即element,像在这里就是管理上面的id=app的div
            el: '#app',
            //定义数据
            data: {
                msg: 'Hello Vue!!!'
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
上面的HelloWorld展示了Vue的声明式渲染：一上面为例，当div交给Vue的时候，我们要对div进行扫描操作都可以在vue只能声明即可，做到了数据与界面分离。

4.响应式渲染

在这里插入图片描述
一开始我们访问的网页是这样的

5.城市列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Location</title>
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
    <div id="app">
        <ol>
            <li v-for="item in locations">{{item}}</li>
        </ol>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                locations: ['北京', '上海', '广州', '深圳']
            }
        });
    </script>
</body>
</html>

在这里插入图片描述

6.点击按钮刷新当前时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Now Time</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>当前时间: {{nowTime}}</h1>
        <!--这里的v-on:click之间不要空开,不然事件监听会失效-->
        <!--v-on:用于绑定事件-->
        <button v-on:click="refeshTime">刷新当前时间</button>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                //值得注意的是在data里面起名字的时候不要起Vue的关键，不然响应式渲染会失败，如：date, dateTime
                nowTime: Date.now().toString()
            },
            //用于定义定义方法
            methods: {
                refeshTime: function () {
                    var that = this;
                    that.nowTime = Date.now().toString();
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
小结：data里面其属性名称不要起Vue的关键子，不然响应式渲染会失败，如date, dateTime.同样方法名也一样，如delete

7.Vue中的MVVM

MVVM是Model-View-ViewModel的简写。

它本质上就是MVC 的改进版。MVVM 就是将其中的View 的
状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当
然这些事 ViewModel 已经帮我们做了，它可以取出 
Model 的数据同时帮忙处理 View 中由于需要展示内容而
涉及的业务逻辑。

这其实最直白的定义就是
Model（数据层）-View（视图层）-ViewModel（数据视图层），是一种双向数据绑定的响应式框架。
作用：
修改View，Model数据对应数据发生变化；Model数据发生变化，不需要修改DOM，直接更新DOM。
在这里插入图片描述

优点：

MVVM模式和MVC模式一样，主要目的是分离视图（View）和
模型（Model），有几大优点
1. 低耦合。视图（View）可以独立于Model变化和修改，
一个ViewModel可以绑定到不同的"View"上，当View变化
的时候Model可以不变，当Model变化的时候View也可以不
变。
2. 可重用性。你可以把一些视图逻辑放在一个ViewModel
里面，让很多view重用这段视图逻辑。
3. 独立开发。开发人员可以专注于业务逻辑和数据的开发		 
（ViewModel），设计人员可以专注于页面设计，使用
Expression Blend可以很容易设计界面并生成xml代码。
4. 可测试。界面素来是比较难于测试的，而现在测试可以
针对ViewModel来写。

8.Vue中的Options

直接到官网查api很详细

9.Vue的生命周期

在这里插入图片描述
接下来我们通过源码去深度了解Vue

1.到github下载Vue的源码

在这里插入图片描述

2.打开Vue实例的初始化

在这里插入图片描述
由上图可见就和官方的生命周期图一致了，
1.先初始化生命周期和事件
2.然后在初始化beforeCreated
4.再然后就是注入和初始化Vue对象
5.初始化Created
6.只会就要怎么在挂载el了，在挂载前就要先beforeMounted生命周期
7.然后再挂载el
8.Mounted生命周期，挂载完之后就会渲染页面
9.只要data的数据发生改变的时候，会触发beforeUpdate
10.Vue开始进行Dom重新渲染
11.触发Updated
12.当Vue销毁前会触发beforeDestory
13.销毁Vue
14.触发Destoryed

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VueLifeCycle</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="app">{{msg}}</div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                msg: 'data'
            },
            beforeCreate: function () {
                console.log('beforeCreate, vue对象还没有创建号,还没有挂载div');
            },
            created: function () {
                //Vue对象已经创建好了,也已经挂载了div
                console.log('在created这里做网络请求');
            },
            beforeMount: function () {
                console.log('beforeMounted');
            },
            mounted: function () {
                console.log('mounted');
            },
            beforeUpdate: function () {
                console.log('beforeUpdated');
            },
            updated: function () {
                console.log('updated');
            },
            beforeDestory: function () {
                console.log('beforeDestory');
            },
            destoryed: function () {
                console.log('destoryed');
            }
        })
    </script>
</body>
</html>