m0_67391907

Vue学习笔记（尚硅谷天禹老师）

Vue学习笔记（尚硅谷天禹老师讲解）

1. Vue核心

1.1. Vue简介

1.1.1. 官网

英文官网
中文官网

1.1.2. 介绍与描述

动态构建用户界面的渐进式JavaScript框架
作者：尤雨溪

1.1.3. Vue的特点

遵循MVVM模式
编码简洁，体积小，运行效率高，适合移动/PC端开发
它本身只关注UI，可以引入其它第三方库开发项目

1.1.4.与其他JS框架的关联

借鉴 Angular 的模板和数据绑定技术
借鉴 React 的组件化和虚拟DOM技术

1.1.5. Vue周边库

vue-cli：vue脚手架
vue-resource
axios
vue-router：路由
vuex：状态管理
element-ui：基于vue的UI组件库（PC端）

1.2. 初识Vue




    
    
    
    初识vue
    
    


    
    
        Hello！{
  {name}}!

效果：

注意：

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
root容器里的代码被称为Vue模板
Vue实例与容器是一一对应的
真实开发中只有一个Vue实例，并且会配合着组件一起使用
{ {xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性
一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新

1.3. 模板语法




    
    
    
    vue模板语法
    


    
        插值语法
        你好，{
  {name}}!
        
        指令语法
        快去看新番！

        快去看新番！

效果：

总结：

Vue模板语法包括两大类：

插值语法：
- 功能：用于解析标签体内容
- 写法：{ {xxx}}，xxx是js表达式，且可以直接读取到data中的所有区域
指令语法：
- 功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
- 举例：或简写为，xxx同样要写js表达式，且可以直接读取到data中的所有属性

1.4. 数据绑定




    
    
    
    数据绑定
    


    
        单向数据绑定：

        双向数据绑定：

效果：

总结：

Vue中有2种数据绑定的方式：
1. 单向绑定（v-bind）：数据只能从data流向页面
2. 双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data
备注：
1. 双向绑定一般都应用在表单类元素上（如：、</code>等）</li> <li><code>v-model:value</code>可以简写为<code>v-model</code>，因为<code>v-model</code>默认收集的就是value值</li> </ol> </li> </ul> <h4>1.5. el与data的两种写法</h4> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>el与data的两种写法</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h1>Hello,{ {name}}!</h1> </div> <script> Vue.config.productionTip = false //el的两种写法： // const vm = new Vue({ // // el:'#root', //第一种写法 // data:{ // name:'JOJO' // } // }) // vm.$mount('#root')//第二种写法 //data的两种写法： new Vue({ el:'#root', //data的第一种写法：对象式 // data:{ // name:'JOJO' // } //data的第二种写法：函数式 data(){ return{ name:'JOJO' } } }) </script> </body> </html> </code></pre> <p><strong>总结：</strong></p> <p>el有2种写法：</p> <ol> <li>创建Vue实例对象的时候配置el属性</li> <li>先创建Vue实例，随后再通过<code>vm.$mount('#root')</code>指定el的值</li> </ol> <p>data有2种写法：</p> <ol> <li>对象式</li> <li>函数式</li> </ol> <ul> <li>如何选择：目前哪种写法都可以，以后学到组件时，data必须使用函数，否则会报错</li> </ul> <blockquote> <p>由Vue管理的函数，一定不要写箭头函数，否则this就不再是Vue实例了</p> </blockquote> <h4>1.6. MVVM模型</h4> <p><a href="http://img.e-com-net.com/image/info8/63645e0f7aa6406faec13effad9dc954.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/63645e0f7aa6406faec13effad9dc954.jpg" alt="Vue学习笔记（尚硅谷天禹老师）_第3张图片" width="650" height="346" style="border:1px solid black;"></a></p> <ul> <li> <p>MVVM模型：</p> <ul> <li>M：模型（Model），data中的数据</li> <li>V：视图（View），模板代码</li> <li>VM：视图模型（ViewModel），Vue实例</li> </ul> mvvm <div id="root"> <h3>名称：{ {name}}</h3> <h3>战队：{ {rank}}</h3> <h3>测试：{ {$options}}</h3> </div> <pre><code><script> Vue.config.productionTip = false new Vue({ el:'#root', data:{ name:'uzi', rank:'RNG' } }) </script> </code></pre> </li> </ul> <p><strong>效果：</strong></p> <p><a href="http://img.e-com-net.com/image/info8/a9b19ccc5b6f45fca99471c77bbaf025.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a9b19ccc5b6f45fca99471c77bbaf025.jpg" alt="image-20210715115338705" width="650" height="93"></a></p> <p><strong>总结：</strong></p> <ul> <li>data中所有的属性，最后都出现在了vm身上</li> <li>vm身上所有的属性及 Vue原型身上所有的属性，在Vue模板中都可以直接使用</li> </ul> <h4>1.7. Vue中的数据代理</h4> <p><a href="http://img.e-com-net.com/image/info8/da1845daab1148b399e62b750e5d22e6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/da1845daab1148b399e62b750e5d22e6.jpg" alt="Vue学习笔记（尚硅谷天禹老师）_第4张图片" width="650" height="365" style="border:1px solid black;"></a></p> <p><strong>总结：</strong></p> <ol> <li>Vue中的数据代理通过vm对象来代理data对象中属性的操作（读/写）</li> <li>Vue中数据代理的好处：更加方便的操作data中的数据</li> <li>基本原理： <ul> <li>通过<code>object.defineProperty()</code>把data对象中所有属性添加到vm上。</li> <li>为每一个添加到vm上的属性，都指定一个getter/setter。</li> <li>在getter/setter内部去操作（读/写）data中对应的属性。</li> </ul> </li> </ol> <h4>1.8. 事件处理</h4> <h5>1.8.1. 事件的基本用法</h5> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件的基本用法</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>hello,{ {name}}</h2> <button v-on:click="showInfo1">点我提示信息1</button> <button @click="showInfo2($event,66)">点我提示信息2</button> </div> <script> Vue.config.productionTip = false new Vue({ el:'#root', data:{ name:'JOJO' }, methods:{ showInfo1(event){ console.log(event) }, showInfo2(evnet,num){ console.log(event,num) } } }) </script> </body> </html> </code></pre> <p><strong>效果：</strong></p> <p><a href="http://img.e-com-net.com/image/info8/1972c4dcebbe477c82d969af94a9adf5.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1972c4dcebbe477c82d969af94a9adf5.jpg" alt="image-20210715150507529" width="650" height="72"></a></p> <p><strong>总结：</strong></p> <ol> <li>使用<code>v-on:xxx</code>或<code>@xxx</code>绑定事件，其中xxx是事件名</li> <li>事件的回调需要配置在methods对象中，最终会在vm上</li> <li>methods中配置的函数，==不要用箭头函数！==否则this就不是vm了</li> <li>methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象</li> <li><code>@click="demo</code>和<code>@click="demo($event)"</code>效果一致，但后者可以传参</li> </ol> <h5>1.8.2. 事件修饰符</h5> <pre><code><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>事件修饰符</title> <script type="text/javascript" src="../js/vue.js"></script> <style> *{ margin-top: 20px; } .demo1{ height: 50px; background-color: skyblue; } .box1{ padding: 5px; background-color: skyblue; } .box2{ padding: 5px; background-color: orange; } .list{ width: 200px; height: 200px; background-color: peru; overflow: auto; } li{ height: 100px; } </style> </head> <body> <div id="root"> <h2>欢迎来到{ {name}}学习</h2>  <a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>  <div class="demo1" @click="showInfo"> <button @click.stop="showInfo">点我提示信息</button> </div>  <button @click.once="showInfo">点我提示信息</button>  <div class="box1" @click.capture="showMsg(1)"> div1 <div class="box2" @click="showMsg(2)"> div2 </div> </div>  <div class="demo1" @click.self="showInfo"> <button @click="showInfo">点我提示信息</button> </div>  <ul @wheel.passive="demo" class="list"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ name:'尚硅谷' }, methods:{ showInfo(e){ alert('同学你好！') }, showMsg(msg){ console.log(msg) }, demo(){ for (let i = 0; i < 100000; i++) { console.log('#') } console.log('累坏了') } } }) </script> </html> </code></pre> <p><strong>效果：</strong></p> <p><a href="http://img.e-com-net.com/image/info8/6d0b291146c246029109440105c4e57c.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/6d0b291146c246029109440105c4e57c.png" alt="Vue学习笔记（尚硅谷天禹老师）_第5张图片" width="770" height="783" style="border:1px solid black;"></a></p> <p><strong>总结：</strong></p> <p>Vue中的事件修饰符：</p> <ol> <li>prevent：阻止默认事件（常用）</li> <li>stop：阻止事件冒泡（常用）</li> <li>once：事件只触发一次（常用）</li> <li>capture：使用事件的捕获模式</li> <li>self：只有<code>event.target</code>是当前操作的元素时才触发事件</li> <li>passive：事件的默认行为立即执行，无需等待事件回调执行完毕</li> </ol> <blockquote> <p>修饰符可以连续写，比如可以这么用：<code>@click.prevent.stop="showInfo"</code></p> </blockquote> <h5>1.8.3. 键盘事件</h5> <pre><code><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>键盘事件</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>欢迎来到{ {name}}学习</h2> <input type="text" placeholder="按下回车提示输入" @keydown.enter="showInfo"> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ name:'尚硅谷' }, methods: { showInfo(e){ console.log(e.target.value) } }, }) </script> </html> </code></pre> <p><strong>效果：</strong></p> <p><a href="http://img.e-com-net.com/image/info8/c77411141f6948738d078160bb2dfa95.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c77411141f6948738d078160bb2dfa95.jpg" alt="Vue学习笔记（尚硅谷天禹老师）_第6张图片" width="363" height="138" style="border:1px solid black;"></a></p> <p><strong>总结：</strong></p> <blockquote> <p>键盘上的每个按键都有自己的名称和编码，例如：Enter（13）。而Vue还对一些常用按键起了别名方便使用</p> </blockquote> <p>Vue中常用的按键别名：</p> <ul> <li>回车：enter</li> <li>删除：delete (捕获“删除”和“退格”键)</li> <li>退出：esc</li> <li>空格：space</li> <li>换行：tab (特殊，必须配合keydown去使用)</li> <li>上：up</li> <li>下：down</li> <li>左：left</li> <li>右：right</li> </ul> <p><strong>注意：</strong></p> <ol> <li> <p>系统修饰键（用法特殊）：ctrl、alt、shift、meta</p> <ul> <li>配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发</li> <li>配合keydown使用：正常触发事件</li> </ul> </li> <li> <p>可以使用keyCode去指定具体的按键，比如：<code>@keydown.13="showInfo"</code>，但不推荐这样使用</p> </li> <li> <p><code>Vue.config.keyCodes.自定义键名 = 键码</code>，可以自定义按键别名</p> </li> </ol> <h4>1.9. 计算属性</h4> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>计算属性</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> 姓：<input type="text" v-model="firstName"><br><br> 名：<input type="text" v-model="lastName"><br><br> 姓名：<span>{ {fullName}}</span> </div> <script> Vue.config.productionTip = false new Vue({ el:'#root', data:{ firstName:'张', lastName:'三' }, computed:{ fullName:{ get(){ return this.firstName + '-' + this.lastName }, set(value){ const arr = value.split('-') this.firstName = arr[0] this.lastName = arr[1] } } } }) </script> </body> </html> </code></pre> <p><strong>效果：</strong></p> <p><a href="http://img.e-com-net.com/image/info8/6bb2d2b3d4ad4a3b90f1076dd4d7f8a1.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/6bb2d2b3d4ad4a3b90f1076dd4d7f8a1.png" alt="Vue学习笔记（尚硅谷天禹老师）_第7张图片" width="304" height="154" style="border:1px solid black;"></a></p> <p><strong>总结：</strong></p> <ul> <li> <p>计算属性：</p> <ul> <li> <p>定义：要用的属性不存在，需要通过已有属性计算得来。</p> </li> <li> <p>原理：底层借助了<code>Objcet.defineproperty()</code>方法提供的getter和setter。</p> </li> <li> <p>get函数什么时候执行？</p> <ol> <li>初次读取时会执行一次</li> <li>当依赖的数据发生改变时会被再次调用</li> </ol> </li> <li> <p>优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便</p> </li> </ul> </li> <li> <p>备注：</p> <ul> <li>计算属性最终会出现在vm上，直接读取使用即可</li> <li>如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变</li> <li>如果计算属性确定不考虑修改，可以使用计算属性的简写形式</li> </ul> <p>new Vue({ <br> el:’#root’,<br> data:{ <br> firstName:‘张’,<br> lastName:‘三’<br> },<br> computed:{ <br> fullName(){ <br> return this.firstName + ‘-’ + this.lastName<br> }<br> }<br> })</p> </li> </ul> <h4>1.10. 监视属性</h4> <h5>1.10.1. 监视属性基本用法</h5> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>监视属性</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>今天天气好{ {info}}!</h2> <button @click="changeWeather">点击切换天气</button> </div> <script> Vue.config.productionTip = false new Vue({ el:'#root', data:{ isHot:true, }, computed:{ info(){ return this.isHot ? '炎热' : '凉爽' } }, methods:{ changeWeather(){ this.isHot = !this.isHot } }, watch:{ isHot:{ immediate:true, //初始化时让handler调用一下 //handler什么时候调用？当isHot发生改变时 handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } } } }) </script> </body> </html> </code></pre> <p><strong>效果：</strong></p> <p><a href="http://img.e-com-net.com/image/info8/073df280b06447b597ce6cc15e0b8a65.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/073df280b06447b597ce6cc15e0b8a65.png" alt="Vue学习笔记（尚硅谷天禹老师）_第8张图片" width="300" height="135" style="border:1px solid black;"></a></p> <p><strong>总结：</strong></p> <p>监视属性watch：</p> <ol> <li> <p>当被监视的属性变化时，回调函数自动调用，进行相关操作</p> </li> <li> <p>监视的属性必须存在，才能进行监视</p> </li> <li> <p>监视有两种写法：</p> <ol> <li>创建Vue时传入watch配置</li> <li>通过<code>vm.$watch</code>监视</li> </ol> <p>vm.$watch(‘isHot’,{ <br> immediate:true,<br> handler(newValue,oldValue){ <br> console.log(‘isHot被修改了’,newValue,oldValue)<br> }<br> })</p> </li> </ol> <h5>1.10.2. 深度监视</h5> <pre><code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>深度监视</title> <script src="../js/vue.js"></script> </head> <body> <div id="root"> <h3>a的值是:{ {numbers.a}}</h3> <button @click="numbers.a++">点我让a+1</button> <h3>b的值是:{ {numbers.b}}</h3> <button @click="numbers.b++">点我让b+1</button> </div> <script> Vue.config.productionTip = false new Vue({ el:'#root', data:{ isHot:true, numbers:{ a:1, b:1, } }, watch:{ //监视多级结构中所有属性的变化 numbers:{ deep:true, handler(){ console.log('numbers改变了') } } //监视多级结构中某个属性的变化 /* 'numbers.a':{ handler(){ console.log('a被改变了') } } */ } }) </script> </body> </html> </code></pre> <p><strong>效果：</strong></p> <p><a href="http://img.e-com-net.com/image/info8/3e1ea143b78a4a619b1f75113e9f37d6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3e1ea143b78a4a619b1f75113e9f37d6.jpg" alt="Vue学习笔记（尚硅谷天禹老师）_第9张图片" width="629" height="236" style="border:1px solid black;"></a></p> <p><strong>总结：</strong></p> <ul> <li> <p>深度监视：</p> <ol> <li>Vue中的watch默认不监测对象内部值的改变（一层）</li> <li>在watch中配置<code>deep:true</code>可以监测对象内部值的改变（多层）</li> </ol> </li> <li> <p>备注：</p> <ol> <li>Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以</li> <li>使用watch时根据监视数据的具体结构，决定是否采用深度监视</li> </ol> </li> </ul> <h5>1.10.3. 监视属性简写</h5> <p>如果监视属性除了handler没有其他配置项的话，可以进行简写。</p> <pre><code><script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ isHot:true, }, computed:{ info(){ return this.isHot ? '炎热' : '凉爽' } }, methods: { changeWeather(){ this.isHot = !this.isHot } }, watch:{ //正常写法 isHot:{ handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } }, //简写 isHot(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue,this) } } }) //正常写法 vm.$watch('isHot',{ handler(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue) } }) //简写 vm.$watch('isHot',function(newValue,oldValue){ console.log('isHot被修改了',newValue,oldValue,this) }) </script> </code></pre> <h5>1.10.4. 监听属性 VS 计算属性</h5> <p><a href="http://img.e-com-net.com/image/info8/6fdddbea308b466597230b2b742e382e.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/6fdddbea308b466597230b2b742e382e.png" alt="Vue学习笔记（尚硅谷天禹老师）_第10张图片" width="304" height="154" style="border:1px solid black;"></a></p> <p><strong>使用计算属性：</strong></p> <pre><code>new Vue({ el:'#root', data:{ firstName:'张', lastName:'三' }, computed:{ fullName(){ return this.firstName + '-' + this.lastName } } }) </code></pre> <p><strong>使用监听属性：</strong></p> <pre><code>new Vue({ el:'#root', data:{ firstName:'张', lastName:'三', fullName:'张-三' }, watch:{ firstName(val){ setTimeout(()=>{ this.fullName = val + '-' + this.lastName },1000); }, lastName(val){ this.fullName = this.firstName + '-' + val } } }) </code></pre> <p><strong>总结：</strong></p> <ul> <li> <p>computed和watch之间的区别：</p> <ul> <li>computed能完成的功能，watch都可以完成</li> <li>watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作</li> </ul> </li> <li> <p>两个重要的小原则：</p> <ol> <li>所有被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象</li> <li>所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数等、Promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或组件实例对象。</li> </ol> </li> </ul> <h4>1.11. 绑定样式</h4> <pre><code><style> .basic{ width: 400px; height: 100px; border: 1px solid black; } .happy{ border: 4px solid red;; background-color: rgba(255, 255, 0, 0.644); background: linear-gradient(30deg,yellow,pink,orange,yellow); } .sad{ border: 4px dashed rgb(2, 197, 2); background-color: gray; } .normal{ background-color: skyblue; } .atguigu1{ background-color: yellowgreen; } .atguigu2{ font-size: 30px; text-shadow:2px 2px 10px red; } .atguigu3{ border-radius: 20px; } </style> <div id="root">  <div class="basic" :class="mood" @click="changeMood">{ {name}}</div> <br/><br/>  <div class="basic" :class="classArr">{ {name}}</div> <br/><br/>  <div class="basic" :class="classObj">{ {name}}</div> <br/><br/>  <div class="basic" :style="styleObj">{ {name}}</div> <br/><br/>  <div class="basic" :style="styleArr">{ {name}}</div> </div> <script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el:'#root', data:{ name:'尚硅谷', mood:'normal', classArr:['atguigu1','atguigu2','atguigu3'], classObj:{ atguigu1:false, atguigu2:false, }, styleObj:{ fontSize: '40px', color:'red', }, styleObj2:{ backgroundColor:'orange' }, styleArr:[ { fontSize: '40px', color:'blue', }, { backgroundColor:'gray' } ] }, methods: { changeMood(){ const arr = ['happy','sad','normal'] const index = Math.floor(Math.random()*3) this.mood = arr[index] } }, }) </script> </code></pre> <p><strong>效果：</strong></p> <p><a href="http://img.e-com-net.com/image/info8/7bdd8c5b957c48039dee6a79b0abf94e.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/7bdd8c5b957c48039dee6a79b0abf94e.png" alt="Vue学习笔记（尚硅谷天禹老师）_第11张图片" width="533" height="876" style="border:1px solid black;"></a></p> <p><strong>总结：</strong></p> <ol> <li> <p>class样式：</p> <ul> <li> <p>写法：<code>class="xxx"</code>，xxx可以是字符串、对象、数组</p> </li> <li> <p>字符串写法适用于：类名不确定，要动态获取</p> </li> <li> <p>对象写法适用于：要绑定多个样式，个数不确定，名字也不确定</p> </li> <li> <p>数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用</p> </li> </ul> </li> <li> <p>style样式：</p> <ul> <li><code>:style="{fontSize: xxx}"</code>其中xxx是动态值</li> <li><code>:style="[a,b]"</code>其中a、b是样式对象</li> </ul> </li> </ol> <h4>1.12. 条件渲染</h4> <pre><code><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>条件渲染</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>当前的n值是:{ {n}}</h2> <button @click="n++">点我n+1</button> <h2 v-show="true">Hello,{ {name}}!</h2> <div v-if="n === 1">Angular</div> <div v-else-if="n === 2">React</div> <div v-else>Vue</div> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false const vm = new Vue({ el:'#root', data:{ name:'jojo', n:0 } }) </script> </html> </code></pre> <p><strong>效果：</strong></p> <p><a href="http://img.e-com-net.com/image/info8/747db142b74a48aaa9a17f890a376553.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/747db142b74a48aaa9a17f890a376553.jpg" alt="Vue学习笔记（尚硅谷天禹老师）_第12张图片" width="301" height="235" style="border:1px solid black;"></a></p> <p><strong>总结：</strong></p> <ol> <li> <p>v-if：</p> <ul> <li> <p>写法：</p> <ol> <li><code>v-if="表达式"</code></li> <li><code>v-else-if="表达式"</code></li> <li><code>v-else</code></li> </ol> </li> <li> <p>适用于：切换频率较低的场景</p> </li> <li> <p>特点：不展示的DOM元素直接被移除</p> </li> <li> <p>注意：<code>v-if</code>可以和<code>v-else-if</code>、<code>v-else</code>一起使用，但要求结构不能被打断</p> </li> </ul> </li> <li> <p>v-show：</p> <ul> <li>写法：<code>v-show="表达式"</code></li> <li>适用于：切换频率较高的场景</li> <li>特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉</li> </ul> </li> </ol> <blockquote> <p>使用<code>v-if</code>的时，元素可能无法获取到，而使用<code>v-show</code>一定可以获取到</p> </blockquote> <h4>1.13. 列表渲染</h4> <h5>1.13.1. 基本列表</h5> <pre><code><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>基本列表</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>人员列表（遍历数组）</h2> <ul> <li v-for="(p,index) in persons" :key="index"> { {p.name}}-{ {p.age}} </li> </ul> <h2>汽车信息（遍历对象）</h2> <ul> <li v-for="(value,k) in car" :key="k"> { {k}}-{ {value}} </li> </ul> <h2>遍历字符串</h2> <ul> <li v-for="(char,index) in str" :key="index"> { {char}}-{ {index}} </li> </ul> <h2>遍历指定次数</h2> <ul> <li v-for="(number,index) in 5" :key="index"> { {index}}-{ {number}} </li> </ul> </div> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ persons:[ {id:'001',name:'张三',age:18}, {id:'002',name:'李四',age:19}, {id:'003',name:'王五',age:20} ], car:{ name:'奥迪A8', price:'70万', color:'黑色' }, str:'hello' } }) </script> </body> </html> </code></pre> <p><strong>效果：</strong></p> <p><a href="http://img.e-com-net.com/image/info8/2d95dbae78934306b99d271ae89e4b3a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/2d95dbae78934306b99d271ae89e4b3a.jpg" alt="Vue学习笔记（尚硅谷天禹老师）_第13张图片" width="350" height="767" style="border:1px solid black;"></a></p> <p><strong>总结：</strong></p> <p><code>v-for</code>指令：</p> <ol> <li>用于展示列表数据</li> <li>语法：<code><li v-for="(item, index) in xxx" :key="yyy"></code>，其中key可以是index，也可以是遍历对象的唯一标识</li> <li>可遍历：数组、对象、字符串（用的少）、指定次数（用的少）</li> </ol> <h5>1.13.2. key的作用与原理</h5> <pre><code><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>key的原理</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>人员列表</h2> <button @click.once="add">添加老刘</button> <ul> <li v-for="(p,index) in persons" :key="index"> { {p.name}} - { {p.age}} <input type="text"> </li> </ul> </div> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ persons:[ {id:'001',name:'张三',age:18}, {id:'002',name:'李四',age:19}, {id:'003',name:'王五',age:20} ] }, methods: { add(){ const p = {id:'004',name:'老刘',age:40} this.persons.unshift(p) } }, }) </script> </html> </code></pre> <p><strong>效果：</strong></p> <p><a href="http://img.e-com-net.com/image/info8/a880f58e32ef48b2876c7cfed186e8aa.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/a880f58e32ef48b2876c7cfed186e8aa.png" alt="Vue学习笔记（尚硅谷天禹老师）_第14张图片" width="400" height="251" style="border:1px solid black;"></a></p> <p><strong>原理：</strong></p> <p><a href="http://img.e-com-net.com/image/info8/35879ab5b0774c02bc58c24b04dce0ff.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/35879ab5b0774c02bc58c24b04dce0ff.jpg" alt="Vue学习笔记（尚硅谷天禹老师）_第15张图片" width="650" height="365" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/30cb803baa8a488285cf012b01600a13.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/30cb803baa8a488285cf012b01600a13.jpg" alt="Vue学习笔记（尚硅谷天禹老师）_第16张图片" width="650" height="366" style="border:1px solid black;"></a></p> <p><strong>面试题</strong>：react、vue中的key有什么作用？（key的内部原理）</p> <ol> <li> <p>虚拟DOM中key的作用：key是虚拟DOM中对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：</p> </li> <li> <p>对比规则：</p> <ol> <li> <p>旧虚拟DOM中找到了与新虚拟DOM相同的key：</p> <ol> <li>若虚拟DOM中内容没变, 直接使用之前的真实DOM</li> <li>若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM</li> </ol> </li> <li> <p>旧虚拟DOM中未找到与新虚拟DOM相同的key：创建新的真实DOM，随后渲染到到页面</p> </li> </ol> </li> <li> <p>用index作为key可能会引发的问题：</p> <ol> <li>若对数据进行逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低</li> <li>若结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题</li> </ol> </li> <li> <p>开发中如何选择key</p> <ol> <li>最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值</li> <li>如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作，仅用于渲染列表，使用index作为key是没有问题的</li> </ol> </li> </ol> <h5>1.13.3. 列表过滤</h5> <pre><code><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>列表过滤</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyWord"> <ul> <li v-for="(p,index) of filPersons" :key="index"> { {p.name}}-{ {p.age}}-{ {p.sex}} </li> </ul> </div> <script type="text/javascript"> Vue.config.productionTip = false new Vue({ el:'#root', data:{ keyWord:'', persons:[ {id:'001',name:'马冬梅',age:19,sex:'女'}, {id:'002',name:'周冬雨',age:20,sex:'女'}, {id:'003',name:'周杰伦',age:21,sex:'男'}, {id:'004',name:'温兆伦',age:22,sex:'男'} ] }, computed:{ filPersons(){ return this.persons.filter((p)=>{ return p.name.indexOf(this.keyWord) !== -1 }) } } }) </script> </body> </html> </code></pre> <p><strong>效果：</strong></p> <p><a href="http://img.e-com-net.com/image/info8/ec94ec9188024b348457c0ec11711490.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/ec94ec9188024b348457c0ec11711490.png" alt="Vue学习笔记（尚硅谷天禹老师）_第17张图片" width="252" height="244" style="border:1px solid black;"></a></p> <h5>1.13.4. 列表排序</h5> <pre><code><body> <div id="root"> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyWord"> <button @click="sortType = 2">年龄升序</button> <button @click="sortType = 1">年龄降序</button> <button @click="sortType = 0">原顺序</button> <ul> <li v-for="(p,index) of filPersons" :key="p.id"> { {p.name}}-{ {p.age}}-{ {p.sex}} </li> </ul> </div> <script> new Vue({ el:'#root', data:{ persons:[ {id:'001',name:'马冬梅',age:30,sex:'女'}, {id:'002',name:'周冬雨',age:45,sex:'女'}, {id:'003',name:'周杰伦',age:21,sex:'男'}, {id:'004',name:'温兆伦',age:22,sex:'男'} ], keyWord:'', sortType:0,//0代表原顺序，1代表升序，3代表降序 }, computed:{ filPersons(){ const arr = this.persons.filter((p)=>{ return p.name.indexOf(this.keyWord) !== -1 }) if(this.sortType){ arr.sort((p1, p2)=>{ return this.sortType ===1 ? p2.age-p1.age : p1.age-p2.age }) } return arr } } }) </script> </body> </code></pre> <p><strong>效果：</strong></p> <p><a href="http://img.e-com-net.com/image/info8/800588699a9741bfb41a858c469011d9.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/800588699a9741bfb41a858c469011d9.png" alt="Vue学习笔记（尚硅谷天禹老师）_第18张图片" width="517" height="236" style="border:1px solid black;"></a></p> <h5>1.13.5. Vue数据监视</h5> <pre><code><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Vue数据监视</title> <style> button{ margin-top: 10px; } </style> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h1>学生信息</h1> <button @click="student.age++">年龄+1岁</button><br/> <button @click="addSex">添加性别属性，默认值：男</button> <br/> <button @click="addFriend">在列表首位添加一个朋友</button> <br/> <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button><br/> <button @click="addHobby">添加一个爱好</button> <br/> <button @click="updateHobby">修改第一个爱好为：开车</button><br/> <button @click="removeSmoke">过滤掉爱好中的抽烟</button> <br/> <h3>姓名：{ {student.name}}</h3> <h3>年龄：{ {student.age}}</h3> <h3 v-if="student.sex">性别：{ {student.sex}}</h3> <h3>爱好：</h3> <ul> <li v-for="(h,index) in student.hobby" :key="index"> { {h}} </li> </ul> <h3>朋友们：</h3> <ul> <li v-for="(f,index) in student.friends" :key="index"> { {f.name}}--{ {f.age}} </li> </ul> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 const vm = new Vue({ el:'#root', data:{ student:{ name:'tom', age:18, hobby:['抽烟','喝酒','烫头'], friends:[ {name:'jerry',age:35}, {name:'tony',age:36} ] } }, methods: { addSex(){ //Vue.set(this.student,'sex','男') this.$set(this.student,'sex','男') }, addFriend(){ this.student.friends.unshift({name:'jack',age:70}) }, updateFirstFriendName(){ this.student.friends[0].name = '张三' }, addHobby(){ this.student.hobby.push('学习') }, updateHobby(){ this.student.hobby.splice(0,1,'开车') }, removeSmoke(){ this.student.hobby = this.student.hobby.filter((h)=>{ return h !== '抽烟' }) } } }) </script> </html> </code></pre> <p><strong>效果：</strong></p> <p><a href="http://img.e-com-net.com/image/info8/3ae49ea6bf2c4ee29afbb84468a2210d.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/3ae49ea6bf2c4ee29afbb84468a2210d.png" alt="Vue学习笔记（尚硅谷天禹老师）_第19张图片" width="283" height="799" style="border:1px solid black;"></a></p> <p><strong>总结：</strong></p> <p>Vue监视数据的原理：</p> <ol> <li> <p>vue会监视data中所有层次的数据</p> </li> <li> <p>如何监测对象中的数据？</p> <p>通过setter实现监视，且要在<code>new Vue</code>时就传入要监测的数据</p> <ol> <li>对象中后追加的属性，Vue默认不做响应式处理</li> <li>如需给后添加的属性做响应式，请使用如下API： <ul> <li><code>Vue.set(target,propertyName/index,value)</code></li> <li><code>vm.$set(target,propertyName/index,value)</code></li> </ul> </li> </ol> </li> <li> <p>如何监测数组中的数据？</p> <p>通过包裹数组更新元素的方法实现，本质就是做了两件事：</p> <ol> <li>调用原生对应的方法对数组进行更新</li> <li>重新解析模板，进而更新页面</li> </ol> </li> <li> <p>在Vue修改数组中的某个元素一定要用如下方法：</p> <ol> <li>使用这些API：<code>push()</code>、<code>pop()</code>、<code>shift()</code>、<code>unshift()</code>、<code>splice()</code>、<code>sort()</code>、<code>reverse()</code></li> <li><code>Vue.set()</code> 或 <code>vm.$set()</code></li> </ol> </li> </ol> <p><strong>特别注意</strong>：<code>Vue.set()</code> 和 <code>vm.$set()</code> 不能给vm 或 vm的根数据对象（data等）添加属性</p> <h4>1.14. 收集表单数据</h4> <pre><code><!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>收集表单数据</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <form @submit.prevent="demo"> 账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/> 密码：<input type="password" v-model="userInfo.password"> <br/><br/> 年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/> 性别：男<input type="radio" name="sex" v-model="userInfo.sex" value="male"> 女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/> 爱好：学习<input type="checkbox" v-model="userInfo.hobby" value="study"> 打游戏<input type="checkbox" v-model="userInfo.hobby" value="game"> 吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"> <br/><br/> 所属校区： <select v-model="userInfo.city"> <option value="">请选择校区</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="shenzhen">深圳</option> <option value="wuhan">武汉</option> </select> <br/><br/> 其他信息： <textarea v-model.lazy="userInfo.other"> 阅读并接受《用户协议》

效果：

总结：

收集表单数据：

若：，则v-model收集的是value值，用户输入的内容就是value值
若：，则v-model收集的是value值，且要给标签配置value属性
若：
- 没有配置value属性，那么收集的是checked属性（勾选 or 未勾选，是布尔值）
- 配置了value属性：
  - v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
  - v-model的初始值是数组，那么收集的就是value组成的数组

v-model的三个修饰符：

lazy：失去焦点后再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤

1.15. 过滤器



	
		
		过滤器
		
		
	
	
		
			时间
            当前时间戳：{
  {time}}
            转换后时间：{
  {time | timeFormater()}}
			转换后时间：{
  {time | timeFormater('YYYY-MM-DD HH:mm:ss')}}
			截取年月日：{
  {time | timeFormater() | mySlice}}

效果：

总结：

过滤器：

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
1. 注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2. 使用过滤器：{ { xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
备注：
1. 过滤器可以接收额外参数，多个过滤器也可以串联
2. 并没有改变原本的数据，而是产生新的对应的数据

1.16. 内置指令

1.16.1. v-text指令



	
		
		v-text指令
		
	
	
		
			你好，{
  {name}}

效果：

总结：

之前学过的指令：
- v-bind：单向绑定解析表达式，可简写为:
- v-model：双向数据绑定
- v-for

你可能感兴趣的:(前端,html,chrome,javascript,前端)

Long类型前后端数据不一致 igotyback 前端
响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
swagger访问路径 igotyback swagger
Swagger2.x版本访问地址：http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口，通常为8080。{context-path}是你的应用上下文路径，如果应用部署在根路径下，则为空。Swagger3.x版本对于Swagger3.x版本（也称为OpenAPI3）访问地址：http://{ip
html 中如何使用 uniapp 的部分方法某公司摸鱼前端 html uni-app 前端
示例代码：Documentconsole.log(window);效果展示：好了，现在就可以uni.使用相关的方法了
四章-32-点要素的聚合彩云飘过
本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记，使用的openlayers5.3.xapi。源码见1032.html，对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.
DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
【加密社】Solidity 中的事件机制及其应用加密社闲侃区块链智能合约区块链
加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
node.js学习小猿L node.js node.js 学习 vim
node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
springboot+vue项目实战一-创建SpringBoot简单项目苹果酱0567 面试题汇总与解析 spring boot 后端 java 中间件开发语言
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）跳房子的前端前端面试 javascript 开发语言 ecmascript
在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
博客网站制作教程 2401_85194651 java maven
首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
00. 这里整理了最全的爬虫框架（Java + Python）有一只柴犬爬虫系列爬虫 java python
目录1、前言2、什么是网络爬虫3、常见的爬虫框架3.1、java框架3.1.1、WebMagic3.1.2、Jsoup3.1.3、HttpClient3.1.4、Crawler4j3.1.5、HtmlUnit3.1.6、Selenium3.2、Python框架3.2.1、Scrapy3.2.2、BeautifulSoup+Requests3.2.3、Selenium3.2.4、PyQuery3.2
详解：如何设计出健壮的秒杀系统？夜空_2cd3
作者：Yrion博客园：cnblogs.com/wyq178/p/11261711.html前言：秒杀系统相信很多人见过，比如京东或者淘宝的秒杀，小米手机的秒杀。那么秒杀系统的后台是如何实现的呢？我们如何设计一个秒杀系统呢？对于秒杀系统应该考虑哪些问题？如何设计出健壮的秒杀系统？本期我们就来探讨一下这个问题：image目录一：****秒杀系统应该考虑的问题二：****秒杀系统的设计和技术方案三：*
JavaScript `Map` 和 `WeakMap`详细解释跳房子的前端 JavaScript 原生方法 javascript 前端开发语言
在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
最简单将静态网页挂载到服务器上(不用nginx) 全能全知者服务器 nginx 运维前端 html 笔记
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
补充元象二面 Redstone Monstrosity 前端面试
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
微信小程序开发注意事项 jun778895 微信小程序小程序
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
切换淘宝最新npm镜像源是 hai40587 npm 前端 node.js
切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
字节二面 Redstone Monstrosity 前端面试
1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
斟一小组鸡血视频和自己一起成长
http://m.v.qq.com/play/play.html?coverid=&vid=c0518henl2a&ptag=2_6.0.0.14297_copy有一种努力叫做靠自己http://m.v.qq.com/play/play.html?coverid=&vid=i0547o426g4&ptag=2_6.0.0.14297_copy世界最励志短片https://v.qq.com/x/pa
前端代码上传文件余生逆风飞翔前端 javascript 开发语言
点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
Dockerfile命令详解之 FROM 清风怎不知意容器化 java 前端 javascript
许多同学不知道Dockerfile应该如何写，不清楚Dockerfile中的指令分别有什么意义，能达到什么样的目的，接下来我将在容器化专栏中详细的为大家解释每一个指令的含义以及用法。专栏订阅传送门https://blog.csdn.net/qq_38220908/category_11989778.html指令不区分大小写。但是，按照惯例，它们应该是大写的，以便更容易地将它们与参数区分开来。(引用
《HTML 与 CSS—— 响应式设计》陈在天box html css 前端
一、引言在当今数字化时代，人们使用各种不同的设备访问互联网，包括智能手机、平板电脑、笔记本电脑和台式机等。为了确保网站在不同设备上都能提供良好的用户体验，响应式设计成为了网页开发的关键。HTML和CSS作为网页开发的基础技术，在实现响应式设计方面发挥着重要作用。本文将深入探讨HTML与CSS中的响应式设计原理、方法和最佳实践。二、响应式设计的概念与重要性（一）概念响应式设计是一种网页设计方法，旨在
【C语言】- 自定义类型：结构体、枚举、联合 Cavalier_01 C语言
【C语言】：操作符（https://mp.csdn.net/editor/html/115218055）数据类型（https://mp.csdn.net/editor/html/115219664）自定义类型：结构体、枚举、联合（https://mp.csdn.net/editor/html/115373785）变量、常量（https://mp.csdn.net/editor/html/11523
uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
高性能javascript--算法和流程控制海淀萌狗
-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
html+css网页设计旅游网站首页1个页面 html+css+js网页设计 html css 旅游
html+css网页设计旅游网站首页1个页面网页作品代码简单，可使用任意HTML辑软件（如：Dreamweaver、HBuilder、Vscode、Sublime、Webstorm、Text、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。获取源码1，访问该网站https://download.csdn.net/download/qq_42431718/897527112，点击
spring mvc @RequestBody String类型参数 zoyation spring-mvc spring mvc
通过如下配置：text/html;charset=UTF-8application/json;charset=UTF-8在springmvc的Controller层使用@RequestBody接收Content-Type为application/json的数据时，默认支持Map方式和对象方式参数@RequestMapping(value="/{code}/saveUser",method=Requ
ubuntu安装opencv最快的方法 Derek重名了
最快方法，当然不能太多文字$sudoapt-getinstallpython-opencv借助python就可以把ubuntu的opencv环境搞起来，非常快非常容易参考：https://docs.opencv.org/trunk/d2/de6/tutorial_py_setup_in_ubuntu.html
github中多个平台共存 jackyrong github
在个人电脑上，如何分别链接比如oschina,github等库呢，一般教程之列的，默认 ssh链接一个托管的而已，下面讲解如何放两个文件 1）设置用户名和邮件地址 $ git config --global user.name "xx" $ git config --global user.email "[email protected]"
ip地址与整数的相互转换(javascript) alxw4616 JavaScript
//IP转成整型 function ip2int(ip){ var num = 0; ip = ip.split("."); num = Number(ip[0]) * 256 * 256 * 256 + Number(ip[1]) * 256 * 256 + Number(ip[2]) * 256 + Number(ip[3]); n
读书笔记-jquey+数据库+css chengxuyuancsdn html jquery oracle
1、grouping ,group by rollup, GROUP BY GROUPING SETS区别 2、$("#totalTable tbody>tr td:nth-child(" + i + ")").css({"width":tdWidth, "margin":"0px", &q
javaSE javaEE javaME == API下载 Array_06 java
oracle下载各种API文档： http://www.oracle.com/technetwork/java/embedded/javame/embed-me/documentation/javame-embedded-apis-2181154.html JavaSE文档： http://docs.oracle.com/javase/8/docs/api/ JavaEE文档： ht
shiro入门学习 cugfy java Web 框架
声明本文只适合初学者，本人也是刚接触而已，经过一段时间的研究小有收获，特来分享下希望和大家互相交流学习。首先配置我们的web.xml代码如下，固定格式，记死就成 <filter> <filter-name>shiroFilter</filter-name> &nbs
Array添加删除方法 357029540 js
刚才做项目前台删除数组的固定下标值时，删除得不是很完整，所以在网上查了下，发现一个不错的方法，也提供给需要的同学。 //给数组添加删除 Array.prototype.del = function(n){
navigation bar 更改颜色张亚雄 IO
今天郁闷了一下午，就因为objective-c默认语言是英文，我写的中文全是一些乱七八糟的样子，到不是乱码，但是，前两个自字是粗体，后两个字正常体，这可郁闷死我了，问了问大牛，人家告诉我说更改一下字体就好啦，比如改成黑体，哇塞，茅塞顿开。翻书看，发现，书上有介绍怎么更改表格中文字字体的，代码如下
unicode转换成中文 adminjun unicode 编码转换
在Java程序中总会出现\u6b22\u8fce\u63d0\u4ea4\u5fae\u535a\u641c\u7d22\u4f7f\u7528\u53cd\u9988\uff0c\u8bf7\u76f4\u63a5这个的字符，这是unicode编码，使用时有时候不会自动转换成中文就需要自己转换了使用下面的方法转换一下即可。 /** * unicode 转换成中文
一站式 Java Web 框架 firefly aijuans Java Web
Firefly是一个高性能一站式Web框架。涵盖了web开发的主要技术栈。包含Template engine、IOC、MVC framework、HTTP Server、Common tools、Log、Json parser等模块。 firefly-2.0_07修复了模版压缩对javascript单行注释的影响，并新增了自定义错误页面功能。更新日志：增加自定义系统错误页面功能
设计模式——单例模式 ayaoxinchao 设计模式
定义 Java中单例模式定义：“一个类有且仅有一个实例，并且自行实例化向整个系统提供。” 分析从定义中可以看出单例的要点有三个：一是某个类只能有一个实例；二是必须自行创建这个实例；三是必须自行向系统提供这个实例。 &nb
Javascript 多浏览器兼容性问题及解决方案 BigBird2012 JavaScript
不论是网站应用还是学习js,大家很注重ie与firefox等浏览器的兼容性问题，毕竟这两中浏览器是占了绝大多数。一、document.formName.item(”itemName”) 问题问题说明：IE下，可以使用 document.formName.item(”itemName”) 或 document.formName.elements ["elementName&quo
JUnit-4.11使用报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing错误 bijian1013 junit4.11 单元测试
下载了最新的JUnit版本，是4.11，结果尝试使用发现总是报java.lang.NoClassDefFoundError: org/hamcrest/SelfDescribing这样的错误，上网查了一下，一般的解决方案是，换一个低一点的版本就好了。还有人说，是缺少hamcrest的包。去官网看了一下，如下发现：
[Zookeeper学习笔记之二]Zookeeper部署脚本 bit1129 zookeeper
Zookeeper伪分布式安装脚本(此脚本在一台机器上创建Zookeeper三个进程，即创建具有三个节点的Zookeeper集群。这个脚本和zookeeper的tar包放在同一个目录下，脚本中指定的名字是zookeeper的3.4.6版本，需要根据实际情况修改)： #!/bin/bash #!!!Change the name!!! #The zookeepe
【Spark八十】Spark RDD API二 bit1129 spark
coGroup package spark.examples.rddapi import org.apache.spark.{SparkConf, SparkContext} import org.apache.spark.SparkContext._ object CoGroupTest_05 { def main(args: Array[String]) { v
Linux中编译apache服务器modules文件夹缺少模块(.so)的问题 ronin47 modules
在modules目录中只有httpd.exp，那些so文件呢？我尝试在fedora core 3中安装apache 2. 当我解压了apache 2.0.54后使用configure工具并且加入了 --enable-so 或者 --enable-modules=so (两个我都试过了) 去make并且make install了。我希望在/apache2/modules/目录里有各种模块，
Java基础-克隆 BrokenDreams java基础
Java中怎么拷贝一个对象呢？可以通过调用这个对象类型的构造器构造一个新对象，然后将要拷贝对象的属性设置到新对象里面。Java中也有另一种不通过构造器来拷贝对象的方式，这种方式称为克隆。 Java提供了java.lang.
读《研磨设计模式》-代码笔记-适配器模式-Adapter bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ package design.pattern; /* * 适配器模式解决的主要问题是，现有的方法接口与客户要求的方法接口不一致 * 可以这样想，我们要写这样一个类（Adapter）: * 1.这个类要符合客户的要求 ---> 那显然要
HDR图像PS教程集锦&心得 cherishLC PS
HDR是指高动态范围的图像，主要原理为提高图像的局部对比度。软件有photomatix和nik hdr efex。一、教程叶明在知乎上的回答： http://www.zhihu.com/question/27418267/answer/37317792 大意是修完后直方图最好是等值直方图，方法是HDR软件调一遍，再结合不透明度和蒙版细调。二、心得 1、去除阴影部分的
maven-3.3.3 mvn archetype 列表 crabdave ArcheType
maven-3.3.3 mvn archetype 列表可以参考最新的：http://repo1.maven.org/maven2/archetype-catalog.xml [INFO] Scanning for projects... [INFO]
linux shell 中文件编码查看及转换方法 daizj shell 中文乱码 vim 文件编码
一、查看文件编码。在打开文件的时候输入:set fileencoding 即可显示文件编码格式。二、文件编码转换 1、在Vim中直接进行转换文件编码,比如将一个文件转换成utf-8格式 &
MySQL--binlog日志恢复数据 dcj3sjt126com binlog
恢复数据的重要命令如下 mysql> flush logs; 默认的日志是mysql-bin.000001，现在刷新了重新开启一个就多了一个mysql-bin.000002
数据库中数据表数据迁移方法 dcj3sjt126com sql
刚开始想想好像挺麻烦的，后来找到一种方法了，就SQL中的 INSERT 语句，不过内容是现从另外的表中查出来的，其实就是 MySQL中INSERT INTO SELECT的使用下面看看如何使用语法：MySQL中INSERT INTO SELECT的使用 1. 语法介绍有三张表a、b、c，现在需要从表b
Java反转字符串 dyy_gusi java 反转字符串
前几天看见一篇文章，说使用Java能用几种方式反转一个字符串。首先要明白什么叫反转字符串，就是将一个字符串到过来啦，比如"倒过来念的是小狗"反转过来就是”狗小是的念来过倒“。接下来就把自己能想到的所有方式记录下来了。 1、第一个念头就是直接使用String类的反转方法，对不起，这样是不行的，因为Stri
UI设计中我们为什么需要设计动效 gcq511120594 UI linux
随着国际大品牌苹果和谷歌的引领，最近越来越多的国内公司开始关注动效设计了，越来越多的团队已经意识到动效在产品用户体验中的重要性了，更多的UI设计师们也开始投身动效设计领域。但是说到底，我们到底为什么需要动效设计？或者说我们到底需要什么样的动效？做动效设计也有段时间了，于是尝试用一些案例，从产品本身出发来说说我所思考的动效设计。一、加强体验舒适度嗯，就是让用户更加爽更加爽的用
JBOSS服务部署端口冲突问题 HogwartsRow java 应用服务器 jboss server EJB3
服务端口冲突问题的解决方法，一般修改如下三个文件中的部分端口就可以了。 1、jboss5/server/default/conf/bindingservice.beans/META-INF/bindings-jboss-beans.xml 2、./server/default/deploy/jbossweb.sar/server.xml 3、.
第三章 Redis/SSDB+Twemproxy安装与使用 jinnianshilongnian ssdb reids twemproxy
目前对于互联网公司不使用Redis的很少，Redis不仅仅可以作为key-value缓存，而且提供了丰富的数据结果如set、list、map等，可以实现很多复杂的功能；但是Redis本身主要用作内存缓存，不适合做持久化存储，因此目前有如SSDB、ARDB等，还有如京东的JIMDB，它们都支持Redis协议，可以支持Redis客户端直接访问；而这些持久化存储大多数使用了如LevelDB、RocksD
ZooKeeper原理及使用 liyonghui160com
ZooKeeper是Hadoop Ecosystem中非常重要的组件，它的主要功能是为分布式系统提供一致性协调(Coordination)服务，与之对应的Google的类似服务叫Chubby。今天这篇文章分为三个部分来介绍ZooKeeper，第一部分介绍ZooKeeper的基本原理，第二部分介绍ZooKeeper
程序员解决问题的60个策略 pda158 框架工作单元测试
根本的指导方针 1. 首先写代码的时候最好不要有缺陷。最好的修复方法就是让 bug 胎死腹中。良好的单元测试强制数据库约束使用输入验证框架避免未实现的“else”条件在应用到主程序之前知道如何在孤立的情况下使用日志 2. print 语句。往往额外输出个一两行将有助于隔离问题。 3. 切换至详细的日志记录。详细的日
Create the Google Play Account sillycat Google
Create the Google Play Account Having a Google account, pay 25$, then you get your google developer account. References: http://developer.android.com/distribute/googleplay/start.html https://p
JSP三大指令 vikingwei jsp
JSP三大指令一个jsp页面中，可以有0~N个指令的定义！ 1. page --> 最复杂：<%@page language="java" info="xxx"...%> * pageEncoding和contentType： > pageEncoding：它

Vue学习笔记（尚硅谷天禹老师）

Vue学习笔记（尚硅谷天禹老师讲解）

1. Vue核心

1.1. Vue简介

1.1.1. 官网

1.1.2. 介绍与描述

1.1.3. Vue的特点

1.1.4.与其他JS框架的关联

1.1.5. Vue周边库

1.2. 初识Vue

Hello！{ {name}}!

1.3. 模板语法

插值语法

你好，{ {name}}!

指令语法

1.4. 数据绑定

1.15. 过滤器

时间

当前时间戳：{ {time}}

转换后时间：{ {time | timeFormater()}}

转换后时间：{ {time | timeFormater('YYYY-MM-DD HH:mm:ss')}}

截取年月日：{ {time | timeFormater() | mySlice}}

1.16. 内置指令

1.16.1. v-text指令

你可能感兴趣的:(前端,html,chrome,javascript,前端)