首页
统计
关于
Search
1
Sealos3.0离线部署K8s集群
1,147 阅读
2
类的加载
783 阅读
3
Spring Cloud OAuth2.0
744 阅读
4
SpringBoot自动装配原理
705 阅读
5
集合不安全问题
607 阅读
笔记
Java
多线程
注解和反射
JVM
JUC
设计模式
Mybatis
Spring
SpringMVC
SpringBoot
MyBatis-Plus
Elastic Search
微服务
Dubbo
Zookeeper
SpringCloud
Nacos
Sentinel
数据库
MySQL
Oracle
PostgreSQL
Redis
MongoDB
工作流
Activiti7
Camunda
消息队列
RabbitMQ
前端
HTML5
CSS
CSS3
JavaScript
jQuery
Vue2
Vue3
Canvas
Linux
容器
Docker
Containerd
Kubernetes
Python
FastApi
登录
Search
标签搜索
Java
CSS
mysql
RabbitMQ
JavaScript
Redis
JVM
Mybatis-Plus
Camunda
多线程
CSS3
Python
Spring Cloud
注解和反射
Activiti
工作流
SpringBoot
Mybatis
Spring
html5
蘇阿細
相聚有时,后会无期
累计撰写
401
篇文章
累计收到
4
条评论
首页
栏目
笔记
Java
多线程
注解和反射
JVM
JUC
设计模式
Mybatis
Spring
SpringMVC
SpringBoot
MyBatis-Plus
Elastic Search
微服务
Dubbo
Zookeeper
SpringCloud
Nacos
Sentinel
数据库
MySQL
Oracle
PostgreSQL
Redis
MongoDB
工作流
Activiti7
Camunda
消息队列
RabbitMQ
前端
HTML5
CSS
CSS3
JavaScript
jQuery
Vue2
Vue3
Canvas
Linux
容器
Docker
Containerd
Kubernetes
Python
FastApi
页面
统计
关于
搜索到
401
篇与
的结果
2022-05-26
监视属性
当被监视的属性发生变化时,回调函数自动调用,进行相关操作监视的属性必须存在,才能进行监视两种写法:new Vue时传入watch配置通过vm.$watch监视<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>姓名案例_watch实现</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> 姓:<input type="text" v-model="firstName"> <br><br> 名:<input type="text" v-model="lastName"> <br><br> 姓名:<span>{{fullName}}</span> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { firstName: '张', lastName: '三', fullName: '张-三' }, watch: { firstName(newValue) { //定时器指定的回调不是Vue实例管理的,此处可以用箭头函数 setTimeout(() => { this.fullName = newValue + '-' + this.lastName }, 1000) }, lastName(newValue) { this.fullName = this.firstName + '-' + newValue } } }) </script> </body> </html>深度监视:Vue中的watch默认不监测对象内部值得改变(一层);配置deep:true可以监测对象内部值改变(多层)注:Vue自身可以监测对象内部值得改变,但Vue提供的watch默认不可以 使用watch时应根据数据的具体结构,决定是否采用深度监视<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>天气案例_深度监视(简写)</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>今天天气很{{info}}</h2> <br> <button @click="changeWeather">切换天气</button> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { isHot: true, }, computed: { info() { return this.isHot ? '炎热' : '凉爽'; } }, methods: { changeWeather() { this.isHot = !this.isHot; } }, watch: { //正常写法 /* isHot: { //immediate: true, //初始化时调用handler //deep: true, //深度监视 handler(newValue, oldValue) { console.log('isHot被修改了', newValue, oldValue) } }, */ //简写(当监视属性不需要配置其他选项时(immediate,deep),可以使用简写) /* isHot(newValue, oldValue) { console.log('isHot被修改了', newValue, oldValue) } */ } }) //正常写法 /* vm.$watch('isHot', { //immediate: true, //初始化时调用handler //deep: true, //深度监视 handler(newValue, oldValue) { console.log('isHot被修改了', newValue, oldValue) } }) */ //简写 vm.$watch('isHot', function (newValue, oldValue) { console.log('isHot被修改了', newValue, oldValue); }) </script> </body> </html>computed与watch的区别:computed能完成的功能,watch也能完成;watch能完成的功能,computed不一定能完成,如:watch可以进行异步操作所有被Vue管理的函数,最好写成普通函数,这时this的指向才是vm或组件实例对象所有不被Vue管理的函数(定时器回调,ajax的回调,Promise的回调等),最好写成箭头函数,这样this的指向才是vm或组件实例对象(涉及Vue原型链)
2022年05月26日
53 阅读
0 评论
0 点赞
2022-05-26
计算属性
定义:要用的属性不存在,要通过已有属性计算得来原理:底层借助了Object.defineproperty方法提供的getter和setterget什么时候执行:初次读取时当依赖的属性发生改变时会被再次调用优点:与methods相比,内部有缓存机制(复用),效率更高,方便调试注:计算属性最终会出现在vm身上,直接读取使用即可; 如果计算属性要被修改,必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变;<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>姓名案例_计算属性实现(简写)</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> 姓:<input type="text" v-model="firstName"> <br><br> 名:<input type="text" v-model="lastName"> <br><br> 姓名:<span>{{fullName}}</span> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { firstName: '张', lastName: '三', }, computed: { //完整写法 /* fullName: { get() { console.log("get被调用了") return this.firstName + this.lastName; }, set(value) { console.log('set--->', value); const arr = value.split('-'); this.firstName = arr[0]; this.lastName = arr[1] } } */ //简写(考虑读取,不考虑修改时,才用简写方式) fullName() { console.log("get被调用了") return this.firstName + this.lastName; } } }) </script> </body> </html>
2022年05月26日
46 阅读
0 评论
0 点赞
2022-05-26
事件处理
1.事件的基本使用使用v-on:click="xxx" 或@click="xxx"绑定事件,xxx是事件名事件的回调需要配置在methods对象中,最终会在vm上methods中配置的函数,不要用箭头函数,this的作用域会被改变methods中配置的函数都是是被Vue所管理的函数,this的指向是vm或组件实例对象@click="xxx" 和 @click="xxx($event)" 的作用一样,后者可以传参<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件的基本使用</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>你好,{{name}}</h2> <!-- <button v-on:click="showInfo">点我提示信息</button>--> <button @click="showInfo">点我提示信息(不传参)</button> <button @click="showInfo1('孙笑川', $event)">点我提示信息1(传参)</button> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { name: '孙笑川' }, methods: { showInfo() { alert("抽象!"); }, showInfo1(value, event) { console.log(value,event); alert("你好," + value); } } }) </script> </body> </html>2.事件修饰符prevent:阻止默认事件(常用);stop:阻止事件冒泡(常用);once:事件只触发一次(常用);capture:使用事件的捕获模式;self:只有event.target是当前操作的元素时才触发事件;passive:事件的默认行为立即执行,无需等待事件回调执行完毕;<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件修饰符</title> <script type="text/javascript" src="../js/vue.js"></script> <style> *{ margin-top: 20px; } .demo{ height: 50px; background-color: skyblue; } .box{ padding: 5px; background-color: skyblue; } .box1{ padding: 5px; background-color: lightpink; } .list{ width: 200px; height: 200px; background-color: azure; overflow: auto; } li{ height: 100px; } </style> </head> <body> <div id="root"> <h2>你好,{{name}}</h2> <!-- 阻止默认事件 --> <a href="https://www.wangchouchou.com" @click.prevent="showInfo">点我提示信息</a> <!-- 阻止事件冒泡 --> <div class="demo" @click="showInfo"> <button @click.prevent.stop="showInfo">点我提示信息</button> <!-- 先阻止默认事件,再阻止冒泡事件(修饰符可以连续写) --> <!---- <a @click.prevent.stop="showInfo">点我提示信息</a> --> </div> <!-- 事件只触发一次 --> <button @click.once="showInfo">点我提示信息</button> <!-- 使用事件的捕获模式 --> <div class="box" @click.capture="showMsg(1)"> div1 <div class="box1" @click="showMsg(2)"> div2 </div> </div> <!-- 只有event.target是当前操作的元素时才触发事件 --> <div class="demo" @click.self="showInfo"> <button @click="showInfo">点我提示信息</button> </div> <!-- 事件的默认行为立即执行,无需等待事件回调执行完毕 --> <!-- wheel 鼠标滚轮 scroll 滚动条 --> <ul class="list" @wheel.passive="demo"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ el: '#root', data: { name: '孙笑川' }, methods: { showInfo(e) { //阻止事件默认行为,此处为点击后不跳转 //e.preventDefault(); alert("抽象!"); console.log(e.target) }, showMsg(msg) { console.log(msg) }, demo() { for (let i = 0; i < 100000; i++) { console.log('@') } console.log("循环执行完毕") } } }) </script> </body> </html>3.键盘事件常用的按键别名回车 enter删除 delete (捕获”删除“和”退格“按键)退出 esc空格 space换行 tab(必须配合keydown使用)上 up下 down左 left右 rightVue未提供别名的按键,可以使用原始的key值绑定,需转换为kebab-case(短横线命名)系统修饰键:ctrl、alt、shift、meta配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发配合keydown使用:正常触发事件可以使用keycode指定具体的按键Vue.config.keyCode.自定义键名 = 键码,可以定制按键别名<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>键盘事件</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>你好,{{name}}</h2> <!-- keydown 按下 keyup 按下松手 @keyup.ctrl.y 只有ctrl + y才触发事件 --> <input type="text" placeholder="按下回车提示输入" @keyup.ctrl.y="showInfo"> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 const vm = new Vue({ el: '#root', data: { name: '孙笑川' }, methods: { showInfo(e) { //原始判断 // if (e.keyCode !== 13) { // return; // } else { // console.log(e.target.value) // } console.log(e.target.value) } } }) </script> </body> </html>
2022年05月26日
25 阅读
0 评论
0 点赞
2022-05-26
数据代理
Vue中的数据代理:通过vm对象来代理data对象中属性的操作(读/写)优点:方便操作data中的数据基本原理:通过Object.defineProperty()把data对象中所有属性添加到vm上,同时指定getter/setter,在getter/setter内部去操作(读/写)data中对应的属性(1)数据代理<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据代理</title> </head> <body> <!-- 通过一个对象代理另一个对象中属性的操作 --> <script type="text/javascript"> let obj = {x:100} let obj1 = {y:200} Object.defineProperty(obj1, 'x', { get() { return obj.x }, set(value) { obj.x = value } }) </script> </body> </html>(2)Vue中的数据代理<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中的数据代理</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>你好,{{name}}</h2> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false /* let data = { name: '孙笑川' } //创建Vue实例 const vm = new Vue({ el: '#root', //vm._data = options.data = data //vm._data === data true data }) */ const vm = new Vue({ el: '#root', data: { name: '孙笑川' } }) </script> </body> </html>(3)Object.defineProperty方法<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据代理</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> </div> <script type="text/javascript"> let num = 33; let person = { name: '孙笑川' } Object.defineProperty(person, 'age', { // value: 33, // //控制属性是否可以枚举,默认值false // enumerable: true, // //控制属性是否可以被修改,默认值false // writable: true, // //控制属性是否可以被删除,默认值false // configurable: true //当读取age属性时,get函数(getter)就会被调用,且返回值就是age的值 get() { console.log("age属性被读取了"); return num; }, //当修改age属性时,set函数(setter)就会被调用,同时收到修改的具体值 set(value) { console.log("age属性被修改了,值为:", value); num = value }, }) console.log(person) </script> </body> </html>
2022年05月26日
32 阅读
0 评论
0 点赞
2022-05-26
MVVM模型
M:Model模型,对应data中的数据V:View视图,模板VM:ViewModel视图模型,Vue实例对象data中所有的属性,最后都出现在了vm身上;vm身上所有的属性及Vue原型上的所有属性,在Vue模板中都可以直接使用
2022年05月26日
30 阅读
0 评论
0 点赞
2022-05-26
el与data的两种写法
el的两种写法:new Vue时配置el属性先创建Vue实例,之后通过vm.$mount('#root')指定el的值data的两种写法:对象式函数式(使用组件时,必须使用函数式)注:由Vue管理的函数,不能写箭头函数(作用域)<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>4.el与data的两种写法</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>你好,{{name}}</h2> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 //el的两种写法 /* const vm = new Vue({ //指定当前实例为哪个容器服务 //写法一 // el: '#root', data: { name: '孙笑川' } }) //写法二 vm.$mount('#root') */ new Vue({ el: '#root', //写法一:对象式 // data: { // name: '孙笑川' // } //写法二:函数式 data: function () { console.log(this) //此处的this是Vue实例 return{ name: '孙笑川' } } }) </script> </body> </html>
2022年05月26日
60 阅读
0 评论
0 点赞
2022-05-26
数据绑定
单向绑定v-bind:数据只能从data流向页面双向绑定v-model:data <===> 页面,双向注:双向绑定一般应用在表单类元素上(input、select等) v-model:value可以简写为v-model,因为它默认收集的就是value的值<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数据绑定</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <!-- 普通写法 --> <!-- 单向数据绑定:<input type="text" v-bind:value="name">--> <!-- <br>--> <!-- 双向数据绑定:<input type="text" v-model:value="name">--> <!-- 简写 --> 单向数据绑定:<input type="text" :value="name"> <br> 双向数据绑定:<input type="text" v-model="name"> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ //指定当前实例为哪个容器服务 el: '#root', data: { name: '孙笑川' } }) </script> </body> </html>
2022年05月26日
25 阅读
0 评论
0 点赞
2022-05-26
模板语法
插值语法用于解析标签体内容,{{xxx}} xxx是js表达式,且可以直接读取到data中的所有属性指令语法用于解析标签(包括:标签属性、标签体内容、绑定事件)例:v-bind:href="xxx" 或简写为:href="xxx"<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模板语法</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h1>插值语法</h1> <h3>你好,{{name}}</h3> <hr> <h1>指令语法</h1> <a v-bind:href="url">点我跳转</a> <a :href="url">你好,{{person.name}}</a> </div> <script type="text/javascript"> //关闭开发环境提示 Vue.config.productionTip = false //创建Vue实例 new Vue({ //指定当前实例为哪个容器服务 el: '#root', data: { name: '孙笑川', url: 'https://www.wangchouchou.com', person: { name: '药水哥' } } }) </script> </body> </html>
2022年05月26日
137 阅读
0 评论
0 点赞
1
...
19
20
21
...
51