![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE3前端开发
文章平均质量分 71
Java技术集锦
孙卫琴,知名IT作家和Java开发专家,毕业于上海交通大学,已经创作了近二十部软件开发领域的专著,多部作品在同类书籍中位居全国畅销排行榜的榜首。代表著作有:《漫画Java编程》、《精通Spring:Java Web开发技术详解》、《精通Vue.js:Web前端开发技术详解》、《Java面向对象编程》、《Java网络编程核心技术详解》、《精通JPA与Hibernate: Java对象持久化技术详解》、《Tomcat与Java Web开发技术详解》。
展开
-
孙卫琴的《精通Vue.js》读书笔记-Vuex中异步操作
本文参考孙卫琴,杜聚宾所创作的一书此外,还可以通过async/await来执行异步操作,例如。原创 2022-08-31 09:01:16 · 204 阅读 · 0 评论 -
孙卫琴的《精通Vue.js》读书笔记-自定义指令范例:v-drag指令
本文介绍一个比较复杂的自定义指令v-drag,它支持用鼠标来拖曳网页上的特定DOM元素,参见例程1的v-drag.html。用鼠标选中任意一个方框,在整个网页的区域内移动鼠标,方框就会随之移动,松开鼠标,方框就停止移动。在v-drag.html页面上有两个不同颜色的方框,分别对应两个。通过浏览器访问v-drag,html,会出现图1所示的网页。图1 v-drag.html的网页。本文参考孙卫琴,杜聚宾所创作的。例程1 v-drag.html。...原创 2022-08-31 09:00:44 · 128 阅读 · 1 评论 -
孙卫琴的《精通Vue.js》读书笔记-在Vue项目中使用Axios
本文参考孙卫琴,杜聚宾所创作的一书为了在Vue项目中使用Axios,首先要安装Axios插件,还有可选的Vue-Axios插件。Vue-Axios插件能够把Axios与Vue更方便地整合在一起,允许组件通过this.axios的形式来访问Axios。在src/main.js中引入Axios和Vue-Axios插件,参见例程1。例程1 main.js接下来在Vue组件的代码中就可以通过this.axios的形式来访问Axios了。...原创 2022-08-31 09:01:53 · 219 阅读 · 0 评论 -
孙卫琴的《精通Vue.js》读书笔记-组件的递归
在一个组件的模板中,还可以嵌套自身组件,这样就构成了组件的递归。为了避免无限递归,需要设置递归的结束条件。在例程1的recursive.html中,组件的模板会插入自身组件,从而递归遍历访问list数组中的所有嵌套的元素。模板中“”的v-if指令用来设置递归结束条件,当list数组为空,就结束递归。通过浏览器访问recursive.html,会得到如图1所示的网页,list数组中的嵌套内容会以缩进对齐的方式一层层展示出来。图1 recursive.html的网页。本文参考孙卫琴,杜聚宾所创作的。.....原创 2022-08-31 09:02:29 · 86 阅读 · 0 评论 -
孙卫琴的《精通Vue.js》读书笔记-插槽slot的基本用法
答案是肯定的,可以使用Vue的插槽组件来实现。(2)父组件的模板为子组件模板中的组件提供内容,子组件模板的组件读取父组件提供的内容,并把它插入到子组件模板中。在basic.html中,根组件就是组件的父组件。由此可见,组件模板中的组件就像占位标记,它能够把父组件提供的内容插入到子组件模板中组件所在的位置。Vue组件可以像DOM元素一样插入到父组件的模板中。组件模板中的组件能够读取以上内容“Hello”,并把它插入到组件的模板中。(1)在子组件的模板的特定位置插入组件,表示此处存在一个插槽。...原创 2022-08-30 15:17:25 · 139 阅读 · 0 评论 -
孙卫琴的《精通Vue.js》读书笔记-分割setup()函数
本文参考孙卫琴,杜聚宾所创作的一书Vue框架的组合API的主要用途是更加灵活地对项目进行模块化的分割。当setup()函数本身非常庞大,也必须对它进行分割,这样才能发挥组合API的特长。对setup()函数的分割包括两个步骤:(1)把setup()函数分割成多个函数。把处理相关业务逻辑的代码分割到同一个函数中。(2)把从setup()函数中分割出来的每个函数放到单独的.js文件中。...原创 2022-08-30 15:15:01 · 296 阅读 · 0 评论 -
孙卫琴的《精通Vue.js》读书笔记-CSS中DOM元素的过渡模式
通过浏览器访问mode.html,网页一开始显示红色的div1,点击网页上的“切换”按钮,div1进入隐藏过渡阶段,与此同时,div1下方的蓝色的div2进入显示过渡阶段。通过浏览器访问mode.html,网页一开始显示红色的div1,点击网页上的“切换”按钮,div1下方的蓝色的div2进入显示过渡阶段。(2)in-out: B先进入显示过渡阶段, B过渡结束后, A再进入隐藏过渡阶段,A过渡结束后, B取代A的位置。(1)默认:A和B同时过渡,过渡结束后, B取代A的位置。...原创 2022-08-30 15:11:37 · 198 阅读 · 0 评论 -
孙卫琴的《精通Vue.js》读书笔记-命名路由
本文参考孙卫琴,杜聚宾所创作的一书路由可以通过name属性来设置名字,这样便于在其他场合引用路由。由于上述组件的to属性是一个对象表达式,所以需要通过v-bind指令来为to属性赋值。以上组件的to属性的取值为{name: ‘item’, params: {id: item.id}},params属性用来为路径中的id路径参数赋值。做了上述修改后,再次运行helloworld项目,会发现通过路由的名字,也能在网页上正确地导航到Items组件和Item组件。...原创 2022-08-30 15:09:15 · 221 阅读 · 0 评论 -
孙卫琴的《精通Vue.js》读书笔记-路由管理器的基本用法
根组件模板中的组件会根据当前的路由显示相应的组件。组件可以放置在模板的任意位置,相当于一个占位标记,实际要显示的组件会被插入到组件所在的位置。在myroute.html网页上选择“主页”或“关于我们”的链接,路由管理器就会根据它的routes属性所设定的路由,显示相应的HomeComponent组件或AboutComponent组件。路由管理器的routes属性指定路由,即网页中待显示的各个组件和链接的对应关系。在myroute.html中,根组件模板中的组件和组件都来自于Router路由管理器。...原创 2022-08-30 15:06:08 · 192 阅读 · 0 评论 -
孙卫琴的《精通Vue.js》读书笔记-路由导航中抓取数据
本文参考孙卫琴,杜聚宾所创作的一书当用户在浏览器端进行路由导航时,有些目标路由的组件需要从服务器端抓取数据,再把这些数据显示到网页上。抓取数据有两种方式:(1)导航后抓取:在导航完成后,在目标路由的组件的生命周期函数中抓取数据。在抓取的过程中,可以在网页上显示“正在加载中…”的提示信息。(2)导航前抓取:先在导航守卫函数beforeRouteEnter()和beforeRouteUpdate()中抓取数据,接下来再进行导航。...原创 2022-08-30 15:03:39 · 146 阅读 · 0 评论 -
孙卫琴的《精通Vue.js》读书笔记-Vue组件的单向数据流
如果在oneflow.html的网页的输入框输入新的数字,根组件的data1和data2变量会发生更新,组件的v1和v2属性也会被同步更新。由此可见,当父组件的变量与子组件的属性绑定后,如果父组件的变量发生更新,那么子组件的属性会同步更新。子组件获得了父组件传入的属性值后,如果仅仅把它作为初始值,以后还需要做独立于父组件的特定的更新,或者需要依据子组件的属性推算出其他数据,该怎么办呢?在例程1的oneflow.html中,根组件在自己的模板中会把变量data1和data2传给子组件的属性v1和v2。...原创 2022-08-30 15:00:29 · 303 阅读 · 0 评论 -
孙卫琴的《精通Vue.js》读书笔记-注册全局组件和局部组件
本文参考孙卫琴,杜聚宾所创作的一书普通Vue组件按照使用范围,可以分为两种:(1)全局组件:通过Vue应用实例的component()方法注册,可以直接被其他Vue组件访问。(2)局部组件:只有父组件通过components选项注册了一个局部组件,父组件才能访问该局部组件。无论是全局组件还是局部组件,都具有data、methods、computed和watch等选项,而且和根组件一样,也具有类似的生命周期以及生命钩子函数。......原创 2022-08-30 14:56:37 · 240 阅读 · 0 评论 -
孙卫琴的《精通Vue.js》读书笔记-Vue组件的命名规则
对于组件的属性和事件,它们的名字可以遵守lower-kebab-case或者lower-camel-case命名规则。例如“nameOfStudent”就是符合lower-camel-case命名规则的属性名,“name-of-student”是符合lower-kebab-case命名规则的属性名。从表1可以看出,无论组件的名字采用lower-kebab-case或者upper-camel-case命名规则,在外置模板中总是使用lower-kebab-case命名规则。(1)名字中的所有字符采用小写。...原创 2022-08-30 14:52:17 · 213 阅读 · 0 评论 -
孙卫琴的《精通Vue.js》读书笔记-Vue组件的数据监听
如果Vue组件的一个变量num会被频繁更新,并且当变量num每次被更新时,需要进行一系列耗时的操作,比如访问远程服务器的资源,或者通过复杂耗时的运算更新那些依赖变量num的其他变量(比如result变量)。在这种情况下,可以通过Vue框架的数据监听器Watcher来实现对变量num的监听。Vue的watch选项会通过Watcher来监听数据。例程1的mywatch.html演示了watch选项的基本用法。例程1 mywatch.html。......原创 2022-08-30 11:59:42 · 260 阅读 · 0 评论