vue基础入门之02-vue基本入门
vue基础入门之02-vue基本入门
Vue 基础入门
解读核心关键词：框架
vue（核心库）
vue-router（路由方案）
vuex（状态管理方案）
vue 组件库（快速搭建页面 UI 效果的方案）
以及辅助 vue 项目开发的一系列工具：
vue-cli（npm 全局包：一键生成工程化的 vue 项目 - 基于 webpack、大而全）
vite（npm 全局包：一键生成工程化的 vue 项目 - 小而巧）
vue-devtools（浏览器插件：辅助调试的工具）
vetur（vscode 插件：提供语法高亮和智能提示）
1. vue简介
1.1 什么是 vue
官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。
框架<===> 构建用户界面
核心关键词
使用 vue 构建用户界面，解决了 jQuery + 模板引擎 的诸多痛点，极大的提高了前端开发的效率和体验。
1.2 vue 的特性
vue 框架的特性，主要体现在如下两方面：数据驱动视图双向数据绑定
1.2.1 数据驱动视图
在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。示意图如下：
好处 ：当页面数据发生变化时，页面会自动重新渲染！单向的数据绑定。
1.2.2 双向数据绑定
在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源中。示意图如下：
好处 ：开发者不再需要手动操作 DOM 元素，来获取表单元素最新的值！
1.3 MVVM
MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel，它把每个 HTML 页面都拆分成了这三个部分，如图所示：
在 MVVM 概念中：
1.4 vue的基本使用
1.4.1 基本使用步骤
① 导入 vue.js 的 script 脚本文件
DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> title > head > < body> < divid = " app" > div > < scriptsrc = " ./lib/vue-2.6.12.js" > script > < script>
const vm = new Vue ( {
el: '#app' ,
data: {
username: 'zhangsan'
}
} )
script > body > html > 1.4.2 基本代码与 MVVM 的对应关系
2 vue的调试工具
2.1 安装 vue-devtools 调试工具
未安装的时候 浏览器的控制台会提示你：
下载vue DevTools扩展以获得更好的开发体验；（插件的GitHub地址：https://github.com/vuejs/vue-devtools）
3 vue的指令与过滤器
3.1 指令的概念
指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。按照不同的用途可以分为如下 6 大类：内容渲染指令属性绑定指令事件绑定指令双向绑定指令条件渲染指令列表渲染指令
3.1.1 内容渲染指令
内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个：
v-text
用法示例
注意：v-text 指令会覆盖元素内默认的值。
{{ }} 语法 {{ }}语法，专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是插值表达式（英文名为：Mustache）。
注意：相对于 v-text 指令来说，插值表达式在开发中更常用一些！因为它不会覆盖元素中默认的文本内容。
v-html 纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素，则需要用到 v-html 这个指令：
3.1.1.1 案例
DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> title > head > < body> < divid = " app" > < pv-text = " username" > p > < pv-text = " gender" > p > < hr> < p> p > < p> p > < hr> < divv-text = " info" > div > < div> div > < divv-html = " info" > div > div > < scriptsrc = " ./lib/vue-2.6.12.js" > script > < script>
const vm = new Vue ( {
el: '#app' ,
data: {
username: 'zhangsan' ,
gender: '女' ,
info: '欢迎大家来学习 vue.js '
}
} )
script > body > html >
效果展示
3.1.2 属性绑定指令
如果需要为元素的属性动态绑定属性值，则需要用到 v-bind属性绑定指令。用法示例如下
属性绑定指令的简写形式v-bind 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 : ）。
使用 Javascript 表达式 绑定简单的数据值之外，还支持 Javascript 表达式的运算，例如：
3.1.2.1 案例
DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> title > head > < body> < divid = " app" > < inputtype = " text" :placeholder = " tips" > < hr> < img:src = " photo" alt = " " style = " width : 150px; " > < hr> < div> div > < div> div > < div:title = " ' box' + index" > div > div > < scriptsrc = " ./lib/vue-2.6.12.js" > script > < script>
const vm = new Vue ( {
el: '#app' ,
data: {
tips: '请输入用户名' ,
photo: 'https://cn.vuejs.org/images/logo.svg' ,
index: 3
}
} )
script > body > html >
结果显示
3.1.3 事件绑定指令
vue 提供了v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听。语法格式如下：
注意：原生 DOM 对象有 onclick、oninput、onkeyup 等原生事件，替换为 vue 的事件绑定形式后，分别为：v-on:click、v-on:input、v-on:keyup
通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明：
由于 v-on 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 @ ）。 @click
事件参数对象 同样可以接收到事件参数对象 event，示例代码如下：
绑定事件并传参 ( ) 进行传参，示例代码如下：
** e v e n t ∗ ∗ ‘ event** ` e v e n t ∗ ∗ ‘ 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event`。$event 可以解决事件参数对象 event 被覆盖的问题。示例用法如下：
事件修饰符 event.preventDefault()或 event.stopPropagation() 是非常常见的需求。因此，vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的 5 个事件修饰符如下：
按键修饰符 键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符，例如：
3.1.3.1 案例
(1)第一个案例
DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> title > head > < body> < divid = " app" > < p> p > < button@click = " add(1)" > button > < button@click = " sub" > button > div > < scriptsrc = " ./lib/vue-2.6.12.js" > script > < script>
const vm = new Vue ( {
el: '#app' ,
data: {
count: 0
} ,
methods: {
add ( n ) {
console. log ( vm)
this . count += n
} ,
sub ( ) {
this . count -= 1
}
}
} )
script > body > html >
结果展示
（2）第二个案例
< body> < divid = " app" > < p> p > < button@click = " add($event, 1)" > button > div > < scriptsrc = " ./lib/vue-2.6.12.js" > script > < script>
const vm = new Vue ( {
el: '#app' ,
data: {
count: 0
} ,
methods: {
add ( e, n ) {
this . count += n
console. log ( e)
if ( this . count % 2 === 0 ) {
e. target. style. backgroundColor = 'red'
} else {
e. target. style. backgroundColor = ''
}
}
} ,
} )
script > body >
结果展示
（3）第三个案例
< body> < divid = " app" > < ahref = " http://www.baidu.com" @click.prevent = " show" > a > < hr> < divstyle = " height : 150px; background-color : orange; padding-left : 100px; line-height : 150px; " @click = " divHandler" > < button@click.stop = " btnHandler" > button > div > div > < scriptsrc = " ./lib/vue-2.6.12.js" > script > < script>
const vm = new Vue ( {
el: '#app' ,
data: { } ,
methods: {
show ( ) {
console. log ( '点击了 a 链接' )
} ,
btnHandler ( ) {
console. log ( 'btnHandler' )
} ,
divHandler ( ) {
console. log ( 'divHandler' )
}
} ,
} )
script > body >
结果展示
（4）第四个案例
< body> < divid = " app" > < inputtype = " text" @keyup.esc = " clearInput" @keyup.enter = " commitAjax" > div > < scriptsrc = " ./lib/vue-2.6.12.js" > script > < script>
const vm = new Vue ( {
el: '#app' ,
data: { } ,
methods: {
clearInput ( e ) {
console. log ( '触发了 clearInput 方法' )
e. target. value = ''
} ,
commitAjax ( ) {
console. log ( '触发了 commitAjax 方法' )
}
} ,
} )
script > body >
结果展示 （按Enter 和Esc 在控制台有打印输出）
3.1.4 双向绑定指令
vue 提供了v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据。
v-model 指令的修饰符 为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，分别是：
3.1.4.1 案例
(1)第一个案例
< body> < divid = " app" > < p> p > < inputtype = " text" v-model = " username" > < hr> < inputtype = " text" :value = " username" > < hr> < selectv-model = " city" > < optionvalue = " " > option > < optionvalue = " 1" > option > < optionvalue = " 2" > option > < optionvalue = " 3" > option > select > div > < scriptsrc = " ./lib/vue-2.6.12.js" > script > < script>
const vm = new Vue ( {
el: '#app' ,
data: {
username: 'zhangsan' ,
city: '2'
}
} )
script > body > （2）第二个案例
< body> < divid = " app" > < inputtype = " text" v-model.number = " n1" > < inputtype = " text" v-model.number = " n2" > < span> span > < hr> < inputtype = " text" v-model.trim = " username" > < button@click = " showName" > button > < hr> < inputtype = " text" v-model.lazy = " username" > div > < scriptsrc = " ./lib/vue-2.6.12.js" > script > < script>
const vm = new Vue ( {
el: '#app' ,
data: {
username: 'zhangsan' ,
n1: 1 ,
n2: 2
} ,
methods: {
showName ( ) {
console. log ( ` 用户名是：" ${ this . username} " ` )
}
} ,
} )
script > body >
结果展示
3.1.5 条件渲染指令
条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：
示例用法如下：
3.1.5.1 v-if 和 v-show 的区别
实现原理不同 ：
v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；
v-show 指令会动态为元素添加或移除 style="display: none;" 样式，从而控制元素的显示与隐藏；
性能消耗不同 ：切换开销，而 v-show 有更高的初始渲染开销。因此：
如果需要非常频繁地切换，则使用 v-show 较好
如果在运行时条件很少改变，则使用 v-if 较好
v-else
v-else-if
3.1.5.2 案例
< body> < divid = " app" > < pv-if = " flag" > p > < pv-show = " flag" > p > < hr> < divv-if = " type === ' A' " > div > < divv-else-if = " type === ' B' " > div > < divv-else-if = " type === ' C' " > div > < divv-else > div > div > < scriptsrc = " ./lib/vue-2.6.12.js" > script > < script>
const vm = new Vue ( {
el: '#app' ,
data: {
flag: false ,
type: 'A'
}
} )
script > html >
结果展示
3.1.6 列表渲染指令
vue 提供了v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使用 item in items形式的特殊语法，其中：
items 是待循环的数组
item 是被循环的每一项
v-for 中的索引 可选的第二个参数，即当前项的索引。语法格式为(item, index) in items，示例代码如下：
注意：v-for 指令中的item 项和 index 索引都是形参，可以根据需要进行重命名。例如 (user, i) in userlist
使用 key 维护列表的状态 列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。唯一的 key 属性：
key 的注意事项 字符串或数字类型必须具有唯一性（即：key 的值不能重复）数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）没有任何意义（因为 index 的值不具有唯一性）一定要指定 key 的值（既提升性能、又防止列表状态紊乱）
3.1.6.1 案例
（1）第一个案例
< body> < divid = " app" > < tableclass = " table table-bordered table-hover table-striped" > < thead> < th> th > < th> th > < th> th > thead > < tbody> < trv-for = " (item, index) in list" :key = " item.id" > < td> td > < td> td > < td> td > tr > tbody > table > div > < scriptsrc = " ./lib/vue-2.6.12.js" > script > < script>
const vm = new Vue ( {
el: '#app' ,
data: {
list: [
{ id: 1 , name: '张三' } ,
{ id: 2 , name: '李四' } ,
{ id: 3 , name: '王五' } ,
{ id: 4 , name: '张三' } ,
]
}
} )
script > body >
结果展示
（2）第二个案例
< body> < divid = " app" > < div> < inputtype = " text" v-model = " name" > < button@click = " addNewUser" > button > div > < ul> < liv-for = " (user, index) in userlist" :key = " user.id" > < inputtype = " checkbox" /> li > ul > div > < scriptsrc = " ./lib/vue-2.6.12.js" > script > < script>
const vm = new Vue ( {
el: '#app' ,
data: {
userlist: [
{ id: 1 , name: 'zs' } ,
{ id: 2 , name: 'ls' }
] ,
name: '' ,
nextId: 3
} ,
methods: {
addNewUser ( ) {
this . userlist. unshift ( { id: this . nextId, name: this . name } )
this . name = ''
this . nextId++
}
} ,
} )
script > body >
结果展示
3.2 过滤器
过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和v-bind 属性绑定。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用，示例代码如下
3.2.1 定义过滤器
在创建 vue 实例期间，可以在filters 节点中定义过滤器，示例代码如下：
3.2.2 私有过滤器和全局过滤器
在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：
3.2.3 连续调用多个过滤器
过滤器可以串联地进行调用，例如：
示例代码如下：
3.2.4 过滤器传参
过滤器的本质是 JavaScript 函数，因此可以接收参数，格式如下：
3.2.5 过滤器的兼容性
过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x的版本中剔除了过滤器相关的功能。
如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能
如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能
3.2.6 案例
（1）第一个案例
< body> < divid = " app" > < p> p > div > < scriptsrc = " ./lib/vue-2.6.12.js" > script > < script>
const vm = new Vue ( {
el: '#app' ,
data: {
message: 'hello vue.js'
} ,
filters: {
capi ( val ) {
const first = val. charAt ( 0 ) . toUpperCase ( )
const other = val. slice ( 1 )
return first + other
}
}
} )
script > body >
结果展示
（2）第二个案例
< body> < divid = " app" > < p> p > div > < divid = " app2" > < p> p > div > < scriptsrc = " ./lib/vue-2.6.12.js" > script > < script>
Vue. filter ( 'capi' , function ( str ) {
const first = str. charAt ( 0 ) . toUpperCase ( )
const other = str. slice ( 1 )
return first + other + '~~~'
} )
const vm = new Vue ( {
el: '#app' ,
data: {
message: 'hello vue.js'
} ,
filters: {
capi ( val ) {
const first = val. charAt ( 0 ) . toUpperCase ( )
const other = val. slice ( 1 )
return first + other
}
}
} )
const vm2 = new Vue ( {
el: '#app2' ,
data: {
message: 'heima'
}
} )
script > body >
结果展示
4 案例演练 - 品牌列表案例
素材
DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> title > < linkrel = " stylesheet" href = " ./lib/bootstrap.css" > < scriptsrc = " /vue.js" > script > head > < body> < divid = " app" > < divclass = " card" > < divclass = " card-header" > div > < divclass = " card-body" > < form@submit.prevent = " add" > < divclass = " form-row align-items-center" > < divclass = " col-auto" > < divclass = " input-group mb-2" > < divclass = " input-group-prepend" > < divclass = " input-group-text" > div > div > < inputtype = " text" class = " form-control" placeholder = " 请输入品牌名称" v-model.trim = " brand" > div > div > < divclass = " col-auto" > < buttontype = " submit" class = " btn btn-primary mb-2" > button > div > div > form > div > div > < tableclass = " table table-bordered table-hover table-striped" > < thead> < tr> < thscope = " col" > th > < thscope = " col" > th > < thscope = " col" > th > < thscope = " col" > th > < thscope = " col" > th > tr > thead > < tbody> < trv-for = " item in list" :key = " item.id" > < td> td > < td> td > < td> < divclass = " custom-control custom-switch" > < inputtype = " checkbox" class = " custom-control-input" :id = " ' cb' + item.id" v-model = " item.status" > < labelclass = " custom-control-label" :for = " ' cb' + item.id" v-if = " item.status" > label > < labelclass = " custom-control-label" :for = " ' cb' + item.id" v-else > label > div > td > < td> td > < td> < ahref = " javascript:;" @click = " remove(item.id)" > a > td > tr > tbody > table > < inputtype = " text" v-model: value= " username" > div > < scriptsrc = " https://unpkg.com/axios/dist/axios.min.js" > script > < script>
const vm = new Vue ( {
el: '#app' ,
data: {
brand: '' ,
nextId: 4 ,
list: [
{ id: 1 , name: '宝马' , status: true , time: new Date ( ) } ,
{ id: 2 , name: '奔驰' , status: false , time: new Date ( ) } ,
{ id: 3 , name: '奥迪' , status: true , time: new Date ( ) } ,
] ,
username: ""
} ,
watch: {
async username ( newVal ) {
if ( newVal === '' ) return
const { data: res } = await axios. get ( 'https://www.escook.cn/api/finduser/' + newVal)
console. log ( res)
}
} ,
methods: {
remove ( id ) {
this . list = this . list. filter ( item => item. id !== id)
} ,
add ( ) {
if ( this . brand === '' ) return alert ( '必须填写品牌名称！' )
const obj = {
id: this . nextId,
name: this . brand,
status: true ,
time: new Date ( )
}
this . list. push ( obj)
this . brand = ''
this . nextId++
}
} ,
} )
script > body > html > 效果展示
用到的知识点
bootstrap 4.x 相关的知识点：vue 指令与过滤器相关的知识点：
完整代码
DOCTYPE html > < htmllang = " en" > < head> < metacharset = " UTF-8" > < metahttp-equiv = " X-UA-Compatible" content = " IE=edge" > < metaname = " viewport" content = " width=device-width, initial-scale=1.0" > < title> title > < linkrel = " stylesheet" href = " ./lib/bootstrap.css" > < linkrel = " stylesheet" href = " ./css/brandlist.css" > < scriptsrc = " /vue.js" > script > head > < body> < divid = " app" > < divclass = " card" > < divclass = " card-header" > div > < divclass = " card-body" > < form@submit.prevent = " add" > < divclass = " form-row align-items-center" > < divclass = " col-auto" > < divclass = " input-group mb-2" > < divclass = " input-group-prepend" > < divclass = " input-group-text" > div > div > < inputtype = " text" class = " form-control" placeholder = " 请输入品牌名称" v-model.trim = " brand" > div > div > < divclass = " col-auto" > < buttontype = " submit" class = " btn btn-primary mb-2" > button > div > div > form > div > div > < tableclass = " table table-bordered table-hover table-striped" > < thead> < tr> < thscope = " col" > th > < thscope = " col" > th > < thscope = " col" > th > < thscope = " col" > th > < thscope = " col" > th > tr > thead > < tbody> < trv-for = " item in list" :key = " item.id" > < td> td > < td> td > < td> < divclass = " custom-control custom-switch" > < inputtype = " checkbox" class = " custom-control-input" :id = " ' cb' + item.id" v-model = " item.status" > < labelclass = " custom-control-label" :for = " ' cb' + item.id" v-if = " item.status" > label > < labelclass = " custom-control-label" :for = " ' cb' + item.id" v-else > label > div > td > < td> td > < td> < ahref = " javascript:;" @click = " remove(item.id)" > a > td > tr > tbody > table > div > < script>
const vm = new Vue ( {
el: '#app' ,
data: {
brand: '' ,
nextId: 4 ,
list: [
{ id: 1 , name: '宝马' , status: true , time: new Date ( ) } ,
{ id: 2 , name: '奔驰' , status: false , time: new Date ( ) } ,
{ id: 3 , name: '奥迪' , status: true , time: new Date ( ) } ,
] ,
} ,
methods: {
remove ( id ) {
this . list = this . list. filter ( item => item. id !== id)
} ,
add ( ) {
if ( this . brand === '' ) return alert ( '必须填写品牌名称！' )
const obj = {
id: this . nextId,
name: this . brand,
status: true ,
time: new Date ( )
}
this . list. push ( obj)
this . brand = ''
this . nextId++
}
} ,
} )
script > body > html > 总结
① 能够知道 vue 的基本使用步骤
导入 vue.js 文件
new Vue() 构造函数，得到 vm 实例对象
声明 el 和 data 数据节点
MVVM 的对应关系
② 掌握 vue 中常见指令的基本用法
插值表达式、v-bind、v-on、v-if 和 v-else
v-for 和 :key、v-model
③ 掌握 vue 中过滤器的基本用法
全局过滤器 Vue.filter(‘过滤器名称’, function)
私有过滤器 filters 节点
5 watch 侦听器
5.1 什么是 watch 侦听器
watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
const vm = new Vue ( {
el: '#app' ,
data: {
data: { username: '' }
} ,
watch: {
username ( new , old) {
console. log ( new , old)
}
}
} )
5.2 使用 watch 检测用户名是否可用
监听 username 值的变化，并使用 axios 发起 Ajax 请求，检测当前输入的用户名是否可用：
导入axios
watch: {
async username ( newVal ) {
if ( newVal === '' ) return
const { data: res } = await axios. get ( 'https://www.escook.cn/api/finduser/' + newVal)
console. log ( res)
}
}
5.3 immediate 选项
默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使用immediate 选项。示例代码如下：
watch: {
username: {
// handler 是固定写法，表示当 username 的值变化时，自动调用 handler 处理函数
handler: async function (newVal) {
if (newVal === '') return
const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
console.log(res)
},
// 表示页面初次渲染好之后，就立即触发当前的 watch 侦听器
immediate: true
}
}
5.4 deep 选项
如果 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选项，代码示例如下：
const vm = new Vue ( {
el: '#app' ,
data: {
info: { username: 'admin' }
} ,
watch: {
info: {
handler ( newVal ) {
console. log ( newVal. username)
} ,
deep: true
}
}
} )
5.5 监听对象单个属性的变化
如果只想监听对象中单个属性的变化，则可以按照如下的方式定义 watch 侦听器
const vm = new Vue ( {
el: '#app' ,
data: {
info: { username: 'admin' }
} ,
watch: {
'info.username' : {
handler ( newVal ) {
console. log ( newVal)
}
}
}
} )
5.5 计算属性 vs 侦听器
计算属性和侦听器侧重的应用场景不同 ：多个值的变化，最终计算并返回一个新值单个数据的变化，最终执行特定的业务处理，不需要有任何返回值
5.7 案例
（1）第一个案例
< body> < divid = " app" > < inputtype = " text" v-model = " username" > div > < scriptsrc = " ./lib/vue-2.6.12.js" > script > < scriptsrc = " ./lib/jquery-v3.6.0.js" > script > < script>
const vm = new Vue ( {
el: '#app' ,
data: {
username: 'admin'
} ,
watch: {
username ( newVal ) {
if ( newVal === '' ) return
$. get ( 'https://www.escook.cn/api/finduser/' + newVal, function ( result ) {
console. log ( result)
} )
}
}
} )
script > body >
结果展示
（2）第二个案例
< body> < divid = " app" > < inputtype = " text" v-model = " username" > div > < scriptsrc = " ./lib/vue-2.6.12.js" > script > < scriptsrc = " ./lib/jquery-v3.6.0.js" > script > < script>
const vm = new Vue ( {
el: '#app' ,
data: {
username: 'admin'
} ,
watch: {
username: {
handler ( newVal, oldVal ) {
console. log ( newVal, oldVal)
} ,
immediate: true
}
}
} )
script > body >
结果展示
（3）第三个案例 深度监听
< body> < divid = " app" > < inputtype = " text" v-model = " info.username" > < inputtype = " text" v-model = " info.address.city" > div > < scriptsrc = " ./lib/vue-2.6.12.js" > script > < scriptsrc = " ./lib/jquery-v3.6.0.js" > script > < script>
const vm = new Vue ( {
el: '#app' ,
data: {
info: {
username: 'admin' ,
address: {
city: '北京'
}
}
} ,
watch: {
'info.username' ( newVal) {
console. log ( newVal)
}
}
} )
script > body > 6 计算属性
6.1 什么是计算属性
计算属性指的是通过一系列运算之后，最终得到一个属性值。这个动态计算出来的属性值可以被模板结构或 methods 方法使用。示例代码如下：
var vm = new Vue ( {
el: ‘#app’,
data: {
r: 0 , g: 0 , b: 0
} ,
computed: {
rgb ( ) {
return 'rgb($this.r}, ${this.g},$(this.b))'
}
}
methods: {
show ( {
console. log ( this . rgb)
} )
}
} )
6.2 计算属性的特点
① 虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算
6.3 计算属性的使用注意点
① 计算属性必须定义在 computed 节点中必须是一个 function 函数必须有返回值必须当做普通属性使用
6.4 计算属性 vs 方法
相对于方法来说，计算属性会缓存计算的结果，只有计算属性的依赖项发生变化时，才会重新进行运算。因此计算属性的性能更好：
6.6 案例
（1）第一个案例
根据不同的输入值 有不同的颜色
< body> < divid = " app" > < div> < span> span > < inputtype = " text" v-model.number = " r" > div > < div> < span> span > < inputtype = " text" v-model.number = " g" > div > < div> < span> span > < inputtype = " text" v-model.number = " b" > div > < hr> < divclass = " box" :style = " { backgroundColor: `rgb(${r}, ${g}, ${b})` }" > div > < button@click = " show" > button > div > < script>
var vm = new Vue ( {
el: '#app' ,
data: {
r: 0 ,
g: 0 ,
b: 0
} ,
methods: {
show ( ) {
console. log ( ` rgb( ${ this . r} , ${ this . g} , ${ this . b} ) ` )
}
} ,
} ) ;
script > body >
结果展示
（2）第二个案例 改造上诉代码
< body> < divid = " app" > < div> < span> span > < inputtype = " text" v-model.number = " r" > div > < div> < span> span > < inputtype = " text" v-model.number = " g" > div > < div> < span> span > < inputtype = " text" v-model.number = " b" > div > < hr> < divclass = " box" :style = " { backgroundColor: rgb }" > div > < button@click = " show" > button > div > < script>
var vm = new Vue ( {
el: '#app' ,
data: {
r: 0 ,
g: 0 ,
b: 0
} ,
methods: {
show ( ) {
console. log ( this . rgb)
}
} ,
computed: {
rgb ( ) {
return ` rgb( ${ this . r} , ${ this . g} , ${ this . b} ) ` }
}
} ) ;
console. log ( vm)
script > body > 结果如同上诉一般
7 vue-cli
文档以及安装
https://cli.vuejs.org/zh/guide/installation.html
7.1 什么是 vue-cli
vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。专注在撰写应用上，而不必花好几天去纠结 webpack 配置的问题。
8 组件化
8.1 什么是组件化开发
组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护
8.2 vue 中的组件化开发
vue 是一个支持组件化开发的前端框架。组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。
8.3 vue 组件的三个组成部分
每个 .vue 组件都由 3 部分构成，分别是：
template -> 组件的模板结构script -> 组件的 JavaScript 行为style -> 组件的样式
8.3.1 template
vue 规定：每个组件对应的模板结构，需要定义到 节点
注意：
template 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素
template 中只能包含唯一的根节点
8.3.2 script
vue 规定：开发者可以在
vue 规定：.vue 组件中的 data 必须是一个函数，不能直接指向一个数据对象。
data(){}
8.3.3 style
vue 规定：组件内的
9 props
9.1 什么是 props 验证
指的是：在封装组件时对外界传递过来的 props 数据进行合法性的校验，从而防止数据不合法的问题。
使用数组类型的 props 节点的缺点：无法为每个 prop 指定具体的数据类型。
9.2 对象类型的 props 节点
使用对象类型的 props 节点，可以对每个 prop 进行数据类型的校验，示意图如下：
9.3 props 验证
对象类型的 props 节点提供了多种数据验证方案，例如：
9.3.1 基础的类型检查
可以直接为组件的 prop 属性指定基础的校验类型，从而防止组件的使用者为其绑定错误类型的数据：
export default {
props: {
propA: String,
propB: Number,
propC: Boolean,
propD: Array,
propE: Object,
propF: Date,
propG: Function,
propH: Symbol
}
}
9.3.2 多个可能的类型
如果某个 prop 属性值的类型不唯一，此时可以通过数组的形式，为其指定多个可能的类型，示例代码如下
export default {
props: {
propB: [ String, Number]
}
}
9.3.3 必填项校验
如果组件的某个 prop 属性是必填项，必须让组件的使用者为其传递属性的值。此时，可以通过如下的方式将其设置为必填项：
export default {
props: {
propB: {
type: String,
required: true
}
}
}
9.3.4 属性默认值
在封装组件时，可以为某个 prop 属性指定默认值。示例代码如下：
export default {
props: {
propC: {
type: Number,
default : 100
}
}
}
9.3.5 自定义验证函数
在封装组件时，可以为 prop 属性指定自定义的验证函数，从而对 prop 属性的值进行更加精确的控制：
9.4 案例
App.vue
App 根组件
count.vue
数量：{{ count }}
状态：{{ state }}
展示结果
你可能感兴趣的:(vue,rabbitmq,分布式,java)
element实现动态路由+面包屑
软件技术NINI
vue案例 vue.js 前端
el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
Long类型前后端数据不一致
igotyback
前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
LocalDateTime 转 String
igotyback
java 开发语言
importjava.time.LocalDateTime;importjava.time.format.DateTimeFormatter;publicclassMain{publicstaticvoidmain(String[]args){//获取当前时间LocalDateTimenow=LocalDateTime.now();//定义日期格式化器DateTimeFormatterformat
Linux下QT开发的动态库界面弹出操作（SDL2）
13jjyao
QT类 qt 开发语言 sdl2 linux
需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口
消息中间件有哪些常见类型
xmh-sxh-1314
java
消息中间件根据其设计理念和用途，可以大致分为以下几种常见类型：点对点消息队列（Point-to-PointMessagingQueues）：在这种模型中，消息被发送到特定的队列中，消费者从队列中取出并处理消息。队列中的消息只能被一个消费者消费，消费后即被删除。常见的实现包括IBM的MQSeries、RabbitMQ的部分使用场景等。适用于任务分发、负载均衡等场景。发布/订阅消息模型（Pub/Sub
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理
STU学生网页设计
网页设计 期末网页作业 html静态网页 html5期末大作业 网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【华为OD机试真题2023B卷 JAVA&JS】We Are A Team
若博豆
java 算法 华为 javascript
华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代
GitHub上克隆项目
bigbig猩猩
github
从GitHub上克隆项目是一个简单且直接的过程，它允许你将远程仓库中的项目复制到你的本地计算机上，以便进行进一步的开发、测试或学习。以下是一个详细的步骤指南，帮助你从GitHub上克隆项目。一、准备工作1.安装Git在克隆GitHub项目之前，你需要在你的计算机上安装Git工具。Git是一个开源的分布式版本控制系统，用于跟踪和管理代码变更。你可以从Git的官方网站（https://git-scm.
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript
二挡起步
web前端期末大作业 javascript html css 旅游 风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动
二挡起步
web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
node.js学习
小猿L
node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
01-Git初识
Meereen
Git git
01-Git初识概念：一个免费开源，分布式的代码版本控制系统，帮助开发团队维护代码作用：记录代码内容。切换代码版本，多人开发时高效合并代码内容如何学：个人本机使用：Git基础命令和概念多人共享使用：团队开发同一个项目的代码版本管理Git配置用户信息配置：用户名和邮箱，应用在每次提交代码版本时表明自己的身份命令：查看git版本号git-v配置用户名gitconfig--globaluser.name
Java 重写(Override)与重载(Overload)
叨唧唧的
Java重写(Override)与重载(Overload)重写(Override)重写是子类对父类的允许访问的方法的实现过程进行重新编写,返回值和形参都不能改变。即外壳不变，核心重写！重写的好处在于子类可以根据需要，定义特定于自己的行为。也就是说子类能够根据需要实现父类的方法。重写方法不能抛出新的检查异常或者比被重写方法申明更加宽泛的异常。例如：父类的一个方法申明了一个检查异常IOExceptio
简单了解 JVM
记得开心一点啊
jvm
目录♫什么是JVM♫JVM的运行流程♫JVM运行时数据区♪虚拟机栈♪本地方法栈♪堆♪程序计数器♪方法区/元数据区♫类加载的过程♫双亲委派模型♫垃圾回收机制♫什么是JVMJVM是JavaVirtualMachine的简称，意为Java虚拟机。虚拟机是指通过软件模拟的具有完整硬件功能的、运行在一个完全隔离的环境中的完整计算机系统（如：JVM、VMwave、VirtualBox）。JVM和其他两个虚拟机
1分钟解决 -bash: mvn: command not found，在Centos 7中安装Maven
Energet!c
开发语言
1分钟解决-bash:mvn:commandnotfound，在Centos7中安装Maven检查Java环境1下载Maven2解压Maven3配置环境变量4验证安装5常见问题与注意事项6总结检查Java环境Maven依赖Java环境，请确保系统已经安装了Java并配置了环境变量。可以通过以下命令检查：java-version如果未安装，请先安装Java。1下载Maven从官网下载：前往Apach
Java企业面试题3
马龙强_
java
1.break和continue的作用(智*图)break：用于完全退出一个循环（如for,while）或一个switch语句。当在循环体内遇到break语句时，程序会立即跳出当前循环体，继续执行循环之后的代码。continue：用于跳过当前循环体中剩余的部分，并开始下一次循环。如果是在for循环中使用continue，则会直接进行条件判断以决定是否执行下一轮循环。2.if分支语句和switch分
JVM、JRE和 JDK：理解Java开发的三大核心组件
Y雨何时停T
Java java
Java是一门跨平台的编程语言，它的成功离不开背后强大的运行环境与开发工具的支持。在Java的生态中，JVM（Java虚拟机）、JRE（Java运行时环境）和JDK（Java开发工具包）是三个至关重要的核心组件。本文将探讨JVM、JDK和JRE的区别，帮助你更好地理解Java的运行机制。1.JVM：Java虚拟机（JavaVirtualMachine）什么是JVM？JVM，即Java虚拟机，是Ja
Java面试题精选：消息队列(二)
芒果不是芒
Java面试题精选 java kafka
一、Kafka的特性1.消息持久化：消息存储在磁盘，所以消息不会丢失2.高吞吐量：可以轻松实现单机百万级别的并发3.扩展性：扩展性强，还是动态扩展4.多客户端支持：支持多种语言（Java、C、C++、GO、）5.KafkaStreams（一个天生的流处理）:在双十一或者销售大屏就会用到这种流处理。使用KafkaStreams可以快速的把销售额统计出来6.安全机制：Kafka进行生产或者消费的时候会
白骑士的Java教学基础篇 2.5 控制流语句
白骑士所长
Java 教学 java 开发语言
欢迎继续学习Java编程的基础篇！在前面的章节中，我们了解了Java的变量、数据类型和运算符。接下来，我们将探讨Java中的控制流语句。控制流语句用于控制程序的执行顺序，使我们能够根据特定条件执行不同的代码块，或重复执行某段代码。这是编写复杂程序的基础。通过学习这一节内容，你将掌握如何使用条件语句和循环语句来编写更加灵活和高效的代码。条件语句条件语句用于根据条件的真假来执行不同的代码块。if语句‘
python语法——三目运算符
HappyRocking
python python 三目运算符
在java中，有三目运算符，如：intc=(a>b)?a:b表示c取两者中的较大值。但是在python，不能直接这样使用，估计是因为冒号在python有分行的关键作用。那么在python中，如何实现类似功能呢？可以使用ifelse语句，也是一行可以完成，格式为：aifbelsec表示如果b为True，则表达式等于a，否则等于c。如：c=(aif(a>b)elseb)同样是完成了取最大值的功能。
ArrayList 源码解析
程序猿进阶
Java基础 ArrayList List java 面试 性能优化 架构设计 idea
ArrayList是Java集合框架中的一个动态数组实现，提供了可变大小的数组功能。它继承自AbstractList并实现了List接口，是顺序容器，即元素存放的数据与放进去的顺序相同，允许放入null元素，底层通过数组实现。除该类未实现同步外，其余跟Vector大致相同。每个ArrayList都有一个容量capacity，表示底层数组的实际大小，容器内存储元素的个数不能多于当前容量。当向容器中添
Kafka是如何保证数据的安全性、可靠性和分区的
喜欢猪猪
kafka 分布式
Kafka作为一个高性能、可扩展的分布式流处理平台，通过多种机制来确保数据的安全性、可靠性和分区的有效管理。以下是关于Kafka如何保证数据安全性、可靠性和分区的详细解析：一、数据安全性SSL/TLS加密：Kafka支持SSL/TLS协议，通过配置SSL证书和密钥来加密数据传输，确保数据在传输过程中不会被窃取或篡改。这一机制有效防止了中间人攻击，保护了数据的安全性。SASL认证：Kafka支持多种
Java爬虫框架（一）--架构设计
狼图腾-狼之传说
java 框架 java 任务 html解析器 存储 电子商务
一、架构图那里搜网络爬虫框架主要针对电子商务网站进行数据爬取，分析，存储，索引。爬虫：爬虫负责爬取，解析，处理电子商务网站的网页的内容数据库：存储商品信息索引：商品的全文搜索索引Task队列：需要爬取的网页列表Visited表：已经爬取过的网页列表爬虫监控平台：web平台可以启动，停止爬虫，管理爬虫，task队列，visited表。二、爬虫1.流程1)Scheduler启动爬虫器，TaskMast
Java：爬虫框架
dingcho
Java java 爬虫
一、ApacheNutch2【参考地址】Nutch是一个开源Java实现的搜索引擎。它提供了我们运行自己的搜索引擎所需的全部工具。包括全文搜索和Web爬虫。Nutch致力于让每个人能很容易,同时花费很少就可以配置世界一流的Web搜索引擎.为了完成这一宏伟的目标,Nutch必须能够做到:每个月取几十亿网页为这些网页维护一个索引对索引文件进行每秒上千次的搜索提供高质量的搜索结果简单来说Nutch支持分
vue3中el-table中点击图片放大时，被表格覆盖
叫我小鹏呀
vue.js javascript 前端
问题：vue3中el-table中点击图片放大时，被表格覆盖。解决方法：el-image添加preview-teleported
vue项目element-ui的table表格单元格合并
酋长哈哈
vue.js elementui javascript 前端
一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'
python怎么将png转为tif_png转tif
weixin_39977276
发国外的文章要求图片是tif，cmyk色彩空间的。大小尺寸还有要求。比如网上大神多，找到了一段代码，感谢！https://www.jianshu.com/p/ec2af4311f56https://github.com/KevinZc007/image2Tifimportjava.awt.image.BufferedImage;importjava.io.File;importjava.io.Fi
Vue中table合并单元格用法
weixin_30613343
javascript ViewUI
地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex
springboot+vue项目实战一-创建SpringBoot简单项目
苹果酱0567
面试题汇总与解析 spring boot 后端 java 中间件 开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）
跳房子的前端
前端面试 javascript 开发语言 ecmascript
在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
java短路运算符和逻辑运算符的区别
3213213333332132
java基础
/*
* 逻辑运算符——不论是什么条件都要执行左右两边代码
* 短路运算符——我认为在底层就是利用物理电路的“并联”和“串联”实现的
* 原理很简单，并联电路代表短路或（||），串联电路代表短路与（&&）。
*
* 并联电路两个开关只要有一个开关闭合，电路就会通。
* 类似于短路或（||），只要有其中一个为true（开关闭合）是
Java异常那些不得不说的事
白糖_
java exception
一、在finally块中做数据回收操作
比如数据库连接都是很宝贵的，所以最好在finally中关闭连接。
JDBCAgent jdbc = new JDBCAgent();
try{
jdbc.excute("select * from ctp_log");
}catch(SQLException e){
...
}finally{
jdbc.close();
utf-8与utf-8(无BOM)的区别
dcj3sjt126com
PHP
BOM——Byte Order Mark，就是字节序标记 在UCS 编码中有一个叫做"ZERO WIDTH NO-BREAK SPACE"的字符，它的编码是FEFF。而FFFE在UCS中是不存在的字符，所以不应该出现在实际传输中。UCS规范建议我们在传输字节流前，先传输 字符"ZERO WIDTH NO-BREAK SPACE"。这样如
JAVA Annotation之定义篇
周凡杨
java 注解 annotation 入门 注释
Annotation: 译为注释或注解
An annotation, in the Java computer programming language, is a form of syntactic metadata that can be added to Java source code. Classes, methods, variables, pa
tomcat的多域名、虚拟主机配置
g21121
tomcat
众所周知apache可以配置多域名和虚拟主机，而且配置起来比较简单，但是项目用到的是tomcat，配来配去总是不成功。查了些资料才总算可以，下面就跟大家分享下经验。
很多朋友搜索的内容基本是告诉我们这么配置：
在Engine标签下增面积Host标签，如下：
<Host name="www.site1.com" appBase="webapps"
Linux SSH 错误解析（Capistrano 的cap 访问错误 Permission ）
510888780
linux capistrano
1.ssh -v
[email protected] 出现
Permission denied (publickey,gssapi-keyex,gssapi-with-mic,password).
错误
运行状况如下：
OpenSSH_5.3p1, OpenSSL 1.0.1e-fips 11 Feb 2013
debug1: Reading configuratio
log4j的用法
Harry642
java log4j
一、前言： log4j 是一个开放源码项目，是广泛使用的以Java编写的日志记录包。由于log4j出色的表现， 当时在log4j完成时，log4j开发组织曾建议sun在jdk1.4中用log4j取代jdk1.4 的日志工具类，但当时jdk1.4已接近完成，所以sun拒绝使用log4j，当在java开发中
mysql、sqlserver、oracle分页，java分页统一接口实现
aijuans
oracle jave
定义：pageStart 起始页，pageEnd 终止页,pageSize页面容量
oracle分页：
select * from ( select mytable.*,rownum num from (实际传的SQL) where rownum<=pageEnd) where num>=pageStart
sqlServer分页：
Hessian 简单例子
antlove
java Web service hessian
hello.hessian.MyCar.java
package hessian.pojo;
import java.io.Serializable;
public class MyCar implements Serializable {
private static final long serialVersionUID = 473690540190845543
数据库对象的同义词和序列
百合不是茶
sql 序列 同义词 ORACLE权限
回顾简单的数据库权限等命令;
解锁用户和锁定用户
alter user scott account lock/unlock;
//system下查看系统中的用户
select * dba_users;
//创建用户名和密码
create user wj identified by wj;
identified by
//授予连接权和建表权
grant connect to
使用Powermock和mockito测试静态方法
bijian1013
持续集成 单元测试 mockito Powermock
实例：
package com.bijian.study;
import static org.junit.Assert.assertEquals;
import java.io.IOException;
import org.junit.Before;
import org.junit.Test;
import or
精通Oracle10编程SQL(6)访问ORACLE
bijian1013
oracle 数据库 plsql
/*
*访问ORACLE
*/
--检索单行数据
--使用标量变量接收数据
DECLARE
v_ename emp.ename%TYPE;
v_sal emp.sal%TYPE;
BEGIN
select ename,sal into v_ename,v_sal
from emp where empno=&no;
dbms_output.pu
【Nginx四】Nginx作为HTTP负载均衡服务器
bit1129
nginx
Nginx的另一个常用的功能是作为负载均衡服务器。一个典型的web应用系统，通过负载均衡服务器，可以使得应用有多台后端服务器来响应客户端的请求。一个应用配置多台后端服务器，可以带来很多好处：
负载均衡的好处
增加可用资源
增加吞吐量
加快响应速度，降低延时
出错的重试验机制
Nginx主要支持三种均衡算法：
round-robin
l
jquery-validation备忘
白糖_
jquery css F# Firebug
留点学习jquery validation总结的代码：
function checkForm(){
validator = $("#commentForm").validate({// #formId为需要进行验证的表单ID
errorElement :"span",// 使用"div"标签标记错误， 默认:&
solr限制admin界面访问（端口限制和http授权限制）
ronin47
限定Ip访问
solr的管理界面可以帮助我们做很多事情，但是把solr程序放到公网之后就要限制对admin的访问了。
可以通过tomcat的http基本授权来做限制，也可以通过iptables防火墙来限制。
我们先看如何通过tomcat配置http授权限制。
第一步： 在tomcat的conf/tomcat-users.xml文件中添加管理用户，比如：
<userusername="ad
多线程-用JAVA写一个多线程程序，写四个线程，其中二个对一个变量加1，另外二个对一个变量减1
bylijinnan
java 多线程
public class IncDecThread {
private int j=10;
/*
* 题目:用JAVA写一个多线程程序，写四个线程，其中二个对一个变量加1，另外二个对一个变量减1
* 两个问题：
* 1、线程同步--synchronized
* 2、线程之间如何共享同一个j变量--内部类
*/
public static
买房历程
cfyme
2015-06-21: 万科未来城，看房子
2015-06-26: 办理贷款手续，贷款73万，贷款利率5.65=5.3675
2015-06-27: 房子首付,签完合同
2015-06-28，央行宣布降息 0.25，就2天的时间差啊，没赶上。
首付，老婆找他的小姐妹接了5万，另外几个朋友借了1-
[军事与科技]制造大型太空战舰的前奏
comsci
制造
天气热了........空调和电扇要准备好..........
最近,世界形势日趋复杂化,战争的阴影开始覆盖全世界..........
所以,我们不得不关
dateformat
dai_lm
DateFormat
"Symbol Meaning Presentation Ex."
"------ ------- ------------ ----"
"G era designator (Text) AD"
"y year
Hadoop如何实现关联计算
datamachine
mapreduce hadoop 关联计算
选择Hadoop，低成本和高扩展性是主要原因，但但它的开发效率实在无法让人满意。
以关联计算为例。
假设：HDFS上有2个文件，分别是客户信息和订单信息，customerID是它们之间的关联字段。如何进行关联计算，以便将客户名称添加到订单列表中？
&nbs
用户模型中修改用户信息时，密码是如何处理的
dcj3sjt126com
yii
当我添加或修改用户记录的时候对于处理确认密码我遇到了一些麻烦，所有我想分享一下我是怎么处理的。
场景是使用的基本的那些(系统自带)，你需要有一个数据表(user)并且表中有一个密码字段(password),它使用 sha1、md5或其他加密方式加密用户密码。
面是它的工作流程: 当创建用户的时候密码需要加密并且保存，但当修改用户记录时如果使用同样的场景我们最终就会把用户加密过的密码再次加密，这
中文 iOS/Mac 开发博客列表
dcj3sjt126com
Blog
本博客列表会不断更新维护，如果有推荐的博客，请到此处提交博客信息。
本博客列表涉及的文章内容支持 定制化Google搜索，特别感谢 JeOam 提供并帮助更新。
本博客列表也提供同步更新的OPML文件（下载OPML文件），可供导入到例如feedly等第三方定阅工具中，特别感谢 lcepy 提供自动转换脚本。这里有导入教程。
js去除空格，去除左右两端的空格
蕃薯耀
去除左右两端的空格 js去掉所有空格 js去除空格
js去除空格，去除左右两端的空格
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>&g
SpringMVC4零配置--web.xml
hanqunfeng
springmvc4
servlet3.0+规范后，允许servlet，filter，listener不必声明在web.xml中，而是以硬编码的方式存在，实现容器的零配置。
ServletContainerInitializer：启动容器时负责加载相关配置
package javax.servlet;
import java.util.Set;
public interface ServletContainer
《开源框架那些事儿21》：巧借力与借巧力
j2eetop
框架 UI
同样做前端UI，为什么有人花了一点力气，就可以做好？而有的人费尽全力，仍然错误百出？我们可以先看看几个故事。
故事1：巧借力，乌鸦也可以吃核桃
有一个盛产核桃的村子，每年秋末冬初，成群的乌鸦总会来到这里，到果园里捡拾那些被果农们遗落的核桃。
核桃仁虽然美味，但是外壳那么坚硬，乌鸦怎么才能吃到呢？原来乌鸦先把核桃叼起，然后飞到高高的树枝上，再将核桃摔下去，核桃落到坚硬的地面上，被撞破了，于是，
JQuery EasyUI 验证扩展
可怜的猫
jquery easyui 验证
最近项目中用到了前端框架-- EasyUI，在做校验的时候会涉及到很多需要自定义的内容，现把常用的验证方式总结出来，留待后用。
以下内容只需要在公用js中添加即可。
使用类似于如下：
<input class="easyui-textbox" name="mobile" id="mobile&
架构师之httpurlconnection----------读取和发送(流读取效率通用类)
nannan408
1.前言.
如题.
2.代码.
/*
* Copyright (c) 2015, S.F. Express Inc. All rights reserved.
*/
package com.test.test.test.send;
import java.io.IOException;
import java.io.InputStream
Jquery性能优化
r361251
JavaScript jquery
一、注意定义jQuery变量的时候添加var关键字
这个不仅仅是jQuery，所有javascript开发过程中，都需要注意，请一定不要定义成如下：
$loading = $('#loading'); //这个是全局定义，不知道哪里位置倒霉引用了相同的变量名，就会郁闷至死的
二、请使用一个var来定义变量
如果你使用多个变量的话，请如下方式定义：
. 代码如下:
var page
在eclipse项目中使用maven管理依赖
tjj006
eclipse maven
概览:
如何导入maven项目至eclipse中
建立自有Maven Java类库服务器
建立符合maven代码库标准的自定义类库
Maven在管理Java类库方面有巨大的优势，像白衣所说就是非常“环保”。
我们平时用IDE开发都是把所需要的类库一股脑的全丢到项目目录下，然后全部添加到ide的构建路径中，如果用了SVN/CVS，这样会很容易就 把
中国天气网省市级联页面
x125858805
级联
1、页面及级联js
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
&l
