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,前端)

uni-app实现步骤条夏夏的码农 uni-app
实现如图样式html部分代码如下投资期限与收益0?'active':'default'">募集开始1?'active':'default'">募集结束2?'active':'default'">产品成立3?'active':'default'">产品到期0?'active-step1':'step1'">1?'active-st
chrome扩展，“manifest_version“: 3, chrome 扩展图标点击事件徐同保 chrome 前端
在Chrome扩展中，从ManifestV3开始，后台脚本（backgroundscripts）被服务工作线程（serviceworkers）所取代。这改变了扩展图标点击事件（通常称为浏览器操作或者页面操作）的处理方式。在ManifestV3中，您需要使用chrome.action.onClicked监听器来处理扩展图标的点击事件。下面是一个如何设置扩展图标点击事件处理器的示例：在manifest
大前端-postcss安装使用指南黑夜照亮前行的路 postcss
PostCSS是一款强大的CSS处理工具，可以用来自动添加浏览器前缀、代码合并、代码压缩等，提升代码的可读性，并支持使用最新的CSS语法。以下是一份简化的PostCSS安装使用指南：一、安装PostCSS在你的项目目录中，通过npm（NodePackageManager）来安装PostCSS。打开命令行窗口，输入以下命令：bash复制代码npminstallpostcss--save-dev这将把
谷歌浏览器驱动Chromedriver（114-120版本）文件以及驱动下载教程 pigerr杨 Python python chrome drivers
ChromeDriver官方网站GitHub||GoogleChromeLabs/chrome-for-testingChromeDriver113-125_JSONChromeforTestingavailability123-125zip白月黑羽Python基础|进阶|Qt图形界面|Django|自动化测试|性能测试|JS语言|JS前端|原理与安装
虚拟 DOM 的优缺点有哪些咕噜签名分发前端 javascript 开发语言
虚拟DOM（VirtualDOM）技术作为现代前端开发中的重要组成部分，已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势，同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点，深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异，最小化实际DOM操作，从而减少页面重渲染时的性能消耗。这种优
3、JavaWeb-Ajax/Axios-前端工程化-Element 所谓远行Misnearch #JavaWeb 前端 ajax elementui java 前端框架
P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML，异步的JS和XMLJS网页动作，XML一种标记语言，存储数据，作用：数据交换：通过Ajax给服务器发送请求，并获取服务器响应的数据异步交互：在不重新加载整个页面的情况下，与服务器交换数据并实现更新部分网页的技术，例如：搜索联想、用户名是否可用的校验等等。同步与异步：同步：服务器在处理中客户端要处于等待状态，输入域名
python转码 Desamond python 开发语言
转码在许多场景中都有应用，以下是一些常见的场景：网页开发：当用户在网页上输入文本时，可能需要将特殊字符（如空格、引号、特殊符号等）进行转码，以防止这些字符对URL或HTML代码产生干扰。文件名处理：在处理文件名时，可能需要将特殊字符进行转码，以避免文件名被错误地解析或显示。数据传输：在数据传输过程中，为了确保数据的完整性和正确性，可能需要将数据中的特殊字符进行转码。数据存储：在数据库或数据存储中，
Python dict字符串转json对象，小数精度丢失问题朝如青丝暮成雪 json python
一前言JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式，dict是Python的一种数据格式。本篇介绍一个float数据转换时精度丢失的案例。二问题描述importjsontest_str1='{"π":3.1415926535897932384626433832795028841971}'test_str2='{"value":10.00000}'print
java实体中返回前端的double类型四舍五入（格式化）婲落ヽ紅顏誶 java
根据业务，需要通过后端给前端返回部分double类型的数值，一般需要保留两位小数，使用jackson转换对象packagecom.ruoyi.common.core.config;importcom.fasterxml.jackson.core.JsonGenerator;importcom.fasterxml.jackson.databind.JsonSerializer;importcom.f
Django forms组件在飞行-米龙 Django django python 后端
【一】引入【1】实现登陆验证功能（1）需求分析登陆验证需要前后端交互，采用form表单提交数据对数据进行校验用户名必须以英文大写字母开头密码必须大于三位数反馈给用户错误的信息除了反馈错误的信息还有保留原始输入内容（2）后端代码使用user_info_dict字典每次刷新存储存储前端发送的信息存储后端进行验证的信息defhome(request):#每次后刷新这个信息字典user_info_dict
UNDERSTANDING HTML WITH LARGE LANGUAGE MODELS liferecords LLM 语言模型人工智能自然语言处理
UNDERSTANDINGHTMLWITHLARGELANGUAGEMODELS相关链接：arXiv关键字：大型语言模型、HTML理解、Web自动化、自然语言处理、机器学习摘要大型语言模型（LLMs）在各种自然语言任务上表现出色。然而，它们在HTML理解方面的能力——即解析网页的原始HTML，对于自动化基于Web的任务、爬取和浏览器辅助检索等应用——尚未被充分探索。我们为HTML理解模型（经过微调
Web前端Html的表单任家伟前端 html
表单的关键字：form标签表示一个表单区域action=“后端地址”method=“提交数据方式:get/post”input单行输入框type=“text”文本name=“定义名称名字自定义”向后端提交的键readonly=“readonly”只读，不可修改，但是可以提交disabled=“disabled”禁用组件不可修改，不能提交type=“password”密码框type=“radio”单
Thinkphp - 详细实现网站系统登录功能，附带 Mysql 数据库设置、Web 前端展示界面、信息校验等（详细代码，即设计过程）王佳斌 +Thinkphp mysql 前端数据库
前言登录功能，是我们几乎开发每个系统都必须的模块。登录功能设计思路，主要包括几个方面。用户输入网址展示登录页面用户输入用户名，密码等点击登录进行信息校验校验通过之后，记录用户登录信息，跳转指定页面用户校验失败，提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面，我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。
Ubuntu下安装Chrome浏览器(简单,使用) Starry-sky(jing) [linux操作系统笔记]chrome 深度学习 linux
下载安装GoogleChrome浏览器deb包极速下载:下载链接32位wgethttps://dl.google.com/linux/direct/google-chrome-stable_current_i386.deb64位wgethttps://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb安装sudodpk
javascript 日期转换为时间戳，时间戳转换为日期的函数 cdcdhj javascript学习日记 javascript 开发语言 ecmascript
日期转化为时间戳，主要用valueOf()来进行转化为毫秒时间戳，getTime()IOS系统无法解析转换，所以都有valueOf()letgetTimestampOrDate=function(timestamp){lettimeStamp='';constregex=/^\d{4}(-|\/)\d{2}(-|\/)\d{2}$/;constregex2=/^\d{4}(-|\/)\d{2}(-
COMP315 JavaScript Cloud Computing for E Commerce zhuyu0206girl javascript 开发语言 ecmascript
Assignment1:Javascript1IntroductionAcommontaskincloudcomputingisdatacleaning,whichistheprocessoftakinganinitialdatasetthatmaycontainerroneousorincompletedata,andremovingorfixingthoseelementsbeforeform
JSON与AJAX：网页交互的利器入冉心 json ajax 前端
在现代Web开发中，JSON（JavaScriptObjectNotation）和AJAX（AsynchronousJavaScriptandXML）是两项不可或缺的技术。它们共同为网页提供了动态、实时的数据交互能力，为用户带来了更加流畅和丰富的体验。本文将详细介绍JSON和AJAX的概念、原理，并通过代码示例展示它们在实际开发中的应用。一、JSON：轻量级的数据交换格式JSON是一种轻量级的数据
程序员开发技术整理 laizhixue 学习前端框架
前端技术：vue-前端框架element-前端框架bootstrap-前端框架echarts-图标组件C#后端技术：webservice：soap架构：简单的通信协议，用于服务通信ORM框架：对象关系映射，如EF：对象实体模型，是ado.net中的应用技术soap服务通讯：xml通讯ado.net：OAuth2:登录授权认证：Token认证：JWT：jsonwebtokenJava后端技术：便捷工
【前端学习——js篇】7.函数缓存笔下无竹墨下有鱼前端学习前端学习 javascript
具体见：https://github.com/febobo/web-interview7.函数缓存函数缓存，就是将函数运算过的结果进行缓存本质上就是用空间（缓存存储）换时间（计算过程）常用于缓存数据计算结果和缓存对象。其实现主要通过闭包、柯里化和高阶函数。下面主要介绍下柯里化：①柯里化柯里化（currying)是一种函数式编程的概念，指的是将一个带有多个参数的函数转换成一系列只接受一个参数的函数的
javascript的数据类型及转换田小田txt
一、JavaScript数据类型：共有string，number，boolean，object，function五种数据类型；其中Object，Date，Array为对象型；2个不包含任何值的数据类型：null，undefined。二、Typeof查看数据类型：typeof"John"//返回stringtypeof3.14//返回numbertypeofNaN//返回numbertypeoffa
html版本号 webpack_html-webpack-plugin详解 weixin_39994949 html版本号 webpack
引言最近在react项目中初次用到了html-webapck-plugin插件，用到该插件的两个主要作用：为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口有了这种插件，那么在项目中遇到类似上面
HTML语言剖析混沌破晓
HTML语言剖析Html简介-目录全写：HyperTextMark-upLanguage译名：超文本标识语言简释：一种为普通文件中某些字句加上标示的语言，其目的在于运用标签（tag）使文件达到预期的显示效果。由文字（字母，数字、标点符号）及标签组合而成。任何文字编辑器都可以，这里推荐用：Dreamweaver。1.Html特点：►描述性语言，结构语言，用于决定网页内容以什么样的形式显示；►通过标签
Websocket服务监听收发消息 beiback Java 服务器问题 websocket 网络协议网络
目录1.pom依赖坐标2.项目配置端口和项目包名2.创建处理器3.注册处理器4.前端页面1.pom依赖坐标org.springframework.bootspring-boot-starter-websocket2.项目配置端口和项目包名application.propertiesserver.port=8088//路径规范：为应用的所有servlet提供一个统一的前缀，使URL结构更加清晰和一致
Netty服务器结合WebSocke协议监听和接收数据 beiback 服务器问题 Java 服务器运维 netty
目录1.pom依赖2.配置属性3.创建netty服务器4.建立监听和响应5.创建启动器6.前端static下页面7.前端js8.注意异常问题9.创建netty服务器--使用守护线程1.pom依赖io.nettynetty-all4.1.86.Final2.配置属性application.properties#启动端口server.port=8088server.servlet.context-pa
基于SSM+Vue企业销售培训系统企业人才培训系统企业课程培训管理系统企业文化培训班系统Java 计算机程序老哥
作者主页：计算机毕业设计老哥有问题可以主页问我一、开发介绍1.1开发环境开发语言：Java数据库：MySQL系统架构：B/S后端：SSM(Spring+SpringMVC+Mybatis)前端：Vue工具：IDEA或者Eclipse，JDK1.8，Maven二、系统介绍2.1图片展示注册登录页面：登陆.png前端页面功能：首页、培训班、在线学习、企业文化、交流论坛、试卷列表、系统公告、留言反馈、个
CDH 启停使用HiveServer2 金刚_30bf
翻译：https://www.cloudera.com/documentation/enterprise/latest/topics/cdh_ig_hiveserver2_start_stop.html版本：5.14.2HiveServer2是HiveServer的改进版本，支持Kerberos身份验证和多客户端并发访问。您可以使用Beeline客户端访问HiveServer2。警告：如果以远程模
javascript实现SM2加密解密人生在勤，不索何获 javascript 前端 jquery
前提JavaWeb环境前端代码window.sm2=function(t){functioni(e){if(r[e])returnr[e].exports;varn=r[e]={i:e,l:!1,exports:{}};returnt[e].call(n.exports,n,n.exports,i),n.l=!0,n.exports}varr={};returni.m=t,i.c=r,i.d=fu
Vue：为什么要使用v-cloak 刻刻帝的海角 vue.js 前端 javascript
Vue.js是一种流行的JavaScript框架，它使我们能够构建交互性强大的用户界面。在Vue.js中，v-cloak是一个指令，用于解决在页面加载时出现的闪烁问题。本文将介绍如何使用v-cloak及代码来优化Vue.js应用程序的渲染效果。引言当我们使用Vue.js构建应用程序时，有时会遇到一个问题：在页面加载时，由于Vue.js需要一定的时间来解析和渲染模板，会导致页面上显示出未经处理的Mu
HTML背景带视频的个人炫酷引导页源码 erthre 源码 php
正文:一款简洁大气得个人团队引导HTML单页，非常不错，LOGO支持自行更改替换，可以拿来做为团队官网也可以个人，只是单页没有后台。程序:wwhtxs.lanzouq.com/if6oE0i26ohi图片:
JavaScript快速入门笔记之二（变量、常量、数据类型） eshineLau 前端开发 javascript 笔记前端
JavaScript快速入门笔记之二（变量、常量、数据类型）1、变量何时使用变量：程序中的一切数据都要保存在变量中，反复使用如何使用变量：2种情况：赋值和取值赋值：2步：1.1创建变量：——声明——创建一个新的空变量语法：var变量名;强调：仅声明，未赋值的变量，默认值是undefined命名：1.不能以数字开头2.不能用保留字。3.一般采用驼峰命名1.2赋值：将数据保存到变量中语法：变量名=数据
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,前端)