shell基础 变量测试；内容替换 变量测试与内容替换 变量测试与内容替换 ☆☆☆☆☆:很重要，工具表格，不需要记忆。需要的时候，来查询就好了。 变量置换方法变量y没有设置变量y为空值变量y设置值x=${y-新值}x=新值x为空x=$yx=${y:-新值}x=新值x=新值x=$yx=${y+新值}x为空x=新
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box1{ width: 100px; height: 100
# 自定义ref 可以在响应式的逻辑过程中添加逻辑 import { customRef } from '@vue/reactivity' export default { name: 'Demo', setup(){ function myRef(value){ return customRef((track,trigger)=>{ return { get(){ trac
详情可见 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>67-VueRouter-Watch属性</title> <script src="js/vue.js"></script> <script src="js
父子组件传值时，父组件从接口获取数据，通过props传递给子组件。实际情况下：父组件获取数据有时间延迟，传递的props值为空，子组件接收的数据为props默认值 渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted
watch: { isHot: { immediate: true, // 初始化时让 handler 调用一下 // handler 什么时候调用？当 isHot 发生改变时 handler(newValue, oldValue) { console.log('isHot被修改了', newValue, oldValue)
监视属性——watch 改变天气 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="weather"> <h2>today is so {{
监视属性watch： 1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作 2.监视的属性必须存在，才能进行监视！！ 3.监视的两种写法：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>天气案例_监视属性_简写</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js&qu
1.监视属性watch: 1.当被监视的属性变化时,回调函数自动调用,进行相关操作 2.监视的属性必须存在,才能进行监视!! 3.监视的两种写法: (1).new Vue时传入watch配置 (2).通过vm.$watch监视 html里直接{{isHot}} <script type="text/javascript"> const vm = new Vue({ el: "
好家伙, 1.vue2中的watch是调用配置项,(只能写一个) vue3中的watch是一个函数(可以写很多个) 2.watch一些用法: 这里是定义的数据 set up(){ let sum =ref(0) let msg = ref('你好啊') let person = reactive({ name:'张三' job:{ j1{
数据绑定： 单向绑定（v-bind):数据只能从data流向页面 双向绑定（v-model)：数据不仅能从data流向页面，也能从页面流向data el的两种写法： new Vue时配置el属性 先创建vue实例，随后再通过vm.$mount('#root')指定el的值 data的两种写法： 对象式 函数式——学习到组件时，必须使用函数式
class Observer{ // 接受传入的对象，将这个对象转换为getter/setter constructor(data) { this.data = data // 遍历数据 this.walk(data) } // 封装用于数据遍历的方法 walk(data) { // 将遍历后的数据都转换成getter/setter Object.keys(data)
// 监视一个ref定义的响应式数据 watch(sum,(newValue,oldValue)=>{ console.log('sum变化了',newValue,oldValue) }),{immediate,true} // 监视多个ref定义的响应式数据 watch([sum,msg],(newValue,oldValue)=>{ console.log('sum或者msg变化了',newValue,oldValue) })
1.1 Object.defineProperty 这个方法接收3个参数，属性所在对象，属性名字，描述符对象。描述符对象包含4种类：configurable,enumerable,writable,value。尤其注意configurable属性如果改为false后再代码后面再次改动会抛出错误。 var person ={} Object.defineProperty{Pers
//尝试创建一个可以执行简单动画的函数 /* * 参数： * obj:要执行动画的对象 * attr:要执行动画的样式，比如：left top width height * target:执行动画的目标位置 * speed:移动的速度(正数向右移动，负数向左移动) * callback:回调函数，这个函数将会在动画执行完
前端实现二级联动 今天遇到的需求是做一个下拉框的二级联动，但是不是通常的二级联动 需求： 子系统和分行代码都是根绝后台接口获取的数据 根据子系统展示不同的分行代码 分行代码后端返回的是一坨数据，需要前端处理（但是有规律，还好） 预期结果：选择子系统之后，点击分行代码出现与之匹配
笔记来源：尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)_哔哩哔哩_bilibili 目录定时调用与延时调用1、定时调用setInterval()clearInterval()<练习1：定时图片切换><练习2：div移动优化>2、延时调用setTimeout()、clearTimeout()3、定时器的应用（一）<练习：
function bigNumberTransform (value) { const newValue = ['', '', ''] let fr = 1000 let num = 3 let text1 = '' let fm = 1 while (value / fr >= 1) { fr *= 10 num += 1 // console.log('数字', va
JavaScript中对象的属性分为俩种：数据属性、访问器属性。 1.数据属性 数据属性包括四个特性(可称为属性描述符）： Value:数据属性才有的专门读写属性值的位置，默认值为undefined Writable:表示属性的值是否可以被修改，默认为true enumberable:表示属性是否可以被遍历（通过for-in循环返回
从零开始学VUE之组件化开发(阶段案例) 阶段案例 案例效果 新建index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"&g
vue中watch记录变量变化的值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" c
newValue=app.fullName的值 计算属性的缓存 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="vue-2.5.21/dist/vue.js" type="text/javascript" charset=&qu
效果图如下 代码如下: <template> <div class="app"> <input type="number" step="100" v-model="counter"> <h2>当前计数: {{showNumber.toFixed(0)}}</h2> </div> </template> <scr
思路：给输入框绑定两个事件，一个是键盘按下另一个是键盘抬起，按下时记录上一个值，抬起时获取新输入的值，将二者长度进行对比如果有改变则发起请求。最后将请求的结果放到datalist标签进行展示以供选择。 html <input type="text" class="form-control" list="cars" onkeyup="keyUp(th
