Vue.js学习的第一天

Vue.js学习的第一天官网文档地址:传送门一、Vue介绍:1.Vue.js是什么?作者:2014年2月,尤雨溪曾就职于GoogleCreativeLabs和MeteorDevelopmentGroup。Vue(读音/vjuː/,类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vu..

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

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>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/127182.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • container_of宏定义作用_宏内核

    container_of宏定义作用_宏内核内核链表是怎么通过指针域来访问数据域的呢?

  • 在Linux安装Jenkins

    在Linux安装Jenkins自动更新发布必备神器,装起来

    2022年10月24日
  • iOS 13越狱:越狱后如何安装AppSync和afc2越狱补丁

    iOS 13越狱:越狱后如何安装AppSync和afc2越狱补丁iOS13越狱:越狱后如何安装AppSync和afc2越狱补丁?本文件转载自:https://news.tongbu.com/98644.html文章概要:越狱后必须安装的补丁:AppSync和afc2。越狱后如何安装AppSync和afc2越狱补丁?越狱虽然成功了,但如果不安装Appsync和afc2这两个重要的补丁,就无法享受越狱的功能哦。请按照如下教程提示,分别安装着这2个重要补丁。越狱教程:《iOS13越狱教程:unc0ver5.2.0更新发布,支持iOS13.5..

  • BT渗透「建议收藏」

    BT渗透「建议收藏」PHP交流群:294088839,Python交流群:652376983 whois域名/ip查看域名的详细信息。ping域名/ip测试本机到远端主机是否联通。dig域名/ip查看域名解析的详细信息。host-l域名dns服务器传输zone。扫描nmap:-sS半开扫描TCP和SYN扫描。-sT完全TCP连接扫描。-sUUDP扫描-PSs…

  • IntelliJ idea 主题包下载以及安装

    IntelliJ idea 主题包下载以及安装IntelliJidea默认的主体只有简单的白和灰,不一定能满足所有人的喜好,所以想要下载一些其它不错的主题包;主题下载地址;部分截图;选择自己喜欢的主题下载,个人还是比较喜欢SublimeText2主题,下载好之后,随意放个找得到的位置(还是放在安装目录下面吧,是个整体嘛),是个jar包。安装:file–&gt;importsetttings–…

  • linux 暂停一段时间,sleep命令_Linux sleep命令:让程序暂停或休眠一段时间

    linux 暂停一段时间,sleep命令_Linux sleep命令:让程序暂停或休眠一段时间sleep命令,让睡眠变得有学问。本文将对sleep命令进行详细地介绍,一起来看看sleep命令如何让睡眠变得有学问。先让程序睡上30秒从字面意思看,想必你已经猜出来sleep命令的作用啦。简单地说,sleep就是让程序稍稍休息一下,然后,再继续工作(休息是为了更好地工作……)。我们让Shell程序小憩30秒:#睡眠30秒[roc@roclinux~]$sleep…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号