Vuejs第一篇（邂逅Vuejs）_hellovuejs的初体验-CSDN博客

本文链接：https://blog.csdn.net/m0_57249797/article/details/120378567

一、内容概述：

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

Vuejs安装方式

CDN引入
下载和引入
NPM安装管理

Vuejs初体验

Hello Vuejs
Vue列表展示
案例：计数器

Vuejs的MVVM

Vue中的MVVM

二、Vuejs的安装方式(了解)

使用一个框架，我们第一步要做什么呢？下载安装它
安装Vue的方式很多
方式一： 直接CDN引入
你可以选择引入开发环境版本还是生产环境版本

<!--开发环境版本，包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue,js"></script>
<!--生产环境版本，优化了尺寸和速度-->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二： 下载和引入（右键，链接另存为）
开发环境：https://vuejs.org/js/vue.js
生产环境：https://vuejs.org/js/vue.min.js
方式三： NPM安装
后续我们再通过webpack和CLI的使用，我们用该方式

初学方式二：开发环境下载
在这里插入图片描述

三、HelloVuejs的初体验（掌握）

我们来做我们的第一个Vue程序，体验一下Vue的响应式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h1>{{message}}</h1>
    <h2>{{name}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
    //let(变量)/const(常量)var没有变量的作用域等等缺陷不再使用
    //编程范式:声明式编程（JavaScript是命令式编程）
    const vue = new Vue({
       el:'#app',//挂载要管理的元素
       data:{//定义数据
           message:'hello Vue!',
           name:'hello word!'
       }
    });
</script>
</body>
</html>

结果：
在这里插入图片描述
特点：（很方便的修改数据（数据是异步更新的））（响应式的体验）

代码做了什么事情？
我们首先创建了一个Vue的实例

{}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显我们这里是挂载到了id为app的元素上
{}中包含了data属性：该属性中通常会存储一些数据
- 这些数据可以是我们直接定义出来的，比如像上面一样
- 也可能来自网络，从服务器加载的

四、Vue列表的展示（掌握）

现在，我们来展示一个更加复杂的数据：数据列表

比如我们现在从服务器请求过来一个列表
希望展示到HTML中

HTML代码中，使用v-for指令

该指令后续会详解，这里先学会使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <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:{
            message:'你好',
            movies:['星际穿越','大话西游','少年派','盗梦空间']
        }
    })

</script>

</body>
</html>

在这里插入图片描述
也可以异步（响应式）的往数组里添加元素：

五、小案例-计数器（掌握）

解锁新的属性methods，v-on，@的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h2>当前计数:{{counter}}</h2>
<!--    <button v-on:click="counter++">+</button>-->
<!--    <button v-on:click="counter&#45;&#45;">-</button>-->
    <button v-on:click="add">+</button>
    <button @click="sub">-</button><!--@click是v-on:click的简写（语法糖）-->
</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++;
        },
        sub:function () {
            console.log("sub被执行了")
            this.counter--;
        }
      }
    })

</script>

</body>
</html>

结果：
在这里插入图片描述

六、Vue中的MVVM模式（理解）

什么是MVVM呢？【Model +ViewModel +View】
通常我们学习一个概念，最好的方式就是去看维基百科（对，千万别看成了百度百科）
https://zh.wikipedia.org/wiki/MVVM（外网）
维基百科的官方解释，我们这里不再赘述
我来赘述：
MVVM（Model-View-ViewModel） (维基百科搜索)
在这里插入图片描述

我们直接来看Vue的MVVM
请添加图片描述

七、Vue的options选项（理解）

你会发现，我们在创建Vue实例的时候，传入了一个对象options
这个options中可以包含哪些选项呢？
目前掌握这些选项：

el:
- 类型：string| HTMLElement
- 作用：决定之后Vue实例会管理哪一个DOM
data：
- 类型：Object| Function（组件当中data必须是一个函数）
- 作用：Vue实例对应的数据对象
methods:
- 类型：{[key：String]:Function}
- 作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用

八、Vue的生命周期（理解）

生命周期：事物从诞生到消亡的整个过程
在这里插入图片描述
测试一下：

<section id="app-8">
    {{data}}
</section>

<script src="../js/vue.js"></script>
<script>
const myVue=new Vue({
        el:"#app-8",
        data:{
            data:"aaaaa",
            info:"nono"
        },
        beforeCreate:function(){
            console.log("创建前========")
            console.log(this.data)
            console.log(this.$el)
        },
        created:function(){
            console.log("已创建========")
            console.log(this.info)
            console.log(this.$el)
        },
        beforeMount:function(){
            console.log("mount之前========")
            console.log(this.info)
            console.log(this.$el)
        },
        mounted:function(){
            console.log("mounted========")
            console.log(this.info)
            console.log(this.$el)
        },
        beforeUpdate:function(){
            console.log("更新前========");

        },
        updated:function(){
            console.log("更新完成========");
        },
        beforeDestroy:function(){
            console.log("销毁前========")
            console.log(this.info)
            console.log(this.$el)
        },
        destroyed:function(){
            console.log("已销毁========")
            console.log(this.info)
            console.log(this.$el)
        }
    })
 </script>