前端基础--Vue2

前端技术发展史(了解)

1.前端历史

1.1.静态网页

1990 html

1.2.异步刷新-操作dom

1995 javascript

1.3.动态网站

Asp/jsp（java）,php等，后台臃肿

1.4.Ajax成为主流

异步请求

1.5.Html5

被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。HTML5是Web中核心语言HTML的规范。

2.Nodejs介绍

2.1.介绍

官方解释：

Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型， [1] 让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的[脚本语言]

Node.js 的出现吸引了很多前端开发人员开始用 JavaScript 开发服务器代码，其异步编程风格也深受开发人员的喜爱。Node.js 的伟大不仅在于拓展了 JavaScript 在服务器端的无限可能，更重要的是它构建了一个庞大的生态系统。

简单理解：Nodejs是一个JavaScript运行环境，让JavaScript开发服务端代码成为可能

2010年，NPM作为node.js的包管理系统首次发布，开发人员可以遵循Common.js规范来编写Node.js模块，然后发布到NPM上供其他开发人员使用。（类似打造java的开源生态）目前已经是世界最大的包模块管理系统。 NPM相当于java 中的 maven,NPM(管理js插件的)

简单理解：Npm是在Nodejs平台上的js包管理系统，如安装jquery：npm install jquery , 为了方便理解下面有一个对比：

JDK、JRE(java开发、运行平台)Nodejs(JS运行平台)
后端应用开发前端应用开发
Maven：管理jar包NPM：管理JS库
springboot+SSM架构开发项目VUE技术栈，React技术

随后，在node的基础上，涌现出了一大批的前端框架：Angular（MVC->MVVM）,Vue(MVVM)等等

2.2.主流前端框架

前端框架三巨头：

  • Vue.js:vue.js以轻量易用著称

  • React.js:vue.js和React.js发展速度最快， 集web前端与app于一身技术

  • AngularJS:AngularJS是曾经的老大。

Nodejs和VUE的安装

vue的安装方式有两种，

  • 手动下载VUE的js库，然后在html中导入JS库进行开发

  • 通过Npm安装VUE的JS库，然后在html中导入使用

第一种方式我们玩其他JS库的时候一直都在用，我们主要使用Npm来安装VUE

1.Nodejs的安装

NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。为了后面学习方便，我们先安装node及NPM工具.

1.1.安装Nodejs

Nodejs自带npm，安装好Nodejs就安装好了npm

  • NodeJs下载：Node.js — Download Node.js®

  • 安装：双击安装，如果是绿色版，直接解压缩，配置环境变量

  • 升级：npm install npm@latest -g [不升级]

  • 测试Node：cmd -> node -v

  • 测试Npm： cmd -> npm -v

  • 淘宝镜像：npm config set registry https://registry.npmmirror.com

1.2.cnpm的使用（可用可不用）

淘宝团队做的国内镜像，因为npm的服务器位于国外可能会影响安装。淘宝镜像与官方同步频率目前为 10分钟 一次以保证尽量与官方服务同步。

  • 安装：命令提示符执行 npm install cnpm -g --registry=https://registry.npm.taobao.org

  • 测试cnpm ：cnpm -v

2.VUE的安装

我们在IDEA中创建一个静态项目，通过Terminal来安装VUE

安装vue

使用CDN方式

Vue有两种使用方式，1是使用cdn方式直接引入JS库 ，2.使用Npn安装VUE库，第一种方式如下：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

当然也可以手动下载该JS库到本地项目，然后引入JS库

使用NPM安装VUE

  • 使用Terminal初始化 ：npm init -y

    改名了是初始化NPM，会在项目中产生一个package.json文件。

  • 安装vue：

    全局安装（不推荐）：npm install -g vue

    局部安装（推荐） ：npm install vue

    安装成功后VUE的JS库：node_modules/vue/dist/vue.js

[注意] 项目的名称不能使用“vue”，不然会报错

NPM相关命令

全局安装: npm install -g vue（安装工具vue-cli,webpack）
​
局部安装: npm install vue@2.6.10(vue,jquery,仅仅是我们这个项目要用到js库)
​
查看模块: npm list vue
​
卸载模块: npm uninstall vue
​
更新模块: npm update vue
​
运行工程: npm run dev/test/online
​
编译工程: npm run build

注意:

一般来说,js库我们都局部安装就可以了

Vue组件

1. 什么是组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素标签<mycomponent>，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 vue.js 特性进行了扩展的原生 HTML 元素。

总结:Vue组件是用来完成特定功能的一个自定义的HTML标签 例如:

<body>
    <mytag></mytag>
</body>

注意: mytag就是一个组件, 该组件必须通过Vue为mytag赋予一定的功能

2. 组件的作用

组件是对特定功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码。封装重复利用

3. 组件的分类

组件分为全局组件和局部组件

全局组件：在所有vue实例中(.在它所挂载元素下面有效)有效

局部组件：在自己vue实例中(.在它所挂载元素下面有效)有效

3.1. 全局组件

语法：

Vue.component("自定义标签的名字",{配置对象})

特点：

全局组件可以在任何被挂载的标签中使用.

全局组件的配置对象中必须包含template属性

注意事项：

template中的html必须在一个标签中. 仅且只能有一个根节点

应用场景：

如果该组件的特定功能需要在任何被挂载的标签中使用. 推荐使用全局组件

<div id="app">
    <mycomponent1></mycomponent1>
    <mycomponent2></mycomponent2>
</div>
​
<div id="app1">
    <mycomponent1></mycomponent1>
    <mycomponent2></mycomponent2>
</div>
-------------------------------------------------------------------------------
//定义第一个全局组件
Vue.component("mycomponent1",{
    template : "<h1>这是第一个全局组件</h1>"
})
​
//定义第二个全局组件
var component2Config = {
    template : "<h1>这是第二个全局组件</h1>"
};
Vue.component("mycomponent2",component2Config);
​
var app = new Vue({
    el: "#app",
    data: {
    }
});
​
var app1 = new Vue({
    el: "#app1",
    data: {
    }
});

3.2. 局部组件

语法：

var app = new Vue({
    el: "#app",
    data: {},
    components : {
        "局部组件的名字1" : {组件的配置对象},
        "局部组件的名字2" : {组件的配置对象}
    }
  });

特点：

局部组件只能够在所挂载的标签中使用

<div id="app1">
    <mycomponent></mycomponent>
</div>
<div id="app2">
    <mycomponent></mycomponent>
</div>
​
​
//>>1. 在id=app1挂载的实例的components中定义局部组件
var app1 = new Vue({
    el: "#app1",
    data: {},
    components : {
        "mycomponent" : {
            template : "<h1>这是一个局部组件</h1>"
        }
    }
});
​
//>>2. 在id=app2的标签中是不能够使用上面app2对象的局部组件.
var app2 = new Vue({    
    el: "#app2",
    data: {}
});

4. 组件使用两种HTML模板

两种方式：

  1. 直接在template属性写上html代码字符串或者变量指定

<!--
<template id="mytemplate">
    <h1>template标签中的html</h1>
</template>
​
<script type="text/template" id="mytemplate">
    <h1>template标签中的html</h1>
</script>
-->

  1. 将当前网页中的html标签作为模板代码 (大量的HTML不用拼装HTML字符串) a. 在网页中定义template标签或者script标签包含模板中需要的html模板代码

<!--
"mycomponent2":{
      template: "#mytemplate" ,  #代表找到对应的html代码作为当前组件的模板代码
}
-->

代码：

<div id="app4">
    <mycomponent4></mycomponent4>
</div>
​
<!--   <template id="mytemplate">
       <h1>template标签中的html</h1>
   </template-->>
<script type="text/template" id="mytemplate">
    <h1>template标签中的htmlssssssssssssssss</h1>
</script>
​
<script type="text/javascript">
    var app4 =  new Vue({
        el:"#app4",
        components:{
            "mycomponent4":{
                template:"#mytemplate"
            }
        }
    });
</script>

5. 组件中的数据必须是函数

组件中数据的定义 语法：

"组件的名字":{
    template: "",
    data : function(){
        return {
          键1:值1,
          键2:值2
        }
    }
}

注意事项：

  • data数据只能够以函数的形式返回,因为函数中可以写其他的业务代码

  • 只能够在各自的组件模板中使用各自的组件中的data数据

  • Vue对象中的数据不能够在组件中使用. 组件的数据也不能够在挂载的html标签上使用.

components:{
    "mycomponent1":{
        // "template":"#templateStr1"
        "template":"#templateStr2",
            //模板是定义数据以下是可行的
            //1 必须是函数
            //2 通过return返回数据对象
            //3 如果有多个数据就是对象对象多个属性及值
            data(){
                return {
                    messaage:"jjjj",
                    yhptest:"xxxxxxxxxxxxxx"
                }
        }
    }
}

测试代码：

<body>
​
    <div id="app">
        <mycomponent></mycomponent>
    </div>
    <template id="mytemplate">
        <form method="post">
            {{name1}}:<input type="text" /> <br>
            密码:<input type="password" /><br>
            <input type="button" @click="login" value="登录" />
        </form>
    </template>
​
<script type="text/javascript">
​
   var mytabConfig = {
       template:"#mytemplate",
       data(){
           return {"name1":"xxxx"}
       }
   }
   Vue.component("mycomponent",mytabConfig);
   var app = new Vue({
       el: "#app",
       data: {
       }
​
   });
​
</script>
</body>

路由Vue-router(必须搞定)

1. 什么是路由

路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源的映射，通过一个路径的url地址，可以唯一找到一个资源。路由不包含在vue中，是一个插件，需要单独下载。

官方地址：Vue Router | Vue.js 的官方路由

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌

地址：https://unpkg.com/vue-router@3.0.1/dist/vue-router.js

我们访问不同地址要有不同组件响应，需要对url和对应的组件做路由映射。 Vue Router 是 Vue.js 官方的路由管理器

npm install vue-router@3.0.1

2. 路由入门

在js中定义路由；

<script src="node_modules/vue-router/dist/vue-router.js"></script>

挂载到一个dom元素上，使用路由。定义路由出口

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>10_vue路由.html</title>
    <script src="node_modules/vue/dist/vue.js" type="text/javascript"></script>
    <script src="node_modules/vue-router/dist/vue-router.js" type="text/javascript"></script>
</head>
<body>
​
    <!--
    步骤分析：
       1 下载vue-router npm i vue-router@3.0.1
       2 导入进入  <script src="node_modules/vue-router/dist/vue-router.js">
       3 定义路由
          3.1 定义路由所需要组件
          3.2 定义路由规则-哪个地址跳转到哪个组件
          3.3 通过路由规则创建路由对象
       4 把路由对象挂载到vue实例
       5 显示
         5.1 定义显示区域
         5.2 超链接跳转-通过超链接地址和路由规则可以找到组件，把组件渲染到显示区域
     -->
    <div id="myDiv">
        <!--5.2 超链接跳转-->
        <router-link to="/index">首页</router-link>
        <router-link to="/product">产品</router-link>
        <router-link to="/about">关于我们</router-link>
        <!--5.1 定义显示区域-->
        <router-view></router-view>
    </div>
    <script  type="text/javascript">
        // 3.1 定义路由所需要组件
        let index = Vue.component("index",{
            template:"<h3 style='color: red' onclick='alert(1)'>index</h3>"
        })
        let product = Vue.component("product",{
            template:"<h3 style='color: pink' onclick='alert(3)'>product</h3>"
        })
        let about = Vue.component("about",{
            template:"<h3 style='color: yellow' onclick='alert(2)'>about</h3>"
        })
        //3.2 定义路由规则-哪个地址跳转到哪个组件
        const routes = [
            {path:"/index",component:index},
            {path:"/product",component:product},
            {path:"/about",component:about}
        ]
​
        //3.3 通过路由规则定义路由
        const  router = new VueRouter({
            //routes:routes
            routes //等价于上面那一句，根据同名原则匹配
        })
​
​
        new Vue({
            el:"#myDiv",
            data:{
            },
            methods:{
            },
            //4 把路由挂载到vue实例
            //router:router
            router //等价于上面那一句，根据同名原则匹配
        });
    </script>
​
</body>
</html>

写在最后:Vue是当前主流的前端开发框架，这篇文章对vue进行了简单介绍，希望能够给大家带来帮助。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/750707.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

12，SPI

12，SPI

Flash芯片&#xff1a;W25Q64&#xff0c;可以看成一个储存器 W25Q64芯片和单片机之间的通信方式是SPI SPI:串行同步全双工&#xff0c;主从通信 判断一个设备是不是SPI通信&#xff0c;看是否有这几个线&#xff1a;SCK&#xff0c;CS&#xff0c;MISO&#xff0c;MOSI SCK…
阅读更多...
探索Android架构设计

探索Android架构设计

Android 应用架构设计探索&#xff1a;MVC、MVP、MVVM和组件化 MVC、MVP和MVVM是常见的三种架构设计模式&#xff0c;当前MVP和MVVM的使用相对比较广泛&#xff0c;当然MVC也并没有过时之说。而所谓的组件化就是指将应用根据业务需求划分成各个模块来进行开发&#xff0c;每个…
阅读更多...
Three.js鼠标拖动设置骨骼姿态

Three.js鼠标拖动设置骨骼姿态

实现 根据SkinnedMesh生成Mesh 作为射线检测的目标&#xff08;射线检测SkinnedMesh存在不足 无法应用骨骼形变的顶点 &#xff09;点击模型 获取点击位置对应的骨骼拖拽鼠标设置骨骼旋转角度&#xff08;使用TransformControl选中点击的骨骼 设置轴为XYZE 并隐藏控件 主动触发…
阅读更多...
马面裙的故事：汉服如何通过直播电商实现产业跃迁

马面裙的故事：汉服如何通过直播电商实现产业跃迁

【潮汐商业评论/原创】 波澜壮阔的千里江山在马面裙的百褶上展开&#xff0c;织金花纹在女性的步伐之间若隐若现&#xff0c;从明清到现代&#xff0c;如今马面裙又流行了回来&#xff0c;成为女性的流行单品&#xff0c;2024年春节期间&#xff0c;马面裙更是成为华夏女孩们的…
阅读更多...
仓库管理系统14--仓库设置

仓库管理系统14--仓库设置

1、添加窗体 <UserControl x:Class"West.StoreMgr.View.StoreView"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:mc"http://schemas.openxmlformats.…
阅读更多...
Str.format()方法

Str.format()方法

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 语法参考 在Python2.6之后&#xff0c;提供了字符串的format()方法对字符串进行格式化操作。format()功能非常强大&#xff0c;格式也比较复杂&…
阅读更多...
选择第三方软件测试机构做验收测试的好处简析

选择第三方软件测试机构做验收测试的好处简析

企事业单位在自行开发完软件系统或委托软件开发公司生产软件之后&#xff0c;有一个必经流程就是验收测试&#xff0c;以验证该产品是否符合用户需求、是否可以上线。为了客观评估所委托生产的软件质量&#xff0c;第三方软件测试机构往往成为企事业单位做验收测试的首选&#…
阅读更多...
Bad owner or permissions on C:\\Users\\username/.ssh/config ＞ 过程试图写入的管道不存在。

Bad owner or permissions on C:\\Users\\username/.ssh/config ＞ 过程试图写入的管道不存在。

使用windows连接远程服务器出现Bad owner or permissions 错误 问题&#xff1a; 需要修复文件权限 SSH 配置文件应具有受限权限以防止未经授权的访问 确保只有用户对该.ssh/config文件具有读取权限 解决方案&#xff1a; 在windows下打开命令行&#xff0c;通过以下命令打开文…
阅读更多...
PS使用批量脚本生成海报实践

PS使用批量脚本生成海报实践

前言 设计朋友有需求做一批邀请函&#xff0c;有几十个人名&#xff0c;需要把人名加到海报中&#xff0c;PS里一个一个添加人名很麻烦&#xff0c;于是来问我有没有什么办法能够批量去添加。 希望把人名加到红框区域内 尝试用ps的脚本进行处理 准备 PS(版本2021&#xff0c;…
阅读更多...
HTML静态网页成品作业(HTML+CSS)——企业摄影网介绍网页(3个页面)

HTML静态网页成品作业(HTML+CSS)——企业摄影网介绍网页(3个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有3个页面。 二、作品演示 三、代…
阅读更多...
Micro-ROS是什么？

Micro-ROS是什么？

Micro-ROS是ROS&#xff08;Robot Operating System&#xff0c;机器人操作系统&#xff09;生态系统的一个重要组成部分&#xff0c;专为微控制器&#xff08;Microcontrollers&#xff09;设计的轻量级ROS版本。它的目标是在资源有限的嵌入式平台上实现ROS 2的功能&#xff0…
阅读更多...
各省药品集中采购平台-地方药品集采分析数据库

各省药品集中采购平台-地方药品集采分析数据库

国家第十批药品集中采购的启动时间暂未明确&#xff0c;但即将到来&#xff0c;在5月&#xff0c;国家医保局发布了《关于加强区域协同做好2024年医药集中采购提质扩面的通知》&#xff0c;其中明确指出将“开展新批次国家组织药品和医用耗材集中带量采购&#xff0c;对协议期满…
阅读更多...
转转游戏MQ重构：思考与心得之旅

转转游戏MQ重构：思考与心得之旅

文章目录 1 背景1.1 起始之由1.2 重构前现状1.3 问题分析 2 重构2.1 目标2.2 制定方案2.2.1 架构设计2.2.2 实施计划2.2.3 测试计划 2.3 部分细节设计 3. 总结 1 背景 游戏业务自 2017 年启航&#xff0c;至今已近乎走过七个春秋&#xff0c;历经漫长岁月的发展&#xff0c;不…
阅读更多...
应用图扑 HT for Web 搭建拓扑关系图

应用图扑 HT for Web 搭建拓扑关系图

拓扑结构在计算机网络设计和通信领域中非常重要&#xff0c;因为它描述了网络中的设备&#xff08;即“点”&#xff09;如何相互连接&#xff08;即通过“线”&#xff09;。这种结构不仅涉及物理布局&#xff0c;即物理拓扑&#xff0c;还可以涉及逻辑或虚拟的连接方式&#…
阅读更多...
C++ ─── vector模拟实现的扩容拷贝问题

C++ ─── vector模拟实现的扩容拷贝问题

扩容拷贝问题 源代码使用memcpy拷贝&#xff0c;在使用vector<int>存储内置类型时没有问题&#xff0c; 但是如果存储的是含有指针的类型&#xff0c;如string&#xff0c;就会发生浅拷贝问题 //3、容量相关void reserve(size_t n){if (n > capacity()){size_t old_si…
阅读更多...
数字水产养殖中的鱼类追踪、计数和行为分析技术

数字水产养殖中的鱼类追踪、计数和行为分析技术

随着全球人口增长和生态环境退化&#xff0c;传统捕捞已无法满足人类对水产品的需求&#xff0c;水产养殖成为主要的鱼类来源。数字水产养殖利用先进技术和数据驱动方法&#xff0c;对提高生产效率、改善鱼类福利和资源管理具有显著优势。 1 数字水产养殖的重要性 1.1 提高生…
阅读更多...
Java web应用性能分析之【prometheus监控指标体系】

Java web应用性能分析之【prometheus监控指标体系】

Java web应用性能分析之【系统监控工具prometheus】_javaweb服务器性能监控工具-CSDN博客 Java web应用性能分析之【prometheusGrafana监控springboot服务和服务器监控】_grafana 导入 prometheus-CSDN博客 因为篇幅原因&#xff0c;前面没有详细说明Prometheus的监控指标&…
阅读更多...
小红书2024LLM论文分享

小红书2024LLM论文分享

2024小红书大模型论文分享 BatchEval基于LLM评估LLM生成文本的质量 ACL2024 https://ypw0102.github.io/ 如果文本评价需要多个维度&#xff0c;需要调整BatchEval么&#xff1f; 目前是完整流程走一遍的&#xff0c;因此没有具体考虑细粒度。 评测连续的数据域&#xff0c;S…
阅读更多...
使用飞书多维表格实现推送邮件

使用飞书多维表格实现推送邮件

一、为什么用飞书&#xff1f; 在当今竞争激烈的商业环境中&#xff0c;选择一款高效、智能的办公工具至关重要。了解飞书的朋友应该都知道&#xff0c;飞书的集成能力是很强大的&#xff0c;能够与各种主流的办公软件无缝衔接&#xff0c;实现数据交互&#xff0c;提升工作效…
阅读更多...
VAE-pytorch代码

VAE-pytorch代码

import osimport torch import torch.nn as nn import torch.nn.functional as F from torch.utils.data import DataLoaderfrom torchvision import transforms, datasets from torchvision.utils import save_imagefrom tqdm import tqdmclass VAE(nn.Module): # 定义VAE模型…
阅读更多...
最新文章

Copyright @ 2022~2023