The road to the Vue（一）

最新推荐文章于 2023-02-26 10:07:50 发布

CSNZのBlog

最新推荐文章于 2023-02-26 10:07:50 发布

阅读量216

点赞数

分类专栏：前端专栏文章标签： vue

本文链接：https://blog.csdn.net/csnz123123/article/details/118411343

版权

前端专栏专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Vue.js是一个渐进式框架，专注于视图层，易于上手且可与第三方库整合。MVVM模式是其核心，解耦视图和模型，实现双向数据绑定。本文通过一个简单的demo展示了Vue.js的DOM监听和数据绑定功能，并介绍了组件定义及使用，强调了组件名称不能包含大写字母的注意事项。

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

官网：https://v3.cn.vuejs.org/

一： Vue.js 是什么

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

二： MVVM模式

在玩Vue前先了解什么是MVVM模式

MVVM源自经典的MVC模式,MVVM的核心是ViewModel层，负责转换Model中的数据对象来让数据变得更容易管理和使用,其作用如下：

该层向上与视图层进行双向数据绑定

向下与Model层通过接口请求进行数据交互

为什么要使用MVVM

MVVM模式和MVC模式一样，主要目的是分离视图(View) 和模型 (Model) , 好处如下：

低耦合：视图可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化时Model可以不变，当Model变化时 View 也可以不变。

可复用：你可以把一些视图逻辑放在一个ViewModel里面，让很多View重用这段视图逻辑。

独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel）,设计人员可以专注于页面设计。

可测试：界面向来是比较难测试的，而现在测试可以针对ViewModel来写。

View层展现的不是Model层的数据，而是ViewModel的数据，由ViewModel负责与Model层交互，这就完全解耦了View层和Model层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

在这里插入图片描述

至此，我们就知道了，Vue.js 就是一个MVVM 的实现者，他的核心就是实现了DOM监听和数据绑定。

三：新建一个demo耍一耍

我用的是IDEA 其他的也可以
在这里插入图片描述

开始码代码…

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--视图层 View-->
<div id="app">
    {{ message }}
</div>

<!--1：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
    var vm = new Vue({
        el:"#app",
        //Model层，数据
        data:{
            message:" I am CSNZ"
        }
    });
</script>
</body>
</html>

现在数据和 DOM 已经被建立了关联，所有东西都是响应式的

在这里插入图片描述

注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部

Vue具体的循环判断练习可根据官方文档学习

https://cn.vuejs.org/v2/guide/#%E6%9D%A1%E4%BB%B6%E4%B8%8E%E5%BE%AA%E7%8E%AF

小tips

组件定义及使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--视图层 View-->
<!--组件-->
<div id="app">
    <csnz v-for="item in items" v-bind:param="item"></csnz>
</div>


<!--1：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

<script>
    //    组件定义 定义一个Vue组件component
    Vue.component("csnz",{
        props:['param'],
        template:'<li>{{param}}</li>'
    });

    var vm = new Vue({
        el:"#app",
        data:{
            items:["Java","C","Go"]
        }
    });


</script>
</body>
</html>