Vue 实例之数据绑定,事件,组件,生命周期!!![通俗易懂]

Vue 实例之数据绑定,事件,组件,生命周期!!![通俗易懂]今天写了34个例子,希望通过这些例子和效果图,帮助大家了解和使用Vue的数据绑定,Vue事件,Vue组件,Vue生命周期。文章写的非常详细,一看就能看懂。如果有问题,可以即时指正,十分感谢~

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

关于 vue 设计模式的简介

今天讲实例,原理请参照这篇文章!vue 设计模式的简介

1.Vue实例

下面是vue 中一些属性的说明~

data 说明
el 唯一根元素
data Vue实例数据对象
watch 监听数据变化
filters 过滤器
methods 定义Vue实例中的方法
computed 计算属性
components 定义子组件

创建简单 vue 实例

<script>
  //需要使用 new 关键字
  var vm = new Vue({ 
   
    // 内容
  })
<script>

Jetbrains全家桶1年46,售后保障稳定

声明一下,以下所有案例均引用 vue.js 文件< script src=”…/js/vue2.6.10.js”> </ script> 注意引用的路径~如果怕错的话,src中可以使用这个网址”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”,代码中出现的 yzx ,可以忽略,这是我加的作者标识~

el 唯一根标签:

在创建Vue实例时,el表示唯一根标签,class或id选择器可用来将页面结构与Vue实例对象vm中的el绑定。

<!-- 定义唯一根元素div -->
<div id="app">{ 
   { 
   yzxname}}</div>
<script>
var vm = new Vue({ 
   
  el: '#app', // 通过 el 与 div 元素绑定
  data: { 
   yzxname: 'yzx成功创建Vue实例!'}
})
</script>

在这里插入图片描述

data:

data初始数据:Vue实例的数据对象为data,Vue会将data的属性转换为getter、setter,从而让data的属性能够响应数据变化。data选项的值是对象,对象里面可以写多个值。

<!-- 定义唯一根元素 div -->
<div id="app"><p>{ 
   { 
   name}}</p></div>
<script>
var vm = new Vue({ 
   
  el: '#app', // 通过el与div元素绑定
  data: { 
   name: 'yzx定义初始数据'}
})
// js中获取 data数据 两种方法都可以~
console.log(vm.$data.name)
console.log(vm.name)
</script>

在这里插入图片描述

methods:

methods属性用来定义方法,通过Vue实例可以直接访问这些方法。在定义的方法中,this指向Vue实例本身。定义在methods属性中的方法可中的事件处理方法使用。

<div id="app">
    <!-- 为button按钮绑定click事件 -->
    <button @click="showInfo">请单击</button>
    <p>{ 
   { 
   msg}}</p>
</div>
<script>
var vm = new Vue({ 
   
el: '#app',
data: { 
   
  msg: '原始的值'
},
methods: { 
   
   // 定义事件处理方法showInfo
   	showInfo () { 
   
        this.msg = 'yzx触发单击事件'
     }
  }
})
</script>

在这里插入图片描述

computed:

computed 计算属性:计算属性结果会被缓存起来,当依赖的响应式属性发生变化时,才会重新计算,返回最终结果。

    <div id="app">
        <p>总价格:{ 
   { 
   totalPrice}}</p>
        <p>单价 yzx:{ 
   { 
   price}}</p>
        <p>数量 yzx:{ 
   { 
   num}}</p>
        <div>
            <button @click="num == 0 ? 0 : num--">减少数量</button>
            <button @click="num++">增加数量</button>
            <button @click="logTotalPrice">计算总价格</button>
        </div>
    </div>
    <script>
        var vm = new Vue({ 
   
            el: '#app',
            data: { 
   
                price: 20,
                num: 0
            },
            computed: { 
      
                // 总价格totalPrice
                totalPrice() { 
   
                    console.log("totalprice执行了")
                    return this.price * this.num
                }
            },
            methods:{ 
   
                logTotalPrice(){ 
   
                    console.log('totalprice的计算结果为'+this.totalPrice)
                }
            }
        })
    </script>

在这里插入图片描述

watch:

通过 watch 获取 cityName 的新值和旧值

<div id="app">
        <!-- input中的v-model用于在表单控件元素上创建双向数据绑定 -->
        <input type="text" v-model="cityName">
    </div>
    <script>
        var vm = new Vue({ 
   
            el: '#app',
            data: { 
   
                cityName: 'yzxyzx'
            },
            watch: { 
   
                cityName(newName, oldName) { 
   
                    console.log(newName, oldName)
                }
            }
        })
    </script>

在这里插入图片描述

filters:

filters过滤器:在页面中直接操作数据,返回最终结果

    <div id="app">
        <div>{ 
   { 
   message | toUpcase}}</div>
    </div>
    <script>
        var vm = new Vue({ 
   
            el: '#app',
            data: { 
   
                message: 'hello yzx'
            },
            filters: { 
   
                // 将 hello yzx 转换为 HELLO YZX
                toUpcase(value) { 
   
                    return value ? value.toUpperCase() : ''
                }
            }
        })
    </script>

在这里插入图片描述

2.Vue 数据绑定

绑定样式:

Vue提供了样式绑定功能,可以通过绑定内联样式和绑定样式类这两种方式来实现。

绑定内联样式:

在vm实例的data中定义myDiv样式对象,通过v-bind绑定data中定义的myDiv对象。

    <div id="app">
        <!-- 绑定样式属性值 -->
        <div v-bind:style="{backgroundColor:pink,width:width,height:height}">
            <!-- 绑定样式对象 -->
            <div v-bind:style="myDiv"></div>
        </div>
    </div>
    <script>
        var vm = new Vue({ 
   
            el: "#app",
            data: { 
   
                pink: 'pink',
                width: '100%',
                height: '200px',
                myDiv: { 
   
                    backgroundColor: 'red',
                    width: '100px',
                    height: '100px'
                }
            }
        });
    </script>

在这里插入图片描述

绑定样式类名:

通过绑定data中的类名实现元素的样式。

    <style>
        .box { 
   
            background-color: pink;
            width: 100%;
            height: 200px;
        }
        .inner { 
   
            background-color: red;
            width: 100px;
            height: 50px;
            border: 2px solid white;
        }
    </style>
</head>
<body>
    <div id="app">
        <div v-bind:class="{box}">我是 box,,,yzx
            <div v-bind:class="{inner}">我是inner1</div>
            <div v-bind:class="{inner}">我是inner2</div>
        </div>
    </div>
    <script>
        var vm = new Vue({ 
   
            el: '#app',
            data: { 
   
                box: 'box',
                inner: 'inner'
            }
        })
    </script>

在这里插入图片描述

内置指令

在这里插入图片描述

v-model指令:

v-model主要实现数据双向绑定,通常用在表单元素上,例如input、textarea、select等。
在这里插入图片描述

v-text指令:

v-text是在DOM元素内部插入文本内容,页面结构代码如下:

    <div id="app">
        <p v-text="msg"></p>
    </div>
    <script>
        var vm = new Vue({ 
   
            el: '#app',
            data: { 
   
                msg: '我是v-text'
            }
        })
    </script>

在这里插入图片描述

v-html指令:

v-html(单向绑定)是在DOM元素内部插入HTML标签内容,页面结构代码如下:

  <div id="app">
    <div v-html="msg"></div>
  </div>
  <script>
    var vm = new Vue({ 
   
      el: '#app',
      data: { 
   
        msg: '<h2>我是v-html yzx </h2>'
      }
    })
  </script>

在这里插入图片描述

v-bind指令:

v-bind可以实现单向数据绑定,页面结构代码如下:

<div id="app">
   <input v-bind:value="msg">   
</div>  
<script>
   var vm = new Vue({ 
   
       el: '#app',
       data: { 
   
       msg: '我是v-bind yzx'
       }
     })
</script>

在这里插入图片描述

v-on指令:

v-on是事件监听指令,直接与事件类型配合使用,页面结构代码如下:

    <div id="app">
        <p>{ 
   { 
   msg}}</p>   
        <button v-on:click="showInfo">请单击 yzx</button>   
      </div>   
      <script> 
        var vm = new Vue({ 
     
          el: '#app',   
          data: { 
   msg: '请单击按钮查看内容'},   
          methods: { 
       
            showInfo () { 
    
              this.msg = '我是v-on指令'  
            }  
          }   
        })   
      </script>

在这里插入图片描述

【重要】v-for指令:

v-for可以实现页面列表渲染,常用来循环数组,页面结构代码如下。
注意:核心技能,通过遍历循环读取数组或序列,来依次展示对应的内容。索引是从 0开始的,JavaScript 数组可以存不同类型的数据,一般不建议存不同数据类型~?

  <div id="app">
    <div v-for="(value,key) in list" data-id="key">
      索引是:{ 
   { 
   key}},元素内容是:{ 
   { 
   value}}
    </div>
  </div>
  <script>
    var vm = new Vue({ 
   
      el: '#app',
      data: { 
   
        list: [1, 2, 3,'y','z','x']
      }
    })
  </script>

在这里插入图片描述

v-if和v-show指令:

v-if用来控制元素显示或隐藏,属性为布尔值,页面结构代码如下:

    <div id="app">
        <div v-if="isShow" style="background-color:#ccc;">我是v-if yzx</div>
        <button @click="isShow=!isShow">显示/隐藏</button>  
      </div>  
      <script>  
        var vm = new Vue({ 
    
          el: '#app',  
          data: { 
    
            isShow: true   
          }  
        }) 
      </script>

在这里插入图片描述

3.VUE数据绑定测验

写一个添加的功能,添加可以是固定的写法,删除默认删除最后一个的学生的记录,代码如下:

<div id="app">
<button @click="add">添加学生</button>
<button @click="del">删除学生</button>
<hr/>
<table border="1" width="36%" style="border-collapse:collapse">
<tr align="center">
<td>班级</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr align="center" v-for="student in students">
<td>{ 
{ 
student.grade}}</td>
<td>{ 
{ 
student.name}}</td>
<td>{ 
{ 
student.gender}}</td>
<td>{ 
{ 
student.age}}</td>
</tr>
</table>
</div>   
<script>
var vm = new Vue({ 

el:'#app',
data:{ 

students:[{ 

grade:'1',
name:'yzx',
gender:'女',
age:'20'
},{ 

grade:'2',
name:'yzx',
gender:'女',
age:'20'},
{ 

grade:'3',
name:'yzx',
gender:'女',
age:'20'},
{ 

grade:'4',
name:'yzx',
gender:'女',
age:'20'}]
},
methods:{ 

add(){ 

var student={ 

grade:'1',
name:'yzx',
gender:'女',
age:'20' 
};
this.students.push(student)
},
del(){ 

this.students.pop();
}
}
})

在这里插入图片描述

4. Vue 事件

v-on绑定事件:

在Vue中可以使用内置指令v-on监听DOM事件,并在触发时运行一些JavaScript代码,或绑定事件处理方法。

获取随机数 random

    <div id="app">
<button v-on:click="count+=Math.random()">随机数</button>
<p>yzx 自动生成的随机数是{ 
{ 
count}}</p>  
</div>   
<script>   
var vm = new Vue({ 
  
el: '#app', 
data: { 

count: 0   
}
})
</script>

在这里插入图片描述

监听按键(回车键):

    <div id="app">
<input type="text" v-on:keyup.enter="submit">
</div>  
<script>
var vm = new Vue({ 

el: '#app',
methods: { 

submit () { 

console.log('表单提交 yzx')
}
}
})
</script>

在这里插入图片描述

常见的事件修饰符

在这里插入图片描述

.stop事件修饰符:

在前端开发中,复杂的页面结构需要很多事件来完成交互行为。默认的事件传递方式是冒泡,同一事件类型会在元素内部和外部触发,有可能会造成事件的错误触发,所以就需要使用.stop修饰符阻止事件冒泡行为。

    <div id="app">
<div v-on:click="doParent">
<button v-on:click="doThis">事件冒泡</button>
<button v-on:click.stop="doThis">阻止事件冒泡</button>
</div>
</div>   
<script>
var vm = new Vue({ 

el: '#app',  
methods: { 
 
doParent () { 
  
console.log('我是父元素单击事件 yzx')
},
doThis () { 
  
console.log('我是子元素单击事件 yzx')  
}   
}
})
</script>

在这里插入图片描述

.prevent事件修饰符:

HTML标签具有自身特性,例如,标签被单击时会自动跳转。在实际开发中,如果标签的默认行为与事件发生冲突,此时可以使用.prevent修饰符来阻止标签的默认行为。

    <div id="app">
<a href="https://www.baidu.com" v-on:click.prevent>yzx 阻止默认行为</a> 
<a href="https://www.baidu.com">yzx 不阻止默认行为</a> 
</div> 
<script>
var vm = new Vue({ 
  
el: '#app'
})   
</script>

在这里插入图片描述

.capture事件修饰符:

事件捕获的执行顺序是由外部结构向内部结构执行,与事件冒泡的顺序相反。

    <div id="app">
<div v-on:click.capture="doParent">   
<button v-on:click="doThis">事件捕获 yzx</button>
</div>
</div> 
<script> 
var vm = new Vue({ 

el: '#app',
methods: { 

doParent () { 

console.log('我是父元素的单击事件 yzx')
},
doThis () { 

console.log('我是当前元素的单击事件 yzx')    
}  
}
})
</script>

在这里插入图片描述

.self 事件修饰符:

事件修饰符.self 用来实现只有DOM元素本身会触发事件。

    <style>
.Odiv1{ 

width: 80px;
height: 80px;
background: #f00;
margin: 5px;
}
.Odiv2{ 

width: 50px;
height: 50px;
background: #fff;
}
</style>
------------------------------------------------------------------------------------
<div id="app">
<div class="Odiv1" v-on:click.self="doParent">a
<div class="Odiv2" v-on:click="doThis">b</div>
</div>
<div class="Odiv1" v-on:click="doParent">c
<div class="Odiv2" v-on:click="doThis">d</div>  
</div>  
</div>
<script>
var vm = new Vue({ 

el: '#app',
methods: { 
 
doParent () { 

console.log('我是父元素的单击事件 yzx')
},
doThis () { 
 
console.log('我是当前元素的单击事件 yzx')
}  
}  
})
</script>

在这里插入图片描述

.once事件修饰符:

只触发一次事件处理函数,案例页面结构代码如下

  <div id="app">
<button v-on:click.once="doThis">yzx 只执行一次</button>
</div>
<script>
var vm = new Vue({ 

el: '#app',
methods: { 

doThis () { 

console.log('我是当前元素的单击事件且只执行一次')
}
}
})
</script>

在这里插入图片描述

5. Vue 组件

组件:

在Vue中,组件是构成页面中独立结构单元,组件主要以页面结构形式存在,不同组件也具有基本交互功能。

组件特性:

  • 能够减少重复代码的编写,提高开发效率。
  • 根据业务逻辑实现复杂的项目功能。
  • 降低代码之间的耦合程度,使项目更易维护和管理。
    在这里插入图片描述

实现计数器

  <div id="app">
<my-component></my-component>
<my-component></my-component>
<my-component></my-component>
</div>
<script>
Vue.component('my-component', { 

data () { 

return { 

count: 0
}
},
template: '<button v-on:click="count++">被单击 yzx { 
{count}}次</button>'
})
var vm = new Vue({ 
 el: '#app' })
</script>

在这里插入图片描述

注册局部组件:

Vue.component()方法用于全局注册组件,除了全局注册组件外,还可以局部注册组件,通过Vue实例的components属性来实现。

  <div id="app">
<my-component></my-component>
</div>
<script>
var com1 = { 

template: '<p>我是vm实例中的局部组件 yzx</p>'
}
var vm = new Vue({ 

el: '#app',
// 注册局部组件
components: { 
 myComponent: com1 }
})
</script>

在这里插入图片描述

template模板:

Vue提供了标签来定义结构的模板,可以在该标签中书写HTML代码,然后通过id值绑定到组件内的template属性上,这样就有利于在编辑器中显示代码提示和高亮显示,不仅改善了开发体验,也提高了开发效率。

    <div id="app">
<p>{ 
{ 
title}}</p>
<my-component></my-component>
</div>  
<template id="tmp1"> 
<p>{ 
{ 
title}}</p> 
</template>
<script>  
Vue.component('my-component', { 
 
template: '#tmp1',
data () { 

return { 
  
title: '我是组件内的title数据 yzx', 
}
}
})
var vm = new Vue({ 

el: '#app',
data: { 
  
title: '我是vm实例的title数据 yzx'  
}  
})
</script>

在这里插入图片描述

props传值:

props即道具,用来接收父组件中定义的数据,其值为数组,数组中是父组件传递的数据信息。
子组件接收父组件传递的数据“title”。

  <div id="app">
<my-parent name="title"></my-parent>
</div>
<script>
Vue.component('my-parent',{ 

props: ['name'],
template: '<div> yzx 我是父组件 { 
{name}}</div>'
})
var vm = new Vue({ 

el: '#app'
})
</script>

在这里插入图片描述

$emit传值:

$ emit 能够将子组件中的值传递到父组件中去。$emit可以触发父组件中定义的事件,子组件的数据信息通过传递参数的方式完成。触发父组件中绑定的childfn事件,并传递子组件中的message数据。

  <div id="app">
<parent></parent>
</div>
<template id="child">
<div>
<button @click="click">Send</button>
<input type="text" v-model="message">
</div>
</template>
<script>
Vue.component('parent', { 

template: '<div><child @childfn="transContent"></child>' +
'子组件传来的值 : { 
{message}}</div>',
data () { 

return { 

message: ''
}
},
methods: { 

transContent (payload) { 

this.message = payload
}
}
})
// child组件
Vue.component('child', { 

template: '#child',
data () { 

return { 

message: '子组件的消息 '
}
},
methods: { 

click () { 

this.$emit('childfn', this.message);
}
}
})
var vm = new Vue({ 
 el: '#app' })

在这里插入图片描述

v-if与v-else :

Vue中的页面结构是由组件构成的,不同组件可以表示不同页面,适合进行单页应用开发。实现登录和注册界面点击按钮进行切换(方法一)

    <div id="app">
<a href="#" @click.prevent="flag ? flag : flag = !flag">登录 yzx</a>
<a href="#" @click.prevent="flag ? flag = !flag : flag">注册 yzx</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
<script>
Vue.component('login', { 

template: '<div>登录页面</div>'
})
Vue.component('register', { 

template: '<div>注册页面</div>'
})
var vm = new Vue({ 

el: '#app',
data: { 
 flag: true }   
})   
</script>

在这里插入图片描述
方法二:效果如上图,不展示了哈✌

  <div id="app">
<a href="#" @click.prevent="comName='login'">登录 yzx</a>
<a href="#" @click.prevent="comName='register'">注册 yzx</a>
<component v-bind:is="comName"></component>
</div>
<script>
Vue.component('login', { 

template: '<div>登录页面</div>'
})
Vue.component('register', { 

template: '<div>注册页面</div>'
})
var vm = new Vue({ 

el: '#app',
data: { 
 comName: '' }
})
</script>

6. Vue 生命周期

Vue实例为生命周期提供了回调函数,用来在特定的情况下触发,贯穿了Vue实例化的整个过程,这给用户在不同阶段添加自己的代码提供了机会。

钩子函数:

钩子函数用来描述Vue实例从创建到销毁的整个生命周期。
在这里插入图片描述

beforeCreate和created:

创建实例对象之前或实例对象创建之后执行,案例演示如下。

  <div id="app">{ 
{ 
msg}}</div>
<script>
var vm = new Vue({ 

el: '#app',
data: { 
 msg: 'yzx' },
beforeCreate () { 

console.log('实例创建之前')
console.log(this.$data.msg)
},
created () { 

console.log('实例创建之后')
console.log(this.$data.msg)
}
})
</script>

在这里插入图片描述

beforeMount和mounted:

在实例创建后,如果挂载点el存在,就进行页面挂载。

    <div id="app">{ 
{ 
msg}}</div>
<script>
var vm = new Vue({ 

el: '#app',
data: { 
 msg: 'yzx' },
beforeMount () { 

console.log('挂载之前')
console.log(this.$el.innerHTML) // 通过this.$el获取el的DOM元素
},
mounted () { 

console.log('挂载之后')
console.log(this.$el.innerHTML)
}
})
</script>

在这里插入图片描述

beforeUpdate和updated:

Vue实例挂载完成后,当数据发生变化时,会执行beforeUpdate和updated钩子函数。

    <div id="app">
<div v-if="isShow" ref="self"> yzx </div>
<button @click="isShow = !isShow">更新</button>
</div>
<script>
var vm = new Vue({ 

el: '#app',
data: { 
 isShow: false },
beforeUpdate () { 

console.log('更新之前')
console.log(this.$refs.self)
},
updated () { 

console.log('更新之后')
console.log(this.$refs.self)
}
})
</script>

在这里插入图片描述

beforeDestroy和destroyed:

生命周期函数的最后阶段是实例的销毁,会执行beforeDestroy和destroyed钩子函数。

  <div id="app">
<div ref="self">test</div>
</div>
<script>
var vm = new Vue({ 

el: '#app',
data: { 
 msg: 'yzx' },
beforeDestroy () { 

console.log('销毁之前')
console.log(this.$refs.self)
console.log(this.msg)
console.log(vm)
},
destroyed () { 

console.log('销毁之后')
console.log(this.$refs.self)
console.log(this.msg)
console.log(vm)
}
})
// 在控制台执行:vm.$destroy(),查看效果
</script>

在这里插入图片描述


未经允许,禁止转载~我都不敢信我写了 18500多 字数,910 行?? 加油,不会的可以问我,觉得喜欢可以收藏 [ 暗示三连???~~]

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/226871.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Qt Creator 的下载与安装

    Qt Creator 的下载与安装一、Qt和QtCreator的区别Qt是C++的一个库,或者说是开发框架,里面集成了一些库函数,提高开发效率。QtCreator是一个IDE,就是一个平台,一个开发环境,类似的比如说VS,也可

  • 小米手机-解BL锁+开ROOT权限

    小米手机-解BL锁+开ROOT权限在小米社区和网址https://miuiver.com/上,有MIUI的历史版本,还有刷机教程等等本文是参考上述的教程,并结合自己在刷机过程中,出现的问题进行记录并得到解决方案下面主要是,重要部分,同时还有一些容易出错的地方解BL锁要提前,在设置–更多设置–开发者模式–设备解锁状态中,绑定账号和设备,注意的地方,不要重复绑定设备,不然时间会重新计算的,吃亏了2次。只要登陆过一个小米账号,点击绑定一次即可。如果没有找到开发者模式,就先设置–我的设备–全部参数–.

  • python用pyinstaller编译成exe_pycharm编译成exe

    python用pyinstaller编译成exe_pycharm编译成exe在pycharm中使用pyinstaller生成exe文件:解决通常在cmd中用pyinstaller打包的exe文件太大的问题1、在pycharm中创建虚拟环境:2、在虚拟环境中添加打包程序所需要的库:添加国内镜像库链接,基本可以正常安装所有需要的库;添加pyinstaller工具:提示:一定要按照上面的配置进行,否则会出错在需要打包的程序中右键选中externalTools—>pyinstaller等待程序打包完成,在打包程序目录下的dist文件夹中就有生成的exe文件

  • hql删除mysql语句_hibernate — HQL语句总结

    hql删除mysql语句_hibernate — HQL语句总结本章介绍了Hibernate的几种主要检索方式:HQL检索方式、QBC检索方式、SQL检索方式。HQL是HibernateQueryLanguage的缩写,是官方推荐的查询语言。QBC是QueryByCriteria的缩写,是Hibernate提供的一个查询接口。Hibernate是一个轻量级的框架,它允许使用原始SQL语句查询数据库。1.1HQL基础HQL是Hiberante官方推荐的…

  • DOS下的Tree命令

    DOS下的Tree命令    有时候我们想了解一个文件夹或者驱动器根目录下的所有文件,并希望它以资源管理器的树形视图方式显示文件结构。如果你使用的是Windows 2000,可以在“命令提示符”窗口中输入“tree D:Inetpub”命令(这里的 D:Inetpub可以根据需要改成要你查阅的文件路径),就会看到D:Inetpub下的所有文件夹以树形结构清楚地显示出来。    此外,你还可以加入以下参数以增强“tree

  • Map集合转换成实体类对象,实体类对象转换为map集合,互转工具类「建议收藏」

    Map集合转换成实体类对象,实体类对象转换为map集合,互转工具类「建议收藏」注:2019-06-16日增加第六节map与实体互转工具类,直接看第6节;1.调用这个方法BeanMapUtils.mapToBean(),实现map集合转实体类对象;注意:这个方法转换时我这边老是报类型转换错误,引用这段代码没有报错的小伙伴可继续使用,此方法扩展性好,报错的小伙伴请看最下面的一个map转实体类对象方法;//1.通过map构造permiss…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号