vue基础知识整理

vue是中国比较流行的前端框架,对后端开发人员非常友善.下面整理了新项目中用到的部分vue知识.

 

一.生命周期

beforeCreate //在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。 created //实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见 beforeMount //在挂载开始之前被调用：相关的 render 函数首次被调用。 mounted //el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。 beforeUpdate //数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。 updated //由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作 activated //keep-alive 组件激活时调用。 deactivated //keep-alive 组件停用时调用。 beforeDestroy //实例销毁之前调用。在这一步，实例仍然完全可用。 destroyed //Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

 

 

 

二.指令

{ { }} 文本插值

Message: { { msg }} 支持js表达式: { { number + 1 }} { { ok ? 'YES' : 'NO' }} { { message.split('').reverse().join('') }}

{ { if (ok) { return message } }}

 

v-bind

1.v-bind 可缩写为冒号:

2.元素带引号是类名,不带引号是data中的值

3.:class 可以和普通的class共存,但是不能有两个:class

 

1.直接绑定data中的值 形如data

:class="sourceBtn.outPatientBtn" data:{ sourceBtn: { outPatientBtn: 'activeBlue', inPatientBtn: '' } }

 

2.直接绑定class类名 形如class:true/false 'class':true/false 此情况下可以省略单引号

:class="{classA:true}" :class="{classA:false}" :class="{classA:1==1}" :class="{classA:1==2}" :class="{activeBlue:timeSlice.recordId!=null}" 这里的activeBlue就是class style里有定义对应样式 :class="[{activeYellow:item.timeSliceId==timeSliceId}]"

 

3.直接绑定class类名 形如 'class'

直接获取: :class="'activeBlue'" 用三元表达式获取: :class="item.appointmentFlag?'activeAllAppointed':''"> 绑定多个::class=" 'classA classB' "

 

 

v-model

1.双向数据绑定,适用于text、radio、checkbox、selected等表单中

2.v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。你应该通过 JavaScript 在组件的 data 选项中声明初始值。所以比如单选框组默认选中状态应该用如下形式:

one data(){ return{ param:'1' //设置默认值为1，即设置第一个单选框为选中状态 } }

 

v-html

使用 v-html 指令用于输出 html 代码

 

v-on

vue中的点击事件

 

v-for

v-for="(item,index) in list" index即索引,从0开始

 

v-if v-show

条件判断 v-if 如果为false,不会渲染html v-show 如果为false,页面不会显示,但html仍然存在

 

 

 

三:过滤器Filter

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

 

{ { message | capitalize }}

 

格式:

vue同样支持全局过滤器和局部过滤器. 当全局过滤器与局部过滤器同名时,默认使用局部过滤器.

局部过滤器:

{ {count|refresh}} filters:{ refresh:function(obj){ return obj+2; } }

 

全局过滤器:

Vue.filter('refresh',function (obj) { return obj+3; });

 

过滤器可以串联：先执行A,再执行B

{ { message | filterA | filterB }}

 

注:过滤器可以接受参数,过滤器默认的第一个参数是message.如下文,filterA实际接受了三个参数(message,arg1,arg2)

{ { message | filterA('arg1', arg2) }}

 

 

 

 

四:computed(计算属性) watch(监听事件)

 

computed:

定义:当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值。

 

computed和methods区别:

1.computed带有缓存功能，而methods不是.

2.computed作为属性调用,methods是函数调用,此处methods不可省略括号(). 比如showDetail是属性调用 而showDetail()是函数调用

{ {showA}}
{ {showB()}}
computed:{ showA:function () { return '计算属性'; } }, methods:{ showB:function () { return '函数值'; } } 结果: 计算属性 函数值

ex:当计算属性和函数名名字相同时,调用computed不会正确获取计算属性值.而是输出.

function n(n){var r=arguments.length;return r?r>1?e.apply(t,arguments):e.call(t,n):e.call(t)}

调用methods正常.

 

 

 

watch:

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

watch主要用于监听vue数据变化.watch可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。

 

基础用法:

这两种监听只能监听普通值,不能监听数组变化

a. a(newValue, oldValue){} 入参为newValue,oldValue

b. 直接写一个method 当监听值变化时,调用method

data: function () { return { a: 0, b: 0, } }, watch: { a(newValue, oldValue) { console.log(newValue); console.log(oldValue); }, b:'updateB' }, methods:{ updateB:function () { console.log(vm.b); } }

 

进阶:深度监听

c. 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深

1.此时a对象的属性a1发生变化,但没有使用深度监听,不会被监听

2.直接对对象使用深度监听,回调函数返回新对象

3.对对象的具体属性使用深度监听,回调函数返回旧属性和新属性.

data: function () { return { a: { a_1:2, a_2:2 }, c: { c_1:2, c_2:2 } } }, watch: { a(newValue, oldValue) { console.log("newVlue:" + newValue); console.log("oldValue:" + oldValue); }, c: { deep: true, handler: function (newValue) { console.log("newVlue:" + newValue.c_1); } }, 'c.c_1': { deep: true, handler: function (newValue, oldValue) { console.log("newVlue:" + newValue); console.log("oldValue:" + oldValue); } } }

 

immediate:正常情况下,watch监听事件只会在监听对象发生变化时才会触发.加上immediate属性后,对象初始化绑定值时就会触发一次监听事件.第一次触发,oldValue为undefined.

data: function () { return { d: 5, d2: 6 } }, watch: { d: { immediate: true, handler(newValue, oldValue) { console.log(newValue); console.log(oldValue); } }, d2: { immediate: true, handler: 'method_b2' } }, methods: { method_b2: function (newValue, oldValue) { console.log(newValue); console.log(oldValue); } }

 

 

 

 

五:component(组件)

template(模板)其实就是占位符.不会渲染成html.主要服务于component.

 

template存在裸写的情况

ex:这种情况下,不能再添加component,所以原则上不会这么写

var vm=new Vue({ el: '#app', template:`

12341

` })

 

component(组件)

组件是vue的重要组成部分.最大的作用就是复用代码.很多相同的功能可以写成组件,实现多个html复用.

组件分为全局组件(component),局部组件(components)等

ex:

1.组件命名不可以是html默认标签名,比如div,a等

2.组件命名不能用大写,诸如驼峰之类的,都会引起报错

2.vue组件,只能有一个根节点.

3.全局组件中,可以有自己的data,data必须用function返回对象.而不是data:{a:1}这种形式.

4.全局组件必须写在Vue实例创建之前.

 

基础写法:

(全局)Vue.component(tagName, options) options可以用var提出.

 

1.局部组件1

 

2.局部组件2

var chlid={ template: `

组件b

` }; components:{"data-b":chlid};

 

3.全局组件

var c = { template: `

全局组件c

` }; Vue.component("data-c", c); Vue.component("data-d", { template: `

全局组件

` };);

 

4.外部组件

1.使用script标签引入 2.使用import引入js文件或者vue文件

 

5.父子组件,父子组件通信

ex:

1.子组件接受父组件的值:prop

2.同样的prop中 不能出现大写字符等,否则解析时会报错找不到组件.

3.子组件写在父组件同一个文件中时,整个vue实例即父组件.

4.可以新建一个.vue文件写子组件,需要使用export default导出.同样的,父组件需要使用import接收子组件.

 

静态prop(基本没什么用个人感觉):

Vue.component('date-e',{ props:['static'], template:`

{ {static}}

` });

 

动态prop:子组件接受vue实例中data的值并渲染模板

Vue.component('data-f', { props: ['message'], template: '

{ {message}}

' }); data: function () { return { msg: "Hello World!" } }

 

 

父组件往子组件中添加html(详见slot篇)

 

 

 

 

六:slot(插槽)

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性。

 

ex:

1.子组件内插糟slot控制摆放位置

2.子组件里负责挖坑,父组件填坑,放什么内容由父组件决定

 

slot(插槽)顾名思义,即父组件向子组件插入html时候的占位符.子组件内插糟slot控制摆放位置.需要注意的是,如果没使用slot,父组件直接往子组件中写html时,内容不会被渲染.

如下:多云没有使用slot,不会被渲染到页面.

多云 components: { 'data-g': { template: '

今天天气状况

' } }

 

插槽一共就三大类

1.匿名插槽(也叫默认插槽): 没有命名,有且只有一个.匿名插槽有个默认名字default

2.具名插槽: 相对匿名插槽组件slot标签带name命名的

3.作用域插槽: 子组件内数据可以被父页面拿到(解决了数据只能从父页面传递给子组件)

 

 

vue2.6之前

1.匿名插槽(只能有一个)

多云 components: { 'data-g': { template: `

今天天气状况

` } }

 

2.具名插槽

components: { 'data-g': { template: `

今天天气状况

` } }

 

3.作用域插槽( slot-scope)

 

 

vue2.6之后:新增v-slot

 

 

 

 

七:Vue 路由

1.路由:

定义的组件会在 中显示

name属性:通过name属性，为一个页面中不同的router-view渲染不同的组件.name也可以传递参数.name属性可以省略.

{ {$route.name}}可以获取name的值

Go to Foo

{ {$route.name}}

 

var router = new VueRouter({ routes:[ { path: '/foo',component: Foo }, { path: '/bar', component: Bar }] });

 

参数传递:

// 字符串 to apple // 对象 to apple // 命名路由 to apple //直接路由带查询参数query，地址栏变成 /apple?color=red to apple // 命名路由带查询参数query，地址栏变成/apple?color=red to apple

 

 

2.动态路由匹配:

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。对于所有 ID 各不相同的用户，都要使用这个组件来渲染。我们可以在路由中传入参数.动态参数路径参数以冒号开头.同样也可以直接使用/a/b来直接拼接.

const User = { template: '

User

' } const router = new VueRouter({ routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ] })

 

 

3.嵌套路由

嵌套路由，顾名思义，就是在router中在使用router,注册的方法和上面相差不多，但是，注册子路由是需要在children中进行注册。

var routes = [ { path: '/foo', component: Foo, children:[{path:'foo2',component:Foo2}]}, ];

 

 

 

八:Vue this指向问题

1.vue自带的生命周期函数(created,mounted等)中,this指向vue实例.

 

2.自定义函数(包括匿名函数)中,this指向最近的单位,在非严格模式下，如果没有直接调用者，this指的是window.

如下图 mounted为自带的生命周期方法,故此地[1]this指向vue实例

[2]处this指向最近的单位,即windows,所以很显然赋值失败.正确的做法应该是在外部先绑定vue实例.即var vm=this;

mounted() { /* 问题：在内部直接操作this失效？ */ /* 解析：因为在函数内部使用this时，this会指向window，而非vue实例。所以除了vue组件自身方法外，在别的地方调用this时， 首先需要在最外部，设置一个变量，将其绑定上vue实例。*/ var vm=this;[1] window.οnscrοll=function(){ if(document.documentElement.scrollTop>100) { this.isActive=true;[2] vm.isActive=true; }else{ vm.isActive=false; } } }

 

3.箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象。

 

 

 

 

八:Vue操作数组,集合列表

 

Vue.set

Vue.set( target, key, value ) target：要更改的数据源(可以是对象或者数组) key：要更改的具体数据 value ：重新赋的值

 

两种写法 1.target为数组 则key为位置(position) value就是具体map {"adsa":"ads"} demo:Vue.set(this.items,0,{message:"Change Test",id:'10'}) 2.target为对象 则 key value 组成map demo:Vue.set(vm.outPatientDetectionApplications[0], "flag", true);

 

vue操作data

1.增加数组元素 push() 2.删除数组元素 arr.splice(arr.indexOf(ele),length):表示先获取这个数组中这个元素的下标，然后从这个下标开始计算，删除长度为length的元素

 

操作数组(javascript)

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 pop() 方法用于删除并返回数组的最后一个元素。 shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。 unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。 splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

 

reference https://www.jianshu.com/p/71b1807b1815 https://www.jianshu.com/p/e6e8c45e7fd6

 

 

十:小坑

 

第一次进入模态框 v-model无法双向数据绑定 错误原因:vue2.3bug,更新为vue2.6后修正

 

layDate日期控件并不支持v-model双向数据绑定,请使用自带的.done()事件

 

vue和select2组件的坑 select2 api:https://www.520mwx.com/view/67866 vue绑定原生select组件较为简单 n 这种情况下,v-model自动绑定选中的值 1.select2 使用v-model绑定数据会出现问题,出现原因的问题很简单.v-model绑定的是原生组件,但是使用select2时,弃用了原生 组件(可以自行f12看html代码) 解决方法:对于多选的情况,新增/删除时手动维护数据 .on("select2:select", function (e) { vm.inspectionOrderIdList.push(e.params.data.id) }).on("select2:unselect", function (e) { vm.inspectionOrderIdList.splice(vm.inspectionOrderIdList.indexOf(e.params.data.id), 1) 2.selected默认选中属性不能用 解决办法:手动赋值 单选: var ddd = $("#inspection-select").select2(); //获取selectid ddd.val(3).trigger("change"); //设置 value 为four的 option 为选中状态 ddd.change();//告诉select2代码已经更新，需要重载 默认选择有值得第一个 简化: $("#inspection-select").val(vm.inspectionOrderIdList).trigger("change"); 多选: $("#ddd").val(['four','three']).trigger('change')这种方法。 3.select2加载默认值失败 原因:select2修改dom树要放到vue生命周期updated中.update时可以对dom树进行操作.

 

 

 

 

 

 

 

 

 

 

你可能感兴趣的:(vue,过滤器,javascript,html,java)

• 华为OD机试 - 单向链表中间节点（Java & JS & Python & C & C++） 华为OD题库 华为od链表java
  须知哈喽，本题库完全免费，收费是为了防止被爬，大家订阅专栏后可以私信联系退款。感谢支持文章目录须知题目描述输出描述解析代码题目描述给定一个单链表L，请编写程序输出L中间结点保存的数据。如果有两个中间结点，则输出第二个中间结点保存的数据。例如：给定L为1→7→5，则输出应该为7；给定L为1→2→3→4，则输出应该为3；输入描述每个输入包含1个测试用例。每个测试用例：第一行给出链表首结点的地址、结点总
• 学习JavaEE的日子 Day32 线程池 A 北枝 学习JavaEE学习java-eejava线程池
  Day32线程池1.引入一个线程完成一项任务所需时间为：创建线程时间-Time1线程中执行任务的时间-Time2销毁线程时间-Time32.为什么需要线程池(重要)线程池技术正是关注如何缩短或调整Time1和Time3的时间，从而提高程序的性能。项目中可以把Time1，T3分别安排在项目的启动和结束的时间段或者一些空闲的时间段线程池不仅调整Time1，Time3产生的时间段，而且它还显著减少了创建
• SpringMVC设置全局异常处理器 水岸齐天 javaspring
  文章目录背景分析使用@ControllerAdvice（@RestControllerAdvice）+@ExceptionHandler实现全局异常全局异常处理-多个处理器匹配顺序存在一个类中存在不同的类中对于过滤器和拦截器中的异常，有两种思路可以考虑背景在项目中我们有需求做一个全局异常处理，来规范所有出去的异常信息。参考：官方文档分析首先ControllerAdvice(RestControll
• uni-app实现 步骤条 夏夏的码农 uni-app
  实现如图样式html部分代码如下投资期限与收益0?'active':'default'">募集开始1?'active':'default'">募集结束2?'active':'default'">产品成立3?'active':'default'">产品到期0?'active-step1':'step1'">1?'active-st
• v-for 实例 琪33
  v-for实例v-for实例{{item}}{{index+1}}：{{student.name}}-{{student.age}}varapp=newVue({el:'#app',data:{items:[53,23,76,14,54,36,28],students:[{name:'jspang',age:32},{name:'Panda',age:30},{name:'PanPaN',age:
• npm 搭建 Vite 项目 渺小的虫子 viter前端javascript开发语言
  兼容性注意Vite需要Node.js版本>=12.0.0。1、使用npm安装Viter$npminitvite@latest使用npm初始化项目#npm6.xnpminitvite@latestmy-vue-app--templatevue#npm7+,需要额外的双横线：npminitvite@latestmy-vue-app----templatevue2、配置路由：npminstallvue-
• 请简单介绍一下Shiro框架是什么？Shiro在Java安全领域的主要作用是什么？Shiro主要提供了哪些安全功能？ AaronWang94 shirojavajava安全开发语言
  请简单介绍一下Shiro框架是什么？Shiro框架是一个强大且灵活的开源安全框架，为Java应用程序提供了全面的安全解决方案。它主要用于身份验证、授权、加密和会话管理等功能，可以轻松地集成到任何JavaWeb应用程序中，并提供了易于理解和使用的API，使开发人员能够快速实现安全特性。Shiro的核心组件包括Subject、SecurityManager和Realms。Subject代表了当前与应用
• 通俗易懂：什么是Java虚拟机（JVM）？它的主要作用是什么？ 大龄下岗程序员 mysqljavamysqlspring
  Java虚拟机（JavaVirtualMachine,JVM）是一种软件实现的抽象计算机，它负责执行Java字节码（Bytecode）。Java程序并不是直接在物理计算机上运行，而是先由Java编译器将源代码编译成与平台无关的字节码，然后由JVM负责读取字节码并在实际硬件架构上运行。JVM的主要作用包括以下几个方面：1.跨平台性-JVM是Java语言“一次编写，到处运行”（WriteOnce,Ru
• vue 通信方式 hx_1199 vue.js前端
  1、props和$emit父组件向子组件传递数据是通过props传递的，子组件传递给父组件是通过$emit触发事件来做到的。父组件this.$emit("update:page",newVal)-->importChildfrom'./child'exportdefault{name:"Father",components:{Child,},data(){return{articleList:['
• 3、JavaWeb-Ajax/Axios-前端工程化-Element 所谓远行Misnearch #JavaWeb前端ajaxelementuijava前端框架
  P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名
• python转码 Desamond python开发语言
  转码在许多场景中都有应用，以下是一些常见的场景：网页开发：当用户在网页上输入文本时，可能需要将特殊字符（如空格、引号、特殊符号等）进行转码，以防止这些字符对URL或HTML代码产生干扰。文件名处理：在处理文件名时，可能需要将特殊字符进行转码，以避免文件名被错误地解析或显示。数据传输：在数据传输过程中，为了确保数据的完整性和正确性，可能需要将数据中的特殊字符进行转码。数据存储：在数据库或数据存储中，
• 枚举使用笔记 万变不离其宗_8 项目笔记笔记
  1.java枚举怎么放在方法上面的注释里面/***保存*@paramuserId用户id*@paramtype见枚举{@linkcom.common.enums.TypeEnum}*@return*/voidsave(LonguserId,Stringtype);
• Python dict字符串转json对象，小数精度丢失问题 朝如青丝 暮成雪 jsonpython
  一前言JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，dict是Python的一种数据格式。本篇介绍一个float数据转换时精度丢失的案例。二问题描述importjsontest_str1='{"π":3.1415926535897932384626433832795028841971}'test_str2='{"value":10.00000}'print
• VUE 页面禁止缩放（华为平板浏览器可能失效） 唐屁屁儿 JSvuewebviewjavascript
  h5页面移动端禁止缩放、web页面禁止浏览器缩放移动端优先，可禁止用户缩放和双击放大；在App.vue中的script内的方法里加入以下代码：window.onload=function(){document.addEventListener('touchstart',function(event){if(event.touches.length>1){event.preventDefault()
• java实体中返回前端的double类型四舍五入（格式化） 婲落ヽ紅顏誶 java
  根据业务，需要通过后端给前端返回部分double类型的数值，一般需要保留两位小数，使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f
• Java中HashMap底层数据结构及主要参数? 山间漫步人生路 java数据结构开发语言
  在Java中，HashMap的底层数据结构主要基于数组和链表，同时在Java8及以后的版本中，当链表长度超过一定阈值时，链表会转换为红黑树来优化性能。这种结构结合了数组和链表的优点，既提供了快速的随机访问，又允许动态地扩展存储桶的大小。HashMap的主要参数包括：初始容量（InitialCapacity）：这是HashMap在创建时设定的桶数组的大小。默认值为16。这个值可以根据预计存储的键值对
• Java学习笔记01 .wsy. 日常java学习笔记
  1.1Java简介Java的前身是Oak，詹姆斯·高斯林是java之父。1.2Java体系Java是一种与平台无关的语言，其源代码可以被编译成一种结构中立的中间文件（.class，字节码文件）于Java虚拟机上运行。1.2.3专有名词JDK提供编译、运行Java程序所需要的种种工具及资源。JRE是运行Java所依赖的环境的集合。JVM是一个虚构出来的计算机，通过在实际的计算机上仿真模拟各种计算机功
• Vue 常见面试题(一) 安生生申 面试题vue.js前端javascript
  目录1、Vue的最大的优势是什么？（必会）2、Vue和jQuery两者之间的区别是什么？（必会）3、MVVM和MVC区别是什么？哪些场景适合？（必会）1、基本定义2、使用场景3、两者之间的区别4、Vue数据双向绑定的原理是什么?（必会）5、Object.defineProperty和Proxy的区别（必会）6、Vue生命周期总共分为几个阶段？（必会）7、第一次加载页面会触发哪几个钩子函数？（必会）
• UNDERSTANDING HTML WITH LARGE LANGUAGE MODELS liferecords LLM语言模型人工智能自然语言处理
  UNDERSTANDINGHTMLWITHLARGELANGUAGEMODELS相关链接：arXiv关键字：大型语言模型、HTML理解、Web自动化、自然语言处理、机器学习摘要大型语言模型（LLMs）在各种自然语言任务上表现出色。然而，它们在HTML理解方面的能力——即解析网页的原始HTML，对于自动化基于Web的任务、爬取和浏览器辅助检索等应用——尚未被充分探索。我们为HTML理解模型（经过微调
• Java回溯知识点（含面试大厂题和源码） 一成码农 java面试开发语言
  回溯算法是一种通过遍历所有可能的候选解来寻找所有解的算法，如果候选解被确认不是一个解（或至少不是最后一个解），回溯算法会通过在上一步进行一些变化来丢弃这个解，即“回溯”并尝试另一个候选解。回溯法通常用递归方法来实现，在解决排列、组合、选择问题时非常有效。回溯算法的核心要点：路径：也就是已经做出的选择。选择列表：也就是你当前可以做的选择。结束条件：也就是到达决策树底层，无法再做出选择的条件。回溯算法
• Azkaban各种类型的Job编写 __元昊__
  一、概述原生的Azkaban支持的plugin类型有以下这些：command：Linuxshell命令行任务gobblin：通用数据采集工具hadoopJava：运行hadoopMR任务java：原生java任务hive：支持执行hiveSQLpig：pig脚本任务spark：spark任务hdfsToTeradata：把数据从hdfs导入TeradatateradataToHdfs：把数据从Te
• java基础相关面试题详细总结 。。。。。96 java开发语言
  1.Java中的数据类型有哪些？答：Java中的数据类型包括基本数据类型（如整数、浮点数、字符等）和引用数据类型（如类、接口、数组等）。2.什么是面向对象编程（OOP）？答：面向对象编程是一种编程范式，它将数据和对数据的操作封装在一起，形成对象。通过对象之间的交互来实现程序的功能。3.解释类和对象的关系。答：类是对象的抽象描述，而对象是类的具体实例。一个类可以创建多个对象，每个对象都具有类中定义的
• Web前端Html的表单 任家伟 前端html
  表单的关键字：form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读，不可修改，但是可以提交disabled=“disabled”禁用组件不可修改，不能提交type=“password”密码框type=“radio”单
• javascript 日期转换为时间戳，时间戳转换为日期的函数 cdcdhj javascript学习日记javascript开发语言ecmascript
  日期转化为时间戳，主要用valueOf()来进行转化为毫秒时间戳，getTime()IOS系统无法解析转换，所以都有valueOf()letgetTimestampOrDate=function(timestamp){lettimeStamp='';constregex=/^\d{4}(-|\/)\d{2}(-|\/)\d{2}$/;constregex2=/^\d{4}(-|\/)\d{2}(-
• Java面试题：解释JVM的内存结构，并描述堆、栈、方法区在内存结构中的角色和作用，Java中的多线程是如何实现的，Java垃圾回收机制的基本原理，并讨论常见的垃圾回收算法 杰哥在此 Java系列javajvm算法面试
  Java内存模型与多线程的深入探讨在Java的世界里，内存模型和多线程是开发者必须掌握的核心知识点。它们不仅关系到程序的性能和稳定性，还直接影响到系统的可扩展性和可靠性。下面，我将通过三个面试题，带领大家深入理解Java内存模型、多线程以及并发编程的相关原理和实践。面试题一：请解释JVM的内存结构，并描述堆、栈、方法区在内存结构中的角色和作用。关注点：JVM内存结构的基本组成堆、栈、方法区的功能和
• react native 总结 一切顺势而行 reactnativereact.jsjavascript
  reactapp.js相当与vueapp.vueimportReactfrom'react';import'./App.css';importReactRoutefrom'./router'import{HashRouterasRouter,Link}from'react-router-dom'classAppextendsReact.Component{constructor(props){su
• Vue 模版编译原理 I will.874 vue.jsjavascript前端
  当我们使用Vue编写完一个组件以后，Vue会根据模版编译一个render函数，调用render函数生成虚拟DOM，然后将虚拟DOM映射成真实DOM当数据发生变化时，Vue会触发更新视图，调用render函数返回新的虚拟DOM，对比新旧虚拟DOM，修改真实DOM，从而更新页面在此期间，有以下4个关键步骤：模版编译。生成渲染函数render执行render函数生成虚拟DOM首次渲染，根据虚拟DOM生成
• reactive和ref的异同、toRef和toRefs的使用 Niucode vue3vue.js前端javascript
  一、reactive和ref有了reactive为什么还要ref？ref处理起基本数据类型来更加的方便快捷，性能要更好。ref内部值的变化只会触发订阅它的副作用函数（effect）更新，而reactive（Proxy）内部对象的任何属性变化都会触发整个对象的重新渲染。相同点：都是Vue3提供的用于创建响应式数据的函数；在组件中都能够触发视图更新，实现数据的双向绑定。不同点：数据类型：reactiv
• COMP315 JavaScript Cloud Computing for E Commerce zhuyu0206girl javascript开发语言ecmascript
  Assignment1:Javascript1IntroductionAcommontaskincloudcomputingisdatacleaning,whichistheprocessoftakinganinitialdatasetthatmaycontainerroneousorincompletedata,andremovingorfixingthoseelementsbeforeform
• JSON与AJAX：网页交互的利器 入冉心 jsonajax前端
  在现代Web开发中，JSON（JavaScriptObjectNotation）和AJAX（AsynchronousJavaScriptandXML）是两项不可或缺的技术。它们共同为网页提供了动态、实时的数据交互能力，为用户带来了更加流畅和丰富的体验。本文将详细介绍JSON和AJAX的概念、原理，并通过代码示例展示它们在实际开发中的应用。一、JSON：轻量级的数据交换格式JSON是一种轻量级的数据
• 辗转相处求最大公约数 沐刃青蛟 C++漏洞
  无言面对”江东父老“了，接触编程一年了，今天发现还不会辗转相除法求最大公约数。惭愧惭愧！   为此，总结一下以方便日后忘了好查找。   1.输入要比较的两个数a,b   忽略：2.比较大小（因为后面要的是大的数对小的数做%操作）   3.辗转相除（用循环不停的取余，如a%b,直至b=0）   4.最后的a为两数的最大公约数 &
• F5负载均衡会话保持技术及原理技术白皮书 bijian1013 F5负载均衡
  一.什么是会话保持？        在大多数电子商务的应用系统或者需要进行用户身份认证的在线系统中，一个客户与服务器经常经过好几次的交互过程才能完成一笔交易或者是一个请求的完成。由于这几次交互过程是密切相关的，服务器在进行这些交互过程的某一个交互步骤时，往往需要了解上一次交互过程的处理结果，或者上几步的交互过程结果，服务器进行下
• Object.equals方法：重载还是覆盖 Cwind javagenericsoverrideoverload
  本文译自StackOverflow上对此问题的讨论。 原问题链接   在阅读Joshua Bloch的《Effective Java（第二版）》第8条“覆盖equals时请遵守通用约定”时对如下论述有疑问： “不要将equals声明中的Object对象替换为其他的类型。程序员编写出下面这样的equals方法并不鲜见，这会使程序员花上数个小时都搞不清它为什么不能正常工作：” pu
• 初始线程 15700786134
        暑假学习的第一课是讲线程，任务是是界面上的一条线运动起来。            既然是在界面上，那必定得先有一个界面，所以第一步就是，自己的类继承JAVA中的JFrame，在新建的类中写一个界面，代码如下： public class ShapeFr
• Linux的tcpdump 被触发 tcpdump
  用简单的话来定义tcpdump，就是：dump the traffic on a network，根据使用者的定义对网络上的数据包进行截获的包分析工具。 tcpdump可以将网络中传送的数据包的“头”完全截获下来提供分析。它支 持针对网络层、协议、主机、网络或端口的过滤，并提供and、or、not等逻辑语句来帮助你去掉无用的信息。 实用命令实例 默认启动 tcpdump 普通情况下，直
• 安卓程序listview优化后还是卡顿 肆无忌惮_ ListView
  最近用eclipse开发一个安卓app，listview使用baseadapter，里面有一个ImageView和两个TextView。使用了Holder内部类进行优化了还是很卡顿。后来发现是图片资源的问题。把一张分辨率高的图片放在了drawable-mdpi文件夹下，当我在每个item中显示，他都要进行缩放，导致很卡顿。解决办法是把这个高分辨率图片放到drawable-xxhdpi下。 &nb
• 扩展easyUI tab控件，添加加载遮罩效果 知了ing jquery
  (function () { $.extend($.fn.tabs.methods, { //显示遮罩 loading: function (jq, msg) { return jq.each(function () { var panel = $(this).tabs(&
• gradle上传jar到nexus 矮蛋蛋 gradle
  原文地址： https://docs.gradle.org/current/userguide/maven_plugin.html configurations {     deployerJars } dependencies {     deployerJars "org.apache.maven.wagon
• 千万条数据外网导入数据库的解决方案。 alleni123 sqlmysql
  从某网上爬了数千万的数据，存在文本中。 然后要导入mysql数据库。 悲剧的是数据库和我存数据的服务器不在一个内网里面。。 ping了一下， 19ms的延迟。 于是下面的代码是没用的。 ps = con.prepareStatement(sql); ps.setString(1, info.getYear())............; ps.exec
• JAVA IO InputStreamReader和OutputStreamReader 百合不是茶 JAVA.io操作 字符流
  这是第三篇关于java.io的文章了，从开始对io的不了解-->熟悉--->模糊，是这几天来对文件操作中最大的感受，本来自己认为的熟悉了的，刚刚在回想起前面学的好像又不是很清晰了，模糊对我现在或许是最好的鼓励 我会更加的去学 加油！： JAVA的API提供了另外一种数据保存途径，使用字符流来保存的，字符流只能保存字符形式的流   字节流和字符的难点：a,怎么将读到的数据
• MO、MT解读 bijian1013 GSM
  MO= Mobile originate，上行，即用户上发给SP的信息。MT= Mobile Terminate，下行，即SP端下发给用户的信息； 上行:mo提交短信到短信中心下行:mt短信中心向特定的用户转发短信，你的短信是这样的，你所提交的短信，投递的地址是短信中心。短信中心收到你的短信后，存储转发，转发的时候就会根据你填写的接收方号码寻找路由，下发。在彩信领域是一样的道理。下行业务：由SP
• 五个JavaScript基础问题 bijian1013 JavaScriptcallapplythisHoisting
  下面是五个关于前端相关的基础问题，但却很能体现JavaScript的基本功底。 问题1：Scope作用范围 考虑下面的代码：  (function() { var a = b = 5; })(); console.log(b); 什么会被打印在控制台上？  回答：         上面的代码会打印 5。 &nbs
• 【Thrift二】Thrift Hello World bit1129 Hello world
  本篇，不考虑细节问题和为什么，先照葫芦画瓢写一个Thrift版本的Hello World，了解Thrift RPC服务开发的基本流程   1. 在Intellij中创建一个Maven模块，加入对Thrift的依赖，同时还要加上slf4j依赖，如果不加slf4j依赖，在后面启动Thrift Server时会报错 <dependency>
• 【Avro一】Avro入门 bit1129 入门
  本文的目的主要是总结下基于Avro Schema代码生成，然后进行序列化和反序列化开发的基本流程。需要指出的是，Avro并不要求一定得根据Schema文件生成代码，这对于动态类型语言很有用。   1. 添加Maven依赖   <?xml version="1.0" encoding="UTF-8"?> <proj
• 安装nginx+ngx_lua支持WAF防护功能 ronin47
  需要的软件:LuaJIT-2.0.0.tar.gz                   nginx-1.4.4.tar.gz          &nb
• java-5.查找最小的K个元素-使用最大堆 bylijinnan java
  import java.util.Arrays; import java.util.Random; public class MinKElement { /** * 5.最小的K个元素 * I would like to use MaxHeap. * using QuickSort is also OK */ public static void
• TCP的TIME-WAIT bylijinnan socket
  原文连接： http://vincent.bernat.im/en/blog/2014-tcp-time-wait-state-linux.html 以下为对原文的阅读笔记 说明： 主动关闭的一方称为local end，被动关闭的一方称为remote end 本地IP、本地端口、远端IP、远端端口这一“四元组”称为quadruplet，也称为socket 1、TIME_WA
• jquery ajax 序列化表单 coder_xpf Jquery ajax 序列化
     checkbox 如果不设定值，默认选中值为on；设定值之后，选中则为设定的值   <input type="checkbox" name="favor" id="favor" checked="checked"/> $("#favor&quo
• Apache集群乱码和最高并发控制 cuisuqiang apachetomcat并发集群乱码
  都知道如果使用Http访问，那么在Connector中增加URIEncoding即可，其实使用AJP时也一样，增加useBodyEncodingForURI和URIEncoding即可。 最大连接数也是一样的，增加maxThreads属性即可，如下，配置如下： <Connector maxThreads="300" port="8019" prot
• websocket dalan_123 websocket
  一、低延迟的客户端-服务器 和 服务器-客户端的连接 很多时候所谓的http的请求、响应的模式，都是客户端加载一个网页，直到用户在进行下一次点击的时候，什么都不会发生。并且所有的http的通信都是客户端控制的，这时候就需要用户的互动或定期轮训的，以便从服务器端加载新的数据。   通常采用的技术比如推送和comet（使用http长连接、无需安装浏览器安装插件的两种方式：基于ajax的长
• 菜鸟分析网络执法官 dcj3sjt126com 网络
    最近在论坛上看到很多贴子在讨论网络执法官的问题。菜鸟我正好知道这回事情.人道"人之患好为人师" 手里忍不住,就写点东西吧. 我也很忙.又没有MM,又没有MONEY....晕倒有点跑题. OK,闲话少说,切如正题. 要了解网络执法官的原理. 就要先了解局域网的通信的原理. 前面我们看到了.在以太网上传输的都是具有以太网头的数据包. 
• Android相对布局属性全集 dcj3sjt126com android
  RelativeLayout布局android:layout_marginTop="25dip" //顶部距离android:gravity="left" //空间布局位置android:layout_marginLeft="15dip //距离左边距 // 相对于给定ID控件android:layout_above 将该控件的底部置于给定ID的
• Tomcat内存设置详解 eksliang jvmtomcattomcat内存设置
  Java内存溢出详解   一、常见的Java内存溢出有以下三种：   1. java.lang.OutOfMemoryError: Java heap space ----JVM Heap（堆）溢出JVM在启动的时候会自动设置JVM Heap的值，其初始空间(即-Xms)是物理内存的1/64，最大空间(-Xmx)不可超过物理内存。 可以利用JVM提
• Java6 JVM参数选项 greatwqs javaHotSpotjvmjvm参数JVM Options
  Java 6 JVM参数选项大全（中文版）   作者：Ken Wu Email: [email protected] 转载本文档请注明原文链接 http://kenwublog.com/docs/java6-jvm-options-chinese-edition.htm！   本文是基于最新的SUN官方文档Java SE 6 Hotspot VM Opt
• weblogic创建JMC i5land weblogicjms
  进入 weblogic控制太 1.创建持久化存储 --Services--Persistant Stores--new--Create FileStores--name随便起--target默认--Directory写入在本机建立的文件夹的路径--ok 2.创建JMS服务器 --Services--Messaging--JMS Servers--new--name随便起--Pers
• 基于 DHT 网络的磁力链接和BT种子的搜索引擎架构 justjavac DHT
  上周开发了一个磁力链接和 BT 种子的搜索引擎 {Magnet & Torrent}，本文简单介绍一下主要的系统功能和用到的技术。 系统包括几个独立的部分： 使用 Python 的 Scrapy 框架开发的网络爬虫，用来爬取磁力链接和种子； 使用 PHP CI 框架开发的简易网站； 搜索引擎目前直接使用的 MySQL，将来可以考虑使
• sql添加、删除表中的列 macroli sql
  添加没有默认值：alter table Test add BazaarType char(1) 有默认值的添加列：alter table Test add BazaarType char(1) default(0) 删除没有默认值的列：alter table Test drop COLUMN BazaarType 删除有默认值的列：先删除约束（默认值）alter table Test DRO
• PHP中二维数组的排序方法 abc123456789cba 排序二维数组PHP
  <?php/*** @package     BugFree* @version     $Id: FunctionsMain.inc.php,v 1.32 2005/09/24 11:38:37 wwccss Exp $*** Sort an two-dimension array by some level
• hive优化之------控制hive任务中的map数和reduce数 superlxw1234 hivehive优化
  一、    控制hive任务中的map数: 1.    通常情况下，作业会通过input的目录产生一个或者多个map任务。 主要的决定因素有： input的文件总个数，input的文件大小，集群设置的文件块大小(目前为128M, 可在hive中通过set dfs.block.size;命令查看到，该参数不能自定义修改)；2. 
• Spring Boot 1.2.4 发布 wiselyman spring boot
  Spring Boot 1.2.4已于6.4日发布，repo.spring.io and Maven Central可以下载(推荐使用maven或者gradle构建下载)。   这是一个维护版本，包含了一些修复small number of fixes,建议所有的用户升级。   Spring Boot 1.3的第一个里程碑版本将在几天后发布，包含许多

按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他

首页 - 关于我们 - 站内搜索 - Sitemap - 侵权投诉

版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.