VUE初体验

_语义错误

已于 2022-07-09 13:56:53 修改

阅读量114

点赞数

分类专栏： VUE 文章标签：大数据

于 2022-07-08 22:20:54 首次发布

本文链接：https://blog.csdn.net/m0_66451927/article/details/125660586

版权

VUE 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了Vue.js的基础知识，包括Vue的渐进式特性、核心功能，如解耦视图和数据、可复用组件、前端路由、状态管理和虚拟DOM。通过CDN引入、下载安装或NPM安装等方式学习Vue。文章详细讲解了Vue实例的创建，如Hello Vuejs、Vue列表展示和计数器示例，进一步探讨了Vue的MVVM模式，解释了View、Model和ViewModel之间的关系。最后，简要概述了Vue的生命周期。

摘要由CSDN通过智能技术生成

一、认识VUE

官网：https://cn.vuejs.org/
学习vue需要具备一定的HTML、CSS、JavaScript基础。
Vue是一个渐进式的框架，那什么是渐进式呢？
- 渐进式意味着可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。
Vue有很多特点和Web开发中常见的高级功能
- 解耦视图和数据
- 可复用的组件
- 前端路由技术
- 状态管理
- 虚拟DOM
Vuejs安装方式

方式一：直接CDN引入
                引入开发环境版本还是生产环境版本
                
                <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
                
                <script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二：下载和引入（我们使用方式二，下载开发环境版本）
https://cn.vuejs.org/v2/guide/installation.html

方式三：NPM安装
后续通过webpack和CLI的使用，我们使用该方式。

二、Vuejs初体验

1、 Hello Vuejs

<body>

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

<div>{{message}}</div>

<script src="../js/vue.js"></script>
<script>
    // let(变量)/const(常量)
    // 编程范式: 声明式编程
    const app = new Vue({   //创建Vue实例，并且对原HTML进行解析和修改
        el: '#app', // 用于挂载要管理的元素
        data: { // 定义数据
            message: '你好啊,李银河!',
            name: 'coderwhy'
        }
    })

    // 元素js的做法(编程范式: 命令式编程)
    // 1.创建div元素,设置id属性

    // 2.定义一个变量叫message

    // 3.将message变量放在前面的div元素中显示

    // 4.修改message的数据: 今天天气不错!

    // 5.将修改后的数据再次替换到div元素
</script>

解释代码：

option：
- Mustache语法，new vue({})大括号内的东西，统称为options
- option是一个对象，是vue实例属性$options,可以调用vue的各个组件下的方法和数据
创建Vue对象，传入了一些options：{}
{}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上
{}中包含了data属性：该属性中通常会存储数据
这些数据可以是我们直接定义出来的，比如像上面这样。也可能是来自网络，从服务器加载的。

2、Vue列表展示

<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中。
HTML代码中，使用v-for指令，使得操作变得容易了，不需要在JavaScript代码中完成DOM的拼接相关操作了，而且更重要的是，它是响应式的（数组中的数据发生改变时，界面会自动改变）

让我们打开开发者模式的console，来试一下

3、计数器

<body>
    <div id="app">
        <h2>当前计数: {{counter}}</h2>
        <!-- 当执行的语句短的时候，直接用语句，但是一般使用函数 -->
        <!--<button v-on:click="counter++">+</button>-->
        <!--<button v-on:click="counter--;">-</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>
 /*  // 语法糖: 简写
    // proxy 代理
  const obj = {
        counter: 0,
        message: 'abc'
    }

    new Vue() */

    const app = new Vue({
        el: '#app',
        data: {
            counter:0
        },
        methods: {
            add: function () {
                console.log('add被执行');
                this.counter++
            },
            sub: function () {
                console.log('sub被执行');
                this.counter--
            }
        }
    })

    // 1.拿button元素

    // 2.添加监听事件
</script>
    
</body>

三、MVVM

学习一个概念，最好的方式是去看维基百科https://zh.wikipedia.org/wiki/MVVM(因为百度百科有一些词条可以购买)，根据我们查到的MVVM，下面再看看vue的MVVM

Vue的MVVM

View层（视图层）
- 在我们前端开发中，通常就是DOM层。主要的作用是给用户展示各种信息。
Model层（数据层）
- 数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
- 在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。
VueModel层（视图模型层）：
- 视图模型层是View和Model沟通的桥梁。
- 一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
- 另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

计数器的MVVM

View依然是我们的DOM
Model就是我们我们抽离出来的obj
ViewModel就是我们创建的Vue对象实例

它们之间如何工作呢？

首先ViewModel通过Data Binding让obj中的数据实时的在DOM中显示。
其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变obj中的数据。

总结：
1、创建Vue实例的时候，传入了一个对象options
2、options中可以包含哪些选项呢？
https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E6%95%B0%E6%8D%AE

el:

类型：string | HTMLElement
作用：决定之后Vue实例会管理哪一个DOM。

data:

类型：Object | Function （组件当中data必须是一个函数）
作用：Vue实例对应的数据对象。

methods:

类型：{ [key: string]: Function }
作用：定义属于Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

生命周期函数

3、V-for、v-on（@）

四、Vue的生命周期

我们可以下载个vue源码看看：https://github.com/vuejs/vue/releases/tag/v2.7.4

在路径：文件>src>core>instance>initi.ts里面：找到 hook钩子函数--callHook(vm, 'beforeCreate')如定时器里面还可以添加函数：

const app = new Vue({
        el: '#app',
        data: {
            counter:0
        },
        methods: {
            add: function () {
                console.log('add被执行');
                this.counter++
            },
            sub: function () {
                console.log('sub被执行');
                this.counter--
            }
        },
        beforeCreate: function () {

        },
        created: function () {
            console.log('created');
        },
        mounted: function () {
            console.log('mounted');
        }
    })

参考：

1.最全最新Vue、Vuejs教程，从入门到精通