Vue on 中二青年

【vue】项目配置

Thu, 10 Oct 2019 00:00:00 +0000

vue项目环境搭建

node ~~ python: node是用c++编写用来运行js代码的

npm(cnpm) ~~ pip: npm是一个终端应用商城，可以换国内源cnpm

vue ~~ django: vue是用来搭建vue前端项目的

1）安装node

官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/

2）换源安装cnpm

: npm install -g cnpm – registry=https://registry.npm.taobao.org

3）安装vue项目脚手架

: cnpm install -g @vue/cli

注：2或3终端安装失败时，可以清空 npm缓存再重复执行失败的步骤

npm cache clean –force

vue项目创建

: cd ***

创建项目

: vue create 项目名

项目初始化

pycharm配置并启动vue项目

用pycharm打开vue项目
添加配置npm启动

vue项目目录结构分析

├── v-proj
|	├── node_modules  	// 当前项目所有依赖，一般不可以移植给其他电脑环境
|	├── public			
|	|	├── favicon.ico	// 标签图标
|	|	└── index.html	// 当前项目唯一的页面
|	├── src
|	|	├── assets		// 静态资源img、css、js
|	|	├── components	// 小组件
|	|	├── views		// 页面组件
|	|	├── App.vue		// 根组件
|	|	├── main.js		// 全局脚本文件（项目的入口）
|	|	├── router.js	// 路由脚本文件（配置路由 url链接 与 页面组件的映射关系）
|	|	└── store.js	// 仓库脚本文件（vuex插件的配置文件，数据仓库）
|	├── README.md
└	└── **配置文件

vue组件(.vue文件)

【vue】条件循环/计算属性/属性监听

Wed, 09 Oct 2019 00:00:00 +0000

条件指令

1）两种都可以控制标签的显隐，绑定的值是布尔类型值，当都隐藏标签时

v-if是不渲染标签

v-show以 display:none 方式渲染

<div id="app">
    <p v-if="isShow">if条件指令</p>
    <p v-show="isShow">show条件指令</p>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            isShow: false,
        }
    })
</script>

2）v-if/v-else-if/v-else

一组分支上成立，分支会屏蔽下方所有分支，else分支没有条件，在所有分支不成立后才显示

<style>
    .box {
        width: 400px;
        height: 300px;
    }
    .r { background-color: red; }
    .y { background-color: yellow }
    .b { background-color: blue; }
    .active {
        background-color: pink;
    }
</style>
<div id="app">
    <div class="em">
        <p>
            <button @click="changeBox('rBox')" :class="{active: showName == 'rBox'}">红</button>
            <button @click="changeBox('yBox')" :class="{active: showName == 'yBox'}">黄</button>
            <button @click="changeBox('bBox')" :class="{active: showName == 'bBox'}">蓝</button>
        </p>
        <p>
            <button @click="changeBox('rBox')" :class="showName == 'rBox' ? 'active' : ''">红</button>
            <button @click="changeBox('yBox')" :class="showName == 'yBox' ? 'active' : ''">黄</button>
            <button @click="changeBox('bBox')" :class="showName == 'bBox' ? 'active' : ''">蓝</button>
        </p>
        <div class="box r" v-if="showName == 'rBox'"></div>
        <div class="box y" v-else-if="showName == 'yBox'"></div>
        <div class="box b" v-else></div>
    </div>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            showName: 'rBox'
        },
        methods: {
            changeBox(name) {
                this.showName = name;
            }
        }
    })
</script>

【vue】组件

Wed, 09 Oct 2019 00:00:00 +0000

********组件

1）组件：一个包含html、css、js独立的集合体，这样的集合体可以完成页面结构的代码复用

2）组件分为根组件、全局组件与局部组件

根组件：所有被new Vue()产生的组件，在项目开发阶段，一个项目只会出现一个根组件

全局组件：不用注册，就可以成为任何一个组件的字组件

局部组件：必须注册，才可以成为注册该局部组件的子组件

3）每一个组件都有自身的html结构，css样式，js逻辑

每一个组件其实都有自己的template，就是用来标识自己html结构的

template模板中有且只有一个根标签

根组件一般不提供template，就由挂载点的真实DOM提供html结构

4）除根组件的其他组件，数据要有局部作用域，保证组件复用是，各组件间数据的独立性

5）在多组件共处时，在哪个组件模板中出现的变量，由当前组件提供

局部组件

1）创建局部组件

2）在父组件中注册该局部组件

3）在父组件的template模板中渲染该局部组件

<style>
    .box {
        box-shadow: 0 3px 5px 0 #666;
        width: 240px;
        height: 300px;
        text-align: center;
        padding: 20px 0;
        float: left;
        margin: 5px;
    }
    .box img {
        width: 200px;
    }
</style>
<div id="app">
    <!--<mcc></mcc>-->
    <local-tag></local-tag>
    <local-tag></local-tag>
</div>
<script src="js/vue.js"></script>
<script>
    let localTag = {
        template: `
        <div class="box">
            <img src="img/666.jpg" alt="">
            <h3>凤哥</h3>
            <p>马叉虫❤马叉虫</p>
        </div>
        `
    };

    new Vue({
        el: '#app',
        components: {
            // mcc: localTag,
            // localTag,
            'local-tag': localTag,
        }
    })
</script>

全局组件

【vue】模板语法

Tue, 08 Oct 2019 00:00:00 +0000

vue导读

1）vue框架是前台框架，常见的前台框架有：Angular、React、Vue

2）vue是结合其他框架的优点：轻量级、中文API、数据驱动、双向绑定、MVVM设计模式、支持组件化开发、单页面应用

MVVM设计模式：MV数据到视图一层数据处理，向后台请求数据渲染页面；VM视图再到数据一层数据处理，前台获取的用户数据到后台。

3）vue环境，本地导入与cdn导入

4）vue是js渐进式框架

根据开发需求，可以决定vue框架控制项目的具体方位：可以为一个标签，也可以为一个页面，甚至可以为整个项目

实例成员-挂载点

1）vue通过挂载点与html页面结构建立关联

2）html与body不能作为挂载点

3）一个vue对象挂载点只会索引一个匹配结果，所以挂载点一般用id标识

el：实例

<div id="wrap">
    {{ }}
    <hr>
    <div class="main">
        {{ }}
    </div>
    <hr>
    <div class="main">
        {{ }}
    </div>
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#wrap'  // el表示挂载点
    })
</script>
//实例与页面挂载点一一对应
//一个页面中可以出现多个实例对应多个挂载点
//实例只操作挂载点内部内容

js对象(字典)补充

let b = 20;
let dic = {
    a: 10,  // 字典本身就是对象，key都是字符串形式可以省略引号
    b  // 值为变量时，且与key同名，可以简写
};
console.log(dic)

实例成员-数据

1）用实例成员data为vue环境提供数据，数据采用字典{}形式

2）在插值表达式{{}}中，直接书写数据的key来访问数据

{{}}是插值表达式，中间出现的info是vue变量

插值表达式内可以直接做简单的数学运算

复杂的运算就需要借助过滤器

【前端】BOM和DOM

Mon, 09 Sep 2019 00:00:00 +0000

前戏

到目前为止，我们已经学过了JavaScript的一些简单的语法。但是这些简单的语法，并没有和浏览器有任何交互。

也就是我们还不能制作一些我们经常看到的网页的一些交互，我们需要继续学习BOM和DOM相关知识。

JavaScript分为 ECMAScript，DOM，BOM。

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。

DOM （Document Object Model）是指文档对象模型，通过它，可以访问HTML文档的所有元素。

Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()。

window对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

*如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

*没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。全局函数是 window 对象的方法。

接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。

一些常用的Window方法：

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口

window的子对象

navigator对象（了解即可）

浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。

navigator.appName　　// Web浏览器全称
navigator.appVersion　　// Web浏览器厂商和版本的详细字符串
navigator.userAgent　　// 客户端绝大部分信息
navigator.platform　　　// 浏览器运行所在的操作系统

screen对象（了解即可）

屏幕对象，不常用。

【前端】JavaScript

Mon, 09 Sep 2019 00:00:00 +0000

JavaScript引入方式

Script标签内写代码

<script>
  // 在这里写你的JS代码
</script>

引入额外的JS文件

<script src="myscript.js"></script>

JavaScript语言规范

注释（注释是代码之母）

// 这是单行注释

/*
这是
多行注释
*/

结束符

JavaScript中的语句要以分号（;）为结束符。

JavaScript语言基础

变量声明

JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
声明变量使用 var 变量名; 的格式来进行声明

var name = "Alex";
var age = 18;

注意：

变量名是区分大小写的。

推荐使用驼峰式命名规则。

保留字不能用做变量名。

补充：

ES6新增了let命令，用于声明变量。其用法类似于var，但是所声明的变量只在let命令所在的代码块内有效。例如：for循环的计数器就很适合使用let命令。

for (let i=0;i<arr.length;i++){...}

ES6新增const用来声明常量。一旦声明，其值就不能改变。

const PI = 3.1415;
PI // 3.1415

PI = 3
// TypeError: "PI" is read-only

JavaScript数据类型

JavaScript拥有动态类型

var x;  // 此时x是undefined
var x = 1;  // 此时x是数字
var x = "Alex"  // 此时x是字符串

数值(Number)

JavaScript不区分整型和浮点型，就只有一种数字类型。

【前端】JQuery

Mon, 09 Sep 2019 00:00:00 +0000

jQuery

jQuery介绍

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“

jQuery的优势

一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

jQuery内容：

选择器
筛选器
样式操作
文本操作
属性操作
文档处理
事件
动画效果
插件
each、data、Ajax

下载链接：jQuery官网

中文文档：jQuery AP中文文档

jQuery版本

1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持。

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。
$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。
相当于： document.getElementById("i1").innerHTML;
虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。
一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：


var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象

拿上面那个例子举例，jQuery对象和DOM对象的使用：

$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

jQuery基础语法

$(selector).action()

查找标签

基本选择器

id选择器：

【前端】CSS

Wed, 04 Sep 2019 00:00:00 +0000

1. CSS介绍

CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。

当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。

2. CSS语法

2.1 CSS实例

每个CSS样式由两个组成部分：选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。

2.2 CSS注释

/*这是注释*/

3. CSS的几种引入方式

3.1 行内样式

行内式是在标记的style属性中设定CSS样式。不推荐大规模使用。

<p style="color: red">Hello world.</p>

3.2内部样式

嵌入式是将CSS样式集中写在网页的标签对的标签对中。格式如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style></head>

3.3 外部样式

外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

4. CSS选择器

4.1 基本选择器

元素选择器

/*元素选择器*/
p {color: "red";}

/*ID选择器*/
#i1 {
  background-color: red;
}

/*类选择器*/
.c1 {
  font-size: 14px;
}
p.c1 {
  color: red;
}
/*注意：
样式类名不要用数字开头（有的浏览器不认）。
标签中的class属性如果有多个，要用空格分隔。*/

/*通用选择器*/
* {
  color: white;
}

4.2 组合选择器

【前端】HTML

Tue, 03 Sep 2019 00:00:00 +0000

HTML思维导图

Web服务本质

1.浏览器发请求 –> HTTP协议 –>

2.服务端接收请求 –>

3.服务端返回响应 –> 服务端把HTML文件内容发给浏览器 –>

4.浏览器渲染页面

import socket
sk = socket.socket()
sk.bind(("127.0.0.1", 8080))
sk.listen(5)
while True:
    conn, addr = sk.accept()
    data = conn.recv(8096)
    conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
    conn.send(b"<h1>Hello world!</h1>")
    conn.close()

HTTP协议

超文本传输协议，规定了浏览器与服务端之间消息传输的数据格式

四大特性：

1.基于请求响应

2.基于TCP/IP之上的作用于应用层的协议

3.无状态(服务端无法保存用户的状态)

4.无连接(请求一次响应一次，之后立刻断开连接)

websocket相当于HTTP协议的一个补丁，它支持长连接

请求数据格式

请求首行(表示HTTP协议版本，当前请求方式)

请求头(一大堆k,v键值对)

请求体(携带的是一些敏感信息比如密码、身份证号…)

响应数据格式

响应首行(标识HTTP协议版本,响应状态码)

响应头(一大堆k,v键值对)

响应体(返回给浏览器页面的数据通常响应体都是html页面)

响应状态码

用一串简单的数字来表示一些复杂的状态或者提示信息

1XX:服务端已经成功接收了你的数据正在处理你可以继续提交额外的数据

2XX:服务端成功响应你想要的数据(请求成功200)

3XX:重定向(当你在访问一个需要登录之后才能访问的页面你会发现窗口会自动调到登录页面 301 302)

4XX:请求错误(请求资源不存在404,请求不合法不符合内部规定会权限不够403)

5XX:服务器内部错误(500)

请求方式

get请求(向服务端要资源）

post请求(向服务端提交数据)