Vue.js学习的第一天

全栈程序员站长

发布于 2022-07-25 11:15:00

7460

发布于 2022-07-25 11:15:00

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

Vue.js学习的第一天

官网文档地址：传送门

一、Vue介绍：

1.Vue.js是什么？

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

2.Vue的特点：

简单：在HTML，CSS，JavaScript基础上扩展。
易用：渐进式框架，逐层应用，有丰富的第三方库。
轻量：开发版大小约为300K，生产版大小约为30K。

3.Vue的功能：

解耦视图和数据
可重复的组件
数据绑定
功能插件化
虚拟DOM

4.相比于Angular.js、React.js、为何Vue.js要技高一筹？

Angular.jsGoogle公司推出，Java后端程序员开发，将java的MVC模式复刻到前端，在前端设计增加了模块发开发概念。
React.js：Facebook公式推出，提出了虚拟DOM概念，在内存中模拟DOM操作，提升了前端的渲染效率。
Vue.js：渐进式框架，综合了Angular.js的特点（模块化开发）和React（虚拟DOM）的优点。相对于Vue.js、Angular.js、React.js后两者学习成本较高。Vue.js基于MVVM设计模式，有着轻量级、数据绑定、响应式和组件化开发等特点。

二、MVC和MVVM设计模式：

1.MVC设计模式：

MVC设计模式基本思想就将项目层次分解为Model(模型层)、View(视图层)、Controller(控制层)。

Model层：主要负责数据处理和运算
View层：主要负责显示数据和用户交互
Controller层：主要负责业务接受数据并控制视图层的跳转

2.MVVM设计模式

MVVM设计模式由Model（模型）、View（视图）、ViewModel（视图模型）三部分组成。是MVC模式的进阶版。

MVVM设计模式和MVC模式一样，主要的目的是分离视图（View）和模型（Model），主要有以4个优点：

低耦合：View可以独立于Model的变化和修改，一个VIew Model可以绑定到不同的View上，当View变化时Model可以不变化，当Model变化时View也可以不用变化。
独立开发：开发人员更加专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于界面的设计。
可重复性：可以把一些视图逻辑放在一个ViewModel中，让更多的View重用这段视图逻辑。
可测试：现在测试人员可以针对ViewMdoel来写。

三、构建Vue开发环境

方式一：用CND的方式搭建Vue.js开发环境：

<! – 引入CDN开发版 –>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<! – 引入CDN生产版 –>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二：下载官网Vue.js文件，相对位置引入到项目中

<script src="../XXX/vue.js"></script>

方式三： node .js命令行搭建Vue

在项目文件夹下使用DOS命令

npm install vue

四、你好，Vue

我的第一个Vue项目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个Vue项目</title>
</head>
<body>
    <div class="app">  
        <!-- 动态传值写法 { 
   { 
   }} -->
        { 
   { 
   message}}
    </div>
    <!-- 引入CDN开发版 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({ 
   
            el: '.app', //选择要传值的标签 
            data: { 
   
                message: 'Hello Vue!'//给标签内传值
            }
        })
    </script>
</body>
</html>

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/127182.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年4月9，如有侵权请联系 cloudcommunity@tencent.com 删除

mvc