知识管理
IdealDestructor
2022-01-04

前端基础及Vue实战

# 1.Web前端

​ Web前端网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。

# 1.1 什么是Web

​ Web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。

​ Web前端主要是通HTML,CSSJS,ajax,DOM等前端技术,实现网站在客服端的正确显示及交互功能。

# 1.2 Web 标准构成

主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。

  • 结构标准：结构用于对网页元素进行整理和分类，对于网页来说最重要的一部分 。通过对语义的分析，可以对其划分结构。具有了结构的内容，将更容易阅读.

  • 表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS 。为了让网页能展现出灵活多样的显示效果.

  • 行为标准：行为是指网页模型的定义及交互的编写 。使用户对网页进行操作，网页可以做出响应性的变化。

总的来说，

  • Web标准有三层结构，分别是结构（HTML）、表现（CSS）和行为（JS）

  • 结构类似人的身体， 表现类似人的着装， 行为类似人的行为动作

  • 理想状态下，他们三层都是独立的， 放到不同的文件里面

# 1.2.1 HTML

  • HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
  • HTML 不是一种编程语言，而是一种标记语言 (markup language)
  • 标记语言是一套标记标签 (markup tag)

# 1.2.1.1 超文本的含义

  • 超越文本限制：可以加入图片、声音、动画、多媒体等内容
  • 超级链接文本：可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。

# 1.2.1.2 语法骨架格式

<!DOCTYPE html>
<html>   
    <head>
        <meta charset="utf-8">
        <title>我的第一个页面</title>
    </head>
    <body>
        <h1>一个一级标题</h1>
		<p>一个段落。</p>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
  • <!DOCTYPE html> 声明为 HTML5 文档
  • <html> 元素是 HTML 页面的根元素
  • <head> 元素包含了文档的元（meta）数据
    • <meta charset="utf-8"> 定义网页编码格式
    • <title> 元素描述了文档的标题
  • <body> 元素包含了可见的页面内容
    • <h1> 元素定义一个标题
    • <p> 元素定义一个段落

html

参考链接：

https://www.runoob.com/html/html-tutorial.html

https://www.w3school.com.cn/html/index.asp

# 1.2.2 CSS

  • CSS(Cascading Style Sheets) ，通常称为CSS样式表或层叠样式表（级联样式表）
  • CSS主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
  • CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

# 1.2.2.1 CSS 规则

css

  • 选择器：需要改变样式的 HTML 元素。

  • 声明：由一个属性和一个值组成。声明之间用分号结束。

    • 属性：希望设置的样式属性。每个属性有一个值。属性和值用冒号分开。

# 1.2.2.2 语法格式

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
1

例如：

<style>
   /*选择器{属性:值；}*/
   p {
   	  color:#06C; 
   	  font-size:14px;  
   	} 
   /*文字的颜色是 蓝色*/
   h4 {
   	 color:#900;
   }
   h1 {
   	 color:#090; 
   	 font-size:16px; 
   	}
   body { 
   	 background:url(bg2.jpg);
   }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

参考链接：

https://www.runoob.com/css/css-tutorial.html

https://www.w3school.com.cn/css/index.asp

# 1.2.3 JS

  • JS (JavaScript)是 Web 的编程语言，是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常常用来给HTML网页添加动态效果，从而实现人机交互的网页
  • 脚本语言不需要编译，在运行过程中由 js 解释器(js引擎)逐行来进行解释并执行

# 1.2.3.1 JS的组成

js1
  • ECMAScript： 是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。
  • DOM：文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）
  • BOM：浏览器对象模型(Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

# 1.2.3.2 书写位置

1.行内式

<input type="button" value="点我试试" onclick="alert('Hello World')" />
1
  • 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick；
  • 可读性差， 在HTML中编写JS大量代码时，不方便阅读；
  • 引号易错，引号多层嵌套匹配时，非常容易弄混；

2.内嵌式

<script>
    alert('Hello  World~!');
</script>
1
2
3
  • 可以将多行JS代码写到 script 标签中

3.外部JS文件

<script src="myScript.js"></script>
1
//myScript.js文件内容
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
1
2
3
4
5
  • 利于HTML页面代码结构化，把大段 JS代码独立到 HTML 页面之外，既美观，也方便文件级别的复用
  • 引用外部 JS文件的 script 标签中间不可以写代码
  • 适合于JS 代码量比较大的情况

参考链接：

https://www.runoob.com/js/js-tutorial.html

https://www.w3school.com.cn/js/index.asp

# 2. Vue简介

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

# 2.1 安装

# 2.1.1 通过< script>标签引入

直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。

  • 开发版本：https://cn.vuejs.org/js/vue.js

  • 生产版本：https://cn.vuejs.org/js/vue.min.js

# 2.1.2 通过CDN安装

  • 制作原型或学习：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
1
  • 用于生产环境：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
1
  • 使用原生 ES Modules：
<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js'
</script>
1
2
3

# 2.1.3 通过NPM安装

​ 在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack或 Browserify模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

​ 由于 npm 安装速度慢，也可使用 cnpm安装，安装使用介绍参照：使用淘宝 NPM 镜像 (opens new window)。

1.npm 版本需要大于 3.0，如果低于此版本需要升级它：

# 查看版本
$ npm -v
2.3.0

#升级 npm
cnpm install npm -g

# 升级或安装 cnpm
npm install cnpm -g
1
2
3
4
5
6
7
8
9

2.安装vue

# 使用npm安装
$ cnpm install vue

# 使用cnpm安装
$ cnpm install vue
1
2
3
4
5

# 2.2 创建一个Vue实例

每个 Vue 应用都需要通过实例化 Vue 来实现。

# 2.2.1 语法格式

var vm = new Vue({
  // 选项
})
1
2
3

例如：

<div id="example">
    <h1>title : {{title}}</h1>
    <h1>url : {{url}}</h1>
</div>
<script>
    var vm = new Vue({
        el: '#example',
        data: {
            title: "一个Vue实例",
            url: "https://cn.vuejs.org/",
        },
        methods: {
            details: function() {
                return  this.title + " ------";
            }
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 example，这表示接下来的改动全部在以上指定的 div 内，div 外部不受影响。

# 2.2.2定义数据对象

在上述Vue实例中：

  • data ：定义属性，实例中有2个属性分别为：title、url。

  • methods ：定义的函数，可以通过 return 来返回函数值。

  • ：输出对象属性和函数返回值。

​ 当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

例如：

<div id="example">
    <h1>data : {{num}}</h1>
</div>
<script>
    // 数据对象
    var data = { 
        num:1, 
    }
    // 将对象加入到一个 Vue 实例中
    var vm = new Vue({
        el: '#examplet',
        data: data
    })

    // 获得这个实例上的 property
    // 返回源数据中对应的字段
    vm.a == data.a // => true

    // 设置 property 也会影响到原始数据
    vm.a = 2
    data.a // => 2 
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

​ 除了数据 property，Vue 实例还暴露了一些有用的实例property (opens new window) 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。

例如：

<div id="example">
    <h1>title : {{title}}</h1>
    <h1>url : {{url}}</h1>
</div>
<script>
// 数据对象
var data = { 
    title: "一个Vue实例", 
    url: "https://cn.vuejs.org/"
}
var vm = new Vue({
    el: '#examplet',
    data: data
})
    
document.write(vm.$data === data) // true
document.write(vm.$el === document.getElementById('example')) // true
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 2.3 Vue的生命周期

​ 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

​ 下图是一个Vue实例的生命周期：

Vue生命周期

# 2.3.1 beforeCreate

​ 在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。

​ 此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。

# 2.3.2 created

​ 在实例创建完成后被立即同步调用。

​ 实例已完成对选项的处理，以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。

​ 在这一步中可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理。但需要注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的，因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩子beforeRouteEnter中完成

# 2.3.3 beforeMount

​ 在挂载开始之前被调用：相关的 render 函数首次被调用（虚拟DOM）。

​ 实例已完成以下的配置： 编译模板，把data里面的数据和模板生成html，完成了el和data 初始化，但此时还没有挂在html到页面上。

# 2.3.4 mounted

​ 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。

​ 模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。

​ 但mounted 不会保证所有的子组件也都被挂载完成。如果希望等到整个视图都渲染完毕再执行某些操作，可以在 mounted 内部使用 vm.$nextTick：

mounted: function () {
  this.$nextTick(function () {
    // 仅在整个视图都被渲染之后才会运行的代码
  })
}
//生命周期钩子的 this 上下文指向调用它的 Vue 实例。
1
2
3
4
5
6

# 2.3.5 beforeUpdate

​ 在数据发生改变后，DOM 被更新之前被调用。

​ 适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程.

# 2.3.6 updated

​ 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。

​ 当这个钩子被调用时，组件 DOM 已经更新。，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。

​ 但updated 不会保证所有的子组件也都被重新渲染完毕。如果希望等到整个视图都渲染完毕，可以在 updated 里使用 vm.$nextTick：

updated: function () {
  this.$nextTick(function () {
    //  仅在整个视图都被重新渲染之后才会运行的代码     
  })
}
1
2
3
4
5

# 2.3.7 beforeDestroy

​ 实例销毁之前调用。在这一步，实例仍然完全可用。

​ 这一步还可以用this来获取实例，一般用来做一些重置的操作，比如清除掉组件中的定时器和监听的dom事件。

# 2.3.8 destroyed

​ 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。

参考链接：

https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks

https://www.jianshu.com/p/672e967e201c

https://blog.csdn.net/haochangdi123/article/details/78358895

# 2.4 创建一个Vue项目

​ Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

  • 通过 @vue/cli 实现的交互式的项目脚手架。
  • 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
  • 一个运行时依赖 (@vue/cli-service)，该依赖：
    • 可升级；
    • 基于 webpack 构建，并带有合理的默认配置；
    • 可以通过项目内的配置文件进行配置；
    • 可以通过插件进行扩展。
  • 一个丰富的官方插件集合，集成了前端生态中最好的工具。
  • 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

​ Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject

# 2.4.1 安装vue CLI

​ Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。

1.安装新的包

npm install -g @vue/cli

# 或者
yarn global add @vue/cli
1
2
3
4

2.检查其版本是否正确

vue --version
1

3.升级包

npm update -g @vue/cli

# 或者
yarn global upgrade --latest @vue/cli
1
2
3
4

# 2.4.2 创建Vue项目

# 2.4.2.1 通过 vue create创建

vue create hello-world
1
  • 默认配置：包含了基本的 Babel + ESLint 设置。适合快速创建一个新项目的原型。

cli-new-project

  • 手动选择特性：选取需要的特性。适合面向生产的项目。

cli-select-features

# 进入项目具体路径
cd hello-world

# 下载依赖
npm install

# 启动运行项目
npm run serve 

# 项目打包
npm run build
1
2
3
4
5
6
7
8
9
10
11

# 2.4.2.2 使用图形化界面创建

vue ui
1

​ 打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

ui-new-project

# 2.4.2.3 使用2.x 模板 (旧版本)创建

# 全局安装一个桥接工具
npm install -g @vue/cli-init

# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack vue_map_test
1
2
3
4
5

init-vue

# 进入项目具体路径
cd vue_map_test

# 下载依赖
npm install

# 启动运行项目，默认为8080端口
npm run dev

# 项目打包
npm run build
1
2
3
4
5
6
7
8
9
10
11

# 2.4.3 Vue项目目录

├── v-proj
|	├── node_modules  	// 当前项目所有依赖，一般不可以移植给其他电脑环境
|	├── public			
|	|	├── favicon.ico	// 标签图标
|	|	└── index.html	// 当前项目唯一的页面
|	├── src
|	|	├── assets		// 静态资源img、css、js
|	|	├── components	// 小组件
|	|	├── App.vue		// 根组件
|	|	├── main.js		// 全局脚本文件（项目的入口）
|	|	└── router.js   // 路由脚本文件	
|	├── README.md
└	└── package.json  //配置文件,使用npm install安装
1
2
3
4
5
6
7
8
9
10
11
12
13

# 2.4.3.1 public

​ 可以理解为入口目录。

# 2.4.3.1.1 favicon.ico

​ 用于作为缩略的网站标志，它显示位于浏览器的地址栏或者在标签上，用于显示网站的logo。

​ ico图标制作网址：https://www.bitbug.net/

# 2.4.3.1.2 index.html

​ 首页入口文件，可以添加一些 meta 信息或统计代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
</head>
<body style="background-color: #fff;">
    <div id="app" >

    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 2.4.3.2 src

​ 是整个项目的主文件夹 ，代码大部分都在这里完成。

# 2.4.3.2.1 assets

​ 放置一些资源文件。比如js 、css、image等。

assets

# 2.4.3.2.2 components

​ 放置组件文件。一个vue项目就是由一个个的组件拼装起来的。

例如：

<template>
    <div class="test">
        
    </div>
</template>

<script>
    export default {
        name: "Test"
    }
</script>

<style scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  • 有且只有一个根标签
编辑 (opens new window)
上次更新: 2022/01/04, 02:41:54
自动化构建用户及物料画像
flask简介及基础

← flask简介及基础→

最近更新
01
flask简介及基础
 01-04
02
前后端交互
 01-04
03
神经网络
 12-20
更多文章>
Theme by Vdoing | Copyright © 2022-2022 Francis | MIT License
×