Vue.js 第2章 钩子函数&自定义指令&过滤器&计算属性&侦听器
目标
钩子函数
自定义指令
自定义过滤器
计算属性
监听属性
局部自定义指令
为什么需要自定义指令
为了复用，为了代码的灵活
指令的分类：全局指令，局部指令
在vm外面创建的指令
通过Vue.directive来创建
如何定义自定义指令(不用赋值)
Vue.directive(名称，{inserted(el,binding){}})
如何使用自定义指令(不用赋值)
v-名称
如何定义带值的指令
Vue.directive(名称，{inserted(el,binding){binding.value}})
如何使用需要赋值的指令
v-名称='值'
需求：我们希望能够在页面加载完成的时候让id文本框获取焦点
页面加载完毕就触发：window.onload
获取焦点:dom.focus()
在vue中有一套完整的生命周期的钩子函数
mounted钩子函数，它是一个独立的结构，不要写在methods属性中
钩子函数：在某个场景会自动触发的函数
不建议使用原生dom的方式去获取元素，因为vue就是希望能够将我们从繁琐的dom操作中解脱
vue中标记元素可以通过ref （reference）
ref='标记值'
功能类似于之前的id设置
获取值通过this.$refs
上面的实现方式虽然可以，但是有一个重大 的缺点：如果需要获取焦点的元素发生变化，那和以意味着模板代码和mounted钩子函数中的代码也需要进行修改--不方便也不合理。我希望达到这样的效果：我做出一个能够让元素获取焦点的功能(函数)，如果元素需要获取焦点就进行调用，否则就当它不存在--这个玩意就是指令
指令：可以实现某种功能，用户可以选择使用
什么是全局自定义指令 ：在vue实例外创建的指令
如何创建全局自定义指令
Vue.directive(名称，{inserted钩子函数})
inserted钩子函数：在添加指令的元素插入到父节点时触发--说白了就是生成dom树
<!DOCTYPE html>
<html lang="en"> <head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#app {
width: 600px;
margin: 10px auto;
} .tb {
border-collapse: collapse;
width: 100%;
} .tb th {
background-color: #0094ff;
color: white;
} .tb td,
.tb th {
padding: 5px;
border: 1px solid black;
text-align: center;
} .add {
padding: 5px;
border: 1px solid black;
margin-bottom: 10px;
}
</style>
<!-- 1.引入js文件 -->
<script src="./js/vue2.js"></script>
</head> <body>
<!-- 4.添加模板结构 -->
<div id="app">
<div class="add">
编号:
<input type="text" v-model='id' ref='bid'>
品牌名称:
<input type="text" v-model='brandname' ref='bname' v-focus>
<input type="button" value="添加" @click='add'>
</div>
<div class="add">
品牌名称:
<input type="text" placeholder="请输入搜索条件" >
</div>
<div>
<table class="tb">
<thead>
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 5.实现循环遍历生成动态结构 -->
<tr v-for="(value,index) in brandList">
<td>{{value.id}}</td>
<td>{{value.name}}</td>
<td>{{value.time}}</td>
<td>
<a href="#" @click='del(index)'>删除</a>
</td>
</tr>
<!-- 添加提示 -->
<!--通过v-show来实现提示信息的合理出现 -->
<tr v-show="brandList.length==0">
<td colspan="4">没有任何数据了，请先添加</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
// window.onload = function(){ // }
// 1.定义全局自定义指令：全局自定义是指在vm实例定义的指令
// 2.通过Vue.directive来创建自定义指令
// Vue.directive(指令名称,{配置})
Vue.directive('focus',{
inserted(el,binding,vNode){
// 我们需要获取元素并设置聚焦
console.log(el)
el.focus()
}
}) // 2.创建vm实例
var vm = new Vue({
// 3.添加配置
el: '#app',
data: {
// id号
id:'',
// 品牌名称
brandname:'',
brandList: [
{
"id": 1,
name: 'AA',
time: new Date()
},
{
"id": 2,
name: 'BB',
time: new Date()
}
]
},
methods:{
// 删除
del(index){
this.brandList.splice(index,1)
},
// 添加
add(){
// 生成对象
var newobj = {id:this.id,name:this.brandname,time:new Date()}
// 添加到数组
this.brandList.push(newobj)
}
},
// 添加一个生命周期钩子函数
mounted(){
// 实现元素的自动获取焦点
// document.querySelector('#bid').focus()
// console.log(this)
// this.$refs可以获取模板中所有拥有ref属性的元素，它是一个对象
// this.$refs.bid.focus()
}
})
</script>
</body> </html>
使用 “v-名称” 来调用全局自定义指令
新的需求：我们需要根据用户的喜好来修改文本颜色
通过指令来实现
通过Vue.directive(名称,{inserted(el,binding){}})
使用指令的时候：v-名称='值'
<!DOCTYPE html>
<html lang="en"> <head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#app {
width: 600px;
margin: 10px auto;
} .tb {
border-collapse: collapse;
width: 100%;
} .tb th {
background-color: #0094ff;
color: white;
} .tb td,
.tb th {
padding: 5px;
border: 1px solid black;
text-align: center;
} .add {
padding: 5px;
border: 1px solid black;
margin-bottom: 10px;
}
</style>
<!-- 1.引入js文件 -->
<script src="./js/vue2.js"></script>
</head> <body>
<!-- 4.添加模板结构 -->
<div id="app">
<div class="add">
编号:
<input type="text" v-model='id' ref='bid' v-setcolor="color">
品牌名称:
<input type="text" v-model='brandname' ref='bname' v-focus >
<input type="button" value="添加" @click='add'>
</div>
<div class="add">
品牌名称:
<input type="text" placeholder="请输入搜索条件" >
</div>
<div>
<table class="tb">
<thead>
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 5.实现循环遍历生成动态结构 -->
<tr v-for="(value,index) in brandList">
<td>{{value.id}}</td>
<td>{{value.name}}</td>
<td>{{value.time}}</td>
<td>
<a href="#" @click='del(index)'>删除</a>
</td>
</tr>
<!-- 添加提示 -->
<!--通过v-show来实现提示信息的合理出现 -->
<tr v-show="brandList.length==0">
<td colspan="4">没有任何数据了，请先添加</td>
</tr>
</tbody>
</table>
<button @click='color="red"'>红色</button>
<button @click='color="green"'>绿色</button>
<button @click='color="yellow"'>黄色</button>
</div>
</div>
<script>
// window.onload = function(){ // }
// 1.定义全局自定义指令：全局自定义是指在vm实例定义的指令
// 2.通过Vue.directive来创建自定义指令
// Vue.directive(指令名称,{配置})
Vue.directive('focus',{
inserted(el,binding,vNode){
// 我们需要获取元素并设置聚焦
console.log(el)
el.focus()
}
})
// 设置颜色的自定义指令
Vue.directive('setcolor',{
// el:当前使用这个指令的元素
// binding:它是一个对象，里面有一个属性value,就是当前指令所绑定的值
inserted(el,binding){
console.log(binding)
el.style.color = binding.value
},
// 添加update,监听指令的值的变化，以便页面进行刷新
update(el,binding){
console.log(el)
console.log(binding)
el.style.color = binding.value
}
}) // 2.创建vm实例
var vm = new Vue({
// 3.添加配置
el: '#app',
data: {
color:'yellow',
// id号
id:'',
// 品牌名称
brandname:'',
brandList: [
{
"id": 1,
name: 'AA',
time: new Date()
},
{
"id": 2,
name: 'BB',
time: new Date()
}
]
},
methods:{
// 删除
del(index){
this.brandList.splice(index,1)
},
// 添加
add(){
// 生成对象
var newobj = {id:this.id,name:this.brandname,time:new Date()}
// 添加到数组
this.brandList.push(newobj)
}
},
// 添加一个生命周期钩子函数
mounted(){
// 实现元素的自动获取焦点
// document.querySelector('#bid').focus()
// console.log(this)
// this.$refs可以获取模板中所有拥有ref属性的元素，它是一个对象
// this.$refs.bid.focus()
}
})
</script>
</body> </html>
命名细节：如果你使用cemal命名法，那么在使用指令的时候就需要将多个单词拆分开，使用-连接。所以建议定义指令的时候命名都是小写
update钩子函数可处理当数据或者模板内容发生变化的时候就自动的触发
// 添加update,监听指令的值的变化，以便页面进行刷新
update(el,binding){
console.log(el)
console.log(binding)
el.style.color = binding.value
}
局部过滤器
作用：对传入的数据进行处理，返回合理的结果
种类：
全局过滤器：在vm实例之前(外面)创建的过滤器
局部过滤器：在组件内部创建的过滤器
如何定义
Vue.filter(名称，函数)
细节
过滤器会默认接收一个参数，这个参数就是当前调用过滤器的数据对象
如果你手动传递了参数，也不会影响默认参数的传递，意味着过滤器中直接在默认参数后添加新的接收形参就可以了
过滤器的函数“一定”要写return,因为过滤器一定要返回结果
如何调用
通过管道符|
格式：需要调用过滤器的数据 | 过滤器名称
<!DOCTYPE html>
<html lang="en"> <head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#app {
width: 600px;
margin: 10px auto;
} .tb {
border-collapse: collapse;
width: 100%;
} .tb th {
background-color: #0094ff;
color: white;
} .tb td,
.tb th {
padding: 5px;
border: 1px solid black;
text-align: center;
} .add {
padding: 5px;
border: 1px solid black;
margin-bottom: 10px;
}
</style>
<!-- 1.引入js文件 -->
<script src="./js/vue2.js"></script>
</head> <body>
<!-- 4.添加模板结构 -->
<div id="app">
<div class="add">
编号:
<input type="text" v-model='id' ref='bid' v-setcolor="color">
品牌名称:
<input type="text" v-model='brandname' ref='bname' v-focus>
<input type="button" value="添加" @click='add'>
</div>
<div class="add">
品牌名称:
<input type="text" placeholder="请输入搜索条件" @keyup='search'>
</div>
<div>
<table class="tb">
<thead>
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 5.实现循环遍历生成动态结构 -->
<tr v-for="(value,index) in brandList">
<td>{{value.id}}</td>
<td>{{value.name}}</td>
<!-- <td>{{timeFormat(value.time)}}</td> -->
<td>{{value.time | timeForamt('~')}}</td>
<td>
<a href="#" @click='del(index)'>删除</a>
</td>
</tr>
<!-- 添加提示 -->
<!--通过v-show来实现提示信息的合理出现 -->
<tr v-show="brandList.length==0">
<td colspan="4">没有任何数据了，请先添加</td>
</tr>
</tbody>
</table>
<button @click='color="red"'>红色</button>
<button @click='color="green"'>绿色</button>
<button @click='color="yellow"'>黄色</button>
</div>
</div>
<script>
// window.onload = function(){ // }
// 1.定义全局自定义指令：全局自定义是指在vm实例定义的指令
// 2.通过Vue.directive来创建自定义指令
// Vue.directive(指令名称,{配置})
Vue.directive('focus', {
inserted(el, binding, vNode) {
// 我们需要获取元素并设置聚焦
console.log(el)
el.focus()
}
})
// 设置颜色的自定义指令
Vue.directive('setcolor', {
// el:当前使用这个指令的元素
// binding:它是一个对象，里面有一个属性value,就是当前指令所绑定的值
inserted(el, binding) {
console.log(binding)
el.style.color = binding.value
},
// 添加update,监听指令的值的变化，以便页面进行刷新
update(el, binding) {
console.log(el)
console.log(binding)
el.style.color = binding.value
}
}) // 添加全局的自定义过滤器
Vue.filter('timeForamt', (date,seperator1) => {
// var date = new Date();
// var seperator1 = "/";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = year + seperator1 + month + seperator1 + strDate;
return currentdate;
}) // 2.创建vm实例
var vm = new Vue({
// 3.添加配置
el: '#app',
data: {
color: 'yellow',
// id号
id: '',
// 品牌名称
brandname: '',
brandList: [
{
"id": 1,
name: 'AA',
time: new Date()
},
{
"id": 2,
name: 'BB',
time: new Date()
}
]
},
methods: {
// 格式化日期
// timeFormat(time){
// return "2019-9-9 :9:9:9"
// },
// 删除
del(index) {
this.brandList.splice(index, 1)
},
// 添加
add() {
// 生成对象
var newobj = { id: this.id, name: this.brandname, time: new Date() }
// 添加到数组
this.brandList.push(newobj)
}
},
// 添加一个生命周期钩子函数
mounted() {
// 实现元素的自动获取焦点
// document.querySelector('#bid').focus()
// console.log(this)
// this.$refs可以获取模板中所有拥有ref属性的元素，它是一个对象
// this.$refs.bid.focus()
}
})
</script>
</body> </html>
计算属性
什么是计算属性：它是一个属性对象，里面可以封装复杂的业务逻辑--方法
你在计算属性中定义是的函数，但是可以像使用普通属性一样来使用计算属性
里面的函数是一个属性，所以不能以函数的方式进行调用，否则报错
什么场景使用计算属性：当你的模板中的业务比较复杂的时候就可以使用计算属性进行封装
当计算属性中依赖的数据发生变化的时候，这个计算属性就会被触发
所谓依赖的数据就是指里面所依赖的this的成员
它与普通方法的区别:
普通方法没有缓存机制，只要你使用到了方法，就必须进行方法的调用执行
而计算属性是基本依赖进行缓存的，意味着只要依赖项的值没有变化，那么计算属性不会再重新的调用，而是使用上一次的计算结果--提高效率
使用计算属性实现搜索功能
<!DOCTYPE html>
<html lang="en"> <head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#app {
width: 600px;
margin: 10px auto;
} .tb {
border-collapse: collapse;
width: 100%;
} .tb th {
background-color: #0094ff;
color: white;
} .tb td,
.tb th {
padding: 5px;
border: 1px solid black;
text-align: center;
} .add {
padding: 5px;
border: 1px solid black;
margin-bottom: 10px;
}
</style>
<!-- 1.引入js文件 -->
<script src="./js/vue2.js"></script>
</head> <body>
<!-- 4.添加模板结构 -->
<div id="app">
<div class="add">
编号:
<input type="text" v-model='id' ref='bid' v-setcolor="color">
品牌名称:
<input type="text" v-model='brandname' ref='bname' v-focus>
<input type="button" value="添加" @click='add'>
</div>
<div class="add">
品牌名称:
<!-- oninput -->
<input type="text" placeholder="请输入搜索条件" v-model='userKey'>
</div>
<div>
<table class="tb">
<thead>
<tr>
<th>编号</th>
<th>品牌名称</th>
<th>创立时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- 5.实现循环遍历生成动态结构 -->
<tr v-for="(value,index) in search">
<td>{{value.id}}</td>
<td>{{value.name}}</td>
<!-- <td>{{timeFormat(value.time)}}</td> -->
<td>{{value.time | timeForamt('~')}}</td>
<td>
<a href="#" @click='del(index)'>删除</a>
</td>
</tr>
<!-- 添加提示 -->
<!--通过v-show来实现提示信息的合理出现 -->
<tr v-show="search.length==0">
<td colspan="4">没有任何数据了，请先添加</td>
</tr>
</tbody>
</table>
<button @click='color="red"'>红色</button>
<button @click='color="green"'>绿色</button>
<button @click='color="yellow"'>黄色</button>
</div>
</div>
<script>
// window.onload = function(){ // }
// 1.定义全局自定义指令：全局自定义是指在vm实例定义的指令
// 2.通过Vue.directive来创建自定义指令
// Vue.directive(指令名称,{配置})
Vue.directive('focus', {
inserted(el, binding, vNode) {
// 我们需要获取元素并设置聚焦
// console.log(el)
el.focus()
}
})
// 设置颜色的自定义指令
Vue.directive('setcolor', {
// el:当前使用这个指令的元素
// binding:它是一个对象，里面有一个属性value,就是当前指令所绑定的值
inserted(el, binding) {
// console.log(binding)
el.style.color = binding.value
},
// 添加update,监听指令的值的变化，以便页面进行刷新
update(el, binding) {
// console.log(el)
// console.log(binding)
el.style.color = binding.value
}
}) // 添加全局的自定义过滤器
Vue.filter('timeForamt', (date,seperator1) => {
// var date = new Date();
// var seperator1 = "/";
var year = date.getFullYear();
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
var currentdate = year + seperator1 + month + seperator1 + strDate;
return currentdate;
}) // 2.创建vm实例
var vm = new Vue({
// 3.添加配置
el: '#app',
data: {
// 搜索关键字
userKey:'',
color: 'yellow',
// id号
id: '',
// 品牌名称
brandname: '',
brandList: [
{
"id": 1,
name: 'AA',
time: new Date()
},
{
"id": 2,
name: 'BB',
time: new Date()
}
]
},
methods: {
// 删除
del(index) {
this.brandList.splice(index, 1)
},
// 添加
add() {
// 生成对象
var newobj = { id: this.id, name: this.brandname, time: new Date() }
// 添加到数组
this.brandList.push(newobj)
}
},
computed: {
search(){
// 监听用户关键字的变化，只是用户输入有变化，就需要重新进行搜索
// 计算属性中的函数一般都会返回一个计算结果
// var result = []
// for(var i=0;i<this.brandList.length;i++){
// // 说明这个对象的name值中包含关键字，这就是我要找的记录之一
// // 如果没有输入任何的关键字，那么this.userKey默认就是""
// if(this.brandList[i].name.indexOf(this.userKey) != -1){
// result.push(this.brandList[i])
// }
// }
// return result
// 每次都会从数组中取出一个值，传递给回调函数中的参数value
// 在回调函数中对Value进行检测判断如果满足条件，那么就会将value值存储到filter方法内部创建的临时数组arr中，最终将这个数组arr返回
// forEach map filter
return this.brandList.filter((value) => {
return value.name.indexOf(this.userKey) != -1
})
}
}
})
</script>
</body> </html>
使用计算属性实现搜索功能
侦听属性--监听器
计算属性有一个不足：不能响应异步操作的结果。如果需要监听异步操作时数据的变化，就需要使用到watch
watch监听器如何添加
侦听器是一个属性
里面的方法名称不能随意，必须和你需要侦听的属性名称完全一致
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./js/vue2.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model='first'>
<input type="text" v-model='second'>
<p>{{fullname}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
first:'',
second:'',
fullname:''
},
// 添加侦听器
watch:{
// 方法的名称必须和你想要侦听的data中的成员名称一致
first(newvalue,oldvalue){
setTimeout(() => {
console.log(newvalue,oldvalue)
this.fullname = newvalue.trim().toUpperCase() +":"+this.second
}, 100);
},
second(newvalue,oldvalue){
console.log(newvalue,oldvalue)
}
}
})
</script>
</body>
</html>
watch侦听器
watch监听如何实现深度监听
什么是深度：不再是this的直接成员，面是this的成员的成员
两种实现方式：
1.handler +deep
2.'对象.属性'(){}
深度监听Demo
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./js/vue2.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model='obj.name'>
<input type="text" v-model='obj.age'>
<p>{{obj.name+":"+obj.age}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:'',
obj:{
name:'',
age:''
}
},
// 添加侦听属性
watch:{
msg(){},
// 深度侦听：
// 为什么直接侦听obj，在修改数据的时候没有响应，是因为obj一个对象，你修改对象的属性值，并没有修改对象的的地址
// obj(){ // }
// obj:{
// // 通过handler函数进行侦听
// handler(nv,ov){
// console.log(nv.name,nv.age)
// },
// // 设置为深度侦听
// deep:true
// }
// 侦听指定的成员值的变化
'obj.name' (nv){
console.log(nv)
}
}
})
</script>
</body>
</html>
深度监听
什么时候使用侦听器？
当数据操作涉及到异步方式的时候，就需要使用侦听器
Vue学习文档：https://cn.vuejs.org/v2/guide/
Vue.js 第2章 钩子函数&自定义指令&过滤器&计算属性&侦听器的更多相关文章
- Vue学习计划基础笔记(二) - 模板语法,计算属性,侦听器
模板语法.计算属性和侦听器 目标: 1.熟练使用vue的模板语法 2.理解计算属性与侦听器的用法以及应用场景 1. 模板语法 <div id="app"> <!- ...
- 【Vue】浅谈Vue(一)：从模板语法数据绑定、指令到计算属性
写在前面 今年前端届比较有意思,从大漠穷秋发表文章比较angular和vue,继而致歉vue作者.社区,从谷歌辞去Angular Developer PM in China一职并且呼吁大家停止各种无谓 ...
- Vue.js（16）之 directive自定义指令
推荐阅读:Vue.directive基础,在Vue模块开发中使用 全局指令 Vue.directive('全局自定义指令名称', { /* 自定义指令配置对象 */ }) 私有指令 <templ ...
- Vue ---- 表单指令 条件指令 循环指令 分隔符 过滤器 计算属性 监听属性
目录 案例讲解: 一. 表单指令 1.重点: 补充 2.单选框 3.单一复选框 4.多复选框 二 . 条件指令 v-if/v-show ... v-clock 三 . 循环指令 string arra ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
- Vue.js 2.x render 渲染函数 & JSX
Vue.js 2.x render 渲染函数 & JSX Vue绝大多数情况下使用template创建 HTML.但是比如一些重复性比较高的场景,需要运用 JavaScript 的完全编程能力 ...
- Vue2.0 【第二季】第4节 Vue的生命周期（钩子函数）
目录 Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函数) Vue2.0 [第二季]第4节 Vue的生命周期(钩子函数) 第4节 Vue的生命周期(钩子函 ...
- VUE生命周期中的钩子函数及父子组件的执行顺序
先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等.同时在这个过程中也会运行 ...
- [Vue]vue中各选项及钩子函数执行顺序
在vue中,实例选项和钩子函数和{{}}表达式都是不需要手动调用就可以直接执行的. 一.生命周期图示 二.vue中各选项及钩子函数执行顺序 1.在页面首次加载执行顺序有如下: beforeCreate ...
随机推荐
- WWDC2013 Objective-C 新特性
WWDC(Apple Worldwide Developers Conference),苹果开发者大会,苹果开发者怎么能少得了Objective-C,正是它支撑着整个苹果开发生态圈,同样这门语言也代表 ...
- 为什么要使用ul li布局网站导航条？使用ul li布局网站网页导航必要性
会布局的都知道网站导航条布局非常重要,可能一个导航条最终布局效果有时可以使用ul li列表标签布局,有时可以不用ul li布局,而是直接一个div盒子里直接放锚文本超链接的栏目名称,也能实现,看下图. ...
- 阿里云出手SaaS生态，中国SaaS市场小而不强有望破解
企业服务SaaS市场还有很大的增长空间.SaaS的鼻祖Salesforces今年5月迈上了千亿美元市值的门槛,再一次为ToB市场注入了兴奋剂.单单一个SaaS CRM,目前全球的市场规模就超过400亿 ...
- linux下对拍
#!/bin/bash t=0; while true; do let "t = $t + 1" printf $t printf ":\n" ./rand & ...
- PHPStrom直接在编辑器打开php文件
以下是自己配置PHP+Apache的开发环境,集成环境的话要换第二种方法(看个人配置):PHPStrom 如果希望直接在编辑器打开php文件,要做以下这几步配置. 第一种:非集成环境 1 2 3 第二 ...
- Watering Grass (贪心，最小覆盖)
参考: https://blog.csdn.net/shuangde800/article/details/7828675 https://www.cnblogs.com/haoabcd2010/p/ ...
- NOIP模拟 17.8.18
NOIP模拟17.8.18 A.小菜一碟的背包[题目描述]Blice和阿强巴是好朋友但萌萌哒Blice不擅长数学,所以阿强巴给了她一些奶牛做练习阿强巴有 n头奶牛,每头奶牛每天可以产一定量的奶,同时也 ...
- Hibernate的映射机制是怎样？
Hibernate的映射机制对象关系映射(Object Relation Mapping(ORM))是一种为了解决面向对象与面向关系数据库互不匹配现象的技术,简而言之ORM是通过使用描述对象之间映射的 ...
- Path Sum II深度优先找路径
Given a binary tree and a sum, find all root-to-leaf paths where each path's sum equals the given su ...
- 【JZOJ4811】【NOIP2016提高A组五校联考1】排队
题目描述 输入 输出 样例输入 5 4 1 2 1 3 3 4 3 5 1 4 2 4 1 2 2 5 样例输出 3 1 1 2 数据范围 样例解释 解法 可推知原树可以转换为一个序列,即优先序列: ...