Vue笔记大融合总结
2024-05-10 21:26:36
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 判断使用GCF，即用Google Chrome浏览器内核渲染页面 --><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue笔记大融合总结</title><!-- 引入vue库,网上固定版本和本地文件 --><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> --><script src="./vue.js"></script>
</head><style>[v-cloak] {display: none;}table {border: 1px solid #e9e9e9;border-collapse: collapse;border-spacing: 0;}th,td {padding: 8px 16px;border: 1px solid #e9e9e9;text-align: left;}th {background-color: #f7f7f7;color: #5c6b77;font-weight: 600;}
</style><body><div id="app"><button v-on:click="add">+</button> <!-- v-on:click和@click绑定方法 --><button @click="sub">-</button><h2>{{message}}</h2><!-- 双大括号表达式：直接展示数据 --><cpn><span slot="center">标题1</span></cpn><cpn><button slot="left">按钮</button><span slot="center">标题2</span></cpn><cpn><input type="text" slot="center"><button slot="left">返回</button><button slot="right">搜索</button></cpn><h2>{{firstName + " " + lastName}}</h2><h2 v-once>{{number*2}}</h2><!-- 该指令表示元素和组件（组件后面才会学习）只渲染一次，不会随着数据的改变而改变 --><h2 v-html="url">1</h2><!-- 此指令用于解析数据中的html代码并渲染 --><h2 v-text="name"></h2><!-- v-text作用和Mustache比较相似：都是用于将数据显示界面中，但v-text是直接替换标签中的内容，而mustache语法可以加其它内容v-text通常情况下，接收一个String类型的变量 --><h2 v-pre>{{name}}</h2> <!-- 仅标签内的内容原封不动的显示，不解析 --><!-- 6,v-cloak1，在没完成vue解析之前，div中有一个属性v-cloak2,在完成vue解析之后，div中没有一个属性v-cloak，此属性被删除根据v-cloak的特性，可以用属性选择器控制元素解析前的样式--><!-- class属性的值可以是对象,因为对象可以用来存键值对 --><h2 v-bind:class="{red:isRed,big:isBig}" style="display:block">{{message}}</h2><h2 v-bind:class="getClass()" style="display:block">{{message}}</h2><!-- class和v-bind:class可以同时存在，它们会合并，而不是覆盖，一些基本的，不会变动的样式会用class来指定，会变动的样式用v-bind:class --><h2 class="background" v-bind:class="{red:isRed,big:isBig}" style="display:inline-block">{{message}}</h2><!-- class属性的值也可以是数组，一个储存类名的数组 --><h2 class="background" v-bind:class="['red','big']" style="display:inline-block">{{message}}</h2><h2 class="background" v-bind:class="getClassArray()" style="display:inline-block">{{message}}</h2><button v-on:click="red">切换字体颜色</button><button v-on:click="size">切换字体大小</button><ul><li v-for="(m,index) in arr" :class="{active:currentIndex === index}" @click="liClick(index)">{{index}}--{{m}}</li></ul><!-- <h2 :style="{key(属性名):value(属性名)}">{{message}}</h2> --><h2 :style="{fontSize:finalSize+'px',backgroundColor:finalColor}">{{message}}</h2><h2 :style="getStyles()">{{meassage}}</h2><!-- v-bind语法中没加引号的会被视为变量，加了引号的才是字符串 --><h2 :style="[baseStyle,baseStyle1]"></h2><h3>书总价格：{{totalPrice}}</h3><button @click="change">change</button><!-- 方法后不加()传入该方法地址，部分代码加载完成后（即到下一个计时器运行前）自动调用 --><button @click="change()">change()</button><!-- 方法后加()立即运行此函数 --><button @click="change(123,event)">change(123,event)</button><!-- 在此处传入自己需要的参数和event变量，注意直接写event会被当作某个变量而非浏览器event对象，因此一般写$event传入 --><ul><li v-for="(item,key,index) in info">{{index+1}}, {{key}} :{{item}}</li></ul><!-- 3，遍历对象的过程中，用三个变量可以获取键值对及下标，获取到的是value,key和index,格式：(value,key,index) in--><!-- 组件的key属性官方推荐我们在使用v-for，给对应的元素或组件添加上一个:key属性，每次把元素和取出的内容进行了绑定，这样被遍历的数组或对象内部数据发生变化（主要是添加）时，因为先前已经用key进行了绑定，发生变化时，性能能提升--><div v-if="books.length"><table><thead><tr><th></th><th>书籍名称</th><th>出版日期</th><th>价格</th><th>购买数量</th><th>操作</th></tr></thead><tbody><tr v-for="(item,index) in books"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.date}}</td><td>{{item.price | showPrice}}</td><!-- 过滤器的使用: 参数 | 过滤器方法名 --><td><button @click="decrement(index)" v-bind:disabled="item.count <= 1">-</button><!-- 标签的disabled属性出现则标签不可用，v-bind可以用来控制属性的存在，当属性值为true时属性存在，反之，属性值为false时属性不存在 -->{{item.count}}<button @click="increment(index)">+</button></td><td><button @click="removeHandle(index)">移除</button></td></tr></tbody></table><h2>总价格：{{totalPrice|showPrice}}</h2></div><h2 v-else>购物车为空</h2><!-- v-model相当于两条指令:1,v-bind绑定一个value属性 2，v-on指令给当前元素绑定input事件 --><input type="text" :value="message" @input="valueChange">{{message}}<input type="text" v-model="message"><!-- v-model双向绑定 -->{{message}}<div></div><h2>单选框radio</h2><label for="male"><input type="radio" id="male" value="男" v-model="sex">男<!-- 当name属性相同时两个组件会互斥，不能同时出现，但v-model相同时也有此效果，所有用v-model时一般用不上name属性 --></label><label for="female"><input type="radio" id="female" value="女" v-model="sex">女</label><h2>你选择的性别是: {{sex}}</h2><button :disabled="!isAgree">下一步</button><br /><!-- 2，checkbox多选框 --><!-- 多个复选框：1，当是多个复选框时，因为可以选中多个，所以对应的data中是一个数组。2，当选中某一个时，就会将input的value添加加到数组中。--><h3>checkbox选择多个</h3><label for="a1"><input type="checkbox" value="篮球" id="a1" v-model="hobbies">篮球</label><label for="a2"><input type="checkbox" value="足球" id="a2" v-model="hobbies">足球</label><label for="a3"><input type="checkbox" value="乒乓球" id="a3" v-model="hobbies">乒乓球</label><label for="a4"><input type="checkbox" value="羽毛球" id="a4" v-model="hobbies">羽毛球</label><h4>您的爱好是：{{hobbies}}</h4><!--下拉列表 1，只能选择一个值 --><h2>select单选时：</h2><select name="a" id="s1" v-model="fruit"><option value="苹果">苹果</option><option value="香蕉">香蕉</option><option value="榴莲">榴莲</option><option value="葡萄">葡萄</option></select><h2>您最喜欢的水果是：{{fruit}}</h2><!--下拉列表 2，可以选择多个值 --><h2>select多选时：(按contrl键选择进行多选)</h2><select name="b" id="s2" v-model="mySelects" multiple><option value="苹果">苹果</option><option value="香蕉">香蕉</option><option value="榴莲">榴莲</option><option value="葡萄">葡萄</option></select><h2>您要买走的水果是：{{mySelects}}</h2><!-- 1，修饰符：lazy 懒加载,到失去焦点或按enter时才加载--><input type="text" v-model.lazy="message"><h3>{{message}}</h3><!-- 2，修饰符：number 转数字型--><input type="text" v-model.number="age"><h3>值：{{age}}，类型：{{typeof age}}</h3><!-- 3,修饰符：trim 去两头空格--><input type="text" v-model.trim="name"><h3>去两头空格后：{{name}}</h3><!-- 绑定属性父=>子 --><cpn1 v-bind:see_movies="movies" :show="show_message"></cpn1><!-- 发射事件子=>父 --><cpn @item_click="cpn_click"></cpn><!-- 父组件此处可以接收子组件发射的事件，以此触发父组件内的事件来处理子组件发射的事件,父组件的处理函数不写加参数则默认将子组件发射事件的第二个参数即item作为参数--><cpn><!-- 跨作用域插槽 --><template slot-scope="slot"><!-- slot-scope="slot"，slot-scope指令取得子组件中所有数据（scope:深入检查;），"slot"仅用于给这些数据取名，返回的是一个对象{自定义名称:{子组件数据}}即{slot:{data1:["JavaScript", "C++", "Java", "C#", "Python", "Go", "Swift"]}} --><span v-for="item in slot.data1">{{item}} - </span><br /><span>{{slot.data1.join(" - ")}}</span></template></cpn></div>
</body>
<template id="cpn"><div><h2>我是标题</h2><!-- 在使用多个插槽时，需用到name属性使插槽具有名字，在插入内容时，在插入内容中使用slot=插槽名便可使用指定名字的插槽 --><slot name="left">左边</slot><slot name="center">中间</slot><slot name="right">右边</slot></div>
</template>
<script>const vm = new Vue({//vue实例 const声明常量 new操作符用于生成实例 Vue()为vue.js库中的一个构造方法 el: '#app',//用于挂载管理的元素data() { //数据 响应式：data和dom实时绑定return {movies: ["大话西游", "变形金刚", "哆啦a梦", "少林寺"],arr: ["大猩猩", "变形金刚", "三个火枪手", "进击的巨人"],currentIndex: 0,baseStyle: { backgroundColor: "red" },baseStyle1: { fontSize: "100px" },books: [{ id: 110, name: "Unix编程艺术", price: 119 },{ id: 111, name: "代码大全", price: 105 },{ id: 112, name: "深入理解计算机原理", price: 98 },{ id: 113, name: "现代操作系统", price: 87 },],names: ["why", "kobe", "james", "curry"],info: {name: "wu",age: 20,height: 1.88},books: [{id: 1,name: "《算法导论》",date: "2006-9",price: 85.00,count: 1,},{id: 2,name: "《UNIX编程艺术》",date: "2006-2",price: 59.00,count: 1,},{id: 3,name: "《编程珠玑》",date: "2008-10",price: 39.00,count: 1,},{id: 4,name: "《代码大全》",date: "2006-3",price: 128.00,count: 1,}],message: "你好啊",sex: "男",/* 此处可以给一个初始值作为默认值 */isAgree: true,hobbies: [],fruit: "香蕉",mySelects: ["葡萄"],hobbies: [],originHobbies: ["篮球", "足球", "乒乓球", "羽毛球", "台球", "高尔夫", "排球", "铅球"],date: "2022/4/6",name: "沉木"};},methods: {//方法/* counter增加的方法 */add: function () {console.log("add方法被执行");this.counter++;},/* counter减少的方法 */sub: function () {console.log("sub方法被执行");this.counter--;},red: function () {this.isRed = !this.isRed;},size: function () {this.isBig = !this.isBig;},getClass: function () {return { red: this.isRed, big: this.isBig };},getClassArray: function () {return [this.color, this.changeBig]},liClick(index) {this.currentIndex = index;},getStyles: function () {return { fontSize: this.finalSize + 'px', backgroundColor: this.finalColor };},/* 购买数量增加 */increment(index) {this.books[index].count++;},/* 购买数量减少 */decrement(index) {this.books[index].count--;},removeHandle(index) {this.books.splice(index, 1);},valueChange(event) {/* 把最新的value赋值给message */this.message = event.target.value;},cpn_click(item) {console.log("父组件内的cpn_click触发",item);}},computed: {//计算属性name() {return this.firstName + " " + this.lastName},totalPrice: function () {let result = 0;for (let i = 0; i < this.books.length; i++) {result += this.books[i].price;}return result;},totalPrice() {let totalPrice = 0;/* 第一种，for循环遍历 */for (let i = 0; i < this.books.length; i++) {totalPrice += this.books[i].price * this.books[i].count;}/* 第二种，for in 循环遍历 */// for(let i in this.books){//i取出的是每个数据的index// totalPrice += this.books[i].price * this.books[i].count;// }/* 第三种，for of 循环遍历 */for (let item of this.books) {totalPrice += item.price * item.count;}return totalPrice;}},watch: {//监听},filters: {//过滤器//过滤器的使用:格式 参数 | 过滤器方法名/* 过滤器会把|前面的参数作为函数的参数传入方法，进行处理后传出处理后的值 */showPrice(price) {return "￥" + price.toFixed(2);}},components: {//组件cpn: {template: "#cpn",},"cpn1": {//子组件template: "#cpn1",props: {//接收属性，值可以是对象，也可以是数组see_movies: Array,//父组件要传入的属性show: {type: Function,//父组件要传入的属性default() {//父组件未能传入时执行语句return null;}/* 1,类型限制see_movies:Array,num:Number,title:String,// 2,提供一些默认值see_message:{type:String,//传入类型default:"默认值",//如果传入类型为对象或数组，需要像data()一样写成函数的形式，如default(){ return ['one','一']}required:true,//是否必须传入}*/}},methods:{//子组件内方法btn_click(item) {console.log("子组件内点击了 "+item.name);/* 子组件内点击提示 *///自定义事件：自定义事件名称,自定义参数this.$emit("item_click",item);//子组件将此事件(事件名可自定义)发射出去,第二个参数可以是子组件的数据}},data() {//跨作用域向父组件上传的数据 父组件用slot.data_X直接接收return {isShow: false,pLanguages: ["JavaScript", "C++", "Java", "C#", "Python", "Go", "Swift"],}}}},//生命周期 - 创建完成（可以访问当前this实例）created() {var btns = document.getElementsByTagName("button");for (var i = 0; i < btns.length; i++) {/* 1，for没有块级作用域，被其它地方改值 */btns[i].addEventListener("click", function () {console.log("I,第" + i + "个按钮被点击");});/* 2，立即执行函数，有块级作用域，其它地方不能随意改值 */(function (i2) {btns[i].addEventListener("click", function () {console.log("II,第" + i2 + "个按钮被点击");});})(i)}/* 3，let关键字声明变量有块级作用域，作用域范围在{}之中，其它地方不能随意改值 */var btns2 = document.getElementsByTagName("button");for (let j = 0; j < btns2.length; j++) {btns2[j].addEventListener("click", function () {console.log("III,第" + j + "个按钮被点击");});}const date = {date: "2020/11/11"/* 1,const标识符声明变量必须立即赋值2,且赋值之后不可再次更改，3,对于const声明的复合型数据类型的数据保存的仅是地址，所以可以改变对象内部的属性，但不可赋一个新的对象建议：在ES开发中，优先使用const，只有需要改变某一个标识符的值的时候才使用let/v */};let obj2 = {name, age//1，对象增强写法}//ES6之后，把变量直接放在对象字面量中，ES6之后系统会自动在对象中声明一个同名的属性并把该变量的值赋给这个与它同名的属性const obj = {};/* {}及其内部内容被称为对象字面量 */let obj4 = {test() {//2，对象方法的简写console.log("obj4的test函数");}}/* v-on介绍1，作用：绑定事件监听器2，缩写：@3，预期：Function | Inline Statement | Object4，参数：event <!-- v-on修饰符在某些情况下，我们拿到event的目的可能是进行一些事件处理Vue提供了修饰符来让我们方便的处理一些事件：1，.stop 调用event.stopPropagation() 停止冒泡2, .prevent 调用event.preventDefault() 阻止默认行为3, .{keyCode | keyAlias} (键码或键简写) 只当事件是从特定键触发回调4，.native 监听组件根元素的原生事件5，.once 只触发一次回调语句,一次性的-->*//* 1，如果我们不希望Vue出现类似重复利用被消除的元素的问题，可以给对应的input添加key2,并且我们而要保证key的不同 *//* 那些方法是响应式的： *///1,push方法 末尾添加多个this.names.push("push方法是否能做到响应式：true");//2,通过索引修改数组中的元素this.names[0] = "this.names[0]修改数组中的元素能否做到响应式：false";//3,pop() 末尾删除 pop方法是否能做到响应式：truethis.names.pop();//4,shift() 首位删除 shift方法是否能做到响应式：truethis.names.shift();//5,unshift() 首位添加多个this.names.unshift("unshift方法是否能做到响应式：true");//6,splice作用：删除元素/插入元素/替换元素 splice方法是否能做到响应式：true//splice(start,delNumber,...)start代表从第几个索引值开始操作,delNumber为要删除的索引值的数量，delNumber后面的所有参数为依次要添加的索引值//简单理解：splice的第一个参数为要开始操作的位置// 第二个参数为要删除的索引值的数量，可以为0即不删除// 第三个参数及其以后的参数为要添加的索引值，可以没有即不添加//7,sort() 数组有序排列 sort方法是否能做到响应式：truethis.names.sort();//8,reverse() 数组反转 reverse方法是否能做到响应式：true//三种通过索引值修改数组中的元素this.names[0] = "wu"; //...:falsethis.names.splice(0, 1, "wu"); //...:true//Vue对象的set方法修改，set(要修改的对象,索引值,修改后的值)Vue.set(this.names, 0, "wu"); //...true /* 可变参数...n n是用于存放参数的数组*/const nums = [10, 20, 111, 222, 444, 40, 50];/* 三大高阶函数 *//* b,filter过滤函数 */let newNums1 = nums.filter(function (n) {//形式参数n依次取出数组中的元素return n < 100;//此处返回值为true时，对应的n会放入到filter返回值中的新数组中，为false时则会被滤除，n编历完后filter函数会返回一个值全都满足条件的数组})/* d,map映射 遍历数组，并且返回一个新的数组，新的数组里的每个元素都执行map传入的函数 */let new2Nums1 = newNums1.map(function (n) {return n * 2;});/* f,reduce汇总 数组中所有内容进行 */let total_ = new2Nums1.reduce(function (preValue, n) {return preValue + n;}, 0)//preValue初始值设为0 最终输出preValue}});
</script><!-- 模块化开发 -->
<!-- ES6的模块化实现（常用）：export(导出)/import(导入) -->
<script type="module" src="./20_2_m1.js">//这个由组员小明写的，一部分功能</script>
<script type="module" src="./20_2_red1.js">//这个由组员小红写的，一部分功能</script>
<script type="module" src="./20_2_m2.js">//不久后，小明又被安排写另一部分功能</script>
</html><!-- 高级功能1，解耦视图和数据2，可复用的组件3，前端路由技术4，状态管理5，虚拟DOM编程范式:声明式编程/命令式编程Vue的生命周期JavaScript数据类型 1、数值类型:整数和浮点数 2、布尔类型:true和false 3、字符串类型:用引号括起来,可以双引号,也可以单引号 4、undefined类型:确定一个已经声明但是还没有赋值的变量 5、null类型:表明某个变量的值为空--><!-- js中布尔值为false的六种情况下面6种值转化为布尔值时为false，其他转化都为true1、undefined（未定义，找不到值时出现）2、null（代表空值）3、false（布尔值的false，字符串"false"布尔值为true）4、0（数字0，字符串"0"布尔值为true）5、NaN（无法计算结果时出现，表示"非数值"；但是typeof NaN==="number"）6、""（双引号）或''（单引号） （空字符串，中间有空格时也是true）注意空数组空对象，负值转的布尔值时都为true --><!-- JS变量命名规范1.变量名区分大小写,允许包含字母、数字、美元符号($)和下划线,但第一个字符不允许是数字...2.变量命名长度应该尽可能的短,并抓住要点,尽量在变量名中体现出值的类型3.尽量避免使用没有意义的命名4.禁止使用JavaScript关键词、保留字命名5.变量名命名方法一般用驼峰命名法--><!-- 组件的使用分成三个步骤：1，创建组件构造器 ----调用Vue.extend()方法创建组件构造器2，注册组件 ----调用Vue.component()方法注册组件3，使用组件 ----在Vue实例的作用范围内使用组件 --><!-- 项目演示：（终端输入npm install和npm run serve文件） --><!-- 有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件，1，父组件访问子组件：使用$children或者$refs（reference:引用;）2,子组件访问父组件：使用$parent 1，直接在子组件中通过this.$parent.event来调用父组件的方法
2，子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了
-->
<!-- webpack内容概述（webpack是一个现代的JavaScript应用的静态模块打包工具）1，认识webpack2,webpack的安装3，webpack的起步4，webpack的配置5，loader的使用6，webpack中配置Vue7,plugin插件的使用8，搭建本地服务器
-->
<!-- vue内容划分1，vue基础知识2，vue模块化开发思想3，vue组件化开发思想(SPA单页面开发模式,任务列表,前端路由)4，vue-router前端路由5，vuex共享数据大管家6，axios网络请求模块封装 --><!-- 1.字母和数字键的键码值(keyCode)A---65;B---66;C---67;D---68;E---69;F---70;G---71;H---72;I---73;J---74;K---75;L---76;M---77;N---78;O---79;P---80;Q---81;R---82;S---83;T---84;U---85;V---86;W---87;S---83;Y---89;Z---90;0---48;1---49;2---50;3---51;4---52;5---53;6---54;7---55;8---56;9---57;2.数字键盘上的键的键码值(keyCode)0---96;1---97;2---98;3---99;4---100;5---101;6---102;7---103;8---104;9---105;*---106;+---107;ENTER---108; - ---109; . ---110; / ---111;F1---112;F2---113;F3---114;F4---115;F5---116;F6---117;F7---118;F8---119;F9---120;F10---121;F11---122;F12---123;3.控制键键码值(keyCode)Backspace---8;Tab---9;Clear---12;Enter---13;Shift---16;Control---17;Alt---18;Cape Lock---20;Esc---27;Spacebar---32;Page Up---33;Page Down---34;End---35;Home---36;Left Arrow---37;Up Arrow---38;Right Arrow---39;Dw Arrow---40;Insert---45;Delete---46;Num Lock---144;;: ---186; =+ ---187; ,<---188;-_---189;.>---190;/?---191;`~---192;[{---219;\|---220;]}---221;'"---222;3.多媒体键码值(keyCode)音量加---175；音量减---174；停止---179；静音---173；浏览器---172；邮件---180；搜索---170；收藏---171；4，Event 对象鼠标 / 键盘属性属性 描述altKey 返回当事件被触发时，"ALT" 是否被按下。button 返回当事件被触发时，哪个鼠标按钮被点击。clientX 返回当事件被触发时，鼠标指针的水平坐标。clientY 返回当事件被触发时，鼠标指针的垂直坐标。ctrlKey 返回当事件被触发时，"CTRL" 键是否被按下。metaKey 返回当事件被触发时，"meta" 键是否被按下。relatedTarget 返回与事件的目标节点相关的节点。screenX 返回当某个事件被触发时，鼠标指针的水平坐标。screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。shiftKey 返回当事件被触发时，"SHIFT" 键是否被按下。x 返回当事件被触发时，鼠标指针在当前元素的坐标系中的水平坐标。y 返回当事件被触发时，鼠标指针在当前元素的坐标系中的垂直坐标。--><!-- 作者：沉木 日期：2022/4/6 -->
@沉木
Vue笔记大融合总结相关推荐
- vue笔记（二）Vue-class与style、事件、计算属性、数据监听、指令+自定义指令、过滤器
vue官网 一 .class.style操作 二.事件 三.计算属性 四.数据监听.观测 五.指令+自定义指令 六.过滤器 一 .class.style操作 官网 1. class使用: (1)v-b ...
- 前端自学Vue笔记干货（第一版，持续更新中~~~）
学习笔记 Vue笔记 nprogress使用 npm i nprogress -S 基本上都是在对axios进行二次封装.前置守卫路由或者封装成工具函数的.js文件中用到 import nprogre ...
- Vue笔记随笔---kalrry
Vue笔记随笔---kalrry VUE vue框架的两大核心: 一.前端开发历史 二.MV*模式 库 VS 框架 MVC架构模式 MVP架构模式 MVVM架构模式 vue是MVVM 三.开发工具 四 ...
- Vue笔记-尚硅谷-Alex
Vue笔记 Vue简介 官网 英文官网: https://vuejs.org/ 中文官网: https://cn.vuejs.org/ 介绍与描述 动态构建用户界面的渐进式 JavaScript 框架 ...
- 尚硅谷vue笔记 详细讲解版（尚硅谷 天禹老师）
视频:[尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通]https://www.bilibili.com/video/BV1Zy4y1K7SH?vd_source=10e3dfac9 ...
- vue数据大屏自适应屏幕分辨率js
vue数据大屏自适应屏幕分辨率js 最近在写vue数据大屏的时候想到屏幕分辨率要自适应问题,按照设计图的百分比写感觉太麻烦,宽高甚至字体大小都要用百分比,就在想有没有其他的方案能实现,相信都用过rem ...
- [Bjoi2014]大融合
[Bjoi2014]大融合 Time Limit: 10 Sec Memory Limit: 256 MB Submit: 394 Solved: 244 [Submit][Status][Dis ...
- OpenCV学习笔记大集锦
转载自: OpenCV学习笔记大集锦 – 视觉机器人 http://www.cvrobot.net/collect-opencv-resource-learn-study-note-chinese/ ...
- 为什么Android项目mainactivity中有一个变量R_博客笔记大汇总，Android优化总结篇
博客笔记大汇总[16年3月到至今],包括Java基础及深入知识点,Android技术博客,Python学习笔记等等,还包括平时开发中遇到的bug汇总,当然也在工作之余收集了大量的面试题,长期更新维护并 ...
最新文章
- 解决vscode格式化vue文件出现的问题
- 大数据之搭建HDP环境，以三个节点为例（上——部署主节点以及服务）
- flutter: 根视图、根元素与根渲染
- windows server 2008中IIS7的功能模塊
- 二次元始，跌宕几年，至学术略有成就并步入业界的我与NLP的这七年时光！
- 新建Office文件丨默认模板文件
- 皮尔森相关系数(Pearson correlation coefficient)
- 信鸽推送避免打开多个相同的activity
- 根据条件对Excel表中数据进行计数
- 大规模海量并发难题的本质
- 计算机文化基础项目化教程答案,第七版计算机文化基础实践教程 第3-4章习题答案及解析...
- Double计算精度丢失（金融入门知识点）
- 1213：八皇后问题
- 1分钟插入10亿行数据！抛弃Python，写脚本请使用Rust
- Paillier 半同态加密：原理、高效实现方法和应用
- 二维数组的认识及其表示元素的两种方式
- android 高仿糯米团购 摇一摇 摇奖 效果
- 江苏海信ip906h盒子，强刷固件及教程(70T1版本）
- python语言三大基本控制结构_【笔记】《python语言程序设计》——程序的控制结构...
- 最大公约数、最小公倍数算法实现