Vue

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文件) ...

条件指令 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> ...

********组件 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导读 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变量 插值表达式内可以直接做简单的数学运算 复杂的运算就需要借助过滤器 ...

前戏 到目前为止，我们已经学过了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引入方式 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 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选择器： ...

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思维导图 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请求(向服务端提交数据) ...