2021年03月_琴～～

原创 vue的特定以及优势所在

1、vue的特点以及优势所在：（1）轻量级；（2）双向数据绑定；（3）指令；（4）组件化；（5）客户端路由；（6）状态管理在这里需要注意的是：vue必须在ES5版本以上的环境使用，一些不支持ES5的就浏览器中无法运行vue;2、vue中基本指令（1）v-text（2）v-html:如果在页面中展示的内容包含html标签时，用文本插值语法或者v-text指令都会在页面中原样输出内容，不会解析成正常的HTML语法，此时可以使用v-html来解析HTML标签；====》这里需要注意的是：在网站

2021-03-27 10:19:45 313 1

原创 redux的简单介绍、优音乐项目

一.redux1.下载安装cnpm i redux --save2.核心StorecreateStoreimport { createStore } from 'redux';//得到store对象const store = createStore(fn);Stateconst state = []/得到状态数据const state = store.getState();ActionState 的变化，会导致 View 的变化。但是，用

2021-03-27 09:28:54 93

原创 react的美团项目

美团1.创建项目create-react-app 项目名称npm startnpm i react-router-dom --save 路由插件2.项目清空工作src App.jsx index.js3.项目目录src assets #静态资源文件 pages #你的代码 utils #工具 store #做状态管理(flux redux) App.jsx index.js4.项目配置在index.js文件中 // 1.引入重置样式 import '

2021-03-27 09:27:09 396

原创 react路由详细介绍、flux了解

一.路由1.路由模式HashRouterHashRouter 访问 http://localhost:3000/#/ReactDOM.render( <HashRouter> <App /> </HashRouter> , document.getElementById('root'));BrowserRouterBrowserRouter 访问 http://localhost:30

2021-03-27 09:23:43 188

原创组件通信、表单处理、生命周期、ref属性、插件使用、ui组件库

一.组件通信1.父组件向子组件传递数据父组件: 通过自定义属性传递数据子组件:通过this.props接收数据父组件:import React, { Component } from 'react'import Child from './Child'export default class Parent extends Component { constructor(){ super() this.state = { name

2021-03-27 09:21:57 160

原创 react介绍、下载安装、jsx模板语法介绍、组件、脚手架、事件处理、事件对象、组件状态数据的定义与更新

一.介绍react是facebook公司中由前端开发团队进行开发和维护定义.用于构建用户界面的JavaScript库特点:react是基于组件进行开发数据驱动和视图渲染相结合来构建单页面应用react中没有基本指令,计算属性,过滤器,监听器等等react中没有数据双向绑定React是react.js的核心Reactdom是react-dom.js的核心二.下载安装方式一: <script src="https://unpkg.com/react@16/umd/reac

2021-03-27 09:19:19 515

原创手机小U商城项目

小U商城项目一.项目搭建1.vue init webpack umall 创建项目2.cnpm i 安装依赖项3.cnpm i axios qs vant vuex --save 安装依赖项二.项目清空工作assets 目录清空components 目录清空router/index.js 有关helloWord删除App.vue 根组件只留模板main.js 唯一入口文件三.页面布局一级路由出口 login register index goodsL

2021-03-23 21:25:16 1359 1

原创配置ts编译文件、vue3.0

一.配置ts编译文件配置项目1.新建目录 demots2.tsc --init 初始化tsconfig.json文件3.修改tsconfig.json文件 { "compilerOptions":{ "outDir":"./dist" }, "include":['./src'] }4.新建 dist src5.tsc -p tsconfig.json -watch1.接口(interface)定义// 接口定义// 关键字 interfaceinterfa

2021-03-23 21:22:52 979 1

原创 ssr渲染、nuxt、ts

一.ssr(服务端渲染)1.定义server side render:简称服务端渲染.即将组件或者页面通过服务端渲染,最后生成HTML字符串,发送给浏览器,浏览器再将字符串展示为客户端所识别的应用程序.2.ssr的利弊优势1.利于SEO优化,用户体验好2.首屏加载速度快缺点1.增加服务端的压力2.基于node.js核心页面或者组件通过服务端解析,生成HTML字符串.发送给浏览器3.使用步骤:1.新建目录demossr2.进入demossr目录.新建文件app.

2021-03-23 21:21:14 624

原创商品管理、项目打包、git使用、vant

1.商品管理goods.vue<template> <div> <el-button type="success" @click="add">添加</el-button>  <v-add :info="info" ref="add"></v-add>  <v-list @edit="edit">&l

2021-03-23 21:19:35 224

原创遍历菜单、请求头的设置、商品分类、商品规格、图表

1.index.vue(遍历菜单)  <template v-for="item in user.menus">   <el-submenu :index="item.id" :key="item.id" v-if="item.chil

2021-03-23 21:17:44 292

原创角色管理、管理员管理、用户信息存储、退出功能-------后台管理系统

1.角色管理role.vue<template> <div> <el-button type="primary" @click="add">添加</el-button>  <v-add :info="info" ref="add"></v-add>  <v-list @edit="edit">&l

2021-03-23 21:16:35 1109

原创后台管理系统、建库建表、开启服务器、搭建项目、项目目录介绍、代码开发

一.建库建表1.开启mysql服务2.打开navicat,创建数据库名: 见图1所示; 打开doc命令,创建数据名. create database shop1102 use shop1102 source 文件路径建库建表完成. 二.开启服务端shop_admin/config/global.js// 数据库连接参数exports.dbConfig = { host: 'localhost', //数据库主机名 user: 'root',//用户名 p

2021-03-23 21:15:08 420

原创 http和https的区别

1、安全性上，HTTPS是安全超文本协议，在HTTP基础上更强的安全性。简单来说，HTTPS是使用TLS/SSL加密的HTTP协议2、申请证书上HTTPS需要使用ca申请证书；3、传输协议上，HTTP是超文本传输协议，明文传输；HTTPS是更具有安全性的SS加密传输协议4、连接方式和端口上：HTTP的连接简单，是无状态的，端口是80；https是在http基础上使用ssl协议进行加密阐述，端口是443...

2021-03-23 12:47:16 1194

原创模板引擎、nodemon热更新、body-parser、multer、formidable、crypto、cookie-parser、express-session、svg-captcha等

1. 模板引擎 EJS 是一套简单的模板语言，在NodeJS后端利用ejs模板引擎, 生成 HTML 页面优点纯 JavaScript 快速开发执行迅速语法简单: 可以直接在HTML中书写JS代码同时支持前后端环境相比pug, 更贴近于我们现使用的HTML标签语法/*什么是模板引擎模板引擎就是说我们NodeJS中的数据和代码不能直接嵌入到html中我们从数据库中获取的数据无法分配给htnl 那么我们可以创建一

2021-03-22 14:47:43 217

原创 vuex详细介绍以及element-ui

一.vuex1.定义Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化2.安装cnpm i vuex --save3.使用import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ //存储状态数据 state:{}, mutations:{}, act

2021-03-10 19:20:29 239

原创 vue中数据请求的详细过程、stylus预处理器

一.数据请求1.axios定义名称:爱可信,爱可信基金会axios是基于Promise的ajax模块.通过http发起客户端请求.2.安装npm i axios --save3.配置代理(跨域)方式一:config/index.js// 设置跨域请求 proxyTable: { "/api":{ target:"http://localhost:3000", changeOrigin:true,//是否跨域, path

2021-03-10 19:14:19 238

原创全局过滤器、动画、懒加载、别名和name、路由模式等

三.全局过滤器main.js // 全局过滤器的封装 import comFilters from './filters' for(let i in comFilters){ Vue.filter(i,comFilters[i]) } filters priceFilter.js export default (e)=>{ // e:值要过滤的对象 return e.toFixed(

2021-03-10 09:04:17 132

原创美团项目基础步骤、守卫相关内容

一.美团项目1.项目搭建1.vue init webpack meituan2.在安装项目过程选择安装路由即可.如果项目中没有路由: npm i vue-router --save3.启动: npm run dev2.清空工作assets: logo.png 删除components: helloWord删除App.vue 内容清空写vue模板router/index.js 将有关helloWord的内容删除main.js3.项目目录划分src: assets: 静态资

2021-03-10 08:54:54 305

原创有关于路由的基础使用（一级路由和二级路由）

一.路由1.定义node中的路由:web服务器根据用户输入的不同url地址,来返回不同的页面.vue中路由:路由是vue.js中的一个路由组件,需要结合组件来实现单页面应用.2.路由的使用(一级路由)2-1.安装项目vue init webpack 项目名称npm run dev2-2.清空工作assest: logo.png删除components: helloWord.vue 删除App.vue : 内容清空main.js2-3.新建三个组件新建logi

2021-03-10 08:47:14 1838

原创父传子、子传父、非父子通信、is和ref、jquery、插槽slot

一.父传子分析:1.父组件传值给子组件,需要先找两个组件之间的关联2.找关联为:组件的调用:<v-child></v-child>  <input type="text" v-model="name"> <div>name的值为:{{name}}</div> <!-- 2.解决父传子: 父变,子变,子变,父变. 需要传递一个Jso

2021-03-06 14:36:49 677

原创组件的注册和使用、脚手架

一.组件介绍和注册1.定义:组件是组成完整页面常用功能模块的封装简单来讲:组件就是组成页面的零部件2.组件的组成部分视图(html)样式(css)逻辑(js)3.作用提高开发效率(提高代码的复用率)提高代码的可维护性4.注册全局注册书写格式Vue.component('组件的名称',{ template:'要渲染到页面中的内容'})eg: // 全局注册组件Vue.component('one',{ template:'<div&gt

2021-03-04 19:49:08 218 2

原创 $set的用法、监听器、计算属性、过滤器、动画

1.$set往对象或者数组对象中添加新的属性使得该属性必须赋予get和set方法,才能在视图中渲染,往对象中添加新的属性的方式，在这里我们是在挂载完成的时候添加:局部设置: 1.this.$set(操作的对象,'添加新的属性名','新的属性值') 2.Vue.set(操作的对象,'添加新的属性名','新的属性值')全局设置 3.vm.$set(操作的对象,'添加新的属性名','新的属性值')2.侦听器1-1.定义又名:监听器1-2.作用当数据发生改变时,及时作出相应1-3.普通监

2021-03-03 22:33:47 1103

原创表单输入-事件绑定-生命周期

1.表单+表格案例https://www.bootcss.com/<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-

2021-03-02 21:43:16 369

原创 vue简介、基本指令

1.vue简介目的:快速开发,简单官网地址:https://cn.vuejs.org/1-1.vue介绍作者:尤雨溪优点易用只要会HTML.css.JavaScript就可以直接使用灵活不断繁荣的生态系统(vue Router,vuex,服务端渲染)通过script连接一个vue.js库直接开发即可通过安装vue框架实现快速项目开发高效20kB min+gzip 运行大小超快虚拟 DOM浏览器解析一个网页的步骤:1.解析HTML,生成HTML树

2021-03-01 22:09:39 142

yangyanqin2545的博客