Vue3新特性 Ref语法ref是一个函数,接受一个参数(一般传入原始类型),返回一个响应式对象<template> <div id="nav"> <p>{{count}}</p> <button @click="increase">click</button> </div> <router-view /></template><script lang="ts">
Vue项目,从url中获取参数 加入url为https://www.aaa.com/aaa?code=xxx安装qs模块npm i qshash模式import Qs from 'qs'const query = Qs.parse(location.hash.substring(3))hostory模式import Qs from 'qs'const query = Qs.parse(location.search.substring(1))
vue中修改数组或者对象后,无法触发双向绑定 修改data中的数组,数组发生改变,页面未发生改变可通过$set方法来设置数组的值,该方法有三个参数,第一个是要被设置值的目标对象,第二个是设置值在数组中的索引,第三个是要设置的值<template> <div class="home"> <ul> <li v-for="(item, index) in demoArr" :key="index"> {{item}} </li
通用测试工具jest 该demo再react环境下运行// 测试运算test('test common matcher', () => { expect(2 + 2).toBe(4) expect(2 + 2).not.toBe(5)})// true or falsetest('test to be true or false', () => { expect(1).toBeTruthy() expect(0).toBeFalsy()})// numbertest('test n.
Centos7中使用yum安装最新版node.js 获取最新版的bashcurl --silent --location https://rpm.nodesource.com/setup_14.x | bash -执行安装yum install nodejs
chrome扩展中,content-script与background.js之间的通信 通信的几种方式popup和background通信- background----> popup- popup--->backgroundbackground给popup发消息// background.js中function toPopup () { alert('to popup')}// popup.js中const bg = chrome.extension.getBackgroundPage()document.getElementById('btn').o
TS初体验 安装与运行npm install -g typescripttsc hello.tsTS基本的几种数据类型/** * 数据类型 */let idDone: boolean = falselet age: number = 20let binaryNumber: number = 0b1111let firstName: string = 'valzt'let message: string = `Hello, ${firstName}, age is ${age}`le
Express中第三方模块 密码加密使用bcryptjs对用户密码进行加密加密之后的密码,无法被逆向破解同一铭文密码多次加密,得到的加密结果各不相同,保证了安全性安装npm install bcryptjs使用const bcrypt = require('bcryptjs')// 再注册用户的处理函数中,确认用户名可用后,调用bcrypt.hashSync(明文密码,随机盐长度)方法,对用户的密码进行加密处理// 对用户的密码,进行bcryptjs加密,返回值是加密之后的字符串userinfo.passw
Express中的身份认证 不同开发模式下的身份认证服务端渲染和前后端分离这两种开发模式,有着不同的身份认证方案:服务端渲染推荐使用Session认证机制前后端分离推荐使用JWT认证机制HTTP协议的无状态性了解HTTP协议的无状态性是进一步学习Session认证机制的必要前提HTTP协议的无状态性,指的是客户端每次的HTTP请求都是独立的,连续多个请求之间没有直接的关系,服务器不会主动保留每次HTTP请求的状态如何突破HTTP无状态的限制通过cookie来认证身份什么是Cookiecookie是存储
Web开发模式 Web开发模式基于服务端渲染的传统Web开发模式基于前后端分离的新型Web开发模式服务端渲染的Web开发模式服务端渲染的概念:服务器发送给客户端的HTML页面,是在服务器通过字符串的拼接,动态生成的。因此,客户端不需要使用Ajax这样的技术额外请求页面的数据app.get('/index', (req, res)=>{ // 要渲染的数据 const user = { username: 'lzt', age:18 } const html = `<h1>姓名:${us
Express知识总结 创建服务器// 引入expressconst express = require('express')// 创建服务器const app = express()// 监听80端口app.listen(80, ()=>{ console.log('服务器启动成功')})GET请求// 引入expressconst express = require('express')// 创建服务器const app = express()app.get('/get', (req,
Vue中父子组件生命周期顺序 加载渲染过程父beforeCreate()->created()->beforeMounted()->子beforeCreate()->created()->beforeMounted()->mounted()->父mounted()更新过程父beforeUpdate()->子beforeUpdate()->updated()->父updated()销毁过程父beforeDestroy()->子beforeDestro
vscode中,vue代码格式化配置 安装 eslint 和 vetur 插件在setting.json中输入如下代码// 添加进你的vscode的 setting.json"eslint.autoFixOnSave": true,"eslint.validate": [ "javascript",{ "language": "vue", "autoFix": true },"html", "vue"],...
Vue中配置跨域 在vue.config.js中写入如下代码module.exports = { devServer: { proxy: { '/api': { target: 'http://v.juhe.cn/toutiao/', ws: true, changeOrigin: true, pathRewrite: { '^/api': '' } } } }}tar
微信小程序基础 小程序目录结构├── pages ······································ 【目录】存放所有的小程序页面│ │── index ···································· 【目录】index 页面│ │ ├── index.wxml ······························· 【文件】 index 页面的结构│ │ ├── index.js ···························
vue项目中,使用prettier格式化代码配置 在vue项目根目录下新建一个文件.prettierrc在文件中输入如下代码,并保存{ "semi": false, "singleQuote": true, "htmlWhitespaceSensitivity": "ignore"}在.eslintrs.js中的rules对象下,新增如下代码'space-before-function-paren': 0...
Vuex Vuex概述Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享使用Vuex管理数据的好处:能够在vuex中集中管理共享的数据,便于开发和后期进行维护能够高效的实现组件之间的数据共享,提高开发效率存储在vuex中的数据是响应式的,当数据发生改变时,页面中的数据也会同步更新Vuex中的核心特性StateState提供唯一的公共数据源,所有共享的数据都要统一放到Store中的State中存储例如,打开项目中的store.js文件,在State对象中可以添加
Vue脚手架介绍 Vue脚手架可以快速生成Vue项目基础的架构。安装3.x版本的Vue脚手架:npm install -g @vue/cli基于3.x版本的脚手架创建Vue项目:使用命令创建Vue项目命令:vue create my-project选择Manually select features(选择特性以创建项目)勾选特性可以用空格进行勾选。是否选用历史模式的路由:nESLint选择:ESLint + Standard config何时进行ESLint语法校验:Lint on savebab.
Webpack ES6模块化ES6模块化规范中定义:每一个js文件都是独立的模块导入模块成员使用import关键字暴露模块成员使用export关键字推荐使用ES6模块化,因为AMD,CMD局限使用与浏览器端,而CommonJS在服务器端使用。ES6模块化是浏览器端和服务器端通用的规范.nodejs中安装babel安装babelnpm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/nodenpm insta