'''

复习

'''

  1. """
  2. 1、vue框架的优势
  3. 	中文API
  4. 	单一面应用 - 提升移动端app运行速度
  5. 	数据的双向绑定 - 变量全局通用
  6. 	数据驱动 - 只用考虑数据，不需要在意DOM结构
  7. 	虚拟DOM - 缓存机制
  9. 2、vue如何在页面中引入
  10. 	1）通过script标签引入vue.js环境
  11. 	2）创建vue实例
  12. 	3）通过el进行挂载
  14. 	new Vue({
  15. 		el: '#app',  // css3选择器，唯一，html、body不能作为挂载点，一个页面可以有多个实例对应多个挂载点
  16. 	})
  18. 3、插值表达式
  19. 	{{ 变量以及变量的简单运算 }}
  20. 	{{ ((num * 10) + 'string').split('')[0] }}
  22. 4、文本指令
  23. 	{{ }} | v-text | v-html | v-once
  25. 5、方法指令
  26. 	v-on:事件="变量" | @事件="变量" | @事件="变量()" | @事件="变量($event, ...)"
  28. 	@click='btnClick'
  29. 	btnClick(ev) {}
  31. 	@click='btnClick(1, 2, $event)'
  32. 	btnClick(n1, n2, ev) {}
  33. 	btnClick(...args) {}
  35. 6、属性指令
  36. 	v-bind:属性="变量"  |  :属性="变量"
  38. 	:title="t1"
  39. 	:class="c1"  |  :class="[c1, c2]"  |   :class="{c1: true}"
  40. 	:style="s1"  |  :style="{color: c1, fontSize: f1}"
  41. 		s1是字典变量，c1和f1变量分别控制字体颜色和大小
  43. 7、js补充
  44. 	function可以作为类，内部会有this
  45. 	箭头函数内部没有this
  46. 	{}里面出现的函数称之为方法： 方法名(){}
  48. 	function Fn(name){this.name = name}
  49. 	let f1 = new Fn('Bob')
  51. 	let f2 = ()=>{}
  53. 	{
  54. 		f3(){}
  55. 	}
  56. """

“”

总结内容

“”

  1. """
  2. 1、表单指令：
  3. 	v-model="变量"   变量与value有关
  4. 	普通：变量就代表value值
  5. 	单选框：变量为多个单选框中的某一个value值
  6. 	单一复选框：变量为布尔，代表是否选中
  7. 	多复选框：变量为数组，存放选中的选项value
  9. 2、条件指令：
  10. 	v-show:  display:none
  11. 	v-if:    不渲染
  12. 	v-if | v-else-if | v-else
  14. 3、循环指令：
  15. 	v-for="(v, i) in str|arr"
  16. 	v-for="(v, k, i) in dic"
  18. 4、sessionStorage | localStorage
  20. 5、分隔符：delimiters: ['{{', '}}'],
  22. 6、过滤器：
  23. 	{{ n1, n2 | f1(30) | f2 }}
  25. 	filters: {
  26. 		f1(n1,n2,n3) {return 过滤结果},
  27. 		f2(f1的res) {return 过滤结果},
  28. 	}
  30. 7、计算属性：
  31. 	computed: {
  32. 		result() {
  33. 			// 一个方法属性值依赖于多个变量
  34. 			return this.n1 + this.n2;
  35. 		}
  36. 	}
  38. 8、监听属性：
  39. 	watch: {
  40. 		full_name(n, o) {
  41. 			this.first_name = n.split('')[0]
  42. 			this.last_name = n.split('')[1]
  43. 		}
  44. 	}
  46. 9、冒泡排序：
  47. 	for (let i=0; i<arr.length-1; i++) {  // 趟数
  48.         for (let j=0; j<arr.length-1-i; j++) {  // 比较次数
  49.             // 处理条件即可
  50.             if (arr[j]参数 > stus[j + 1]参数) {
  51.                 let temp = stus[j];
  52.                 stus[j] = stus[j + 1];
  53.                 stus[j + 1] = temp;
  54.             }
  55.         }
  56.     }
  58. """
  1. <!--表单指令-->
  2. <!DOCTYPE html>
  3. <html lang="zh">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>todo list 案例</title>
  7.     <style>
  8.         li:hover {
  9.             color: red;
  10.             cursor: pointer;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div id="app">
  16.         <input type="text" v-model="comment">
  17.         <button type="button" @click="send_msg">留言</button>
  18.         <ul>
  19.             <li v-for="(msg, i) in msgs" @click="delete_msg(i)">{{ msg }}</li>
  20.         </ul>
  21.     </div>
  22. </body>
  23. <script src="js/vue.js"></script>
  24. <script>
  25.     new Vue({
  26.         el: '#app',
  27.         data: {
  28.             comment: '',
  29.             msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [],
  31.         },
  32.         methods: {
  33.             send_msg() {
  34.                 // 将comment添加到msgs数组中：unshift push 首尾增 | shift pop 首尾删
  35.                 // this.msgs.push(this.comment);
  37.                 // 数组操作最全方法：splice(begin_index, count, ...args)
  38.                 // this.msgs.splice(0, 2);
  40.                 if (!this.comment) {
  41.                     alert('请输入内容');
  42.                     return false;
  43.                 }
  44.                 this.msgs.push(this.comment);
  45.                 this.comment = '';
  47.                 localStorage.msgs = JSON.stringify(this.msgs);
  48.             },
  49.             delete_msg(index) {
  50.                 this.msgs.splice(index, 1);
  51.                 localStorage.msgs = JSON.stringify(this.msgs);
  52.             }
  53.         }
  54.     })
  55. </script>
  56. <script>
  57.     // 前台数据库
  58.     // localStorage: 永久存储
  59.     // sessionStorage：临时存储(所属页面标签被关闭后，清空)
  61.     // 存
  62.     // localStorage.n1 = 10;
  63.     // sessionStorage.n2 = 20;
  65.     // 取
  66.     // console.log(localStorage.n1);
  67.     // console.log(sessionStorage.n2);
  69.     // 数组等类型需要先序列化成JSON
  70.     // localStorage.arr = JSON.stringify([1, 2, 3]);
  71.     // console.log(JSON.parse(localStorage.arr));
  73.     // 清空数据库
  74.     // localStorage.clear();
  75. </script>
  76. </html>
  1. <!--条件指令-->
  2. <!DOCTYPE html>
  3. <html lang="zh">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title></title>
  7.     <style>
  8.         [v-cloak] { display: none; }
  10.         .box {
  11.             width: 200px;
  12.             height: 200px;
  13.         }
  14.         .r {background-color: red}
  15.         .b {background-color: blue}
  16.         .g {background-color: green}
  18.         .active {
  19.             background-color: deeppink;
  20.         }
  21.     </style>
  23. </head>
  24. <body>
  25.     <div id="app" v-cloak>
  26.         <!--条件指令：
  27.             v-show="布尔变量"   隐藏时，采用display:none进行渲染
  28.             v-if="布尔变量"     隐藏时，不再页面中渲染(保证不渲染的数据泄露)
  29.             -----------------------------
  30.             v-if | v-else-if | v-else
  31.         -->
  32.         <div class="box r" v-show="is_show"></div>
  33.         <div class="box b" v-if="is_show"></div>
  34.         <hr>
  36.         <div class="wrap">
  37.             <div>
  38.                 <button @click="page='r_page'" :class="{active: page === 'r_page'}">红</button>
  39.                 <button @click="page='b_page'" :class="{active: page === 'b_page'}">蓝</button>
  40.                 <button @click="page='g_page'" :class="{active: page === 'g_page'}">绿</button>
  41.             </div>
  42.             <div class="box r" v-if="page === 'r_page'"></div>
  43.             <div class="box b" v-else-if="page === 'b_page'"></div>
  44.             <div class="box g" v-else></div>
  45.         </div>
  47.     </div>
  48. </body>
  49. <script src="js/vue.js"></script>
  50. <script>
  51.     new Vue({
  52.         el: '#app',
  53.         data: {
  54.             is_show: false,
  55.             page: 'r_page'
  56.         }
  57.     })
  58. </script>
  59. </html>
  1. <!--循环指令-->
  2. <!DOCTYPE html>
  3. <html lang="zh">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>循环指令</title>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <!--循环指令：
  11.             v-for="ele in string|array|obj"
  12.         -->
  13.         <span>{{ info }}</span>
  14.         <hr>
  15.         <i v-for="c in info">{{ c }} </i>
  16.         <hr>
  17.         <i v-for="(c, i) in info">{{i}}:{{c}}<br></i>
  18.         <hr>
  20.         <div v-for="e in stus">{{ e }}</div>
  21.         <hr>
  22.         <div v-for="(e, i) in stus">{{ i }}:{{ e }}</div>
  23.         <hr>
  25.         <div v-for="v in people">{{ v }}</div>
  26.         <hr>
  27.         <div v-for="(v, k, i) in people">{{ i }} - {{ k }}:{{ v }}</div>
  28.         <hr>
  30.         <div v-for="tea in teas">
  31.             <span v-for="(v, k, i) in tea"><span v-if="i !== 0"> | </span>{{ k }}:{{ v }}</span>
  32.         </div>
  34.         <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  35.     </div>
  36. </body>
  37. <script src="js/vue.js"></script>
  38. <script>
  39.     new Vue({
  40.         el: '#app',
  41.         data: {
  42.             info: 'good good study',
  43.             stus: ['Bob', 'Tom', 'Jerry'],
  44.             people: {
  45.                 name: '猴子',
  46.                 age: 36.7,
  47.                 sex: '女',
  48.             },
  49.             teas: [
  50.                 {
  51.                     name: 'jason',
  52.                     age: 73,
  53.                     sex: '男',
  54.                 },
  55.                 {
  56.                     name: 'egon',
  57.                     age: 74,
  58.                     sex: '男',
  59.                 },
  60.                 {
  61.                     name: 'owen',
  62.                     age: 17.5,
  63.                     sex: '男',
  64.                 }
  65.             ]
  66.         }
  67.     })
  68. </script>
  69. </html>
  1. <!--循环指令案例-->
  2. <!DOCTYPE html>
  3. <html lang="zh">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>todo list 案例</title>
  7.     <style>
  8.         li:hover {
  9.             color: red;
  10.             cursor: pointer;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div id="app">
  16.         <input type="text" v-model="comment">
  17.         <button type="button" @click="send_msg">留言</button>
  18.         <ul>
  19.             <li v-for="(msg, i) in msgs" @click="delete_msg(i)">{{ msg }}</li>
  20.         </ul>
  21.     </div>
  22. </body>
  23. <script src="js/vue.js"></script>
  24. <script>
  25.     new Vue({
  26.         el: '#app',
  27.         data: {
  28.             comment: '',
  29.             msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [],
  31.         },
  32.         methods: {
  33.             send_msg() {
  34.                 // 将comment添加到msgs数组中：unshift push 首尾增 | shift pop 首尾删
  35.                 // this.msgs.push(this.comment);
  37.                 // 数组操作最全方法：splice(begin_index, count, ...args)
  38.                 // this.msgs.splice(0, 2);
  40.                 if (!this.comment) {
  41.                     alert('请输入内容');
  42.                     return false;
  43.                 }
  44.                 this.msgs.push(this.comment);
  45.                 this.comment = '';
  47.                 localStorage.msgs = JSON.stringify(this.msgs);
  48.             },
  49.             delete_msg(index) {
  50.                 this.msgs.splice(index, 1);
  51.                 localStorage.msgs = JSON.stringify(this.msgs);
  52.             }
  53.         }
  54.     })
  55. </script>
  56. <script>
  57.     // 前台数据库
  58.     // localStorage: 永久存储
  59.     // sessionStorage：临时存储(所属页面标签被关闭后，清空)
  61.     // 存
  62.     // localStorage.n1 = 10;
  63.     // sessionStorage.n2 = 20;
  65.     // 取
  66.     // console.log(localStorage.n1);
  67.     // console.log(sessionStorage.n2);
  69.     // 数组等类型需要先序列化成JSON
  70.     // localStorage.arr = JSON.stringify([1, 2, 3]);
  71.     // console.log(JSON.parse(localStorage.arr));
  73.     // 清空数据库
  74.     // localStorage.clear();
  75. </script>
  76. </html>
  1. <!--过滤器-->
  2. <!DOCTYPE html>
  3. <html lang="zh">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>过滤器</title>
  7. </head>
  8. <body>
  9.     <div id="app">
  10.         <!--
  11.         总结：
  12.         1、在filters成员中定义过滤器方法
  13.         2、可以对多个值进行过滤，过滤时还可以额外传入辅助参数
  14.         3、过滤的结果可以再进行下一次过滤(过滤的串联)
  15.         -->
  16.         <p>{{ num | f1 }}</p>
  17.         <p>{{ a, b | f2(30, 40) | f3 }}</p>
  18.     </div>
  19. </body>
  20. <script src="js/vue.js"></script>
  21. <script>
  22.     new Vue({
  23.         el: '#app',
  24.         data: {
  25.             num: 10,
  26.             a: 10,
  27.             b: 20,
  28.         },
  29.         filters: {
  30.             // 传入所有要过滤的条件，返回值就是过滤的结果
  31.             f1 (num) {
  32.                 console.log(num);
  33.                 return num * 10;
  34.             },
  35.             f2 (a, b, c, d) {
  36.                 console.log(a, b, c, d);
  37.                 return a + b + c + d;
  38.             },
  39.             f3 (num) {
  40.                 return num * num;
  41.             }
  42.         }
  43.     })
  44. </script>
  45. </html>

A练习

'''

1、按照上方 知识点总结 模块，总结今天所学知识点；

2、先有一下成绩单数据

scores = [

{ name: 'Bob', math: 97, chinese: 89, english: 67 },

{ name: 'Tom', math: 67, chinese: 52, english: 98 },

{ name: 'Jerry', math: 72, chinese: 87, english: 89 },

{ name: 'Ben', math: 92, chinese: 87, english: 59 },

{ name: 'Chan', math: 47, chinese: 85, english: 92 },

]

用table表格标签渲染以上数据，表格第一列是学生总分排名，最后一列是学生总分；

3、还是采用上方相同的数据，采用相同的渲染规则，只渲染所有科目都及格了的学生。

'''

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>1</title>
  6. </head>
  7. <body>
  8.     <div id="app">
  9.         <table border="1" style="margin: auto" rules="all">
  10.             <tr>
  11.                 <th>排名</th>
  12.                 <th>姓名</th>
  13.                 <th>数学</th>
  14.                 <th>语文</th>
  15.                 <th>英语</th>
  16.                 <th>总分</th>
  17.             </tr>
  18.             <!--有几个人，就循环渲染几行-->
  19.             <tr v-for="(score, i) in scores">
  20.                 <td>{{ i + 1 }}</td>
  21.                 <td v-for="v in score">{{v}}</td>
  22.             </tr>
  23.         </table>
  24.     </div>
  25. </body>
  26. <script src="js/vue.js"></script>
  27. <script>
  28.     `
  29.     let scores = null;
  30.     $.ajax({
  31.         url:'',
  32.         success(response) {
  33.             scores = response.data
  34.         }
  35.     });
  36.     `;
  37.     // 模拟当前页面加载成功，从后台获取操作的数据
  38.     let scores = [
  39.         { name: 'Bob', math: 97, chinese: 89, english: 67 },
  40.         { name: 'Tom', math: 67, chinese: 52, english: 98 },
  41.         { name: 'Jerry', math: 72, chinese: 87, english: 89 },
  42.         { name: 'Ben', math: 92, chinese: 87, english: 59 },
  43.         { name: 'Chan', math: 47, chinese: 85, english: 92 },
  44.     ];
  45.     // 补充：for in遍历的是取值关键 | for of遍历的是值
  46.     // 添加总分
  47.     for (score of scores) {
  48.         score.total = score.math + score.chinese + score.english;
  49.     }
  50.     // console.log(scores);
  51.     // 按照总分排序
  52.     for (let i=0; i<scores.length-1; i++) {
  53.         for (let j=0; j<scores.length-1-i; j++) {
  54.             if (scores[j].total < scores[j+1].total) {
  55.                 let temp = scores[j];
  56.                 scores[j] = scores[j+1];
  57.                 scores[j+1] = temp;
  58.             }
  59.         }
  60.     }
  61.     console.log(scores);
  63.     new Vue({
  64.         el: '#app',
  65.         data: {
  66.             // 属性名与值为变量的变量名相同，可以简写省略值
  67.             scores,
  68.         }
  69.     })
  70. </script>
  71. </html>
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>2</title>
  6. </head>
  7. <body>
  8.     <div id="app">
  9.         <table border="1" style="margin: auto" rules="all">
  10.             <tr>
  11.                 <th>排名</th>
  12.                 <th>姓名</th>
  13.                 <th>数学</th>
  14.                 <th>语文</th>
  15.                 <th>英语</th>
  16.                 <th>总分</th>
  17.             </tr>
  18.             <!--有几个人，就循环渲染几行-->
  19.             <tr v-for="(score, i) in scores" v-if="score.math>=60&&score.chinese>=60&&score.english>=60">
  20.                 <td>{{ i + 1 }}</td>
  21.                 <td v-for="v in score">{{v}}</td>
  22.             </tr>
  23.         </table>
  24.     </div>
  25. </body>
  26. <script src="js/vue.js"></script>
  27. <script>
  28.     `
  29.     let scores = null;
  30.     $.ajax({
  31.         url:'',
  32.         success(response) {
  33.             scores = response.data
  34.         }
  35.     });
  36.     `;
  37.     // 模拟当前页面加载成功，从后台获取操作的数据
  38.     let scores = [
  39.         { name: 'Bob', math: 97, chinese: 89, english: 67 },
  40.         { name: 'Tom', math: 67, chinese: 52, english: 98 },
  41.         { name: 'Jerry', math: 72, chinese: 87, english: 89 },
  42.         { name: 'Ben', math: 92, chinese: 87, english: 59 },
  43.         { name: 'Chan', math: 47, chinese: 85, english: 92 },
  44.     ];
  45.     // 补充：for in遍历的是取值关键 | for of遍历的是值
  46.     // 添加总分
  47.     for (score of scores) {
  48.         score.total = score.math + score.chinese + score.english;
  49.     }
  50.     // console.log(scores);
  51.     // 按照总分排序
  52.     for (let i=0; i<scores.length-1; i++) {
  53.         for (let j=0; j<scores.length-1-i; j++) {
  54.             if (scores[j].total < scores[j+1].total) {
  55.                 let temp = scores[j];
  56.                 scores[j] = scores[j+1];
  57.                 scores[j+1] = temp;
  58.             }
  59.         }
  60.     }
  61.     console.log(scores);
  63.     new Vue({
  64.         el: '#app',
  65.         data: {
  66.             // 属性名与值为变量的变量名相同，可以简写省略值
  67.             scores,
  68.         }
  69.     })
  70. </script>
  71. </html>

B练习

'''

1、还是采用上方相同的数据，添加筛选规则：

i）有三个按钮：语文、数学、外语，点击谁谁高亮，且当前筛选规则采用哪门学科

ii）两个输入框，【】~【】，前面天最小分数，后面填最大分数，全部设置完毕后，表格的数据会被更新只渲染满足所有条件的结果

举例：点击语文，输入【86】~【87】，那就只会渲染Jerry和Ben两条数据

'''

  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>3</title>
  6.     <style>
  7.         .active {
  8.             background-color: pink;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <div id="app">
  14.         <div style="width: 400px; margin: 20px auto">
  15.             <button @click="subject = 'math'" :class="{active: subject === 'math'}">数学</button>
  16.             <button @click="subject = 'chinese'" :class="{active: subject === 'chinese'}">语文</button>
  17.             <button @click="subject = 'english'" :class="{active: subject === 'english'}">英语</button>
  18.             <input type="number" min="0" max="100" v-model="min">
  19.             ~
  20.             <input type="number" min="0" max="100" v-model="max">
  21.         </div>
  23.         <table width="400" border="1" style="margin: auto" rules="all">
  24.             <tr>
  25.                 <th>排名</th>
  26.                 <th>姓名</th>
  27.                 <th>数学</th>
  28.                 <th>语文</th>
  29.                 <th>英语</th>
  30.                 <th>总分</th>
  31.             </tr>
  32.             <tbody v-if="subject === 'math'">
  33.                 <tr v-for="(score, i) in scores" v-if="score.math>=min && score.math<=max || (!min || !max)">
  34.                     <td>{{ i + 1 }}</td>
  35.                     <td v-for="v in score">{{v}}</td>
  36.                 </tr>
  37.             </tbody>
  38.             <tbody v-else-if="subject === 'chinese'">
  39.                 <tr v-for="(score, i) in scores" v-if="score.chinese>=min && score.chinese<=max || (!min || !max)">
  40.                     <td>{{ i + 1 }}</td>
  41.                     <td v-for="v in score">{{v}}</td>
  42.                 </tr>
  43.             </tbody>
  44.             <tbody v-else-if="subject === 'english'">
  45.                 <tr v-for="(score, i) in scores" v-if="score.english>=min && score.english<=max || (!min || !max)">
  46.                     <td>{{ i + 1 }}</td>
  47.                     <td v-for="v in score">{{v}}</td>
  48.                 </tr>
  49.             </tbody>
  50.             <tbody v-else>
  51.                 <tr v-for="(score, i) in scores">
  52.                     <td>{{ i + 1 }}</td>
  53.                     <td v-for="v in score">{{v}}</td>
  54.                 </tr>
  55.             </tbody>
  56.         </table>
  57.     </div>
  58. </body>
  59. <script src="js/vue.js"></script>
  60. <script>
  61.     `
  62.     let scores = null;
  63.     $.ajax({
  64.         url:'',
  65.         success(response) {
  66.             scores = response.data
  67.         }
  68.     });
  69.     `;
  70.     // 模拟当前页面加载成功，从后台获取操作的数据
  71.     let scores = [
  72.         { name: 'Bob', math: 97, chinese: 89, english: 67 },
  73.         { name: 'Tom', math: 67, chinese: 52, english: 98 },
  74.         { name: 'Jerry', math: 72, chinese: 87, english: 89 },
  75.         { name: 'Ben', math: 92, chinese: 87, english: 59 },
  76.         { name: 'Chan', math: 47, chinese: 85, english: 92 },
  77.     ];
  78.     // 补充：for in遍历的是取值关键 | for of遍历的是值
  79.     // 添加总分
  80.     for (score of scores) {
  81.         score.total = score.math + score.chinese + score.english;
  82.     }
  83.     // console.log(scores);
  84.     // 按照总分排序
  85.     for (let i=0; i<scores.length-1; i++) {
  86.         for (let j=0; j<scores.length-1-i; j++) {
  87.             if (scores[j].total < scores[j+1].total) {
  88.                 let temp = scores[j];
  89.                 scores[j] = scores[j+1];
  90.                 scores[j+1] = temp;
  91.             }
  92.         }
  93.     }
  94.     console.log(scores);
  96.     new Vue({
  97.         el: '#app',
  98.         data: {
  99.             // 属性名与值为变量的变量名相同，可以简写省略值
  100.             scores,
  101.             min: '',
  102.             max: '',
  103.             subject: '',
  104.         }
  105.     })
  106. </script>
  107. </html>

vue今日总结的更多相关文章

  1. vue 仿今日头条

    vue 仿今日头条 为了增加移动端项目的经验,近一周通过 vue 仿写今日头条,以下就项目实现过程中遇到的问题以及解决方法给出总结,有什么不正确的地方,恳请大家批评指正^ _ ^!,代码仓库地址为 g ...

  2. vue项目中使用日期获取今日，昨日，上周，下周，上个月，下个月的数据

    今日公司项目接口要求获取动态的上周数据,经过不断的寻找,找到此方法. 该方法使用的是Moment.js JavaScript日期处理类库 一:安装依赖 npm install moment --sav ...

  3. 类似今日头条，头部tab可滑动，下面的内容可跟着滚动，掺杂着vue和require等用法例子

    1.在main.js里 /*主模块的入口 结合require一起使用*/ require.config({//require的基础用法 配置一下 paths: { "Zepto" ...

  4. 今日前端框架Vue学习笔记

    在线网页网址http://xingxunxinxi.com/StudentCourse/first.html代码 界面

  5. 谈谈我对前端组件化中“组件”的理解，顺带写个Vue与React的demo

    前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...

  6. vue2.0仿今日头条开源项目

    vue-toutiao 这是用 vue.js 2.0 高仿 今日头条 的移动端项目,结合了原生app的部分功能以及网页版. 前言 本人是 今日头条 的重度用户,在学习vue.js过程中,在GitHub ...

  7. vue 设计日历表

    日历的功能,我们会经常用到,且逻辑比较复杂,小算法较多,花了半天时间写了个,特此详记. 先贴图 功能阐述:返回本月不多说,设置工作日和节假日是为了公司制度需要,后台会有假日表来记录. 为了适应于vue ...

  8. 基于Vue的小日历（支持按周切换）

      基于Vue的日历小功能,可根据实际开发情况按每年.每月.每周.进行切换 <template> <div class="date"> <!-- 年份 ...

  9. [坑况]饿了么你是这样的前端——vue+element ui 【this dependency was not found：'element-ui/lib/theme-chalk/index.css'】

    element ui 坑况:今日pull代码,潇洒npm run dev ,被告知:this dependency was not found:'element-ui/lib/theme-chalk/ ...

随机推荐

  1. 《MIT 6.828 Homework 2: Shell》解题报告

    Homework 2的网站链接:MIT 6.828 Homework 2: shell 题目 下载sh.c文件,在文件中添加相应代码,以支持以下关于shell的功能: 实现简单shell命令,比如ca ...

  2. springboot @vaule注解失效解决办法

    在Controller类里面通过@Value将参数注入进来,最后的确成功了.因此基于此经验,我便在其他使用的类里面也采用这样的方式注入参数,但是发现去失效了,报错为NULL,说明参数并没有我们料想的被 ...

  3. DecodingGenome(CodeForces-222E)【矩阵快速幂】

    题目链接:https://vjudge.net/contest/333591#problem/L 题意:用m个字符构成长度为n的串,其中存在形如“ab”(表示a后不能放置b)的条件约束,问共有多少种构 ...

  4. 超简单的js实现提示效果弹出以及延迟隐藏的功能

     自动登录勾选提示效果 要求:鼠标移入显示提示信息框:鼠标离开,信息框消失,消失的效果延迟 <!DOCTYPE html> <html lang="en"> ...

  5. HTNL基础之一

    HTML:超文本标记语言 <-- 最好可以自己默写出来 --> <!DOCTYPE HTML> <html> <head> <title>& ...

  6. Python学习3——列表和元组

    一.通用序列操作——索引.切片.相加.相乘.成员资格检查 1.索引,正序从0开始为第一个元素,逆序从-1开始,-1为最后一个元素 >>> greeting[0] 'h' >&g ...

  7. python — 协程

    1. 协程 1.1 协程基础 1.协程 :能够在一个线程下的多个任务之间来回切换,那么每一个任务都是一个协程. 2.协程的优点: 1.一个线程中的阻塞都被其他的各种任务沾满了 2.让操作系统觉得这个线 ...

  8. MongoDB实战读书笔记（二）：面向文档的数据

    1 schema设计原则 1.1 关系型数据库的三大设计范式 第一范式(1NF)无重复的列 第二范式(2NF)属性完全依赖于主键 [ 消除部分子函数依赖 ] 第三范式(3NF)属性不依赖于其它非主属性 ...

  9. maven 私服 nexus 安装

    1.去官方下载他的免费版,人民称为oss版(这一步自行百度去官网解决),官网:https://www.sonatype.com/ 2.下载好后,解压是两个文件夹: 3.配置环境变量:  4.安装生成w ...

  10. SAP成都研究院李三郎：SCP Application Router简介

    今天的文章来自李贝宁(Ben),SAP成都研究院的资深程序猿和架构师. 作为成都研究院里同时精通Java, JavaScript和ABAP这三门编程语言的数位同事之一,Ben曾经先后担任了成都CRM ...