01-Vue的入门、生命周期

最新推荐文章于 2023-09-18 10:06:26 发布

吉吉冕下

最新推荐文章于 2023-09-18 10:06:26 发布

阅读量111

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/ilove_story/article/details/108800376

版权

1、概述

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

2、安装

Vue有三种方式进行安装：

使用

3、入门

新建一个html文件，编写以下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="app">{{message}}</div>
    <script>
        //let(变量)、const(常量)
        const app=new Vue({
            el:'#app',//挂载要管理的元素
            data:{//数据定义
                message:'abc'
            }
        })
    </script>
</body>
</html>

运行发现，页面会显示出：abc，

new Vue()用于创建一个Vue实例，el和data是该实例地属性
el是element元素的缩写，可以看作是元素选择器，用于挂载要管理的元素，这里挂载的是id为app的div
data用于数据定义，定义格式：数据名:内容，我们可以在被挂载的元素中使用{{}}进行引用，内容就会被填充到该元素中

列表显示

如果我们在data里面定义了一个数组，我们该如何将其填充到元素中去呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                movies:[
                    '武庚纪',
                    '斗罗大陆',
                    '星辰变'
                ]
            }
        })
    </script>
</body>
</html>

定义数组需要使用[]进行包裹，数组元素之间使用,进行分隔
v-for是一个用于遍历数组的指令，内部格式为：要迭代的数组元素 in 数组名，我们可以使用{{}}将被迭代的数组元素填充到html标签内

计数器小案例

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        当前计数：{{counter}}
<!--        <button v-on:click="counter++">+</button>-->
<!--        <button v-on:click="counter&#45;&#45;">-</button>-->
<!--        <button v-on:click="add">+</button>-->
<!--        <button v-on:click="sub">-</button>-->
        <button @click="add">+</button>
        <button @click="sub">-</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                counter:0
            },
            methods:{
                add:function () {
                    console.log("add被执行");
                    this.counter++;//将当前对象的counter的值加一
                },
                sub:function () {
                    console.log("sub被执行");
                    this.counter--;//将当前对象的counter的值减一
                }
            }
        })
    </script>
</body>
</html>

methods也是Vue的属性之一，用于定义一个或多个方法，方法定义格式：方法名:function(){}。
v-on是一个用于监听DOM事件的指令，DOM事件分很多，比如点击事件，鼠标悬浮事件，鼠标移入等，我们可以在v-on后通过:事件类型来指定

要监听的DOM事件，比如上面的v-on:click用于监听点击事件。
在v-on里面，我们可以直接写一个js表达式，也可以是一个方法名
v-on:可以简写为@

4、MVVM

概述

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

在我们的入门案例中，view是我们的html页面，model就是我们的data，ViewModel对应我们的Vue实例。可以发现，Vue实例会帮我们将数据

填充到html页面元素，并且帮我们处理业务逻辑。

5、生命周期

所谓生命周期，便是一个事物从创建到销毁的过程。每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

在上面的概述中，我们知道，Vue实例的生命周期中会运行一些钩子函数，其实就是一些回调函数，它会在Vue实例处于某个状态时自动触发，我们可以利用这些钩子函数进行一些“小动作”，比如在创建实例前beforeCreate或创建后created

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app"></div>
    <script src="../js/vue.js"></script>
    <script>
        const app=new Vue({
            el:"#app",
            data:{},
            beforeCreate:function(){
                console.log("创建前");
            },
            created:function () {
                console.log("创建后");
            }
        })
    </script>
</body>
</html>