day65_10_9vue循环指令与组件
一。v-once
v-once指令赋值给标签后，这个标签中的所有变量都不能被更改，只能被渲染一次。之后的改动不能改变该标签中的值：
<div id="app">
<input type="text" v-model="msg">
<!-- 一旦赋值，只可主动更改 -->
<input type="text" v-model="msg" v-once>
<p>{{ msg }}</p>
<!-- 一旦赋值，便不可更改 -->
<p v-once>{{ msg }}</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '初始值'
}
})
</script>
如果被赋值的是一个input表单，使用了v-model定义值，则这个表单中的默认值不可被改变，但是可以主动改变，其他的值会改变。
二。v-cloak指令
在vue修饰的页面中，所有的变量会事先加载{{}}，再使用script对其进行修饰，而vue中提供了一个v-cloak的属性，这个属性会在该标签所有元素加载完后消失，所以可以给它指定一些style：
<style>
[v-cloak] {
display: none;
}
</style>
<!-- 不处理的情况下，每次新价值该页面，都会先渲染{{}}，
当vue环境加载成功，{{}}有会被解析消失 -->
<!-- 处理后，vue环境没加载好时，#app是被隐藏的，vue环境加载成功，
会依次#app的v-cloak属性，就不会出现{{}}渲染闪烁问题 -->
<div id="app" v-cloak>
{{ }}
{{ }}
{{ }}
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
})
</script>
可以解决页面闪烁问题。
三。条件指令。
对于一些诸如v-if v-show的指令，可以决定该标签是否显示，其用法是不同的：
v-show
v-show修饰了一个标签之后，其值可以是一个布尔类型，也可以是一个变量（变量代表布尔类型）：
<p v-show="isShow">show条件指令</p>
v-if
v-if表面上和v-show的用法是一样的：
<p v-if="isShow">if条件指令</p>
不同点：他们的不同在于，当使用v-show隐藏修饰的标签，是定义了一个style将其隐藏，而使用v-if不会显示任何东西。
v-if v-else-if v-else
这些if的用法和python的用法是一样的，前两个需要更布尔类型，最后一个不需要。
当有一个分支成立后会显示该分支，而其他的分支不会再显示。当所有条件都不满足时运行。
例子：
<!--
1) 两种都可以控制标签的显隐，绑定的值是布尔类型值，当都隐藏标签时
v-if是不渲染标签
v-show以 display:none 方式渲染
--> <div id="app">
<p v-if="isShow">if条件指令</p>
<p v-show="isShow">show条件指令</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
isShow: false,
}
})
</script> <!--
2) v-if="变量"
v-else-if="变量"
v-else
一组分支，上成立分支会屏蔽下方所有分支，else分支没有条件，在所有分支不成立后才显示
--> <style>
.box {
width: 400px;
height: 300px;
}
.r { background-color: red; }
.y { background-color: yellow }
.b { background-color: blue; }
.active {
background-color: pink;
}
</style>
<div id="app">
<div class="em">
<p>
<button @click="changeBox('rBox')" :class="{active: showName == 'rBox'}">红</button>
<button @click="changeBox('yBox')" :class="{active: showName == 'yBox'}">黄</button>
<button @click="changeBox('bBox')" :class="{active: showName == 'bBox'}">蓝</button>
</p>
<p>
<button @click="changeBox('rBox')" :class="showName == 'rBox' ? 'active' : ''">红</button>
<button @click="changeBox('yBox')" :class="showName == 'yBox' ? 'active' : ''">黄</button>
<button @click="changeBox('bBox')" :class="showName == 'bBox' ? 'active' : ''">蓝</button>
</p>
<div class="box r" v-if="showName == 'rBox'"></div>
<div class="box y" v-else-if="showName == 'yBox'"></div>
<div class="box b" v-else></div>
</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
showName: 'rBox'
},
methods: {
changeBox(name) {
this.showName = name;
}
}
})
</script>
分页例子
四。v-pre
这个指令可以再vue的控制范围内形成不受vue控制的区域
<div id="app">
<p>{{ msg }}</p>
<!-- v-pre 指令可以在vue控制范围内，形成局部vue不控制区域
{{ }} 和 v-if 都会原样输出，不会被解析
-->
<p v-pre>
{{ }}
<span v-if="hehe"></span>
</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'message'
}
})
</script>
五。循环指令
循环指令使用关键字v-for，其语法如下：
<span v-for="ch in str">{{ ch }}</span>
对于字符串，指定的字符串是字符串中的每个字符。
对于for循环也可以获取其index：
<span v-for="(ch, i) in str" :key="ch + i">{{ i }}{{ ch }}</span>
其中的key就是唯一标识标签的，加速渲染的。
也可以遍历列表：
<p v-for="(ele, i) in arr">{{ i }}{{ ele }}</p>
遍历字典时，它所返回的一个是值，第二个键，第三个是index：
<p v-for="(ele, k, i) in dic">{{ i }}{{ k }}:{{ ele }}</p>
todolist例子：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
li:hover {
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<p>
<input type="text" v-model="userMsg">
<button type="button" @click="sendMsg">留言</button>
</p>
<ul>
<li v-for="(msg, index) in msgs" @click="deleteMsg(index)">
{{ msg }}
</li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [], // 所有留言
userMsg: '', // 用户留言
},
methods: {
sendMsg() { // 留言事件
// 尾增
// this.msgs.push(this.userMsg);
// 首增
// this.msgs.unshift(this.userMsg); let userMsg = this.userMsg;
if (userMsg) {
this.msgs.unshift(userMsg); // 渲染给页面
localStorage.msgs = JSON.stringify(this.msgs); // 同步到数据库
this.userMsg = ''; // 清空留言框
}
},
deleteMsg(index) {
// 开始索引 操作长度 操作的结果们
this.msgs.splice(index, 1)
}
}
})
</script> <script>
// localStorage['num'] = 10;
// sessionStorage.num = 888;
// console.log(localStorage.num); // localStorage.msgs = JSON.stringify(['1111', '2222']);
// console.log(JSON.parse(localStorage.msgs));
// console.log(JSON.parse(localStorage.msgs)[0]);
</script> </html>
例子
其中的注意点是:
设置浏览器永久数据：
localStorage['num'] = 10;
设置浏览器窗口绑定数据：
sessionStorage.num = 888;
设置的数据都是以字符串的形式，如果需要以列表的方式正常操作，需要json序列化。
操作一个列表使用方法：
this.msgs.splice(index, 1)
六。修改符号
可以使用dilimiters来修改固定的关键符号{{}}：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
{{ msg }}
{[ msg ]}
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '12345'
},
// delimiters: ['{{', '}}'],
delimiters: ['{[', ']}'],
})
</script>
</html>
七。计算属性。
在一个属性分为两个进行监听时，可以直接操作data：
<p @click="fn">{{ num }}</p>
<p>十位：{{ parseInt(num / 10) }}</p>
<p>个位：{{ num % 10 }}</p>
而如果需要对两个变量值进行操作成一个变量需要使用关键字computed：
十位:<input type="number" v-model="shi" min="0" max="9">
个位:<input type="number" v-model="ge" min="0" max="9">
结果：<b>{{ shi * 10 + +ge }}</b>
结果：<b>{{ result }}</b>
computed: {
result() {
// console.log('该方法被调用了');
// this.shi;
// this.ge;
return this.shi * 10 + +this.ge
}
}
其中：
一个可转化成数字的字符串在前面添加+符号会转换成数字类型。
computed的定义规则：
1) computed是用来声明 方法属性 的。
2) 声明的方法属性不能在data中重复定义。
3) 方法属性必须在页面中渲染使用，才会对内部出现的所有变量进行监听。
4) 计算属性的值来源于监听方法的返回值。
八。属性监听：
watch。当多个属性依赖于一个值时，可以使用该关键字定义。
其规则如下：
1) watch为data中已存在的属性设置监听事件。
2) 监听的属性值发送改变，就会触发监听事件。
3) 监听事件的方法返回值没有任何意义。
例子：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<!-- 多个变量的值依赖一个变量，该变量发生改变，所有依赖变量都会改变 -->
<p @click="fn">{{ num }}</p>
<p>十位：{{ shi }}</p>
<p>个位：{{ ge }}</p>
</div> </body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 99,
shi: 0,
ge: 0,
},
methods: {
fn() {
this.num -= 3;
}
},
// 1) watch为data中已存在的属性设置监听事件
// 2) 监听的属性值发送改变，就会触发监听事件
// 3) 监听事件的方法返回值没有任何意义
watch: {
num () {
// console.log('num改变了')
this.shi = parseInt(this.num / 10);
this.ge = this.num % 10;
// return '12345'
}
}
})
</script> </html>
九。组件。
组件分为三类：根组件，局部组件，全局组件。
组件：一个包含html、css、js独立的集合体，这样的集合体可以完成页面解构的代码复用。
根组件的定义就是唯一的new出的实例。所有被new Vue产生的组件，在项目开发阶段，一个项目产生一个根组件。
全局组件就是不用注册，九可以称为任何一个组件的子组件。
局部组件就是必须在根组件进行注册的组件。
每个组件都有自身的html，css和js，都在一个template中。
根组件:
根组件中，有template，其中只能有一个根标签，如果有两个则只渲染第一个。
根组件之间不能进行信息交互。
如果根组件中有渲染了html标签后，原根标签中的元素可以覆盖。如果template中没有元素，就会显示原标签中的元素，而如果是空格则会留下一个div标签。
例子：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
</div> <div id="main"> </div>
</body>
<script src="js/vue.js"></script>
<script>
// 1) 组件：一个包含html、css、js独立的集合体，这样的集合体可以完成页面解构的代码复用
// 2) 分组分为根组件、全局组件与局部组件
// 根组件：所有被new Vue()产生的组件，在项目开发阶段，一个项目只会出现一个根组件
// 全局组件：不用注册，就可以成为任何一个组件的子组件
// 局部组件：必须注册，才可以成为注册该局部组件的子组件
// 3) 每一个组件都有自身的html结构，css样式，js逻辑
// 每一个组件其实都有自己的template，就是用来标识自己html结构的
// template模板中有且只有一个根标签
// 根组件一般不提供template，就由挂载点的真实DOM提供html结构
new Vue({
el: '#app',
data: {
msg: 'message',
c1: 'red'
},
template: `
<div :style="{color: c1}" @click="fn">{{ msg }} {{ msg }}</div>
`,
methods: {
fn() {
alert(this.msg)
}
}
});
new Vue({
el: '#main',
data: {
msg: 'message'
}
})
</script>
</html>
局部组件：
局部组件的创建方法是：
let localTag = {
template: `
<div class="box">
<img src="img/666.jpg" alt="">
<h3>凤哥</h3>
<p>马叉虫❤马叉虫</p>
</div>
`
};
其中localtag就是该组件可以被注册的名字，所以需要在根组件进行注册，注册需要使用关键字：components：
components: {
// mcc: localTag,
// localTag,
'local-tag': localTag,
}
script中的驼峰就是html中的-分法。
注册好之后就可以在根标签中使用：
<div id="app">
<!--<mcc></mcc>-->
<local-tag></local-tag>
<local-tag></local-tag>
</div>
例子：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
box-shadow: 0 3px 5px 0 #666;
width: 240px;
height: 300px;
text-align: center;
padding: 20px 0;
float: left;
margin: 5px;
}
.box img {
width: 200px;
}
</style>
</head>
<body>
<div id="app">
<!--<mcc></mcc>-->
<local-tag></local-tag>
<local-tag></local-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 创建一个局部组件 // 1) 创建局部组件
// 2) 在父组件中注册该局部组件
// 3) 在父组件的template模板中渲染该局部组件
let localTag = {
template: `
<div class="box">
<img src="img/666.jpg" alt="">
<h3>凤哥</h3>
<p>马叉虫❤马叉虫</p>
</div>
`
}; new Vue({
el: '#app',
components: {
// mcc: localTag,
// localTag,
'local-tag': localTag,
}
})
</script>
</html>
例子
全局组件：
创建全局组件的方法是：
Vue.component('global-tag', {
template: `
<div class="box" @click="action">
<img src="img/666.jpg" alt="">
<h3>凤哥</h3>
<p>马叉虫❤{{ num }}</p>
</div>
`,
组件名字就是global-tag，这个组件就可以直接在html中使用：
<div id="app">
<global-tag></global-tag>
<global-tag></global-tag>
<global-tag></global-tag>
</div>
在全局组件被多次调用时，会使用同一个数据，操作的也是同一个数据，为了实现数据的隔离，需要使用data方法进行设置：
data () {
return {
num: 0
}
},
设置的数据是以函数的方法进行反馈，即开辟一个新的空间。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
box-shadow: 0 3px 5px 0 #666;
width: 240px;
height: 300px;
text-align: center;
padding: 20px 0;
float: left;
margin: 5px;
}
.box img {
width: 200px;
}
</style>
</head>
<body>
<div id="app">
<global-tag></global-tag>
<global-tag></global-tag>
<global-tag></global-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 1) 创建全局组件
// 2) 在父组件的template模板中直接渲染该全局组件
Vue.component('global-tag', {
template: `
<div class="box" @click="action">
<img src="img/666.jpg" alt="">
<h3>凤哥</h3>
<p>马叉虫❤{{ num }}</p>
</div>
`,
data () {
return {
num: 0
}
},
methods: {
action() {
this.num++;
}
}
}); // 数据局部化分析导入
// a = function () {
// return {num: 10}
// };
// b1 = a();
// b2 = a();
// b3 = a(); new Vue({
el: '#app',
})
</script>
</html>
例子
十。组件之间的交互：
在父组件中，需要传递信息给子组件，需要进行一系列的处理。
首先，在父组件中获取到了一组数据，而子组件需要对这一些列数据进行循环时，需要和子组件进行一一对应。
步骤如下：
1) 父组件提供数据
2) 在父组件模板中，为子组件标签设置自定义属性，绑定的值有父组件提供
3) 在子组件实例中，通过props实例成员获得自定义属性
父组件中需要为子组件自定义属性，并传值:
<div id="app">
<info v-for="info in infos" :key="info.image" :myinfo="info"></info>
</div>
子组件中需要使用props实例成员获取自定义属性值：
let info = {
template: `
<div class="info">
<img :src="myinfo.image" alt="">
<p><b>{{ myinfo.title }}</b></p>
</div>
`,
props: ['myinfo']
};
如从即可调用父组件中的值。例子：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.info {
text-align: center;
width: 200px;
padding: 3px;
box-shadow: 0 3px 5px 0 pink;
float: left;
margin: 5px;
}
.info img {
width: 200px;
}
</style>
</head>
<body>
<div id="app">
<info v-for="info in infos" :key="info.image" :myinfo="info"></info>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 伪代码：模拟数据从后台请求
/*
let infos = '';
document.onload = function () {
$.ajax({
url: '/images/',
type: 'get',
success (response) {
infos = response.data
}
})
};
*/ let infos = [
{
image: 'img/001.png',
title: '小猫'
},
{
image: 'img/002.png',
title: '蛋糕'
},
{
image: 'img/003.png',
title: '蓝糕'
},
{
image: 'img/004.png',
title: '恶犬'
},
]; let info = {
template: `
<div class="info">
<img :src="myinfo.image" alt="">
<p><b>{{ myinfo.title }}</b></p>
</div>
`,
props: ['myinfo']
}; // 数据交互 - 父传子 - 通过绑定属性的方式
// 1) 父组件提供数据
// 2) 在父组件模板中，为子组件标签设置自定义属性，绑定的值有父组件提供
// 3) 在子组件实例中，通过props实例成员获得自定义属性
new Vue({
el: '#app',
components: {
info,
},
data: {
infos,
}
})
</script>
</html>
子传父：
当留言需要删除是，使用组件实现，需要在子组件中使用自定义事件将数据携带出来，传递给父组件进行真正的删除：
1) 数据由子组件提供
2) 子组件内部通过触发系统事件，发送一个自定义事件，将数据携带出来
3) 父组件位子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数
自定义属性方式如下，要在原模板中定义：
<msg-li @remove_msg="removeAction" v-for="(msg, i) in msgs"
:msg="msg" :index="i" :key="msg"></msg-li>
而在系统事件触发后，通过$emit('事件名'，数据)的方式触发自定义事件：
methods: {
// 系统的click事件
deleteMsg(i) {
// $emit('自定义事件名', 参数们)
this.$emit('remove_msg', i);
this.$emit('myclick', 1, 2, 3, 4, 5)
}
}
总例子如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.close:hover {
cursor: pointer;
color: red;
}
</style>
</head>
<body>
<div id="app">
<p>
<input type="text" v-model="userMsg">
<button @click="sendMsg">留言</button>
</p>
<ul>
<msg-li @remove_msg="removeAction" v-for="(msg, i) in msgs" :msg="msg" :index="i" :key="msg"></msg-li>
</ul>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let msgLi = {
template: `
<li>
<span class="close" @click="deleteMsg(index)">x </span>
<span>第{{ index + 1 }}条：</span>
<span>{{ msg }}</span>
</li>
`,
props: ['msg', 'index'],
methods: {
// 系统的click事件
deleteMsg(i) {
// $emit('自定义事件名', 参数们)
this.$emit('remove_msg', i);
this.$emit('myclick', 1, 2, 3, 4, 5)
}
}
};
// 组件交互-子传父
// 1) 数据由子组件提供
// 2) 子组件内部通过触发系统事件，发送一个自定义事件，将数据携带出来
// 3) 父组件位子组件标签的自定义属性通过方法实现，就可以通过参数拿到子组件传递处理的参数 new Vue({
el: '#app',
data: {
msgs: [],
userMsg: ''
},
methods: {
sendMsg() {
if (this.userMsg) {
this.msgs.push(this.userMsg);
this.userMsg = "";
}
},
removeAction(i) {
this.msgs.splice(i, 1)
}
},
components: {
msgLi
}
})
</script>
</html>
day65_10_9vue循环指令与组件的更多相关文章
- Vue （表单、斗篷、条件、循环指令，分隔符成员、计算属性成员、属性的监听、vue组件、子组件、各个常见的钩子函数）
表单指令 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...
- Vue框架（二）——Vue指令（v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令）、todolist案例、Vue实例（计算、监听）、组件、组件数据交互
Vue指令 1.v-once指令 单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...
- Vue ---- 表单指令 条件指令 循环指令 分隔符 过滤器 计算属性 监听属性
目录 案例讲解: 一. 表单指令 1.重点: 补充 2.单选框 3.单一复选框 4.多复选框 二 . 条件指令 v-if/v-show ... v-clock 三 . 循环指令 string arra ...
- vue指令及组件
复习 """ vue: 为什么选择vue - 综合其他框架优点,轻量级,中文API,数据驱动,组件化开发,数据的双向绑定,虚拟DO 渐进式js框架 - 选择性控制 - 创 ...
- 汇编语言--微机CPU的指令系统（五）（循环指令）
(8)循环指令 循环结构是程序的三大结构之一.为了方便构成循环结构,汇编语言提供了多种循环指令,这些循环指令的循环次数都是保存在计数器CX或ECX中.除了CX或ECX可以决定循环是否结束外,有的循环指 ...
- 循环指令 LOOP
循环程序: 如果需要重复执行若干次同样任务.用循环执行 循环指令: LOOP <跳转标号> 用累加器的低字做循环计数器 每次执行LOOP 指令的时候,累加器的低字减去1 若减去后 非零 , ...
- 斗篷指令、属性指令、表单指令、条件指令、循环指令、js的Array操作、前台数据库、
```python"""1)指令 属性指令:v-bind 表达指令:v-model 条件指令:v-show v-if 循环指令:v-for 斗篷指令:v-cloak 2) ...
- Vuejs的指令及组件用法总结
vuejs介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能 ...
- angularjs directive and component 指令与组件 ( 1.5.0 以后 )
之前写过一篇了 http://www.cnblogs.com/keatkeat/p/3903673.html 但某些部分写的不太清楚,甚至有点错误,所以今天特地在这里再来谈谈. 这篇主要是说指令的隔离 ...
随机推荐
- 【转】bootstrap table轻松实现数据表格
在使用bootstrap table时可能在很多时候回用的表格来显示数据,如果自己写那肯定没问题,但是数据展示出来就麻烦多了,然而bootstrap table 封装了一套完善的数据表格组件,把从后台 ...
- Collection接口综述
Collection接口 Collection是集合类基本的接口,它不提供具体的实现,集合类都继承自Collection接口,Collection代表的是一种规则,它包含的元素必须符合某种规则,比如有 ...
- iOS：从头捋一遍VC的生命周期
一.介绍 UIViewController是iOS开发中的核心控件,没有它那基本上任何功能都无法实现,虽然系统已经做了所有控件的生命维护,但是,了解它的生命周期是如何管理还是非常有必要的.网上有很多教 ...
- 手动创建分区以及软硬raid的问题
本文章旨在介绍安装centos7时手动分区问题,及其所对应的软硬raid问题.在新建centos7系统时,需要手动分区时,提供给我们三个选项: 在上图中,默认选项为“Standard Partitio ...
- Java菜题
编程语言:Java 2019年全国高校计算机能力挑战赛分设大数据算法赛(所谓的内部试题) 一.选择题(共15题,每题3分,共45分) 1. 在Java中下列说法正确的是( ) A.一个子类可以有多 ...
- 08-Django模板（2）
一.HTML转义 在视图中,通过调用模板传递下文,模板对上下文的传递字符串进行输出时,会对以下字符自动转义.HTML转义的作用:转义后标记代码不会被直接解释执行,而是被直接呈现,防止客户端通过嵌入js ...
- LeetCode | 2 的幂
LeetCode 题库的第 231 题 —— 2 的幂 这题也是比较容易的一题,前提是找到规律即可.如果从 10 进制的角度观察 2 的幂次方,可能并不容易发现规律,那么可以从 2 进制的角度进行观察 ...
- PHP fastcgi_finish_request 方法
本文介绍,PHP运行在FastCGI模式时,FPM提供的方法:fastcgi_finish_request. 在说这个方法之前,我们先了解PHP有哪些常用的运行模式? PHP运行模式 CGI 通用网关 ...
- sql慢查询工具（配置代码）
# 在mysql的配置文件/etc/mysql/mysql.conf.d/mysqld.cnf[mysqld]中配置懒查询 slow_query_log = ON # 是否已经开启慢查询 long_q ...
- 学习UML类图
在类图中一共包含以下几种模型元素,分别是:类(class).接口(interface)以及类之间的关系. 1.类(class) 在面向对象编程中,类是对现象世界中一组具有相同特征的物体的抽象. 2.接 ...