山茶-峰-优快云博客

原创 Angular与Vue区别

angular是一个框架，基于mvvm 模式Vue 是一个渐进式框架，针对于视图层Vue 的双向绑定是基于数据劫持与发布订阅模式的Angular 是基于脏检查机制的项目整体来说，angular 只有一个实例，但是vue 是绑定在一个el 上的，一个页面中可以拥有多个vue 实例

2022-09-21 09:25:06 620

原创什么是SEO

Seo 又叫搜索引擎优化之所以SPA项目对Seo不太友善，是因为单页面项目是动态页面，页面的搜索引擎脚本识别的一些特殊符号标签不会一次性显示怎么优化Seo?标题标签页面元信息标签关键词页面描述等，总之seo 优化就是方便搜索引擎脚本的抓取

2022-09-13 19:29:20 215

jsjs中的变量声明：在js中变量没有使用声明符号进行声明的时候，系统会自动创建一个全区变量的声明方式声明该变量在js中声明变量由三种方式：第一中、不使用符号进行声明，该方式自动生成为全局变量第二种、使用var符号进行声明，该符号声明变量会作为该作用域的全局变量第三种、使用符号let进行声明，该符号的底层时函数自调用的形式，声明的变量只在本作用于本条声明之下起作用闭包：全局变量和局部变量时js变成中常用的变量形式在java中，由公共的，私有的，自己和子代可用的三种权限闭包就是用

2021-07-06 20:42:59 409 1

原创 vue项目参数传递

页面的参数传递1、再脚手架项目中常用的跳转方法，使用<router-lint :to = "">方法和使用vue-router;2、参数的传递都是页面跳转中常用的，另外有些参数需要全局共享，这时使用的一般都是vueX;父传递子1、父传子的方式可以直接使用组件的porps方式传递参数；2、可以使用vueX共享数据传递参数；3、可以使用vue-router方式再跳转路由中传递参数；子传父参数1、首先跳转会使用到路由，所以使用路由的方式传递参数是可以的vue-router;2、其次共

2021-06-21 17:53:04 1637

原创文件上传：axios/multer/node

文件上传文件上传首先，装备两部分，一部分是前台的html部分，进行文件的提交；一部分是后端API接口的设计，进行文件的获取前台前台获取用户传递的文件一般都是使用表单提交的，表单提交的一般有两种，直接使用form表单结构和使用创建表单对象的方式；这里使用创建表单对象的方式进行数据的传递。HTML页面<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compa

2021-06-11 14:36:10 385 3

原创 `HTML5`新特性 `

HTML5新特性 Unit01音频与视频音频与视频标签音频标签音频标签可以支持在网页中播放音乐，支持的音频格式有：mp3, wav, ogg。简写方式：<audio src="音频文件路径" controls></audio><audio src="../asset/a.mp3" controls // 控制是否显示控制面板 autoplay // 控制是否在标签加载完毕后自动播放 muted

2021-06-08 16:35:50 94

原创触底加载MintUI

实现切换顶部选项卡时，更新文章列表由于每个选项卡的内容布局都一样，所以切换导航选项时紧紧需要更新列表即可，没有必要搞那么多的面板。干掉仨，留一个即可。步骤：干掉后三个container-item。去掉mt-tab-container的v-model，把第一个面板的id也删掉即可。业务实现步骤：编写watch监听，监听navactive的变化（代表了切换了导航菜单项）。/** 监听顶部导航的切换 */ navactive(newval){ // 把page初始化为1

2021-06-08 16:30:51 274

原创 `vue`列表渲染时的图片路径问题

vue列表渲染时的图片路径问题为了能动态显示图片，需要为src属性添加：变为动态属性。问题：但是webpack在编译打包时对src的静态地址与动态地址的处理方式不同。如果是静态路径（不带冒号），webpack将会通过vueloader来进行图片路径的二次处理。如果是动态路径（带冒号），webpack将原封不动的把路径设置为最终的src。Vueloader对请求资源URL的处理规则：如果静态路径为绝对路径（src='/assets/a.jpg'），则vueloader不会对路径进行任

2021-06-08 16:21:54 1240 1

原创 MintUI使用方式

MintUI使用方式mintUI APi网址使用node环境进行安装使用安装指令npm i mint-ui -S使用脚手架vue-cli创建项目npm install -g vue-clivue init webpack projectname或者：使用指令npm install -g @vue/cli下载安装最新的脚手架方式然后使用指令vue create projectname方式创建新的脚手架项目使用指令npm install -g -S mint-ui方式安装mintUI框架

2021-06-08 16:11:19 656

原创 vue项目中vue-router使用

在vue项目中的路由的使用方法使用API网址https://router.vuejs.org/zh/guide/#htmlvue Router的作用在vue项目中，单页面应用使用的主要技术就是路由技术Html中使用方式在html中的使用方式有两种，一种是使用标签跳转，一终是使用js代码跳转   <!-- <router-link

2021-06-08 15:29:50 475 1

原创 emmet语法

HTML的快速生成嵌套标签emmet语法，现在大多数编辑器都支持该语法，不支持的下载该插件安装就行生成简单的HTML页面！/html5生成标签直接输入标签名-生成含有id的标签 div#div_1表示生成div标签且ID为div_1生成含有类的标签div.div_1表示城市带有类div_1的div生成标签5div5生成5个div标签生成同级的不同ID或者不同类的标签div#d1+div#d2生成两个div，ID分别是d1和d2div.d1+div.d2生成连个div类

2021-05-29 16:31:43 114

原创 css基础01

css基础HTML样式很直观写在标签里面复用性特别差优先级特别高css样式不写在标签里面，可单独成立文件复用性很高优先级低于html样式有很多ui框架，更加美观css的作用css叫做层叠样式表，作用进行页面美化，配合js进行页面动画制作，又叫做级联样式表css与HTML的关系HTML用于构建网页框架css用于构建html标签的样式网页是由html与css还有js组成的，其中html与css是不可缺失的打个比方比如建房子，HTML是砖块，js就是钢筋，而css就是房子的规划和

2021-05-29 16:25:37 106

原创 JSON基础

JSON解析什么是JSONjson是javascript object notation的简称目前已经独立出来，几乎被所有的编程语言使用json是一种轻量级的文本数据交换模式，以广泛用于数据储存和文本数据交换领域json是一种比xml更加简洁、快速高效的数据交换模式，更加容易解析JSON语法规则json语法是JavaScript对象表示法语法的子集——数据存储方式：键值对——分割：数据由都好分隔——保存：数据由花括号保存——数组：数组的保存使用方括号JSON对象JSON是一种轻量级

2021-05-29 16:03:01 102

原创 XML基础

XML声明声明方式！开头必须是以<?xml开头，以？>结尾声明必须从文档的0行0列位置开始声明的属性 ——version：指定xml版本，是必选属性，一般选择1.0——encoding：指定当前文档编码格式，默认是utf8——standalone：指定文档独立性，独立为yes，有依赖文件为noXML语法Xml语法方式！Xml语法中标记是自定义的，没有预定义的，但是暴击必须是闭合标签Xml语法中自定义标签对大小写是敏感的，同样的标签，大写与小写就是俩个标签Xml语法嵌套必须

2021-05-29 15:57:50 139

原创原生ajax方-式01

什么是AJAX？AJAX是异步的JavaScript和xml##本质：使用XMLHttprequest对象异步向服务器请求获取数据结果：服务器返回部分数据，但不是一个完整的页面，原本的页面没有刷新，部分数据更新##创建AJAX工作流程1、创建异步对象 varxhr=new XMLHttpRequest();2、指定接收数据函数 xhr.onreadystatechage=function(){}#53、创建请求指定服务器地址 xhr.open(‘请求方式’,‘地址’,‘是否异步’

2021-05-29 15:48:48 95

原创 VUEUI ElementUI-02

VUEUI 基础ElementUIElementUI是一套为开发者设计师等准备的基于vue的桌面端组件库，是饿了么团队开发的ElementUI适合适用在后台管理页面文档链接地址 https://element.eleme.cn/#/zh-CN/component/installation使用方式安装学习使用的是node环境，所用使用的是npm包管理器直接下载elementUI模块npm i -save element-ui 或者使用npm i -S element-ui或者使用CDN方式

2021-05-29 15:08:24 113

原创 vueUI-elementUI-01

VUEUI Unit01typora (markdown编辑器)自我介绍徐铭 xuming@tedu.cn 15201603213 同微信备注：web2102-中心-名字学习目标当有一个合理需求后，可以以自己的能力整理思路实现代码。学习方法前三阶段重在知识点（以知识点为主，细，慢，全）。后两阶段（重移动端，重在学习框架的应用和编程思维）边听边写与先听后写课程安排VUEUI 5HTML5新特性 6+1微信小程序 9ELementUI

2021-05-29 14:30:34 154

原创 vue3使用

VUE3的使用VUE2绑定的原理vue2的绑定原理使用的是属性访问器和虚拟DOM树的方式，属性访问器将被访问的属性进行保护，然后对被访问的属性的操作都是通过访问器的方式进行操作但是存在问题是只有在首次new Vue的时候添加的属性才能被属性访问器监视到，在后来添加的属性是无法置于属性访问器的监视之下的。然后无法为索引数组的数字下标添加访问器属性vue3的绑定原理ES6的proxy代理对象形象点解释就是在对象外面建立一层围墙，对对象的操作都会被围墙进行过滤拦截优点：对象内部所有现有属性自动被监视

2021-05-29 14:26:31 162

原创 typeScript

typeScripttypescript是微软发布的，严格型的javascript语言编码方式数据类型在TS中，编辑函数变量不在是弱类型型语言形式，必须声明变量的数据类型，无论是形参实参还是函数返回参数function 函数名()：返回值类型{ ... return 返回值； //实际的返回值的类型必须与声明的返回值的类型保持一致}如果函数有参数：function 函数名(形参1：数据类型,形参2:数据类型,...){ ...}如果函数既有形参又有返回值：function 函

2021-05-27 14:58:49 198

原创面试-重点

1、preload和prefetch有什么区别？preload表示预加载，立即下载,特点初始加载缓慢，初始页面加载完成需要的全部已加载prefetch表示懒加载，底层异步加载，初始加载块，初始页面加载完成时底层可能还在异步加载中2、怎么实现完全的懒加载？步骤一：在router/index.js下不使用import方式导入vue文件步骤二：在router字典中使用函数方式加载 { path:'/details/:lid', name:'details', /* we

2021-05-26 20:30:22 162

原创 vue-编程基础-http代理跨域、组件插槽、vuex公共域-13

1、http代理跨域http代理跨域是前端常用的跨域方式、前端的vue脚手架自带有http-proxy代理跨域方式使用方式在前端配置vue-config.js文件,添加代理配置module.exports={ devServer:{ proxy:{ '/api':{ target:'http://xzserver.applinzi.com',//这里是跨域的地址 changeOrigin

2021-05-26 17:12:17 157 1

原创 vue-编程基础-脚手架要点/懒加载-12

1、热编译热加载热编译热加载指的是使用vscode执行vue项目：定义：一旦修改了原代码，ctrl+s保存后，框架会自动重新编译源代码。不用自己反复npm run serve注意:部分操作还是要停止运行后重新启动的，有的操作需要对浏览器的缓存进行清理2、避免组件间样式冲突不同组件中的相同css选择器，最终运行时都会被编译到同一个文件中，会互相覆盖导致样式出错解决：方式一：只要在<style>标签上添加scoped属性即可！原理是系统自动为该组件的样式对应的标签添加一个不重复

2021-05-25 15:40:52 359

原创 vue-编程基础-脚手架项目结构- 11

创建脚手架项目脚手架安装号以后创建脚手架项目，使用命令：vue create 自定义项目名创建项目选项选项一：? Please pick a preset: (Use arrow keys)Default ([Vue 2] babel, eslint)Default (Vue 3) ([Vue 3] babel, eslint)按照需求选择需要的的版本选项二：b. ? Check the features needed for your project: (Press to sele

2021-05-25 14:49:25 115

原创 vue-编程基础-脚手架创建项目-10

脚手架问题：不同公司，不同团队，不同的人搭建的项目结构、文件名千差万别！没有标准。解决方式：今后，任何公司，任何团队，任何人只要搭建框架项目都要用脚手架。什么是脚手架定义:对一个项目标准结构的统一规定！特点：标准化使用方式脚手架的安装因为使用的后端环境是node，所以使用npm管理器管理插件；国外仓太慢，换成国内仓npm config get registry获取当前包管理器地址设置包管理器仓地址npm config set registry https://refistry

2021-05-24 14:19:13 120

原创 vue-编程基础-单页面应用与路由器-09

单页面应用单页面应用简称SPA，这种模式是综合组件化开发实现的；将一个页面划分为各个组件，实现页面的开发单页面应用的实现单页面应用的实现可以分为三步：先创建一个完整的HTML页面，该页面包含vue的基本结构：包含vue实现的父元素标签，以及vue的根组件实现javascript代码<body> <div id="app"> </div> <script> new Vue({ el

2021-05-24 10:47:45 215 1

原创数据库基础

#创建数据库关键词：create用法：create database database_name;注意： *假如要建立的数据库已经存在怎么办？解析：先判断是否存在，存在的话就删除该数据库，不存在就直接创建。代码：drop database if exists TMOOC; create database TMOOC;2、删除数据库关键词：drop用法：drop database database_name;代码：drop

2021-05-23 22:33:13 122 1

原创 vue-编程基础-组件化开发传参问题-08

组件化开发传参问题组件分类全局组件：在全局都可以使用的组件局部组件：只在局部位置起作用（父组件下）的组件根组件：根组件就是创建VUE的对象，本身就是根组件## 父子组件的使用方式组件的html中的代码使用VUE的html文件基本样式<div id='app'> <父组件></父组件></div>根组件// 这是使用VUE的基本方式，同时也是创建根组件的方式let app

2021-05-23 22:32:12 80

原创 HTML-编程基础-元素2-03

块状元素与行内元素#块状元素表示的是该元素使用的时候必须单独占用一行#行内元素是该元素使用的时候不需要单独占用一行，多个元素使用的时候会在同一行内显示#常用的块状元素：div、p、hn标签#常用的行内元素：span、b、i、u标签分隔线元素<hr>#分隔线元素是单标签元素#分隔线元素是空标签元素，块状元素#作用：在接下来的页面中显示一条单独占用一行的线#常用属性：size 、width、align、color路径URL#同意资源定位器，用来标识网络中所

2021-05-23 22:29:48 83

原创 vue-编程基础-组件化开发-07

一、组件化开发问题：如果一个页面太大了！一个人开发很慢。就需要多人同时协作开发一个大的页面。但是，操作系统不允许多个人同时修改一个文件今后，几乎所有的大型前端项目都采用组件化开发。什么是组件化开发？拿到一个页面后，先划分组件功能区域。然后，再用多个文件，分别保存一个页面的多个组件。最后，运行时，再将多个组件拼接回HTML文件中一起运行优点便于多人协作开发，提高开发效率松耦合：一人出错不影响其他人使用方法拿到页面后，先划分功能区域，为每个区域，都创建一个专门的组件文件，将来保存

2021-05-21 18:12:01 81

原创 vue-编程基础-7大功能模板-06

一、绑定样式:今后只要一个效果需要同时修改多个css属性时，都用class绑定(1).不好的方式:将整个class作为一个字符串变量绑定缺点: 及其不便于只修改其中某一个class(2). 用对象语法来绑定:(3).步骤:<元素:class="{ class名1:变量名1, class名2: 变量名2 }">使用方式:data:{ 变量名1: true或false, 变量名2: true或false,}原理:编译时，先用变量值true或

2021-05-21 10:12:16 83

原创 vue-编程基础-样式绑定-05

1、绑定样式1. 绑定内联样式（style）的css属性:(1). 将style属性看成一个普通的字符串属性来绑定:<元素 :style="变量">data:{变量:"css属性1:值1; css属性2:值2;..."}结果: 变量值会成为style属性的值:<元素:style="css属性1:值1; css属性2:值2;...">缺点：极其不便于用程序单独修改其中某一个css属性值<img src="img/1.png" :style.

2021-05-20 11:02:45 94

原创 vue-编程基础-双向绑定-04

1、双向绑定作用：解决使用vue的时候，源码中的变量的值同步表单中值的问题，获取新的内容原因：vue2.x版本中使用的是属性访问器技术；之前学习的内容中，我们可以将data中的数据显示到view中，但是却无法将界面中的内容同步到data中的数据上，这就是典型的单向绑定解决：双向绑定就是解决这一问题的；定义：既能将程序中的变量值，更新到页面中显示。又能实时将页面中的修改的新值，反向更新回程序中的变量里。【view——>model，model——>view】使用场景：常用的使用

2021-05-20 10:50:46 106

原创 vue-编程基础-指令-03

1、指令：v-on作用：专门为元素绑定事件的指令简写：【@事件名】【简写符号--@】使用方式：原生使用方式：【<元素v-on:事件名="事件处理函数(实参,...)">】简写使用方式：【<元素 @事件名="事件处理函数(实参,...)" >】简写方式二：【<元素 @事件名=‘事件函数’>】【不带有参数的】methods:【试讲名（）{.....}】【将方法实现】<div id="app"> <!--点在div的哪个位

2021-05-20 09:44:42 168

原创扩展：使用js和css写了一个时钟

<!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>D.

2021-05-19 19:53:30 109

原创 HTML-编程基础-HTML元素-02

1、Html元素#html元素使用<>符号来表示，成为标记或者元素#html元素有两种，分别是闭合标签，与单标签（非闭合标签）闭合标签#必须使用结束标签闭合，否则不规范，可能解析错误<h1>标签</h1>单标签#单标签是不需要进行闭合的直接有开始标签就行了<imgsrc=”….“/>2、元素#每一个正确的标签都是一个元素，元素是一个超文本文件的基本单元#元素之间可以进行嵌套，到时必须按照标签的规则进行闭合#最新本

2021-05-18 19:40:17 70

原创 html-编程基础-简单认知01

1、Html5基础什么是internetInternet是一个全球性的计算机互联网络，常被称为国际互联网或者因特网Internet提供的基本服务常用的功能有email，www，BBS，ftp等基本实现技术#分组交换原理：互联网的信息交换原理是将需要交换的信息分成各个小的数据包，进行传输，然后在目标服务器或者客户端进行组合#TCP/IP协议2、什么是web#Web 是运行在internet上的最流行的应用之一#web应用的出现极大的推动了internet的普及与发展

2021-05-18 19:25:57 65

原创 vue-编程基础-插值语句、指令-02

1、绑定语法: 学名:插值语法Interpolation插值语法就是在HTML中插入js中定义的变量的值，与之前的dom操作元素内容作用相同，却别是更加方便简化定义：在界面中标记哪里可能发生变化的特殊的语法使用方式：<元素>{{变量名}}</元素>特征：双花括号原理：开局, new Vue()扫描到这里时，就会将这个元素保存到虚拟DOM树中，当【{{值}}】中的变量在new Vue()中被修改时，虚拟DOM树就会找到这个元素，自动更新这个元素的内容与new Vue

2021-05-18 19:15:03 205

原创 vue-编程基础-简介-01

1、什么是VUE？vue是一种由第三方开发的，基于mvvm设计的，渐进式的纯前端框架渐进式的表示：可以逐步在项目中使用vue的部分继承。而不要求必须把整个项目都改为vue纯前端表示：只要有浏览器就可以运行，和后端无关框架表示：可以节省大量重复劳动使用方式：方式一：下载独立的vue的js文件，下载地址：vue官网下载地址||官网方式二：使用CDN方式下载 Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue

2021-05-18 14:53:35 732 1

原创 jquery-编程基础-跨域-09

1. 什么是跨域跨网站区找并、使用资源，甚至域名与ip地址互相访问都是跨域2. 那些情况是跨域(1). <link rel="stylesheet" href="其它网站的css">(2). <script src="其它网站的js文件">(3). <img src="其它网站的图片">(4). <a href="其它网站的网址">(5). <iframe src="其它网站的网页片段">(6). $.ajax({

2021-05-18 10:07:30 72

原创 jquery-编程基础-jquery-AJAX-08

1、jquery ajax中的使用方式$.ajax({url: "服务器端接口地址", type:"get或post",//如果需要传参:data:{ 参数名1:值1, 参数名2:值2, ... },dataType:"json", //自动调用JSON.parse()//当请求响应成功后，自动执行//并自动将服务器端返回的结果，经过JSON.parse()转换后，交给result参数变量 success:function(result){ result就是服务器端返回的结果。

2021-05-18 09:53:45 100

空空如也

swiper插件在vue脚手架中的使用方式