Gao_xu_sheng

Vue基础语法篇

1.1 web前端三大主流框架

web前端三大主流框架都是Angular、React、Vue。

1.2 Angular

AngularJS诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
Angular

1.3 React

React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。
React 官方中文文档

1.4 Vue

官方网址：Vue.js - 渐进式 JavaScript 框架 | Vue.js

1.5 什么是Vue.js

Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的）
Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！
Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发）
前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果
作者膜拜：
- 百度百科——全球领先的中文百科全书

1.6 为什么要学习流行框架

企业为了提高开发效率：在企业中，时间就是效率，效率就是金钱；

企业中，使用框架，能够提高开发的效率；
提高开发效率的发展历程：原生JS -> Jquery之类的类库 -> 前端模板引擎 -> Angular.js / Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】
在Vue中，一个核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；

增强自己就业时候的竞争力

人无我有，人有我优

1.7 框架和库的区别

框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

1.8 mvvm

MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分 Model, View , VM ViewModel
m model 数据
- 数据层 Vue中数据都放在 data 里面
v view 视图
- Vue 中 view即我们的HTML页面
vm view-model）控制器将数据和视图层建立联系
- vm 即 Vue 的实例就是 vm

1.9 Node（后端）中的 MVC 与前端中的 MVVM 之间的区别

MVC 是后端的分层开发概念；
MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分 Model, View VM ViewModel

数据(Model)和视图(View)是不能直接通讯的，而是需要通过ViewModel来实现双方的通讯。当数据(Model)变化的时候，ViewModel能够监听到这种变化，并及时通知View视图做出修改。同样的，当页面有事件触发的时候，ViewModel也能够监听到事件，并通知数据(Model)进行响应。所以ViewModel就相当于一个观察者，监控着双方的动作，并及时通知对方进行相应的操作。
简单的理解就是：MVVM 实现了将业务(数据)与视图进行分离的功能。
在这里还需要注意的一点就是：
MVVM`框架的三要素：响应式，模板引擎，渲染

2. 安装：

2.1 CDN

2.2 本地链接

2.3 NPM

$ npm install vue

2.4 命令行工具 (CLI)

Vue.js 代码的基本结构说明：




    
    Document


    
        {{msg}}
        {{msg}} +'----------'+abc
        {{4*8}}

2.5 Vue.js 基本代码和 MVVM 之间的对应关系

3.0 指令

本质就是自定义属性
Vue中指定都是以 v- 开头

3.1 v-cloak

/*
      v-cloak指令的用法
      1、提供样式
        [v-cloak]{
          display: none;
        }
      2、在插值表达式所在的标签中添加v-cloak指令

      背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果
    */

防止页面加载时出现闪烁问题




  
  Document
  


  
    {{msg}}

3.2 v-text

v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
如果数据中有HTML标签会将html标签一并输出
注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值

3.3 v-html

用法和v-text 相似但是他可以将HTML片段填充到标签中。
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。
可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上----XSS攻击与v-html
XSS（cross site script）攻击，利用用户web输入漏洞，实现跨站脚本攻击。恶意攻击者在Web页面里插入恶意html代码，当用户浏览该页时，嵌入其中的恶意html代码被执行，从而实现攻击者的恶意目的。


　　
 
    
    {{message}}

3.4 v-pre

显示原始信息跳过编译过程
跳过这个元素和它的子元素的编译过程。
一些静态的内容不需要编译加这个指令可以加快渲染

{{ this will not be compiled }}    
	
  	{{msg}}

3.5 v-once

执行一次性的插值【当数据改变时，插值处的内容不会继续更新】


     {{ msg}}

3.6 v-on

形式如：v-on:click 缩写为 @click;

3.7 v-on事件函数中传入参数


    
        {{num}}

3.8 事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符

修饰符是由点开头的指令后缀来表示的

.stop 阻止冒泡
.prevent 阻止默认事件
.self 只当事件在该元素本身（比如不是子元素）触发时触发回调
.once 事件只触发一次


  
    {{num}}
    
      
    
    
      百度
        我是一个p标签
      
    
  
  
  


使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。

[email protected] =“c”  总是先执行prevent，无论是内部元素还是本身元素触发，他都会prevent默认事件。只不过只有当你点击a元素的时候，才会触发c事件，因此会阻止所有的点击的默认行为 

[email protected] =“c” 当你点击的元素是a的时候，才会prevent默认事件，而且执行c事件，因此只会阻止对元素自身的点击。

3. 9 跑安灯案例




    
    
    Document



    
        
        
        {{msg}}

3.10 双向数据绑定

当数据发生变化的时候，视图也就发生变化
当视图发生变化的时候，数据也会跟着同步变化

v-model

v-model是一个指令，限制在、、components</code>中使用</p> </li> <li> <pre><code class="language-html"><div id="app"> <div>{{msg}}</div> <div> 当输入框中内容改变的时候，页面上的msg 会自动更新 <input type="text" v-model='msg'> </div> </div></code></pre> </li> <li> <p>简易计算器</p> </li> <li> <pre><code class="language-html"><body> <div id="app"> <input type="text" v-model="n1"> <select v-model="opt"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" v-model="n2"> <input type="button" value="=" @click="calc"> <input type="text" v-model="result"> </div> <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { n1: 0, n2: 0, result: 0, opt: '+' }, methods: { calc() { // 计算器算数的方法 // 逻辑： switch (this.opt) { case '+': this.result = parseInt(this.n1) + parseInt(this.n2) break; case '-': this.result = parseInt(this.n1) - parseInt(this.n2) break; case '*': this.result = parseInt(this.n1) * parseInt(this.n2) break; case '/': this.result = parseInt(this.n1) / parseInt(this.n2) break; } } } }); </script> </body></code></pre> </li> </ul> <h4>3.11 按键修饰符</h4> <ul> <li> <p>在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 <code>v-on</code> 在监听键盘事件时添加按键修饰符</p> </li> <li> <pre><code class="language-html"> <input v-on:keyup.13="submit">  <input v-on:keyup.enter="submit">  <input type="text" v-on:keyup.enter.space="alertMe" > 常用的按键修饰符 .enter => enter键 .tab => tab键 .delete (捕获“删除”和“退格”按键) => 删除键 .esc => 取消键 .space => 空格键 .up => 上 .down => 下 .left => 左 .right => 右 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="text" value="按钮" @keyup.13="alertMe"> <input type="text" value="按钮" @keyup.enter="alertMe"> <input type="text" value="按钮" @keyup.space="alertMe"> <input type="text" value="按钮" @keyup.enter.space="alertMe"> </div> <script src="./js/vue.js"></script> <script> var vm = new Vue({ el: "#app", data: {}, methods: { alertMe() { alert("触发了对应事件") } } }) </script> </body> </html></code></pre> </li> </ul> <h4>3.12 自定义按键修饰符别名</h4> <ul> <li> <p>在Vue中可以通过<code>config.keyCodes</code>自定义按键修饰符别名</p> </li> <li> <p>Vue.config.keyCodes.a = 65</p> </li> <li> <pre><code class="language-html"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-on:keyup.f2='handle' v-model='info'> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 事件绑定-自定义按键修饰符规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值 */ Vue.config.keyCodes.a = 65 var vm = new Vue({ el: '#app', data: { info: '' }, methods: { handle: function(event){ alert(event.keyCode) } } }); </script> </body> </html></code></pre> </li> </ul> <h4>3.13 v-bind(属性绑定)</h4> <p></p> <h5>绑定style</h5> <p></p> <ul> <li> <p>v-bind 指令被用来响应地更新 HTML 属性</p> </li> <li> <p>v-bind:href 可以缩写为 :href;</p> </li> <li> <pre><code class="language-html"> <img v-bind:src="imageSrc">  <img :src="imageSrc"> 属性绑定案例： <body> <div id="app"> <a v-bind:href="url" :title="msg+123">百度</a> <a :href="url">百度1</a> <button v-on:click='handle'>切换</button> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> /* 属性绑定 */ var vm = new Vue({ el: '#app', data: { url: 'http://www.baidu.com', msg:"这是一个a标签" }, methods: { handle: function(){ // 修改URL地址 this.url = 'http://www.sina.com'; } } }); </script> </body></code></pre> </li> <li> <p>v-mode的本质：</p> </li> <li> <pre><code class="language-html"> <input type="text" :value='uname' @input='uname=$event.target.value'></code></pre> <h5>v-bind:class绑定对象</h5> </li> <li> <p>我们可以给v-bind:class 一个对象，以动态地切换class。</p> </li> <li> <p>注意：v-bind:class指令可以与普通的class特性共存</p> </li> <li> <pre><code class="language-html">1、 v-bind 中支持绑定一个对象 // <div class="box" :class={active:isActive,bgc:isBgc}></div> 这里的键是类，值是data数据中的属性，data数据中属性值是布尔类型 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { width: 100px; height: 100px; } .active { border: 1px solid red; } .bgc { background:pink } </style> </head> <body> <div id="app"> <input type="button" @click="handle" value="切换"> <div class="box" :class={active:isActive,bgc:isBgc}></div> </div> </body> <script src="js/vue.js"></script> <script> var vm = new Vue({ el:"#app", data:{ isActive:true, isBgc:true }, methods:{ handle () { this.isActive = !this.isActive this.isBgc = !this.isBgc } } }) </script> </html></code></pre> <h5 style="background-color:transparent;">v-bind:class绑定数组</h5> </li> <li> <pre><code class="language-html">2、v-bind 中支持绑定一个数组, 数组中的元素对应为data数据中的键。 data中属性值是类，要加双引号，置空的办法为 this.isbgc = "" <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .active { width: 100px; height: 100px; border: 1px solid pink; } .bgc { background: Red } </style> </head> <body> <div id="app"> <input type="button" value="清空" @click=handle> <div class="box" :class='[isactive,isbgc]'>123</div> </div> <script src="js/vue.js"></script> <script> var vm = new Vue({ el: "#app", data: { isactive: "active", isbgc: "bgc" }, methods: { handle() { this.isbgc = "" } } }) </script> </body> </html></code></pre> <p></p> </li> <li> <p>绑定对象和绑定数组的区别</p> </li> <li> <p>绑定对象的时候对象的属性即要渲染的类名对象的属性值对应的是 data 中键，值是布尔类型</p> </li> <li> <p>绑定数组的时候数组里面存的是data 中的数据属性，data的值是类名</p> </li> </ul> <h5>绑定style</h5> <pre><code class="language-html">1.内联样式采用对象形式：语法为： css属性名:data中自定义的键。  <div class="box" @click="handle" v-bind:style="{backgroundColor:divColor,width:divWidth,height:divHeight}"> 内联样式</div> 2.绑定一个样式对象 <div v-bind:style="styleObject">绑定样式对象</div>' 3.绑定数组对象  <div v-bind:style="[styleObj1, styleObj2]"></div> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <div class="box" @click="handle" v-bind:style="{backgroundColor:divColor,width:divWidth,height:divHeight}"></div> <div class="box" @click="handle" v-bind:style="styleObject"></div> <div class="box" @click="handle" v-bind:style="[styleObject,style1Object]"></div> </div> </body> <script src="js/vue.js"> </script> <script> var vm = new Vue({ el: "#app", data: { divColor: "red", divWidth: "100px", divHeight: "100px", styleObject: { width: "200px", height: "200px", background: "orange" }, style1Object: { background: "blue" } }, methods: { handle() { this.divColor = "pink" this.styleObject.background = "cyan" } } }) </script> </html></code></pre> <h4>3.14 分支结构</h4> <h5>v-if 使用场景</h5> <ul> <li> <p>1- 多个元素通过条件判断展示或者隐藏某个元素。或者多个元素</p> </li> <li> <p>2- 进行两个视图之间的切换</p> </li> <li> <pre><code class="language-html"><!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> .box1 { width: 300px; height: 200px; background-color: Red; } .box2 { width: 300px; height: 200px; background-color: blue; } </style> <script src='./js/vue.js'></script> </head> <body> <div id='app'> <button @click="flag =!flag">切换</button> <div class="box1" v-if="flag"></div> <div class="box2" v-else></div> </div> <script> var vm = new Vue({ el: '#app', data: { flag: false }, methods: { } }) </script> </body> </html> --------------------------------------------------------------- <!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> </style> <script src='./js/vue.js'></script> </head> <body> <div id='app'> <h1 v-if="score>=90&&score<=100">成绩优秀</h1> <h1 v-else-if="score>=80&&score<=90">成绩良好</h1> <h1 v-else-if="score>=60&&score<=80">刚刚及格</h1> <h1 v-else-if="score>=0&&score<=59">考试不及格</h1> <h1 v-else>不在合法区间</h1> </div> <script> var vm = new Vue({ el: '#app', data: { score: 101 }, methods: { } }) </script> </body> </html></code></pre> </li> </ul> <h5>v-show 和 v-if的区别</h5> <ul> <li> <p>v-show本质就是标签display设置为none，控制隐藏</p> </li> <li> <p>v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。</p> </li> <li> <p>v-if是动态的向DOM树内添加或者删除DOM元素</p> </li> <li> <p>v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件</p> </li> <li> <p>一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。</p> </li> </ul> <h4>3.15 循环结构</h4> <h5>v-for</h5> <ul> <li> <p>用于循环的数组里面的值可以是对象，也可以是普通元素</p> </li> <li> <p>1.迭代数组</p> </li> <li> <pre><code class="language-html"><!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <title>Document</title> <style> /**{margin:0;padding:0} a {text-decoration:none} ul,li {list-style:none}*/ </style> <script src='./js/vue.js'></script> </head> <body> <div id='app'> <ul> <li v-for="(item,index) in stars">{{"索引是"+index+"内容是"+item}}</li> </ul> <ul> <li v-for="(item,index) in students"> <span>{{item.name}}</span> <span>{{item.age}}</span> </li> </ul> </div> <script> var vm = new Vue({ el: '#app', data: { stars: ["西施", "王昭君", "杨玉环", "貂蝉"], students: [{ name: "zhagnsan", age: "18" }, { name: "lisi", age: "19" }, { name: "wangwu", age: "18" }, ] }, methods: { } }) </script> </body> </html></code></pre> <p>2.迭代对象</p> </li> <li> <pre><code class="language-html"> <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>  <div id="SOHUCS" sid="1751495646344396800"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(vue.js,前端,javascript)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1885498102643748864.htm" title="如何在 Typecho 中实现 Joe 编辑器标签自动填充" target="_blank">如何在 Typecho 中实现 Joe 编辑器标签自动填充</a> <span class="text-muted">6v6博客</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a> <div>如何在Typecho中实现Joe编辑器标签自动填充在Typecho的文章编辑过程中，如果你使用Joe编辑器，可能会希望输入#标签后能自动提取并填充到文章的标签输入框中，以提高工作效率。接下来，我们将详细介绍如何通过开发一个Typecho插件来实现这一功能。6v6博客地址：6v6.ren一、功能实现原理这个功能的实现依赖于JavaScript来监听Joe编辑器中的输入事件，通过正则表达式提取出#开头</div> </li> <li><a href="/article/1885497093410320384.htm" title="workman服务端开发模式-应用开发-总架构逻辑说明" target="_blank">workman服务端开发模式-应用开发-总架构逻辑说明</a> <span class="text-muted">龙哥·三年风水</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E9%95%BF%E9%93%BE%E6%8E%A5/1.htm">长链接</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/gateway/1.htm">gateway</a> <div>一、后台管理端(操作页面端)管理员用浏览器打开页面管理端后，页面管理端会自动检测，如果本地cookie不存在的情况下，跳转到登录页面，如果本地cookie存在的情况下，跳转到首页。登录的情况下，就不说，后面在业务架构里面会说明的。在登录页面输入邮箱账号、密码、验证码，点击提交。提交之前会在前端进行类型及相应的格式验证，如果验证结果都是OK的情况下，将参数提交到api接口中，等待返回结果。如果api</div> </li> <li><a href="/article/1885496967056912384.htm" title="AIGC时代的Vue或React前端开发" target="_blank">AIGC时代的Vue或React前端开发</a> <span class="text-muted">GISer_Jinger</span> <a class="tag" taget="_blank" href="/search/Javascript/1.htm">Javascript</a><a class="tag" taget="_blank" href="/search/React/1.htm">React</a><a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/AIGC/1.htm">AIGC</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a> <div>在AIGC（人工智能生成内容）时代，Vue开发正经历着深刻的变革。以下是对AIGC时代Vue开发的详细分析：一、AIGC技术对Vue开发的影响代码生成与自动化AIGC技术使得开发者能够借助智能工具快速生成和优化Vue代码。例如，通过自然语言处理模型（如ChatGPT），开发者可以描述组件的功能和样式需求，然后自动生成包含模板、脚本和样式的完整组件代码。这不仅大大提高了开发效率，还减少了人为错误的可</div> </li> <li><a href="/article/1885496464260526080.htm" title="刷题前必学！二叉树！用JavaScript学数据结构与算法" target="_blank">刷题前必学！二叉树！用JavaScript学数据结构与算法</a> <span class="text-muted"></span> <div>‍JavaScript算法与数据结构-HowieCong务必要熟悉JavaScript使用再来学！一、树是什么？数据结构中的树，对于现实世界中的树简化——树根抽象为“根节点”，树枝抽象为“边”，树枝的两个端点抽象为“结点”，树叶抽象为“叶子结点”计算机中的树如下：二、树的重点树的层次计算规则：根结点所在的那一层为第一层，其子节点为第二层，以此类推结点和树的高度计算规则：叶子结点高度为1，每向上一层</div> </li> <li><a href="/article/1885493310118752256.htm" title="WSL开发环境配置（linux + python + nodejs + docker）" target="_blank">WSL开发环境配置（linux + python + nodejs + docker）</a> <span class="text-muted">Lilixxs</span> <a class="tag" taget="_blank" href="/search/%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/1.htm">环境搭建</a><a class="tag" taget="_blank" href="/search/%E5%9F%BA%E7%A1%80%E8%AE%BE%E6%96%BD/1.htm">基础设施</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a> <div>配置要求及目标总体目标：完整的Linux开发环境可开发基于node.js的前端程序可开发基于python的后端程序（仅日常程序，不包含机器学习程序）可运行docker容器，用于快速搭建测试环境Linux环境要求支持centos发行版类似的操作方式和指令（如使用rpm、dnf进行软件包管理）登录用户具有root权限（执行高权限命令，输入sudo即可执行）可从国内源更新软件基本优化：内核指令优化、禁用</div> </li> <li><a href="/article/1885490916249104384.htm" title="「前端工具」postman接口测试工具详解" target="_blank">「前端工具」postman接口测试工具详解</a> <span class="text-muted">吴维炜</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%B0%B1%E9%82%A3%E4%B9%88%E5%9B%9E%E4%BA%8B/1.htm">前端就那么回事</a><a class="tag" taget="_blank" href="/search/postman/1.htm">postman</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%B7%A5%E5%85%B7/1.htm">前端工具</a><a class="tag" taget="_blank" href="/search/API%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7/1.htm">API开发工具</a><a class="tag" taget="_blank" href="/search/RESTful/1.htm">RESTful</a><a class="tag" taget="_blank" href="/search/API/1.htm">API</a><a class="tag" taget="_blank" href="/search/postman%E8%87%AA%E5%8A%A8%E5%8C%96%E6%B5%8B%E8%AF%95/1.htm">postman自动化测试</a> <div>Postman是一款流行的API开发工具，用于构建和测试RESTfulAPI。以下是Postman的一些关键特性和使用方法的详解：1.界面和基本操作工作区：Postman的主界面，用于显示集合、环境和全局变量。请求构建器：用于输入请求的URL、HTTP方法、请求头、请求体等。响应区：显示服务器的响应，包括状态码、响应头和响应体。2.创建请求GET请求：获取资源。POST请求：提交新资源。PUT请求</div> </li> <li><a href="/article/1885470991866458112.htm" title="5 分钟 JS 设计模式 - 单例与观察者模式（第19节）" target="_blank">5 分钟 JS 设计模式 - 单例与观察者模式（第19节）</a> <span class="text-muted">星核日记</span> <a class="tag" taget="_blank" href="/search/%E3%80%8A5/1.htm">《5</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E9%92%9F/1.htm">分钟</a><a class="tag" taget="_blank" href="/search/JS/1.htm">JS</a><a class="tag" taget="_blank" href="/search/%E8%AF%B4%E3%80%8B/1.htm">说》</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E8%A7%82%E5%AF%9F%E8%80%85%E6%A8%A1%E5%BC%8F/1.htm">观察者模式</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>目录5分钟JS说第19节：JavaScript设计模式引言1.什么是设计模式？1.1设计模式的分类1.2为什么需要设计模式？2.单例模式2.1单例模式的核心思想2.2实现单例模式2.2.1基本实现2.2.2目录结构2.2.3代码注释2.3单例模式的应用场景3.工厂模式3.1工厂模式的核心思想3.2实现工厂模式3.2.1简单工厂模式3.2.2目录结构3.2.3代码注释3.3工厂模式的应用场景4.观察</div> </li> <li><a href="/article/1885464058493202432.htm" title="Java EE之第14章JSON数据交互和RESTful支持" target="_blank">Java EE之第14章JSON数据交互和RESTful支持</a> <span class="text-muted">大马戏团里的一头猪</span> <a class="tag" taget="_blank" href="/search/JAVA/1.htm">JAVA</a><a class="tag" taget="_blank" href="/search/EE%E4%BC%81%E4%B8%9A%E7%BA%A7%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91%E6%95%99%E7%A8%8B/1.htm">EE企业级应用开发教程</a> <div>第14章JSON数据交互和RESTful支持14.1JSON数据交互14.1.1JSON概述14.1.2JSON数据转换14.2RESTful支持14.2.1什么是RESTful14.1JSON数据交互JSON是近几年才流行的一种新的数据格式，它与XML非常相似，都是用于存储数据的；但JSON相对于XML来说，解析速度更快，占用空间更小14.1.1JSON概述JSON（JavaScriptObje</div> </li> <li><a href="/article/1885455609780826112.htm" title="【SpringMVC】——Json数据交互处理" target="_blank">【SpringMVC】——Json数据交互处理</a> <span class="text-muted">Y小夜</span> <a class="tag" taget="_blank" href="/search/ssm%E6%A1%86%E6%9E%B6/1.htm">ssm框架</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a> <div>个人主页：【Y小夜】作者简介：一位双非学校的大二学生，编程爱好者，专注于基础和实战分享，欢迎私信咨询！入门专栏：【MySQL，Java基础，Rust】热门专栏：【Python，Javaweb，Vue框架】感谢您的点赞、关注、评论、收藏、是对我最大的认可和支持！❤️目录Json概述Json构成要素JSON与JavaScript的关系JSON的优点JSON的应用JSON工具的使用返回json字符串统一</div> </li> <li><a href="/article/1885451704573423616.htm" title="【Numpy核心编程攻略：Python数据处理、分析详解与科学计算】1.25 视觉风暴：NumPy驱动数据可视化" target="_blank">【Numpy核心编程攻略：Python数据处理、分析详解与科学计算】1.25 视觉风暴：NumPy驱动数据可视化</a> <span class="text-muted">精通代码大仙</span> <a class="tag" taget="_blank" href="/search/numpy/1.htm">numpy</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/numpy/1.htm">numpy</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">信息可视化</a> <div>1.25视觉风暴：NumPy驱动数据可视化目录视觉风暴：NumPy驱动数据可视化百万级点云实时渲染优化CT医学影像三维重建实战交互式数据分析看板开发地理空间数据可视化进阶WebAssembly前端渲染融合1.25.1百万级点云实时渲染优化1.25.2CT医学影像三维重建实战1.25.3交互式数据分析看板开发1.25.4地理空间数据可视化进阶1.25.5WebAssembly前端渲染融合视觉风暴：N</div> </li> <li><a href="/article/1885450693288980480.htm" title="【自学笔记】JavaWeb的重点知识点-持续更新" target="_blank">【自学笔记】JavaWeb的重点知识点-持续更新</a> <span class="text-muted">Long_poem</span> <a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/web/1.htm">web</a> <div>提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录JavaWeb知识点一、基础概念二、项目结构三、Tomcat服务器四、数据库连接（JDBC）五、前端技术六、高级技术总结以下是JavaWeb知识点的MD格式罗列：JavaWeb知识点一、基础概念静态Web与动态Web静态Web：页面内容固定不变，每次访问都返回相同的内容。动态Web：页面内容可以根据请求或用户输入而变化。网站访</div> </li> <li><a href="/article/1885448670510379008.htm" title="Elementui 中el-form表单中的ref是干嘛用的" target="_blank">Elementui 中el-form表单中的ref是干嘛用的</a> <span class="text-muted">serve the people</span> <a class="tag" taget="_blank" href="/search/%E6%97%A5%E5%B8%B8%E7%90%90%E9%97%AE/1.htm">日常琐问</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>在ElementUI的el-form组件中，ref是用来获取对该表单组件的引用的属性。通过给el-form添加ref属性，你可以在Vue组件中通过引用来访问和操作这个表单组件，而不需要通过DOM查询或其他方式。使用ref属性可以在Vue组件的JavaScript部分直接访问el-form的实例，从而可以进行一系列操作，如表单验证、重置、获取表单数据等。以下是一个使用ref属性的示例：提交重置exp</div> </li> <li><a href="/article/1885408809002790912.htm" title="基于HarmonyOS 5.0 Next的应用开发设计模式与前端框架的架构整合与实践【附代码实例】" target="_blank">基于HarmonyOS 5.0 Next的应用开发设计模式与前端框架的架构整合与实践【附代码实例】</a> <span class="text-muted">一键难忘</span> <a class="tag" taget="_blank" href="/search/%E7%B2%BE%E9%80%9AAI%E5%AE%9E%E6%88%98%E5%8D%83%E4%BE%8B%E4%B8%93%E6%A0%8F%E5%90%88%E9%9B%86/1.htm">精通AI实战千例专栏合集</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>文章目录HarmonyOS5.0Next应用开发：架构设计中的设计模式与前端框架设计HarmonyOS5.0Next概览设计模式在HarmonyOS应用开发中的应用单例模式工厂模式观察者模式设计模式的使用分层架构设计1.公共能力层（CommonLayer）2.基础特性层（FeatureLayer）3.产品定制层（ProductLayer）模块化设计1.模块化结构2.模块化代码示例前端框架的设计Ar</div> </li> <li><a href="/article/1885390277267484672.htm" title="《亿级流量下的架构实战：HTTP全链路解析与智能监控系统搭建》" target="_blank">《亿级流量下的架构实战：HTTP全链路解析与智能监控系统搭建》</a> <span class="text-muted">我的青春不太冷</span> <a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/http/1.htm">http</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C%E5%8D%8F%E8%AE%AE/1.htm">网络协议</a><a class="tag" taget="_blank" href="/search/%E7%A7%91%E6%8A%80/1.htm">科技</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>文章目录全链路解析：HTTP请求响应与数据可视化监控一、HTTP请求响应全流程解析1.全链路交互流程图2.关键技术实现2.1前端请求构造（ES6+语法示例）2.2服务端处理架构（Node.js/Express）二、数据可视化监控方案1.数据存储架构设计2.数据库操作层实现3.管理界面实现方案3.1可视化看板路由//routes/admin.js3.2数据可视化模板（EJS示例）4.最佳实践建议4.</div> </li> <li><a href="/article/1885374889087528960.htm" title="Vue - 自定义Hooks" target="_blank">Vue - 自定义Hooks</a> <span class="text-muted">来一碗刘肉面</span> <a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>在Vue3中，自定义Hooks是一个强大的功能，允许开发者封装和重用逻辑。在Vue中它们通常通过组合式API实现。通过自定义Hooks，可以将复杂的逻辑封装在一个函数中，便于在多个组件之间共享。自定义Hooks是一个普通的JavaScript函数/TypeScript函数（js或ts），通常以use开头，并且它会使用Vue的响应式API，如ref、reactive、computed、watch等。</div> </li> <li><a href="/article/1885374510740336640.htm" title="Vue - route路由（router-link、useRoute、useRouter）" target="_blank">Vue - route路由（router-link、useRoute、useRouter）</a> <span class="text-muted">来一碗刘肉面</span> <a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>为了避免反复在app.vue中去修改引入的路径，当用了新的页面，想切换回老页面的时候，都需要去手动改变路径，那么有没有一种可能，可以在一个地方，把这些组件配置好，然后通过不同的路径，就去访问不同的组件呢？vuerouter就提供了这个功能，翻译一下，router：路由，vuerouter，vue的路由。单页面应用：SPASPA的核心思想是将应用划分为多个组件，通过前端路由来控制不同组件的显示，实现</div> </li> <li><a href="/article/1885363289643347968.htm" title="优化冗余代码：提升前端项目开发效率的实用方法" target="_blank">优化冗余代码：提升前端项目开发效率的实用方法</a> <span class="text-muted">三掌柜666</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E6%B1%87%E6%80%BB/1.htm">web前端知识汇总</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>目录前言代码复用与组件化模块化开发与代码分割工具辅助与自动化结束语前言在前端开发中，我们常常会遇到代码冗余的问题，这不仅增加了代码量，还影响了项目的可维护性和开发效率。还有就是有时候会接到紧急业务需求，要求立马完成上线，这时候多人协作开发，代码质量不会很高，很多都是复制粘贴;亦或是接手的代码比较老旧，公共组件里面写了大量冗余代码，这种情况下时间越久，开发起来就越难受。那么本文将结合实际项目案例，分</div> </li> <li><a href="/article/1885356857632026624.htm" title="前端学习-事件解绑，mouseover和mouseenter的区别(二十九)" target="_blank">前端学习-事件解绑，mouseover和mouseenter的区别(二十九)</a> <span class="text-muted">marshalVS</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>目录前言解绑事件语法鼠标经过事件的区别鼠标经过事件示例代码两种注册事件的区别总结前言人道洛阳花似锦，偏我来时不逢春解绑事件on事件方式，直接使用null覆盖就可以实现事件的解绑语法btn.onclick=function(){alert('点击了')}btn.onclick=null;constben=document.querySelector('button');ben.addEventLis</div> </li> <li><a href="/article/1885354459828121600.htm" title="毕设开源 python大数据旅游数据分析可视化系统(源码分享)" target="_blank">毕设开源 python大数据旅游数据分析可视化系统(源码分享)</a> <span class="text-muted">bee_dc</span> <a class="tag" taget="_blank" href="/search/%E6%AF%95%E4%B8%9A%E8%AE%BE%E8%AE%A1/1.htm">毕业设计</a><a class="tag" taget="_blank" href="/search/%E6%AF%95%E8%AE%BE/1.htm">毕设</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>文章目录0前言1课题背景2数据处理3数据可视化工具3.1django框架介绍3.2ECharts4Django使用echarts进行可视化展示（mysql数据库）4.1修改setting.py连接mysql数据库4.2导入数据4.3使用echarts可视化展示5实现效果5.1前端展示5.2后端展示6最后0前言这两年开始毕业设计和毕业答辩的要求和难度不断提升，传统的毕设题目缺少创新和亮点，往往达不到</div> </li> <li><a href="/article/1885344620628471808.htm" title="ecmascript标准" target="_blank">ecmascript标准</a> <span class="text-muted">周盛欢</span> <a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>一、什么是ECMAScriptECMAScript是一种脚本语言的标准，由EcmaInternational组织制定。简单来说，它就是JavaScript的“官方规范”，规定了JavaScript语言的语法和行为。就像英语有语法一样，JavaScript也有自己的“语法书”，而ECMAScript就是这本“语法书”。二、为什么需要ECMAScript以前，不同的浏览器（比如Chrome、Firef</div> </li> <li><a href="/article/1885342351568728064.htm" title="2025蛇年喜庆HTML5代码" target="_blank">2025蛇年喜庆HTML5代码</a> <span class="text-muted">学习&实践爱好者</span> <a class="tag" taget="_blank" href="/search/HTML5%E4%B8%8ECSS3/1.htm">HTML5与CSS3</a><a class="tag" taget="_blank" href="/search/JavaScrip%E6%8A%80%E6%9C%AF/1.htm">JavaScrip技术</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E5%AE%9E%E8%B7%B5%E7%B3%BB%E5%88%97/1.htm">编程实践系列</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>2025蛇年喜庆HTML5代码以下是一个简单的HTML5+CSS+JavaScript代码示例，用于庆祝2025年蛇年。先看效果图：源码如下：2025年蛇年快乐！body{font-family:'Arial',sans-serif;background-color:#0a0a23;/*深蓝色背景*/color:#ffffff;/*白色文字*/text-align:center;margin:0;</div> </li> <li><a href="/article/1885325708717256704.htm" title="java 字符串日期字段格式化前端显示" target="_blank">java 字符串日期字段格式化前端显示</a> <span class="text-muted">qq_36608622</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在Java应用程序中，如果你有一个字符串类型的日期字段，并希望将其格式化后显示在前端，可以通过多种方式实现。这通常涉及到在后端将字符串转换为Date或LocalDateTime等对象，然后使用适当的注解或配置来确保它们以正确的格式序列化为JSON发送到前端。以下是几种常见方法：方法一：使用@JsonFormat注解(Jackson)如果你使用的是Jackson来处理JSON序列化和反序列化，可以在</div> </li> <li><a href="/article/1885323687482159104.htm" title="前端知识速记—JS篇：箭头函数" target="_blank">前端知识速记—JS篇：箭头函数</a> <span class="text-muted">无限大.</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E9%80%9F%E8%AE%B0/1.htm">前端知识速记</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前端知识速记—JS篇：箭头函数什么是箭头函数？箭头函数是ES6引入的一种新的函数书写方式，其语法更为简洁，常用于替代传统的函数表达式。箭头函数的基本语法如下：constfunctionName=(parameters)=>{//函数体};通过这种方式，开发者可以以更简练的形式定义函数，提高代码的可读性。箭头函数的基本特性1.简化语法箭头函数最直接的优势就是语法简单，特别是在定义短小的函数时，能显著</div> </li> <li><a href="/article/1885321292459077632.htm" title="Vue.js 组合函数（Composables）" target="_blank">Vue.js 组合函数（Composables）</a> <span class="text-muted">轻口味</span> <a class="tag" taget="_blank" href="/search/VUE.JS/1.htm">VUE.JS</a><a class="tag" taget="_blank" href="/search/%E5%85%A5%E9%97%A8%E4%B8%8E%E5%AE%9E%E8%B7%B5/1.htm">入门与实践</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>Vue.js组合函数（Composables）今天我们来聊聊Vue3中的一个重要概念：组合式函数（Composables）。如果你对如何在Vue3中复用有状态逻辑感兴趣，那么这篇文章将为你解答。什么是组合式函数？在Vue应用中，组合式函数是利用Vue的组合式API（CompositionAPI）来封装和复用有状态逻辑的函数。这使得我们可以将组件的逻辑提取到独立的函数中，从而在不同的组件之间共享和复</div> </li> <li><a href="/article/1885312200348856320.htm" title="刷题前必学！链表！用JavaScript学数据结构与算法" target="_blank">刷题前必学！链表！用JavaScript学数据结构与算法</a> <span class="text-muted"></span> <div>‍JavaScript数据结构与算法-HowieCong务必要熟悉JavaScript使用再来学！一、链表的基本形态链表和数组都是有序的列表，都是线性结构（有且仅有一个前驱，有且仅有一个后续）；不同点在于，链表中，数据单位的名称叫做“结点”，而结点和结点的分布，在内存中都是离散的1.数组的“连续”在内存中最为关键的一个特征，就是对应一段位于自身上界和下界之间的，一段连续的内存空间。元素与元素之间，</div> </li> <li><a href="/article/1885305774884843520.htm" title="ambari-server页面错位问题解决" target="_blank">ambari-server页面错位问题解决</a> <span class="text-muted">王木头</span> <a class="tag" taget="_blank" href="/search/ambari/1.htm">ambari</a><a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>背景：项目新安装的ambari集群页面错位如下解决办法（临时）：修改ambari-server的前端文件：/usr/lib/ambari-server/web/javascripts/app.js原代码：initNavigationBar:function(){if(App.get('router.mainController.isClusterDataLoaded')){$('body').on</div> </li> <li><a href="/article/1885302496662974464.htm" title="如何优化代码性能？" target="_blank">如何优化代码性能？</a> <span class="text-muted">杨胜增</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a> <div>优化代码性能是编程中的一个重要课题，无论是在处理大量数据的后台服务，还是在资源受限的前端应用中，都需要高效的代码。优化代码性能不仅仅是让代码跑得更快，还要保持代码的可读性、可维护性和可扩展性。下面我将从多个角度来探讨如何优化代码性能：1.算法优化算法是影响性能的核心。如果用最简单的方式解决问题，可能会导致性能瓶颈。因此，首先需要选择合适的算法。时间复杂度：使用更高效的算法来替代低效的算法。例如，排</div> </li> <li><a href="/article/1885301990288846848.htm" title="前端的核心技术" target="_blank">前端的核心技术</a> <span class="text-muted">善良的小乔</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>前端开发的核心技术主要围绕HTML、CSS、JavaScript三大基础语言展开，同时结合现代前端开发的需求，还包括前端框架、构建工具、前端安全和性能优化等内容。下面，我们详细解析前端开发中的核心技术。一.HTML（超文本标记语言）详解HTML（HyperTextMarkupLanguage）是前端开发的基础，用于构建网页的结构。HTML由各种标签（Tag）组成，每个标签都有不同的作用，主要用于定</div> </li> <li><a href="/article/1885296818485522432.htm" title="CSS3网页加载进度条特效：13种炫酷实现" target="_blank">CSS3网页加载进度条特效：13种炫酷实现</a> <span class="text-muted">laforet</span> <div>本文还有配套的精品资源，点击获取简介：本文深入探讨CSS3在网页加载进度条设计中的应用，包括动画、选择器、边框半径、过渡和阴影等新特性。通过介绍13种不同的进度条特效代码，指导开发者如何结合JavaScript实现丰富的进度显示效果，提升用户体验。详细描述了进度条的外观设计和动态效果，如计数器进度条、顶部进度条、背景进度条，并展示了利用Flexbox、Grid布局、Transforms、阴影和渐变</div> </li> <li><a href="/article/1885289748889661440.htm" title="使用CSS实现一个加载的进度条" target="_blank">使用CSS实现一个加载的进度条</a> <span class="text-muted">eqa11</span> <a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E8%BF%9B%E5%BA%A6%E6%9D%A1/1.htm">进度条</a> <div>文章目录使用CSS实现一个加载的进度条一、引言二、步骤一：HTML结构与CSS基础样式1、HTML结构2、CSS基础样式三、步骤二：添加动画效果1、使用CSS动画2、结合JavaScript控制动画四、使用示例五、总结使用CSS实现一个加载的进度条一、引言在现代网页设计中，加载速度对用户体验至关重要。为了提升用户体验，加载进度条成为了一个常见的交互元素。它不仅能告知用户页面加载的进度，还能减少用户</div> </li> <li><a href="/article/32.htm" title="对于规范和实现，你会混淆吗？" target="_blank">对于规范和实现，你会混淆吗？</a> <span class="text-muted">yangshangchuan</span> <a class="tag" taget="_blank" href="/search/HotSpot/1.htm">HotSpot</a> <div>昨晚和朋友聊天，喝了点咖啡，由于我经常喝茶，很长时间没喝咖啡了，所以失眠了，于是起床读JVM规范，读完后在朋友圈发了一条信息： JVM Run-Time Data Areas：The Java Virtual Machine defines various run-time data areas that are used during execution of a program. So</div> </li> <li><a href="/article/159.htm" title="android 网络" target="_blank">android 网络</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a> <div>android的网络编程和java的一样没什么好分析的都是一些死的照着写就可以了,所以记录下来方便查找 , 服务器使用的是TomCat 服务器代码; servlet的使用需要在xml中注册 package servlet; import java.io.IOException; import java.util.Arr</div> </li> <li><a href="/article/286.htm" title="[读书笔记]读法拉第传" target="_blank">[读书笔记]读法拉第传</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/1.htm">读书笔记</a> <div> 1831年的时候,一年可以赚到1000英镑的人..应该很少的... 要成为一个科学家,没有足够的资金支持,很多实验都无法完成但是当钱赚够了以后....就不能够一直在商业和市场中徘徊......</div> </li> <li><a href="/article/413.htm" title="随机数的产生" target="_blank">随机数的产生</a> <span class="text-muted">沐刃青蛟</span> <a class="tag" taget="_blank" href="/search/%E9%9A%8F%E6%9C%BA%E6%95%B0/1.htm">随机数</a> <div>c++中阐述随机数的方法有两种：一是产生假随机数（不管操作多少次，所产生的数都不会改变）这类随机数是使用了默认的种子值产生的，所以每次都是一样的。 //默认种子 for (int i = 0; i < 5; i++) { cout<<</div> </li> <li><a href="/article/540.htm" title="PHP检测函数所在的文件名" target="_blank">PHP检测函数所在的文件名</a> <span class="text-muted">IT独行者</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0/1.htm">函数</a> <div>很简单的功能，用到PHP中的反射机制，具体使用的是ReflectionFunction类，可以获取指定函数所在PHP脚本中的具体位置。创建引用脚本。代码： [php] view plain copy // Filename: functions.php <?php&nbs</div> </li> <li><a href="/article/667.htm" title="银行各系统功能简介" target="_blank">银行各系统功能简介</a> <span class="text-muted">文强chu</span> <a class="tag" taget="_blank" href="/search/%E9%87%91%E8%9E%8D/1.htm">金融</a> <div>银行各系统功能简介　业务系统核心业务系统业务功能包括：总账管理、卡系统管理、客户信息管理、额度控管、存款、贷款、资金业务、国际结算、支付结算、对外接口等清分清算系统以清算日期为准，将账务类交易、非账务类交易的手续费、代理费、网络服务费等相关费用，按费用类型计算应收、应付金额，经过清算人员确认后上送核心系统完成结算的过程国际结算系</div> </li> <li><a href="/article/794.htm" title="Python学习1(pip django 安装以及第一个project)" target="_blank">Python学习1(pip django 安装以及第一个project)</a> <span class="text-muted">小桔子</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/pip/1.htm">pip</a> <div> 最近开始学习python,要安装个pip的工具。听说这个工具很强大，安装了它，在安装第三方工具的话so easy!然后也下载了，按照别人给的教程开始安装，奶奶的怎么也安装不上！第一步：官方下载pip-1.5.6.tar.gz, https://pypi.python.org/pypi/pip easy! 第二部：解压这个压缩文件，会看到一个setup.p</div> </li> <li><a href="/article/921.htm" title="php 数组" target="_blank">php 数组</a> <span class="text-muted">aichenglong</span> <a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F/1.htm">排序</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84/1.htm">数组</a><a class="tag" taget="_blank" href="/search/%E5%BE%AA%E7%8E%AF/1.htm">循环</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BB%B4%E6%95%B0%E7%BB%84/1.htm">多维数组</a> <div>1 php中的创建数组 $product = array('tires','oil','spark');//array()实际上是语言结构而不是函数 2 如果需要创建一个升序的排列的数字保存在一个数组中，可以使用range()函数来自动创建数组 $numbers=range(1,10)//1 2 3 4 5 6 7 8 9 10 $numbers=range(1,10,</div> </li> <li><a href="/article/1048.htm" title="安装python2.7" target="_blank">安装python2.7</a> <span class="text-muted">AILIKES</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>安装python2.7 1、下载可从 http://www.python.org/进行下载#wget https://www.python.org/ftp/python/2.7.10/Python-2.7.10.tgz 2、复制解压 #mkdir -p /opt/usr/python #cp /opt/soft/Python-2</div> </li> <li><a href="/article/1175.htm" title="java异常的处理探讨" target="_blank">java异常的处理探讨</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/JAVA%E5%BC%82%E5%B8%B8/1.htm">JAVA异常</a> <div>//java异常 /* 1，了解java 中的异常处理机制，有三种操作 a,声明异常 b,抛出异常 c,捕获异常 2，学会使用try-catch-finally来处理异常 3，学会如何声明异常和抛出异常 4，学会创建自己的异常 */ //2，学会使用try-catch-finally来处理异常 </div> </li> <li><a href="/article/1302.htm" title="getElementsByName实例" target="_blank">getElementsByName实例</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/element/1.htm">element</a> <div>实例1： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x</div> </li> <li><a href="/article/1429.htm" title="探索JUnit4扩展：Runner" target="_blank">探索JUnit4扩展：Runner</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a><a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a> <div> 参加敏捷培训时，教练提到Junit4的Runner和Rule，于是特上网查一下，发现很多都讲的太理论，或者是举的例子实在是太牵强。多搜索了几下，搜索到两篇我觉得写的非常好的文章。文章地址：http://www.blogjava.net/jiangshachina/archive/20</div> </li> <li><a href="/article/1556.htm" title="[MongoDB学习笔记二]MongoDB副本集" target="_blank">[MongoDB学习笔记二]MongoDB副本集</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>1. 副本集的特性 1)一台主服务器(Primary),多台从服务器(Secondary) 2)Primary挂了之后，从服务器自动完成从它们之中选举一台服务器作为主服务器，继续工作，这就解决了单点故障，因此，在这种情况下，MongoDB集群能够继续工作 3)挂了的主服务器恢复到集群中只能以Secondary服务器的角色加入进来 2</div> </li> <li><a href="/article/1683.htm" title="【Spark八十一】Hive in the spark assembly" target="_blank">【Spark八十一】Hive in the spark assembly</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/assembly/1.htm">assembly</a> <div>Spark SQL supports most commonly used features of HiveQL. However, different HiveQL statements are executed in different manners: 1. DDL statements (e.g. CREATE TABLE, DROP TABLE, etc.)</div> </li> <li><a href="/article/1810.htm" title="Nginx问题定位之监控进程异常退出" target="_blank">Nginx问题定位之监控进程异常退出</a> <span class="text-muted">ronin47</span> <div>nginx在运行过程中是否稳定，是否有异常退出过？这里总结几项平时会用到的小技巧。 1. 在error.log中查看是否有signal项，如果有，看看signal是多少。比如，这是一个异常退出的情况： $grep signal error.log 2012/12/24 16:39:56 [alert] 13661#0: worker process 13666 exited on s</div> </li> <li><a href="/article/1937.htm" title="No grammar constraints (DTD or XML schema).....两种解决方法" target="_blank">No grammar constraints (DTD or XML schema).....两种解决方法</a> <span class="text-muted">byalias</span> <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>方法一：常用方法关闭XML验证工具栏：windows => preferences => xml => xml files => validation => Indicate when no grammar is specified:选择Ignore即可。方法二：（个人推荐）添加内容如下 <?xml version=</div> </li> <li><a href="/article/2064.htm" title="Netty源码学习-DefaultChannelPipeline" target="_blank">Netty源码学习-DefaultChannelPipeline</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/netty/1.htm">netty</a> <div>package com.ljn.channel; /** * ChannelPipeline采用的是Intercepting Filter 模式 * 但由于用到两个双向链表和内部类，这个模式看起来不是那么明显，需要仔细查看调用过程才发现 * * 下面对ChannelPipeline作一个模拟，只模拟关键代码： */ public class Pipeline { </div> </li> <li><a href="/article/2191.htm" title="MYSQL数据库常用备份及恢复语句" target="_blank">MYSQL数据库常用备份及恢复语句</a> <span class="text-muted">chicony</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div> 备份MySQL数据库的命令，可以加选不同的参数选项来实现不同格式的要求。 mysqldump -h主机 -u用户名 -p密码数据库名 > 文件备份MySQL数据库为带删除表的格式，能够让该备份覆盖已有数据库而不需要手动删除原有数据库。 mysqldump -–add-drop-table -uusername -ppassword databasename > ba</div> </li> <li><a href="/article/2318.htm" title="小白谈谈云计算--基于Google三大论文" target="_blank">小白谈谈云计算--基于Google三大论文</a> <span class="text-muted">CrazyMizzz</span> <a class="tag" taget="_blank" href="/search/Google/1.htm">Google</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E8%AE%A1%E7%AE%97/1.htm">云计算</a><a class="tag" taget="_blank" href="/search/GFS/1.htm">GFS</a> <div> 之前在没有接触到云计算之前，只是对云计算有一点点模糊的概念，觉得这是一个很高大上的东西，似乎离我们大一的还很远。后来有机会上了一节云计算的普及课程吧，并且在之前的一周里拜读了谷歌三大论文。不敢说理解，至少囫囵吞枣啃下了一大堆看不明白的理论。现在就简单聊聊我对于云计算的了解。我先说说GFS &n</div> </li> <li><a href="/article/2445.htm" title="hadoop 平衡空间设置方法" target="_blank">hadoop 平衡空间设置方法</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/balancer/1.htm">balancer</a> <div>在hdfs-site.xml中增加设置balance的带宽，默认只有1M： <property> <name>dfs.balance.bandwidthPerSec</name> <value>10485760</value> <description&g</div> </li> <li><a href="/article/2572.htm" title="Eclipse程序员要掌握的常用快捷键" target="_blank">Eclipse程序员要掌握的常用快捷键</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a> <div> 判断一个人的编程水平，就看他用键盘多，还是鼠标多。用键盘一是为了输入代码（当然了，也包括注释），再有就是熟练使用快捷键。曾有人在豆瓣评《卓有成效的程序员》：“人有多大懒，才有多大闲”。之前我整理了一个程序员图书列表，目的也就是通过读书，让程序员变懒。程序员作为特殊的群体，有的人可以这么懒，懒到事情都交给机器去做，而有的人又可以那么勤奋，每天都孜孜不倦得</div> </li> <li><a href="/article/2699.htm" title="Android学习之路" target="_blank">Android学习之路</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/Android%E5%AD%A6%E4%B9%A0/1.htm">Android学习</a> <div>转自：http://blog.csdn.net/ryantang03/article/details/6901459 以前有J2EE基础，接触JAVA也有两三年的时间了，上手Android并不困难，思维上稍微转变一下就可以很快适应。以前做的都是WEB项目，现今体验移动终端项目，让我越来越觉得移动互联网应用是未来的主宰。下面说说我学习Android的感受，我学Android首先是看MARS的视</div> </li> <li><a href="/article/2826.htm" title="java 遍历Map的四种方法" target="_blank">java 遍历Map的四种方法</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/HashMap/1.htm">HashMap</a><a class="tag" taget="_blank" href="/search/java+%E9%81%8D%E5%8E%86Map%E7%9A%84%E5%9B%9B%E7%A7%8D%E6%96%B9%E6%B3%95/1.htm">java 遍历Map的四种方法</a> <div>转载请出自出处： http://eksliang.iteye.com/blog/2059996 package com.ickes; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Map.Entry; /** * 遍历Map的四种方式 </div> </li> <li><a href="/article/2953.htm" title="【精典】数据库相关相关" target="_blank">【精典】数据库相关相关</a> <span class="text-muted">gengzg</span> <a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>package C3P0; import java.sql.Connection; import java.sql.SQLException; import java.beans.PropertyVetoException; import com.mchange.v2.c3p0.ComboPooledDataSource; public class DBPool{ </div> </li> <li><a href="/article/3080.htm" title="自动补全" target="_blank">自动补全</a> <span class="text-muted">huyana_town</span> <a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E8%A1%A5%E5%85%A8/1.htm">自动补全</a> <div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo</div> </li> <li><a href="/article/3207.htm" title="jquery在线预览PDF文件，打开PDF文件" target="_blank">jquery在线预览PDF文件，打开PDF文件</a> <span class="text-muted">天梯梦</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a> <div>最主要的是使用到了一个jquery的插件jquery.media.js，使用这个插件就很容易实现了。核心代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.</div> </li> <li><a href="/article/3334.htm" title="ViewPager刷新单个页面的方法" target="_blank">ViewPager刷新单个页面的方法</a> <span class="text-muted">lovelease</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/viewpager/1.htm">viewpager</a><a class="tag" taget="_blank" href="/search/tag/1.htm">tag</a><a class="tag" taget="_blank" href="/search/%E5%88%B7%E6%96%B0/1.htm">刷新</a> <div> 使用ViewPager做滑动切换图片的效果时，如果图片是从网络下载的，那么再子线程中下载完图片时我们会使用handler通知UI线程，然后UI线程就可以调用mViewPager.getAdapter().notifyDataSetChanged()进行页面的刷新，但是viewpager不同于listview，你会发现单纯的调用notifyDataSetChanged()并不能刷新页面</div> </li> <li><a href="/article/3461.htm" title="利用按位取反（~）从复合枚举值里清除枚举值" target="_blank">利用按位取反（~）从复合枚举值里清除枚举值</a> <span class="text-muted">草料场</span> <a class="tag" taget="_blank" href="/search/enum/1.htm">enum</a> <div>以 C# 中的 System.Drawing.FontStyle 为例。如果需要同时有多种效果，如：“粗体”和“下划线”的效果，可以用按位或（|） FontStyle style = FontStyle.Bold | FontStyle.Underline; 如果需要去除 style 里的某一种效果， </div> </li> <li><a href="/article/3588.htm" title="Linux系统新手学习的11点建议" target="_blank">Linux系统新手学习的11点建议</a> <span class="text-muted">刘星宇</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a> <div>　　随着Linux应用的扩展许多朋友开始接触Linux，根据学习Windwos的经验往往有一些茫然的感觉：不知从何处开始学起。这里介绍学习Linux的一些建议。　　一、从基础开始：常常有些朋友在Linux论坛问一些问题，不过，其中大多数的问题都是很基础的。例如：为什么我使用一个命令的时候，系统告诉我找不到该目录，我要如何限制使用者的权限等问题，这些问题其实都不是很难的，只要了解了 Linu</div> </li> <li><a href="/article/3715.htm" title="hibernate dao层应用之HibernateDaoSupport二次封装" target="_blank">hibernate dao层应用之HibernateDaoSupport二次封装</a> <span class="text-muted">wangzhezichuan</span> <a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div>/** * <p>方法描述:sql语句查询返回List<Class> </p> * <p>方法备注: Class 只能是自定义类 </p> * @param calzz * @param sql * @return * <p>创建人：王川</p> * <p>创建时间：Jul</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>

Vue基础语法篇

1.1 web前端三大主流框架

1.2 Angular

1.3 React

1.4 Vue

1.5 什么是Vue.js

1.6 为什么要学习流行框架

1.7 框架和库的区别

1.8 mvvm

1.9 Node（后端）中的 MVC 与 前端中的 MVVM 之间的区别

2. 安装：

2.1 CDN

2.2 本地链接

2.3 NPM

2.4 命令行工具 (CLI)

{{msg}}

{{msg}} +'----------'+abc

{{4*8}}

2.5 Vue.js 基本代码 和 MVVM 之间的对应关系

3.0 指令

3.1 v-cloak

3.2 v-text

3.3 v-html

3.4 v-pre

3.5 v-once

3.6 v-on

3.7 v-on事件函数中传入参数

3.8 事件修饰符

3. 9 跑安灯案例

3.10 双向数据绑定

v-model

1.9 Node（后端）中的 MVC 与前端中的 MVVM 之间的区别

2.5 Vue.js 基本代码和 MVVM 之间的对应关系