02 2023 档案

摘要:生命周期简介 1.又名:生命周期回调函数、生命周期函数、生命周期钩子。 2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数。 3.生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。 4.生命周期函数中的this指向是vm 或 组件实例对象。 vm的一生(vm的生命周期): 阅读全文
posted @ 2023-02-27 15:55 罗砂 阅读(7) 评论(0) 推荐(0) 编辑
摘要:简介: 作用:给组件设置权限 beforeRouteEnter(to,from,next){ 通过路由规则,进入该组件时被调用 }, beforeRouteLeave(to,from,next){ 通过路由规则,离开该组件时被调用 }, 操作: 主页面的Home组件: <template> <div 阅读全文
posted @ 2023-02-27 10:51 罗砂 阅读(36) 评论(0) 推荐(0) 编辑
摘要:介绍: beforeEnter独享路由守卫 单独给某个路由进行校验 操作: { name:'xiaoxi', path: 'aboutone', component: aboutone, // 需要校验就写 meta:{isAuth:true,title:'列表一'}, children:[ { p 阅读全文
posted @ 2023-02-27 09:44 罗砂 阅读(44) 评论(0) 推荐(0) 编辑
摘要:简介: 在初始化后被调用,跳转路由之后被调用 实现效果: 跳转到哪个路由哪个路由页的tilte改变文本 实例: import Vue from "vue"; import Router from "vue-router"; import Home from "./views/Home.vue"; i 阅读全文
posted @ 2023-02-27 09:23 罗砂 阅读(32) 评论(0) 推荐(0) 编辑
摘要:介绍: 在跳转前调用检验 对路由进行权限控制 示例: 把路由改为以下格式: import Vue from "vue"; import Router from "vue-router"; import Home from "./views/Home.vue"; import aboutone fro 阅读全文
posted @ 2023-02-26 14:10 罗砂 阅读(35) 评论(0) 推荐(0) 编辑
摘要:切换组件时组件会被销毁,如果想切页面还不会被销毁就使用 <keep-alive></keep-alive>标签可以使展示的内容切换组件时不进行销毁 如果只给路由占位符外写一个keep-alive那他就会把所有能书写在页面上的值都存起来,这时就要用到属性include="名字" 缓存筛选多个可以写成数 阅读全文
posted @ 2023-02-26 10:22 罗砂 阅读(25) 评论(0) 推荐(0) 编辑
摘要:介绍: 编程式导航就是给元素写事件,可以使用query或replace进行传递数据 代码: <template> <div class="aboutone"> <h1>我是Homeone</h1> <ul> <li v-for="item in abouta" :key="item.id"> <!- 阅读全文
posted @ 2023-02-26 09:45 罗砂 阅读(18) 评论(0) 推荐(0) 编辑
摘要:介绍: 组件之间可以通过路由query参数传递数据 需求: 路由配置: import Vue from "vue"; import Router from "vue-router"; import Home from "./views/Home.vue"; import aboutone from 阅读全文
posted @ 2023-02-25 17:16 罗砂 阅读(38) 评论(0) 推荐(0) 编辑
摘要:query语法: this.$router.push({path:"地址",query:{id:"123"}}); 这是传递参数 this.$route.query.id; 这是接受参数 params语法: this.$router.push({name:"地址",params:{id:"123"} 阅读全文
posted @ 2023-02-25 17:03 罗砂 阅读(54) 评论(0) 推荐(0) 编辑
摘要:介绍: 组件之间可以通过路由query参数传递数据 需求: 路由配置: import Vue from "vue"; import Router from "vue-router"; import Home from "./views/Home.vue"; import aboutone from 阅读全文
posted @ 2023-02-25 16:02 罗砂 阅读(62) 评论(0) 推荐(0) 编辑
摘要:效果: 只需要在路由配置下面添加一个children:[ {子路径}, {子路径}, {子路径}, ] 阅读全文
posted @ 2023-02-25 11:42 罗砂 阅读(10) 评论(0) 推荐(0) 编辑
摘要:1.安装 如果是通过脚手架创建的项目可以勾选router选项; 通过指令在编译器的终端下载 (npm i router) vue2的项目只能使用vue3的router版本 2.配置 安装之后你的项目目录就会出现一个在src里的router.js main.js配置 router.js配置 App.v 阅读全文
posted @ 2023-02-25 10:11 罗砂 阅读(42) 评论(0) 推荐(0) 编辑
摘要:不使用mapActions 和 mapMutations的代码 要用的地方字体放大了 <template> <div id="app"> <h1>当前总数为:{{nbr}}</h1> <h2>放大十倍总数为:{{bigSum}}</h2> <h3>我在{{school}}我是{{myname}}</ 阅读全文
posted @ 2023-02-24 13:59 罗砂 阅读(17) 评论(0) 推荐(0) 编辑
摘要:mapState: 首先要在使用sore文件的文件引入: import {mapState} from 'vuex'; 在js;红色的是用到的 mapState可以自动生成 计算属性 <script> import {mapState,mapGetters} from 'vuex'; export 阅读全文
posted @ 2023-02-24 11:49 罗砂 阅读(83) 评论(0) 推荐(0) 编辑
摘要:获取bigSum <template> <div id="app"> <h1>当前总数为:{{$store.state.nbr}}</h1> <h2>放大十倍总数为:{{$store.getters.bigSum}}</h2> <select v-model.number="n"> <option 阅读全文
posted @ 2023-02-24 08:56 罗砂 阅读(14) 评论(0) 推荐(0) 编辑
摘要:App.vue <div id="app"> <h1>当前总数为:{{$store.state.nbr}}</h1> <select v-model.number="n"> <option value="1">1</option> <option value="2">2</option> <opti 阅读全文
posted @ 2023-02-23 15:26 罗砂 阅读(11) 评论(0) 推荐(0) 编辑
摘要:vuex是什么 概念:专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读 / 写),也是一种组件间通信的方式,且适用于任意组件间通信。 什么时候使用Vuex 多个组件依赖于同一状态 来自不同组件的行为需要变更同一状态 安装 方式一 如果用脚 阅读全文
posted @ 2023-02-23 13:12 罗砂 阅读(47) 评论(0) 推荐(0) 编辑
摘要:首先需要做的效果: 静态样式 <div id="app"> <h1>当前总数为:{{nbr}}</h1> <select v-model.number="n"> <option value="1">1</option> <option value="2">2</option> <option val 阅读全文
posted @ 2023-02-23 11:48 罗砂 阅读(17) 评论(0) 推荐(0) 编辑
摘要:vue开发时地址栏上的ip后面会跟着一个#号,如果想去掉这个井号,可以在路由上加上 mode: 'history', 就可以去掉 //设置路由 const router = new VueRouter({ mode: "history", base: __dirname, routes: [ { p 阅读全文
posted @ 2023-02-22 16:50 罗砂 阅读(142) 评论(0) 推荐(0) 编辑
摘要:axios请求 <template> <div id="app"> <button @click="getStudents">获取学生信息</button> </div> </template> <script> import axios from 'axios'; export default{ 阅读全文
posted @ 2023-02-22 16:42 罗砂 阅读(38) 评论(0) 推荐(0) 编辑
摘要:父组件: <propss :pos='persons'></propss> //引入子组件 import propss from './props.vue';data() { return{ inHot: true, n:0, x:1, keyWords:"", // 原始数据 persons:[ 阅读全文
posted @ 2023-02-22 13:49 罗砂 阅读(11) 评论(0) 推荐(0) 编辑
摘要:v-big 点击按钮X加1乘以10 <!-- 自定义函数 --> <div class=" weather "> <h2>当前n是{{x}}</h2> <h2>放大十倍的n<span v-big="x"></span></h2> <button @click="x++">点我n+1</button> 阅读全文
posted @ 2023-02-22 09:29 罗砂 阅读(9) 评论(0) 推荐(0) 编辑
摘要:略过其节点的解析过程 阅读全文
posted @ 2023-02-22 08:48 罗砂 阅读(4) 评论(0) 推荐(0) 编辑
摘要:只在节点渲染一次内容,就被视为静态内容了 阅读全文
posted @ 2023-02-21 17:23 罗砂 阅读(16) 评论(0) 推荐(0) 编辑
摘要:body: <!-- 列表过滤 --> <div class=""> <!-- 模糊查询 --> <input type="text" v-model="keyWords"> <!-- 列表渲染 --> <ul> <li v-for="item in filterPersons" :key="ite 阅读全文
posted @ 2023-02-21 16:26 罗砂 阅读(23) 评论(0) 推荐(0) 编辑
摘要:1 安装工具babel-cli babel-preset-env browserify(webpack) .babelrc配置 { presets":["babel-preset-env"] 2 npx babel src/js -d dist/js 3 打包 npx browserify dist 阅读全文
posted @ 2023-02-20 16:02 罗砂 阅读(47) 评论(0) 推荐(0) 编辑
摘要:NPM和模块化结合使用 前提是要先安装node.js 如果在vscode的终端中一直不成功的话,可以在cmd里,以管理员身份来安装jquery: 使用方法: //修改背景颜色为粉色 // ES6引入jquery写法 import $ from 'jquery';// 类似于node.js:const 阅读全文
posted @ 2023-02-20 16:00 罗砂 阅读(21) 评论(0) 推荐(0) 编辑
摘要:模块化 模块化是指将一个大的程序文件 ,拆分成许多小的文件,然后将小文件组合起来。 模块化的好处 模块化的优势有以下几点: 1.防止命名冲突 2.代码复用 3.高维护性 export是暴露的意思 引入js文件然后打印 htm: <script type="module"> import * as m 阅读全文
posted @ 2023-02-20 14:45 罗砂 阅读(20) 评论(0) 推荐(0) 编辑
摘要:Object.assign 对象的合并 <script> // Object.assign 对象的合并 const config1={ host:'localhost', port:3306, name:'root', pass:'root', test:'test' } const config2 阅读全文
posted @ 2023-02-20 14:03 罗砂 阅读(9) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> class Phone{ // 构造方法 constructor(brand,price){ this.brand 阅读全文
posted @ 2023-02-20 11:34 罗砂 阅读(20) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> function Phone(brand,price){ this.brand = brand this.pric 阅读全文
posted @ 2023-02-20 11:21 罗砂 阅读(10) 评论(0) 推荐(0) 编辑
摘要:<script> //ES5 //手机类 // function Phone(brand,price){ // this.brand = brand; // this.price = price; // } // Phone.phoneName = '手机'; // //添加方法 // Phone. 阅读全文
posted @ 2023-02-20 10:58 罗砂 阅读(10) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> class Shouji{ // 构造方法 名字不能修改 constructor(brand,price){ th 阅读全文
posted @ 2023-02-20 10:50 罗砂 阅读(8) 评论(0) 推荐(0) 编辑
摘要:介绍 ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合。但是“键的范围不限于字符串,各种类型的值(包括对象) 都可以当作键。Map 也实现了 iterator 接口,所以可以使用[扩展运算符]和 [for...of...] 进行遍历。Map的属性和方法: 1.size 返回Map的元 阅读全文
posted @ 2023-02-20 10:28 罗砂 阅读(19) 评论(0) 推荐(0) 编辑
摘要:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>set集合实践</title> </head> <body> <div id="ad"> </div> <div></div> <script> let arr 阅读全文
posted @ 2023-02-20 10:07 罗砂 阅读(11) 评论(0) 推荐(0) 编辑
摘要:set方法可以去重数组 // 声明一个set let e = new Set() let ess = new Set(['张三','李四','王五','李四']) console.log(ess); 寻找元素个数 console.log(ess.size); 添加新的元素 ess.add('赵六') 阅读全文
posted @ 2023-02-20 09:38 罗砂 阅读(23) 评论(0) 推荐(0) 编辑
摘要:调用then方法 then方法返回结果是Promise对象,对象状态由回调函数的执行结果决定 如果回调函数中返回的结果是非promise类型的属性,状态为成功,返回值为对象的成功 then方法是可以只指定一个回调的 <script> // 创建Promise对象 const p =new Promi 阅读全文
posted @ 2023-02-20 09:00 罗砂 阅读(210) 评论(0) 推荐(0) 编辑
摘要:使用表格制作 解释都在注释里 html文件: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>she</title> <link rel="stylesheet" href="./index.css"> </head> <bod 阅读全文
posted @ 2023-02-15 10:03 罗砂 阅读(34) 评论(0) 推荐(0) 编辑
摘要:复制可用 // 接口地址:http://poetry.apiopen.top/sentences (随机获取一句诗词) // 新建一个Promise对象 const Pro = new Promise((resolve, reject) => { // 1.创建对象 const xhr = new 阅读全文
posted @ 2023-02-11 09:51 罗砂 阅读(68) 评论(0) 推荐(0) 编辑
摘要:// 1.引入fs模块 const fs = require('fs') // 2.调用方法读取文件 fs.readFile('./ES6/CCTV.md',(err,data)=>{ // 如果失败,则抛出错误 if(err) throw err; // 如果没有出错,则输入内容 console. 阅读全文
posted @ 2023-02-10 16:51 罗砂 阅读(28) 评论(0) 推荐(0) 编辑
摘要:介绍 Promise是ES6引入的异步编程的新解决方案,语法上Promise是一个构造函数, 用来封装一步操作并可以获取其成功或失败的结果。 1.Promise构造函数:Promise(excutor){ } 2.Promise.Prototype.then方法 3.Promise.prototyp 阅读全文
posted @ 2023-02-10 15:05 罗砂 阅读(114) 评论(0) 推荐(0) 编辑
摘要:介绍 生成器函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同 function * gen{ yiwld '一只没有耳朵'; yiwld'一只没有尾巴' } 生成器函数其实就是一个特殊的函数 异步编程 之前的都是纯回调函数进行异步 创建这个函数的方法 function * gen( 阅读全文
posted @ 2023-02-10 14:25 罗砂 阅读(44) 评论(0) 推荐(0) 编辑
摘要:介绍 迭代器(iterator)是一种接口,为各种不同的数据结构提供统一的访问机制。 任何数据结构只要部署iterator借口,就可以完成遍历操作。 1.ES6创造了一种新的遍历命令for...of循环,ierator接口主要供for...of消费 2.原生具备iterator借口的数据(可用for 阅读全文
posted @ 2023-02-10 11:44 罗砂 阅读(21) 评论(0) 推荐(0) 编辑
摘要:介绍 ES6引入了一种新的原始数据类型Symbol,表示独一无二的值。它是javascript语言的第期中数据类型,是一种类似于字符串的数据类型 Symbol特点 1.Symbol的值是唯一的,用来解决命名冲突的问题 2.Symbol值不能与其他数据进行运算 3.Symbol定义的对象属性不能使用 阅读全文
posted @ 2023-02-10 10:26 罗砂 阅读(30) 评论(0) 推荐(0) 编辑
摘要:介绍 扩展运算符能将[数组]转换位逗号分隔的[参数序列] 声明一个数组 const boby =['张倩','李旺','赵茜'] 声明一个函数 function chuan(){ console.log(arguments); } chuan(...boby) 应用 1.数组的合并 const ku 阅读全文
posted @ 2023-02-10 09:59 罗砂 阅读(16) 评论(0) 推荐(0) 编辑
摘要:一.为什么学习ES6 ES6法人版本变动内容最多,具有里程碑意义 ES6加入许多新的语法特性,编程实现更简单、高效 ES6是前端发展趋势,就业必备技能 1.变量声明以及声明特性 1.变量不能重复 ES5可以重复声明变量但是ES6不能 2.块级作用域 { let aer = '双击打' } conso 阅读全文
posted @ 2023-02-08 11:44 罗砂 阅读(58) 评论(0) 推荐(0) 编辑
摘要:<script> // 开启定时器 setInterval(conuntDown, 1000); //每隔一秒刷新一次 function conuntDown(time) { var nowTime = +new Date(); // 返回的是当前时间总的毫秒数 var inputTime = +n 阅读全文
posted @ 2023-02-08 10:37 罗砂 阅读(14) 评论(0) 推荐(0) 编辑
摘要:解释都在代码里 <script> let arr="asdzcxzcssfdf" 把arr的查找的值给到index let index = arr.indexOf('s') 如果index没有这个元素就往后继续查找 while(index !== -1){ console.log(index); 因 阅读全文
posted @ 2023-02-08 09:08 罗砂 阅读(7) 评论(0) 推荐(0) 编辑
摘要:上代码 当 i 数到 7 的时候终止循环 let a=0; for (let i = 1; i <=100 ; i++) { if (i%7==0) { // 退出循环 break } console.log(i); } 阅读全文
posted @ 2023-02-02 09:27 罗砂 阅读(19) 评论(0) 推荐(0) 编辑
摘要:上代码 只要 i 循环到可以被 7 整除的数就会被忽略 <script> let a=0; for (let i = 1; i <=100 ; i++) { if (i%7==0) { continue } a=a+i } console.log(a); </script> 阅读全文
posted @ 2023-02-02 09:14 罗砂 阅读(23) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示