今日内容概要

  • 属性指令
  • style和class
  • 条件渲染
  • 列表渲染
  • 事件处理
  • 数据的双向绑定
  • v-model进阶
  • 购物车案例

内容详细

1、属性指令

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="js/vue.js"></script>
  8.     <style>
  9.         .red {
  10.             background: red;
  11.         }
  13.         .green {
  14.             background: green;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19. <div id="app">
  20.     <button @click="changeBac">点我变色</button>
  21.     <!--    <p v-bind:class="p_class">{{name}}</p>-->
  22.     <p :class="p_class">{{name}}</p>
  24.     <button @click="changePhoto">点我切换美女</button>
  25.     <div>
  26.         <img :src="url" alt="" width="400px" height="400px">
  27.     </div>
  28. </div>
  30. </body>
  32. <script>
  33.     var vm = new Vue({
  34.         el: "#app",
  35.         data: {
  36.             name: '阿祖',
  37.             p_class: 'red',
  38.             url: 'https://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg',
  39.         },
  41.         methods: {
  42.             changeBac() {
  43.                 this.p_class = 'green'
  44.             },
  45.             changePhoto() {
  46.                 this.url = 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2F09%2F3a%2Fbc%2F093abce7b31f4c8ffdbf345375ff4abb.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652321528&t=3709d1c880107a53d265f936022f0d53'
  47.             }
  48.         }
  49.     })
  50. </script>
  51. </html>



2、style和class

  1. # 属性指令中比较特殊的有style和class
  2. 	class 可以对应字符串，数组(推荐)，对象
  3. 	style 可以对应字符串，数组，对象(推荐)
  5. # 语法:
  6. 	:属性名=js变量/js语法
  8. 	:class=’js变量、字符串、js数组’
  9. 	class：三目运算符、数组、对象{red: true}
  11. 	:style=’js变量、字符串、js数组’
  12. 	style：三目运算符、数组[{backgreound: ‘red’},]、对象{background: ‘red’}
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="./js/vue.js"></script>
  8.     <style>
  9.         .red {
  10.             background: red;
  11.         }
  12.         .font {
  13.             font-size: 60px;
  14.             text-align: center;
  15.         }
  16.         .green {
  17.             background: green;
  18.         }
  19.     </style>
  20. </head>
  22. <body>
  23. <div id="app">
  24.     <h1 :class="h1_class">我是class的h1</h1>
  26.     <h1 :style="h1_style">我是style的h1</h1>
  27. </div>
  28. </body>
  30. <script>
  31.     var vm = new Vue({
  32.         el: "#app",
  33.         data: {
  34.             // class 可以对应字符串，数组(推荐)，对象
  35.             // h1_class:'green font',
  36.             // h1_class:['green',]  //在控制台给h1_class添加一个元素
  37.             h1_class: {'green': true, 'font': false},
  39.             // style 可以对应字符串，数组，对象(推荐)
  40.             // h1_style:'background: pink;font-size:80px'
  41.             // h1_style:[{background:'pink'},{'font-size':'100px'}],
  42.             // h1_style:[{background:'pink'},{fontSize:'200px'}],  // 不用引号，就要使用驼峰
  43.             // h1_style:{background:'red','font-size':'40px'},
  44.             h1_style: {background: 'red', fontSize: '40px'},
  45.         },
  46.     })
  47. </script>
  48. </html>

3、条件渲染

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="./js/vue.js"></script>
  7. </head>
  9. <body>
  10. <div id="app">
  11.     <h2>您的成绩是：</h2>
  12.     <p v-if="score>90">优秀</p>
  13.     <p v-else-if="score>80">良好</p>
  14.     <p v-else-if="score>60">及格</p>
  15.     <p v-else>不及格</p>
  16. </div>
  17. </body>
  19. <script>
  20.     var vm = new Vue({
  21.         el: "#app",
  22.         data: {
  23.             score: 99,
  24.         },
  25.     })
  26. </script>
  27. </html>

4、列表渲染

4.1 v-if+v-for+v-else控制购物车商品的显示

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="./js/vue.js"></script>
  7. </head>
  9. <body>
  10. <div id="app">
  11.     <h1>购物车如下</h1>
  12.     <div v-if="good_list.length>0">
  13.         <table border="1">
  14.             <tr>
  15.                 <td>商品名字</td>
  16.                 <td>商品价格</td>
  17.             </tr>
  18.             <tr v-for="good in good_list">
  19.                 <td>{{good.name}}</td>
  20.                 <td>{{good.price}}</td>
  21.             </tr>
  22.         </table>
  23.     </div>
  25.     <div v-else>
  26.         购物车空空如也
  27.     </div>
  28. </div>
  29. </body>
  31. <script>
  32.     var vm = new Vue({
  33.         el: "#app",
  34.         data: {
  35.             good_list: [{name: "特斯拉", price: 100203}, {name: "鸡蛋", price: 2}, {name: "猪肉", price: 35}]
  36.         },
  37.     })
  38. </script>
  39. </html>

4.2 v-for遍历数组(列表)、对象(字典)、数字

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="./js/vue.js"></script>
  7. </head>
  9. <body>
  10. <div id="app">
  11.     <h1>购物车如下</h1>
  12.     <div v-if="good_list.length>0">
  13.         <table border="1">
  14.             <tr>
  15.                 <td>商品名字</td>
  16.                 <td>商品价格</td>
  17.             </tr>
  18.             <tr v-for="good in good_list">
  19.                 <td>{{good.name}}</td>
  20.                 <td>{{good.price}}</td>
  21.             </tr>
  22.         </table>
  23.     </div>
  25.     <div v-else>
  26.         购物车空空如也
  27.     </div>
  28.     <hr>
  30.     <h1>遍历对象（第一个是value，第二个是key）</h1>
  31.     <p v-for="item in info">{{item}}</p>
  32.     <hr>
  33.     <p v-for="(v,k) in info" :key="k">key值是：{{k}}--value值是：{{v}}</p>
  35.     <h1>遍历数组</h1>
  36.     <ul>
  37.         <li v-for="girl in girls">{{girl}}</li>
  38.     </ul>
  39.     <hr>
  40.     <ul>
  41.         <li v-for="(v,i) in girls">第{{i}}个女孩是：{{v}}</li>
  42.     </ul>
  44.     <h1>遍历数字,从1开始</h1>
  45.     <p v-for="i in 5">第{{i}}个数字</p>
  46. </div>
  47. </body>
  49. <script>
  50.     var vm = new Vue({
  51.         el: "#app",
  52.         data: {
  53.             good_list: [{name: "特斯拉", price: 100203}, {name: "鸡蛋", price: 2}, {name: "猪肉", price: 35}],
  54.             info: {name: 'lqz', age: 19, gender: '男'},
  55.             girls: ['迪丽热巴', '刘亦菲', '杨颖', '糖宝']
  56.         },
  57.     })
  58. </script>
  59. </html>

4.3 注意

  1. # 注意！在Vue中：
  2. 	数组的index和value是反的
  3. 	对象的key和value也是反的
  5. # key值的解释
  6. 	看到别人代码在循环时，写在标签中  :key='值'
  7. 	key:一般咱么在循环的时候，都要加 :key='值'，值不要是固定的
  9. 	vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度（虚拟DOM用了diff算法）
  11. 	在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，属性值唯一
  12. 	页面更新之后，会加速DOM的替换（渲染）
  13. 	:key="变量"
  15. # key可以加速页面的替换--》key加上，效率高
  17. # 数组更新与检测
  18. # 数组追加一个值---页面里面跟着变
  19. 	可以检测到变动的数组操作：
  20. 		push：最后位置添加
  21. 		pop：最后位置删除
  22. 		shift：第一个位置删除
  23. 		unshift：第一个位置添加
  24. 		splice：切片
  25. 		sort：排序
  26. 		reverse：反转
  28. 	检测不到变动的数组操作---页面不会变
  29. 		filter()：过滤
  30. 		concat()：追加另一个数组
  31. 		slice()：
  32. 		map()：
  33. 	原因：
  34. 		作者重写了相关方法（只重写了一部分方法，但是还有另一部分没有重写）
  36. # 数组变了，但页面没变---》解决方案
  37. 	// 方法1：通过 索引值 更新数组（数据会更新，但是页面不会发生改变）
  38. 		vm.arrayList[0]
  39. 		"Alan"
  40. 		vm.arrayList[0]='Darker'
  41. 		"Darker"
  43. 	// 方法2：通过 Vue.set(对象, index/key, value) 更新数组（数据会更新，页面也会发生改变）
  44. 		Vue.set(vm.arrayList, 0, 'Darker')

5、数据的双向绑定

  1. # input标签---》跟js变量绑定
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="./js/vue.js"></script>
  7. </head>
  9. <body>
  10. <div id="app">
  11.     <input type="text" v-model="text">--->{{text}}
  12. </div>
  13. </body>
  15. <script>
  16.     var vm = new Vue({
  17.         el: "#app",
  18.         data: {
  19.             text: ''
  20.         },
  21.     })
  22. </script>
  23. </html>

6、事件处理

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="./js/vue.js"></script>
  7. </head>
  9. <body>
  10. <div id="app">
  11.     change: <input type="text" v-model="text" @change="handleChange">
  12.     <hr>
  13.     input: <input type="text" v-model="text1" @input="handleInput">
  14.     <hr>
  15.     blur:<input type="text" v-model="text2" @blur="handleBlur">
  16. </div>
  17. </body>
  19. <script>
  20.     var vm = new Vue({
  21.         el: "#app",
  22.         data: {
  23.             text: '',
  24.             text1: '',
  25.             text2: '',
  26.         },
  27.         methods: {
  28.             handleChange() {
  29.                 console.log('change触发：', this.text)
  30.             },
  31.             handleInput() {
  32.                 console.log('input触发：', this.text1)
  33.             },
  34.             handleBlur() {
  35.                 console.log('blur触发：', this.text2)
  36.             },
  37.         }
  38.     })
  39. </script>
  40. </html>

6.1 过滤案例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="./js/vue.js"></script>
  7. </head>
  9. <body>
  10. <div id="app">
  11.     <input type="text" v-model="text" @input="handleInput">---》{{text}}
  12.     <ul>
  13.         <li v-for="data in newdataList">{{data}}</li>
  14.     </ul>
  15. </div>
  16. </body>
  18. <script>
  19.     // 补充 filter
  20.     // var newdataList = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
  21.     // var l = newdataList.filter(function (item) {
  22.     //     if (item.length > 2) {
  23.     //         return true
  24.     //     } else {
  25.     //         return false
  26.     //     }
  27.     // })
  28.     // console.log(l)
  30.     // 补充：判断一个字符串是否在另一个字符串中
  31.     // var text = 'at'
  32.     // var newdataList = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
  33.     // var l = newdataList.filter(function (item) {
  34.     //     var i = item.indexOf(text)
  35.     //     if (i >= 0) {
  36.     //         return true
  37.     //     } else {
  38.     //         return false
  39.     //     }
  40.     // })
  42.     // 同上 --简写
  43.     // var l = newdataList.filter(function (item) {
  44.     //     return item.indexOf(text) >= 0
  45.     // })
  46.     // console.log(l)
  48.     // 箭头函数  -es6
  49.     // var a = function (name) {
  50.     //     console.log(name)
  51.     // }
  52.     // a('lqz')
  54.     // 同上 --简写 箭头函数没有自己的this
  55.     // var a = (name) => {
  56.     //     console.log(name)
  57.     // }
  58.     // a("lqz")
  60.     var vm = new Vue({
  61.         el: "#app",
  62.         data: {
  63.             text: '',
  64.             dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
  65.             newdataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
  66.         },
  67.         methods: {
  68.             handleInput() {
  69.                 console.log(this)
  70.                 // var _this = this
  71.                 // // 只要text发生变化，newdataList就变化，就过滤
  72.                 // this.newdataList = this.dataList.filter(function (item) {
  73.                 //     // js 中this指向的问题
  74.                 //     console.log(this)
  75.                 //     return item.indexOf(_this.text) >= 0
  76.                 // })
  78.                 // es6 处理this指向，箭头函数
  79.                 this.newdataList = this.dataList.filter((item) => {
  80.                     // js 中this指向的问题
  81.                     console.log(this)
  82.                     return item.indexOf(this.text) >= 0
  83.                 })
  84.             },
  85.         }
  86.     })
  87. </script>
  88. </html>

6.2 事件修饰符

  1. # 使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生
  2. 	用 v-on:click.prevent.self 会阻止所有的点击
  3. 	而 v-on:click.self.prevent 只会阻止对元素自身的点击
  5. # 事件冒泡：
  6. 	子标签的点击事件，传到了父标签上

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="./js/vue.js"></script>
  7. </head>
  9. <body>
  10. <div id="app">
  11.     <ul @click.self="handleUl">
  12.         <li @click.stop="handleC('刘亦非')">刘亦菲</li>
  13.         <li @click="handleC('杨颖')">杨颖</li>
  14.         <li>迪丽热巴</li>
  15.     </ul>
  16.     <hr>
  17.     <a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a>
  18.     <hr>
  19.     <button @click.once="handleSubmit">点我秒杀</button>
  20. </div>
  21. </body>
  23. <script>
  24.     var vm = new Vue({
  25.         el: "#app",
  26.         data: {},
  27.         methods: {
  28.             handleUl() {
  29.                 console.log('ul被点解了')
  30.             },
  31.             handleC(name) {
  32.                 console.log(name, '被点击了')
  33.             },
  34.             handleA() {
  35.                 // 允许跳，不允许跳
  36.                 console.log('a被点击了')
  37.                 // location.href='http://www.baidu.com'
  38.             },
  39.             handleSubmit() {
  40.                 console.log('秒杀按钮被点击了')
  41.             }
  42.         }
  43.     })
  44. </script>
  45. </html>

6.3 按键修饰符

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="./js/vue.js"></script>
  7. </head>
  9. <body>
  10. <div id="app">
  11. <!--    <input type="text" v-model="mytext" v-on:keyup="handleKeyUp">-&ndash;&gt;{{mytext}}-->
  12. <!--    简写：-->
  13.     <input type="text" v-model="mytext" @keyup="handleKeyUp($event)">--->{{mytext}}
  14.     <hr>
  15.     <input type="text" v-model="mytext" @keyup.enter="handleKeyUp2($event)">--->{{mytext}}
  16. </div>
  17. </body>
  19. <script>
  20.     var vm = new Vue({
  21.         el: "#app",
  22.         data: {
  23.             mytext: '',
  24.         },
  25.         methods: {
  26.             handleKeyUp(event) {
  27.                 console.log(event)
  28.                 console.log(event.key, '被按下弹起了')
  29.                 if (event.key == 'Enter') {
  30.                     alert('美女你好')
  31.                 }
  32.             },
  33.             handleKeyUp2(event) {
  34.                 console.log(event.key, '被按下弹起了')
  35.             },
  36.         }
  37.     })
  38. </script>
  39. </html>

7、表单控制

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="./js/vue.js"></script>
  7. </head>
  9. <body>
  10. <div id="app">
  11.     <h1>checkbox单选</h1>
  12.     <p>用户名：<input type="text" v-model="username"></p>
  13.     <p>密码：<input type="password" v-model="password"></p>
  14.     <p>记住密码：<input type="checkbox" v-model="remember"></p>
  15.     <hr>
  16.     {{username}}---{{password}}--{{remember}}
  17.     <br>
  19.     <h1>radio单选</h1>
  20.     <input type="radio" v-model="radio" value="1">男
  21.     <input type="radio" v-model="radio" value="2">女
  22.     <input type="radio" v-model="radio" value="0">保密
  23.     <br><br>您选择的性别：{{radio}}
  24.     <hr>
  26.     <h1>checkbox多选</h1>
  27.     <input type="checkbox" v-model="many" value="篮球">篮球
  28.     <input type="checkbox" v-model="many" value="足球">足球
  29.     <input type="checkbox" v-model="many" value="棒球">棒球
  30.     <input type="checkbox" v-model="many" value="桌球">桌球
  31.     <br><br>您喜欢的球类：{{many}}
  32. </div>
  33. </body>
  35. <script>
  36.     var vm = new Vue({
  37.         el: "#app",
  38.         data: {
  39.             username: '',
  40.             password: '',
  41.             remember: true,  // checkbox单选，布尔
  42.             radio: '',  // redio的单选字符串，对应选中的value值
  43.             many: [],  //checkbox多选---》数组
  44.         },
  45.         methods: {}
  46.     })
  47. </script>
  48. </html>

8、v-model进阶

  1. # v-model 之 lazy、number、trim
  2. 	lazy：等待input框的数据绑定时区焦点之后再变化
  4. 	number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
  6. 	trim：去除首位的空格
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="./js/vue.js"></script>
  7. </head>
  9. <body>
  10. <div id="app">
  11.     lazy: <input type="text" v-model.lazy="username">--->{{username}}
  12.     <br>
  13.     number:<input type="text" v-model.number="age">--->{{age}}
  14.     <br>
  15.     trim:<input type="text" v-model.trim="info">--->{{info}}
  16.     <br>
  17. </div>
  18. </body>
  20. <script>
  21.     var vm = new Vue({
  22.         el: "#app",
  23.         data: {
  24.             username: '',
  25.             age: '',
  26.             info: '',
  27.         },
  28.         methods: {}
  29.     })
  30. </script>
  31. </html>

前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶的更多相关文章

  1. 前端笔记之微信小程序（二）{{}}插值和MVVM模式&数据双向绑定&指令&API

    一.双花括号{{}}插值和MVVM模式 1.1 体会{{}}插值 index.wxml的标签不是html的那些标签,这里的view就是div. {{}}这样的插值写法,叫做mustache语法.mus ...

  2. vue指令：v-model绑定表单控件；v-model与v-bind结合使用

    一.v-model绑定表单控件 v-model 双向数据绑定:一般用于表单元素,会忽略表单元素的value.checked.selected的初始值,且将Vue实例的数据作为数据来源. 1. 单行文本 ...

  3. 对象的属性类型 和 VUE的数据双向绑定原理

    如[[Configurable]] 被两对儿中括号 括起来的表示 不可直接访问他们 修改属性类型:使用Object.defineProperty()  //IE9+  和标准浏览器  支持 查看属性的 ...

  4. 【学习笔记】剖析MVVM框架，简单实现Vue数据双向绑定

    前言: 学习前端也有半年多了,个人的学习欲望还比较强烈,很喜欢那种新知识在自己的演练下一点点实现的过程.最近一直在学vue框架,像网上大佬说的,入门容易深究难.不管是跟着开发文档学还是视频教程,按步骤 ...

  5. vue中v-model 数据双向绑定

    表单输入绑定 v-model 数据双向绑定,只能应用在input /textare /select <div id="app"> <input type=&quo ...

  6. 【vue2】Style和Class，条件，列表渲染，双向数据绑定，事件处理

    目录 1.style和class 2. 条件渲染 2.1 指令 2.2 案例 3. 列表渲染 3.1 v-for:放在标签上,可以循环显示多个此标签 3.2 v-for 循环数组,循环字符串,数字,对 ...

  7. 西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

  8. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

  9. 【Vue】-- 数据双向绑定的原理 --Object.defineProperty()

    Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.def ...

随机推荐

  1. 『现学现忘』Docker基础 — 30、Docker中数据卷相关命令

    目录 1.Volume命令说明 2.Volume命令的使用 (1)创建数据卷 (2)查看本地数据卷列表 (3)打印myVolume数据卷的详细信息 (4)删除数据卷 (5)删除所有未使用的数据卷 3. ...

  2. kubernetes允许master调度

    1,让 Master 也当作 Node 使用 (1)如果想让 Pod 也能调度到在 Master(本样例即 localhost.localdomain)上,可以执行如下命令使其作为一个工作节点: 注意 ...

  3. 6月22日 Django中ORM的F查询和Q查询、事务、QuerySet方法大全

    一.F查询和Q查询 F查询 在上面所有的例子中,我们构造的过滤器都只是将字段值与某个常量做比较.如果我们要对两个字段的值做比较,那该怎么做呢? Django 提供 F() 来做这样的比较.F() 的实 ...

  4. SpringCloudAlibaba 微服务讲解（二）微服务环境搭建

    微服务环境搭建 我们这次是使用的电商项目的商品.订单.用户为案例进行讲解 2.1 案例准备 2.1.1 技术选型 maven :3.3.9 数据库:mysql 持久层:SpringData JPA S ...

  5. ServletConfig对象和ServletContext对象有什么区别?

    一个Servlet对应有一个ServletConfig对象,可以用来读取初始化参数. 一个webapp对应一个ServletContext对象. ServletContext对象获取初始化定义的参数. ...

  6. 模糊查询like语句该怎么写?

    第1种:在Java代码中添加sql通配符. string wildcardname = "%smi%"; list<name> names = mapper.selec ...

  7. MyBatis与Hibernate有哪些不同？

      (1)Mybatis和hibernate不同,它不完全是一个ORM框架,因为MyBatis需要程序员自己编写Sql语句. (2)Mybatis直接编写原生态sql,可以严格控制sql执行性能,灵活 ...

  8. java-开发规约

    public class TenTen { /** * 代码中的命名不能用下划线或美元符号开始和结束:例如 _name name_ $name name$ */ /** * 类名必须使用UpperCa ...

  9. springboot使用自定义注解和反射实现一个简单的支付

    优点: 未使用if else,就算以后增加支付类型,也不用改动之前代码 只需要新写一个支付类,给添加自定义注解@Pay 首先: 定义自定义注解 Pay 定义 CMBPay ICBCPay 两种支付 根 ...

  10. Effective Java —— 使类和成员的可访问性最小化

    本文参考 本篇文章参考自<Effective Java>第三版第十五条"Minimize the accessibility of classes and members&quo ...