Vue.js-初体验

原创

浅语、 2022-06-21 16:56:14 ©著作权

文章标签 vue.js 数据 html 文章分类 Vue.js 前端开发

©著作权归作者所有：来自51CTO博客作者浅语、的原创作品，请联系作者获取转载授权，否则将追究法律责任

1- Vue.js 介绍

1.1 Vue.js是什么?

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

官方网站: https://cn.vuejs.org/

1.2 为什么使用Vue.js

Vue是一个渐进式的框架，将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。

解耦视图和数据，可复用的组件。

2- Vue.js 初体验

2.1 安装Vue的方式

方式一：直接CDN引入

1、在html页面使用script引入vue.js的库即可使用。

远程CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
本地
<script src="vue.min.js"></script>

方式二：NPM安装

Vue-CLI脚手架:使用vue.js官方提供的CLI脚本架创建vue.js工程.

2.2 入门程序

创建一个01-Vuejs初始化目录, 并且在目录下创建 01_vue入门程序.html 文件.

流程步骤

1、定义html，引入vue.js
2、定义app div，此区域作为vue的接管区域
3、定义Vue实例，接管app区域。
4、定义model（数据对象）
5、在app中展示数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vue.js</title>
</head>
<body>
    <!--2.定义一个div元素-->
    <div id="app">
        <h1>{{message}}</h1>
        <h3>{{name}}</h3>
    </div>

    <script src="js/vue.js"></script>
    <script type="text/javascript">
        // 1.创建test实例
        const test = new Vue({
            // 3.挂载要管理的元素
            el: '#app',
            // 4定义数据
            data: {
                message: 'Hello Vue.js',
                name: 'guardWhy'
            }
        })
    </script>
</body>
</html>

执行结果
Vue.js-初体验_数据

入门程序分析

Vue.js-初体验_vue.js_02

2.3 数据列表展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据列表展示</title>
</head>
<body>
    <div id="test">
        <ul>
            <!--遍历操作-->
            <li v-for="item in starts">{{item}}</li>
        </ul>
    </div>
    <!--引入vue.js文件-->
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        // 创建对象
        const test = new Vue({
            el: '#test',
            data : {
                message: '你好啊',
                starts: ['kobe', 'LeBron James', 'Stephen Curry']
            }
        })
    </script>
</body>
</html>

执行结果
Vue.js-初体验_vue.js_03

2.4 什么是MVVM？

Vue.js-初体验_html_04

MVVM（Model–View–Viewmodel）是一种软件架构模式。MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑（数据模型）的开发分离开来，这是通过置标语言或GUI代码实现的。MVVM的视图模型是一个值转换器，这意味着视图模型负责从模型中暴露（转换）数据对象，以便轻松管理和呈现对象。在这方面，视图模型比视图做得更多，并且处理大部分视图的显示逻辑。视图模型可以实现中介者模式，组织对视图所支持的用例集的后端逻辑的访问。

View层(视图层)

在前端开发中，通常就是DOM层。主要的作用是给用户展示各种信息。

Model层(数据层)

数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。

VueModel层(视图模型层)

视图模型层是View和Model沟通的桥梁。一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中。
另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模拟计数器</title>
    <style>
        /*
         MVM:前端的架构模式
         M: Model 负责存储数据
         V: View 负责页面展示
         VM: ViewModel 负责业务处理(MVM模式的核心)
        */
    </style>
</head>
<body>
    <div id="app">
        <!-- View视图部分!!-->
        <h3>当前计数:{{counter}}</h3>

        <!--监听元素的点击事件-->
        <button v-on:click="add">+</button>
        <button v-on:click="sub">-</button>
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        // 创建的Vue实例,就是VM ViewModel
        const app = new Vue({
            el: '#app',
            // data就是MVM模式中的 model
            data: {
                // 定义当前计数为0
                counter: 0
            },
            // 定义方法
            methods: {
                add: function () {
                    console.log('add被指行');
                    this.counter++
                },
                sub: function () {
                    console.log('sub被执行了..');
                    this.counter--
                }
            }

        })
    </script>
</body>
</html>