01.初识vue.js

一、Vue概述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
⚫易用:熟悉HTML、CSS、JavaScript知识后，可快速上手Vue
⚫灵活:在一个库和一套完整框架之间自如伸缩
⚫高效:20kB运行大小，超快虚拟 DOM

二、Vue基本使用

使用Vue将helloworld 渲染到页面上

实例参数分析

el: 元素的挂载位置(值可以是CSS选择器或者DOM元素)
data:模型数据(值是一个对象)

插值表达式用法

将数据填充到HTML标签中
插值表达式支持基本的计算操作

三、Vue模板语法

3.1 指令

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

3.1.1 v-cloak

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

 

  
    
    {{msg}}

3.1.2 数据绑定指令

v-text（填充纯文本，相比插值表达式更加简洁）

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

v-html

用法和v-text 相似但是他可以将HTML片段填充到标签中
可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上
本网站内部数据可以使用，来自第三方（跨域）的数据不可以用

它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。


　　 

    {{message}}

v-pre

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

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

3.1.3 数据响应式

v-once

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

  
     {{ msg}}

3.2 双向数据绑定

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

v-model

v-model是一个指令，限制在、、components</code>中使用</li> </ul> <pre><code> <div id="app"> <div>{{msg}}</div> <div> 当输入框中内容改变的时候，页面上的msg 会自动更新 <input type="text" v-model='msg'> </div> </div> </code></pre> <h3>mvvm</h3> <ul> <li>MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分 Model, View , VM ViewModel</li> <li><p>m model</p> <ul> <li>数据层 Vue 中数据层都放在 data 里面</li> </ul></li> <li><p>v view 视图</p> <ul> <li>Vue 中 view 即我们的HTML页面</li> </ul></li> <li><p>vm （view-model）控制器将数据和视图层建立联系</p> <ul> <li>vm 即 Vue 的实例就是 vm</li> </ul></li> </ul> <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/f53bf69838164c3eaff2eff2404f3a5e.jpg" target="_blank"><img alt="01.初识vue.js_第2张图片" title="image.png" src="http://img.e-com-net.com/image/info9/f53bf69838164c3eaff2eff2404f3a5e.jpg" width="650" height="336" style="border:1px solid black;"></a></span></p> <h4>3.3 事件绑定</h4> <h5>v-on</h5> <ul> <li>用来绑定事件的</li> <li>形式如：<code>v-on:click</code> 缩写为 <code>@click</code>;</li> </ul> <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/063c7961c1c3438fac61fb0122245542.jpg" target="_blank"><img alt="01.初识vue.js_第3张图片" title="image" src="http://img.e-com-net.com/image/info9/063c7961c1c3438fac61fb0122245542.jpg" width="544" height="800" style="border:1px solid black;"></a></span></p> <h5>v-on事件函数中传入参数</h5> <pre><code> <body> <div id="app"> <div>{{num}}</div> <div>  <button v-on:click='handle1'>点击1</button>  <button v-on:click='handle2(123, 456, $event)'>点击2</button> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: '#app', data: { num: 0 }, methods: { handle1: function(event) { console.log(event.target.innerHTML) }, handle2: function(p, p1, event) { console.log(p, p1) console.log(event.target.innerHTML) this.num++; } } }); </script> </code></pre> <h5>事件修饰符</h5> <ul> <li>在事件处理程序中调用 <code>event.preventDefault()</code> 或 <code>event.stopPropagation()</code> 是非常常见的需求。</li> <li>Vue 不推荐我们操作DOM 为了解决这个问题，Vue.js 为 <code>v-on</code> 提供了<strong>事件修饰符</strong></li> <li>修饰符是由点开头的指令后缀来表示的</li> </ul> <pre><code>阻止单击事件继续传播(冒泡) <a v-on:click.stop="doThis"></a> 提交事件不再重载页面 <form v-on:submit.prevent="onSubmit"></form> 修饰符可以串联即阻止冒泡也阻止默认事件 <a v-on:click.stop.prevent="doThat"></a> 只有当在 event.target （点击的）是当前元素自身时才会触发处理函数即事件不是从内部元素触发冒泡上来的 <div v-on:click.self="doThat">...</div> </code></pre> <h5>按键修饰符</h5> <ul> <li>在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 <code>v-on</code> 在监听键盘事件时添加按键修饰符</li> </ul> <pre><code> <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 => 右 <script> var vm = new Vue({ el:"#app", methods: { submit:function(){}, alertMe:function(){}, } }) </script> </code></pre> <h5>自定义按键修饰符别名</h5> <ul> <li>在Vue中可以通过<code>config.keyCodes</code>自定义按键修饰符别名</li> </ul> <pre><code><div id="app"> 预先定义了keycode 116（即F5）的别名为f5，因此在文字输入框中按下F5，会触发prompt方法其实直接用树值，如写v-on:keydown.116="prompt()"，效果是一致的，但是为按键自定义一个名称比较直观和语义化 <input type="text" v-on:keydown.f5="prompt()"> </div> <script> Vue.config.keyCodes.f5 = 116; let app = new Vue({ el: '#app', methods: { prompt: function() { alert('我是 F5！'); } } }); </script> </code></pre> <h4>3.4 属性绑定</h4> <h5>v-bind</h5> <ul> <li><code>v-bind</code> 指令被用来响应地更新 HTML 属性</li> <li><code>v-bind:href</code> 可以缩写为 <code>:href</code>;</li> </ul> <pre><code> <img v-bind:src="imageSrc">  <img :src="imageSrc"> </code></pre> <h4>3.5 样式绑定</h4> <ol> <li>class样式处理</li> </ol> <ul> <li>对象语法<br><code><div v-bind:class="{ active: isActive }"></div></code><br>isActive的值是布尔值，控制类名是否添加到标签上，类似toggleClass方法</li> <li>数组语法<br><code><div v-bind:class="[activeClass, errorClass]"></div></code><br>activeClass和errorClass的值会被分别添加到样式名中</li> </ul> <ol> <li>style样式处理</li> </ol> <ul> <li>对象语法<br><code><div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div></code></li> <li>数组语法<br><code><div v-bind:style="[baseStyles, overridingStyles]"></div></code></li> </ul> <h6>绑定对象</h6> <ul> <li>我们可以给v-bind:class 一个对象，以动态地切换class。</li> <li>注意：v-bind:class指令可以与普通的class特性共存</li> </ul> <pre><code>1、 v-bind 中支持绑定一个对象如果绑定的是一个对象则键为对应的类名值为对应data中的数据  <ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}"> <li>学习Vue</li> <li>学习Node</li> <li>学习React</li> </ul> <div :class="objClasses">对象语法简化操作</div> <sript> var vm= new Vue({ el:'.box', data:{ isColor:true, isSize:true， objClasses:{ //绑定该属性的标签实际效果为： class="objColor objSize" objColor:true, objSize:true } } }) </sript> <style> .box{ border:1px dashed #f0f; } .textColor{ color:#f00; background-color:#eef; } .textSize{ font-size:30px; font-weight:bold; } </style> </code></pre> <h5>绑定数组</h5> <pre><code>2、 v-bind 中支持绑定一个数组数组中classA和 classB 对应为data中的数据这里的classA 对用data 中的 classA 这里的classB 对用data 中的 classB <ul class="box" :class="[classA, classB]"> <li>学习Vue</li> <li>学习Node</li> <li>学习React</li> </ul> <div :class="arrClasses">数组语法绑定简化操作</div> <script> var vm= new Vue({ el:'.box', data:{ classA:‘textColor‘, classB:‘textSize‘, arrClasses:["textColor","textSize"] } }) </script> <style> .box{ border:1px dashed #f0f; } .textColor{ color:#f00; background-color:#eef; } .textSize{ font-size:30px; font-weight:bold; } </style> </code></pre> <h5>绑定对象和绑定数组的区别</h5> <p>它们可以结合使用，如<code>:class="[activeClass,errorClass,{test:isTest}]"</code></p> <ul> <li>绑定对象的时候，对象的属性就是要渲染的类名，对象的属性值对应的是 data中的数据</li> <li>绑定数组的时候数组里面存的是data中的数据</li> </ul> <h5>绑定style</h5> <pre><code> <div v-bind:style="styleObject">绑定样式对象</div>'  <div v-bind:style="{ color: activeColor, fontSize: fontSize,background:'red' }">内联样式</div>  <div v-bind:style="[styleObj1, styleObj2]"></div> <script> new Vue({ el: '#app', data: { styleObject: { color: 'green', fontSize: '30px', background: 'red' }, styleObj1: { color: 'red', width: '100px' }, styleObj2: { fontSize: '30px' }, activeColor: 'green', fontSize: "30px" } }) </script> </code></pre> <h4>3.6 分支结构</h4> <h5>v-if 使用场景</h5> <ul> <li>1- 多个元素通过条件判断展示或者隐藏某个元素。或者多个元素</li> <li>2- 进行两个视图之间的切换</li> </ul> <pre><code><div id="app">  <span v-if="flag"> 如果flag为true则显示,false不显示! </span> </div> <script> var vm = new Vue({ el:"#app", data:{ flag:true } }) </script> ---------------------------------------------------------- <div v-if="type === 'A'"> A </div>  <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div>  <div v-else> Not A/B/C </div> <script> new Vue({ el: '#app', data: { type: 'C' } }) </script> </code></pre> <h6>v-show 和 v-if的区别</h6> <ul> <li><p>v-show本质就是标签display设置为none，控制隐藏</p> <ul> <li>v-show<strong>只编译一次</strong>，后面其实就是控制css，控制元素是否显示(已经渲染到了页面)。而v-if不停的销毁和创建，故v-show<strong>性能更好一点</strong>。</li> </ul></li> <li><p>v-if是<strong>动态地向DOM树内</strong>添加或者删除DOM元素，控制元素是否渲染到页面</p> <ul> <li>v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件</li> </ul></li> </ul> <h4>3.7 循环结构</h4> <h6>v-for</h6> <ul> <li>v-for遍历数组<br><code><li v-for='item in list'>{{item}}</li></code><br><code><li v-for='(item,index) in list'>{{item}} + '---' +{{index}}</li></code></li> <li>key的作用:给每个节点绑定唯一标识(可以是id或者index)，帮助Vue区分不同的元素，从而提高性能。不会加到DOM上，对开发没有影响<br><code><li :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}}</li></code></li> <li>用于循环的数组里面的值可以是对象，也可以是普通元素</li> </ul> <pre><code><ul id="example-1">  <li v-for="item in items"> {{ item.message }} </li> </ul> <script> new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ]， } }) </script> </code></pre> <ul> <li><strong>key的作用主要是为了高效地更新虚拟DOM</strong></li> </ul> <pre><code><ul> <li v-for="item in items" :key="item.id">...</li> </ul> </code></pre> <ul> <li>v-for遍历对象<br><code><div v-for='(value, key, index) in object'></div></code></li> <li>v-if和v-for结合使用<br><code><div v-if='value==12' v-for='(value, key, index) in object'></div></code></li> <li>当 <code>v-if</code> 与 <code>v-for</code> 一起使用时，<code>v-for</code> 具有比 <code>v-if</code> 更高的优先级。即先遍历一遍数组，再判断v-if里面的条件。对于性能并不友好，因此<strong>不推荐</strong>同时使用 <code>v-if</code> 和 <code>v-for</code></li> </ul> <pre><code> <div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div> <script> new Vue({ el: '#example-1', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ]， obj: { uname: 'zhangsan', age: 13, gender: 'female' } } }) </script> </code></pre> <h3>四、选项卡案例</h3> <h4>4.1、 HTML 结构</h4> <pre><code> <div id="app"> <div class="tab">  <ul> <li class="active">apple</li> <li class="">orange</li> <li class="">lemon</li> </ul>  <div class="current"><img src="img/apple.png"></div> <div class=""><img src="img/orange.png"></div> <div class=""><img src="img/lemon.png"></div> </div> </div> </code></pre> <h4>4.2、提供的数据</h4> <pre><code> list: [{ id: 1, title: 'apple', path: 'img/apple.png' }, { id: 2, title: 'orange', path: 'img/orange.png' }, { id: 3, title: 'lemon', path: 'img/lemon.png' }] </code></pre> <p><span class="img-wrap"><a href="http://img.e-com-net.com/image/info9/233cce76e5e44d749025977275446677.jpg" target="_blank"><img alt="01.初识vue.js_第4张图片" title="image.png" src="http://img.e-com-net.com/image/info9/233cce76e5e44d749025977275446677.jpg" width="500" height="300" style="border:1px solid black;"></a></span></p> <h4>4.3、把数据渲染到页面</h4> <ul> <li><p>把tab栏中的数替换到页面上</p> <ul> <li>把 data 中 title 利用 v-for 循环渲染到页面上</li> <li>把 data 中 path利用 v-for 循环渲染到页面上</li> </ul><pre><code> <div id="app"> <div class="tab"> <ul>  <li :key='item.id' v-for='(item,index) in list'>{{item.title}}</li> </ul> <div :key='item.id' v-for='(item, index) in list'>  <img :src="item.path"> </div> </div> </div> <script> new Vue({ // 指定操作元素是 id 为app 的 el: '#app', data: { list: [{ id: 1, title: 'apple', path: 'img/apple.png' }, { id: 2, title: 'orange', path: 'img/orange.png' }, { id: 3, title: 'lemon', path: 'img/lemon.png' }] } }) </script> </code></pre></li> </ul> <h4>4.4、给每一个tab栏添加事件,并让选中的高亮</h4> <ul> <li><p><strong>1.让默认的第一项tab栏高亮</strong></p> <ul> <li><p>tab栏高亮通过添加类名active 来实现（CSS active 的样式已经提前写好）</p> <ul> <li>在data 中定义一个默认的索引 currentIndex 为 0</li> <li><p>给第一个li 添加 active 的类名</p> <ul> <li>通过动态绑定class 来实现第一个li 的索引为 0 和 currentIndex 的值刚好相等</li> <li>currentIndex === index 如果相等则添加类名 active 否则添加空类名</li> </ul></li> </ul></li> </ul></li> <li><p><strong>2.让默认的第一项tab栏对应的div 显示</strong></p> <ul> <li>实现思路和第一个 tab 实现思路一样只不过这里控制第一个div 显示的类名是 current</li> </ul><pre><code> <ul>  <li :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list' >{{item.title}}</li> </ul>  <div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'>  <img :src="item.path"> </div> <script> new Vue({ el: '#app', data: { currentIndex: 0, // 选项卡当前的索引默认为 0 list: [{ id: 1, title: 'apple', path: 'img/apple.png' }, { id: 2, title: 'orange', path: 'img/orange.png' }, { id: 3, title: 'lemon', path: 'img/lemon.png' }] } }) </script> </code></pre></li> <li><p><strong>3.点击每一个tab栏当前的高亮其他的取消高亮</strong></p> <ul> <li>给每一个li添加点击事件</li> <li>让当前的索引 index 和当前 currentIndex 的值进项比较</li> <li><p>如果相等则当前li 添加active 类名当前的 li 高亮当前对应索引的 div 添加 current 当前div 显示其他隐藏</p><pre><code> <div id="app"> <div class="tab"> <ul>  <li v-on:click='change(index)' :class='currentIndex==index?"active":""' :key='item.id' v-for='(item,index) in list'>{{item.title}}</li> </ul> <div :class='currentIndex==index?"current":""' :key='item.id' v-for='(item, index) in list'> <img :src="item.path"> </div> </div> </div> <script> new Vue({ el: '#app', data: { currentIndex: 0, // 选项卡当前的索引默认为 0 list: [{ id: 1, title: 'apple', path: 'img/apple.png' }, { id: 2, title: 'orange', path: 'img/orange.png' }, { id: 3, title: 'lemon', path: 'img/lemon.png' }] }, methods: { change: function(index) { // 通过传入过来的索引来让当前的 currentIndex 和点击的index 值相等 // 从而实现控制类名 this.currentIndex = index; } } }) </script> </code></pre></li> </ul></li> </ul> <p>css样式</p> <pre><code> .tab ul { overflow: hidden; padding: 0; margin: 0; } .tab ul li { box-sizing: border-box; padding: 0; float: left; width: 100px; height: 45px; line-height: 45px; list-style: none; text-align: center; border-top: 1px solid blue; border-right: 1px solid blue; cursor } .tab ul li:first-child { border-left: 1px solid blue; } .tab ul li.active { background-color: orange; } .tab div { width: 500px; height: 300px; display: none; text-align: center; font-size: 30px; line-height: 300px; border: 1px solid blue; border-top: 0px; } .tab div.current { display: block; }</code></pre> </article> </div> </div> </div>  <div id="SOHUCS" sid="1341049147763023872"></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)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1772618299398488064.htm" title="Vue：为什么要使用v-cloak" target="_blank">Vue：为什么要使用v-cloak</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%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>Vue.js是一种流行的JavaScript框架，它使我们能够构建交互性强大的用户界面。在Vue.js中，v-cloak是一个指令，用于解决在页面加载时出现的闪烁问题。本文将介绍如何使用v-cloak及代码来优化Vue.js应用程序的渲染效果。引言当我们使用Vue.js构建应用程序时，有时会遇到一个问题：在页面加载时，由于Vue.js需要一定的时间来解析和渲染模板，会导致页面上显示出未经处理的Mu</div> </li> <li><a href="/article/1772015492328914944.htm" title="如何快速上手Vue框架?" target="_blank">如何快速上手Vue框架?</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%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>要快速上手Vue框架，可以按照以下步骤进行：一、准备工作了解Vue：Vue是一个构建用户界面的渐进式框架，核心库只关注视图层。环境准备：安装Node.js和npm，这是Vue开发的基础环境。二、安装Vue全局安装VueCLI：使用npm全局安装VueCLI，它是一个基于Vue.js进行快速开发的完整系统。npminstall-g@vue/cli三、创建Vue项目使用VueCLI创建新项目：vuec</div> </li> <li><a href="/article/1771792452601053184.htm" title="[套路] 浏览器引入Vue.js场景-WangEditor富文本编辑器的使用 (永久免费)" target="_blank">[套路] 浏览器引入Vue.js场景-WangEditor富文本编辑器的使用 (永久免费)</a> <span class="text-muted">Grandpa_Rick</span> <a class="tag" taget="_blank" href="/search/%E5%A5%97%E8%B7%AF/1.htm">套路</a><a class="tag" taget="_blank" href="/search/front/1.htm">front</a><a class="tag" taget="_blank" href="/search/end/1.htm">end</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><a class="tag" taget="_blank" href="/search/wangEditor/1.htm">wangEditor</a> <div>系列文章目录[套路]el-table多选属性实现单选效果[套路]基于服务内存实现的中文拼音混合查询[套路]Bypass滑块验证码目录系列文章目录前言一、实现1.1场景1.2Window对象简介1.3引入WangEditor1.4页面配置前言公司使用freemarker的老旧SpringBootWeb后台项目,前两年通过浏览器引入js的方式使用Vue简单升级了下,方便迭代功能.近期一个很简单的功能需</div> </li> <li><a href="/article/1771565373594861568.htm" title="python社区垃圾分类管理平台的设计与实现flask-django-php-nodejs" target="_blank">python社区垃圾分类管理平台的设计与实现flask-django-php-nodejs</a> <span class="text-muted">QQ_511008285</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/django/1.htm">django</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>近些年来，随着科技的飞速发展，互联网的普及逐渐延伸到各行各业中，给人们生活带来了十分的便利，社区垃圾分类管理平台利用计算机网络实现信息化管理，使整个社区垃圾分类管理的发展和服务水平有显著提升。语言：Python框架：django/flask软件版本：python3.7.7数据库：mysql数据库工具：Navicat前端框架:vue.js通过比较两个不同因素的框架，可以看出Flask和Django不</div> </li> <li><a href="/article/1769762716114812928.htm" title="Vue生命周期" target="_blank">Vue生命周期</a> <span class="text-muted">长沙火山</span> <a class="tag" taget="_blank" href="/search/iOS%E5%BC%80%E5%8F%91/1.htm">iOS开发</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中，组件实例有一个完整的生命周期，包括创建、挂载、更新和销毁等阶段。Vue生命周期钩子函数允许我们在组件不同阶段添加自定义逻辑。以下是Vue生命周期的详细介绍：1.1创建阶段（Creation）beforeCreate在实例初始化之后，数据观测(dataobserver)和事件配置(event/watchersetup)之前被调用。此时实例还未初始化完成，数据和方法均不可</div> </li> <li><a href="/article/1768172379701313536.htm" title="Python招聘信息爬虫数据可视化分析大屏全屏系统(Django框架) 开题报告" target="_blank">Python招聘信息爬虫数据可视化分析大屏全屏系统(Django框架) 开题报告</a> <span class="text-muted">黄菊华老师</span> <a class="tag" taget="_blank" href="/search/%E6%AF%95%E8%AE%BE%E8%B5%84%E6%96%99/1.htm">毕设资料</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>博主介绍：黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书、PPT、论文模版等项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包安装运行！！！如果需要联系我，可以在CSD</div> </li> <li><a href="/article/1767872539842904064.htm" title="如何清除keep-alive缓存" target="_blank">如何清除keep-alive缓存</a> <span class="text-muted">泡芙·草莓</span> <a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a> <div>在Vue.js中，使用组件可以将组件保留在内存中，以避免重复渲染和销毁，从而提高性能。如果需要手动清除组件的缓存，可以通过两种方法来实现：通过$destroy方法销毁组件：可以在组件内部手动调用$destroy方法来销毁组件实例，从而清除缓存。这样在下次需要再次渲染时，组件会重新创建。this.$destroy();通过设置include和exclude属性：可以通过设置组件的include和ex</div> </li> <li><a href="/article/1767742137111216128.htm" title="vuex怎么防止数据刷新丢失？" target="_blank">vuex怎么防止数据刷新丢失？</a> <span class="text-muted">一个大长腿</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</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/ecmascript/1.htm">ecmascript</a> <div>在Vue.js应用程序中，Vuex是一个用于管理应用程序状态的状态管理库。默认情况下，Vuex的状态存储在内存中，并且在页面刷新时会丢失。为了防止数据刷新丢失，你可以考虑以下几种方法：这些方法可以帮助你防止Vuex数据刷新丢失。根据你的应用场景和需求，选择最适合你的方法即可。使用持久化插件：Vuex提供了一些第三方插件，如vuex-persistedstate，可以将状态持久化到本地存储（如loc</div> </li> <li><a href="/article/1767515171942629376.htm" title="Vue项目中使用Mock.js进行API模拟" target="_blank">Vue项目中使用Mock.js进行API模拟</a> <span class="text-muted">洛可可白</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E4%B8%93%E6%A0%8F/1.htm">前端专栏</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</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> <div>Vue项目中使用Mock.js进行API模拟前言欢迎来到我的小天地，这里是我记录技术点滴、分享学习心得的地方。️技能清单编程语言：Java、C、C++、Python、Go、前端技术：Jquery、Vue.js、React、uni-app、EchartsUI设计:Element-ui、Antd、Color-ui后端技术：SpringBoot、Mybatis-plus、Swagger移动开发：Andr</div> </li> <li><a href="/article/1767464186960478208.htm" title="Python贵州贵阳二手房源爬虫数据可视化分析大屏全屏系统开题报告" target="_blank">Python贵州贵阳二手房源爬虫数据可视化分析大屏全屏系统开题报告</a> <span class="text-muted">黄菊华老师</span> <a class="tag" taget="_blank" href="/search/%E6%AF%95%E8%AE%BE%E8%B5%84%E6%96%99/1.htm">毕设资料</a><a class="tag" taget="_blank" href="/search/%E8%B4%B5%E5%B7%9E%E8%B4%B5%E9%98%B3%E4%BA%8C%E6%89%8B%E6%88%BF%E6%BA%90%E7%88%AC%E8%99%AB%E6%95%B0%E6%8D%AE%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">贵州贵阳二手房源爬虫数据可视化</a> <div>博主介绍：黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书、PPT、论文模版等项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包安装运行！！！如果需要联系我，可以在CSD</div> </li> <li><a href="/article/1766907618649006080.htm" title="基于Python电影院在线选座订票系统 (Django框架)答辩常规问题和如何回答(答辩指导)" target="_blank">基于Python电影院在线选座订票系统 (Django框架)答辩常规问题和如何回答(答辩指导)</a> <span class="text-muted">黄菊华老师</span> <a class="tag" taget="_blank" href="/search/%E6%AF%95%E8%AE%BE%E8%B5%84%E6%96%99/1.htm">毕设资料</a><a class="tag" taget="_blank" href="/search/%E7%94%B5%E5%BD%B1%E9%99%A2%E5%9C%A8%E7%BA%BF%E9%80%89%E5%BA%A7%E8%AE%A2%E7%A5%A8%E7%B3%BB%E7%BB%9F/1.htm">电影院在线选座订票系统</a> <div>博主介绍：黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书、PPT、论文模版等项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包安装运行！！！如果需要联系我，可以在CSD</div> </li> <li><a href="/article/1766068663246479360.htm" title="Python北京二手房源爬虫数据可视化分析大屏全屏系统开题报告" target="_blank">Python北京二手房源爬虫数据可视化分析大屏全屏系统开题报告</a> <span class="text-muted">黄菊华老师</span> <a class="tag" taget="_blank" href="/search/%E6%AF%95%E8%AE%BE%E8%B5%84%E6%96%99/1.htm">毕设资料</a><a class="tag" taget="_blank" href="/search/%E5%8C%97%E4%BA%AC%E4%BA%8C%E6%89%8B%E6%88%BF%E6%BA%90%E7%88%AC%E8%99%AB%E6%95%B0%E6%8D%AE%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">北京二手房源爬虫数据可视化</a> <div>博主介绍：黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书、PPT、论文模版等项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包安装运行！！！如果需要联系我，可以在CSD</div> </li> <li><a href="/article/1765733206868451328.htm" title="Python湖南长沙二手房源爬虫数据可视化分析大屏全屏系统开题报告" target="_blank">Python湖南长沙二手房源爬虫数据可视化分析大屏全屏系统开题报告</a> <span class="text-muted">黄菊华老师</span> <a class="tag" taget="_blank" href="/search/%E6%AF%95%E8%AE%BE%E8%B5%84%E6%96%99/1.htm">毕设资料</a><a class="tag" taget="_blank" href="/search/%E6%B9%96%E5%8D%97%E9%95%BF%E6%B2%99%E4%BA%8C%E6%89%8B%E6%88%BF%E6%BA%90%E7%88%AC%E8%99%AB%E6%95%B0%E6%8D%AE%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">湖南长沙二手房源爬虫数据可视化</a> <div>博主介绍：黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书、PPT、论文模版等项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包安装运行！！！如果需要联系我，可以在CSD</div> </li> <li><a href="/article/1765513178231431168.htm" title="【vue.js】文档解读【day 1】 | 模板语法2" target="_blank">【vue.js】文档解读【day 1】 | 模板语法2</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>如果阅读有疑问的话，欢迎评论或私信！！本人会很热心的阐述自己的想法！谢谢！！！文章目录模板语法JavaScript表达式仅支持表达式调用函数？受限的全局访问指令参数动态参数动态参数中值的限制动态参数中语法的限制模板语法JavaScript表达式除了前面的文本插值、绑定attr属性外，我们还可以直接在Vue中输入JavaScript表达式。就像下面这样：{{message.split('').rev</div> </li> <li><a href="/article/1765174332708970496.htm" title="【python课程作业】python学生成绩管理系统" target="_blank">【python课程作业】python学生成绩管理系统</a> <span class="text-muted">山东好汉Tim</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>功能介绍平台采用B/S结构，后端采用主流的Python语言进行开发，前端采用主流的Vue.js进行开发。给舍友做的课程作业。功能包括：成绩管理、学生管理、课程管理、班级管理、用户管理、日志管理、系统信息模块。源码地址https://github.com/geeeeeeeek/python_score演示地址http://score.gitapp.cn/?rel=1演示帐号：用户名：admin123</div> </li> <li><a href="/article/1764981241129558016.htm" title="Vue3教程" target="_blank">Vue3教程</a> <span class="text-muted">m0_59519985</span> <a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>1.1配置环境vue官网：Vue.js-TheProgressiveJavaScriptFramework|Vue.js终端Linux和Mac上可以用自带的终端。Windows上推荐用powershell或者cmd。GitBash有些指令不兼容。安装Nodejs安装地址：Node.js安装@vue/cli打开GitBash，执行：npmi-g@vue/cli如果执行后面的操作有bug，可能是最新版</div> </li> <li><a href="/article/1764827176617730048.htm" title="Vue.js--基础" target="_blank">Vue.js--基础</a> <span class="text-muted">Lemon_Kang</span> <div>Vue1、基本概念渐进式框架渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验特点解耦视图和数据可复用的组件前端路由技术状态管理虚拟DOM2、安装Vue.js 1.直接CDN引入 2.下载后项目中引入js文件 3.使用npm安装3、初体验{{message}}{{item}}{{count}}+-//数据和视图分离引入vue的js文件//let(ES6定义变量)/cons</div> </li> <li><a href="/article/1764721565297106944.htm" title="Vue路由模式" target="_blank">Vue路由模式</a> <span class="text-muted">几何心凉</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%B0%8F%E5%B8%B8%E8%AF%86/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>聚沙成塔·每天进步一点点本文内容⭐专栏简介路由模式1.Hash模式2.History模式选择路由模式的考虑因素⭐写在最后⭐专栏简介Vue学习之旅的奇妙世界欢迎大家来到Vue技能树参考资料专栏！创建这个专栏的初衷是为了帮助大家更好地应对Vue.js技能树的学习。每篇文章都致力于提供清晰、深入的参考资料，让你能够更轻松、更自信地理解和掌握Vue.js的核心概念和技术。订阅这个专栏，让我们一同踏上更深入</div> </li> <li><a href="/article/1764629174334611456.htm" title="Python上海美食餐厅餐馆商家爬虫数据可视化分析和推荐查询系统开题报告" target="_blank">Python上海美食餐厅餐馆商家爬虫数据可视化分析和推荐查询系统开题报告</a> <span class="text-muted">黄菊华老师</span> <a class="tag" taget="_blank" href="/search/%E6%AF%95%E8%AE%BE%E8%B5%84%E6%96%99/1.htm">毕设资料</a><a class="tag" taget="_blank" href="/search/%E4%B8%8A%E6%B5%B7%E7%BE%8E%E9%A3%9F%E9%A4%90%E5%8E%85%E9%A4%90%E9%A6%86%E7%88%AC%E8%99%AB%E6%95%B0%E6%8D%AE%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">上海美食餐厅餐馆爬虫数据可视化</a> <div>博主介绍：黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书、PPT、论文模版等项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包安装运行！！！如果需要联系我，可以在CSD</div> </li> <li><a href="/article/1764426258948644864.htm" title="Vue 3 中的 Composition API 详解" target="_blank">Vue 3 中的 Composition API 详解</a> <span class="text-muted">奔强的程序</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>Vue.js，作为前端领域流行的框架之一，以其响应式数据绑定和组件化开发赢得了广大开发者的喜爱。随着前端技术的不断发展和项目复杂度的增加，Vue团队推出了Vue3，并引入了CompositionAPI，以更好地满足复杂应用的需求。一、CompositionAPI是什么？CompositionAPI是Vue3中新增的一组API，它允许开发者使用函数式编程的方式来组织和复用组件逻辑。与Vue2中的Op</div> </li> <li><a href="/article/1764068270178131968.htm" title="Vue 3.4 - 详细发布说明" target="_blank">Vue 3.4 - 详细发布说明</a> <span class="text-muted">大鱼前端</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>欢迎关注微信公众号：前端历险记Vue.js，作为一个流行的前端框架，以其响应式数据绑定和灵活的组件系统而闻名。Vue3是Vue.js的一个主要版本，它引入了许多新的特性和改进，包括CompositionAPI、性能优化和更小的体积。现在，随着Vue3.4的发布，这个框架又向前迈进了一大步。一、性能提升渲染优化：Vue3.4对其渲染引擎进行了进一步的优化，特别是在处理大量动态节点和复杂组件树时。通过</div> </li> <li><a href="/article/1764001811682910208.htm" title="Python青海西宁二手房源爬虫数据可视化分析大屏全屏系统开题报告" target="_blank">Python青海西宁二手房源爬虫数据可视化分析大屏全屏系统开题报告</a> <span class="text-muted">黄菊华老师</span> <a class="tag" taget="_blank" href="/search/%E6%AF%95%E8%AE%BE%E8%B5%84%E6%96%99/1.htm">毕设资料</a><a class="tag" taget="_blank" href="/search/%E9%9D%92%E6%B5%B7%E8%A5%BF%E5%AE%81%E4%BA%8C%E6%89%8B%E6%88%BF%E6%BA%90%E7%88%AC%E8%99%AB%E6%95%B0%E6%8D%AE%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">青海西宁二手房源爬虫数据可视化</a> <div>博主介绍：黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书、PPT、论文模版等项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包安装运行！！！如果需要联系我，可以在CSD</div> </li> <li><a href="/article/1763975188971610112.htm" title="Vue 3.4 - 详细发布说明" target="_blank">Vue 3.4 - 详细发布说明</a> <span class="text-muted"></span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>欢迎关注微信公众号：前端历险记Vue.js，作为一个流行的前端框架，以其响应式数据绑定和灵活的组件系统而闻名。Vue3是Vue.js的一个主要版本，它引入了许多新的特性和改进，包括CompositionAPI、性能优化和更小的体积。现在，随着Vue3.4的发布，这个框架又向前迈进了一大步。一、性能提升渲染优化：Vue3.4对其渲染引擎进行了进一步的优化，特别是在处理大量动态节点和复杂组件树时。通过</div> </li> <li><a href="/article/1763642921757794304.htm" title="前端工程化面试题 | 15.精选前端工程化高频面试题" target="_blank">前端工程化面试题 | 15.精选前端工程化高频面试题</a> <span class="text-muted">ai_todo</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96/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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前端开发工程师、技术日更博主、已过CET6阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》蓝桥云课签约作者、上架课程《Vue.js和Egg.js开发企业级健康管理项目》、《带你从入门到实战全面掌握uni-app》文章目录请解释一下前端中的代码分支管理和代码合并。你熟悉的代码合并工具有哪些？解释一下前端中的流程管理</div> </li> <li><a href="/article/1763536679349608448.htm" title="vue实现商品评分效果（通过插件实现）" target="_blank">vue实现商品评分效果（通过插件实现）</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/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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>Vue.js实现了一个简单的商品评分功能。用户可以通过点击星星来修改商品的评分，并且评分显示了相应的星星数。废话不多说，直接上代码方法一：exportdefault{data(){return{formData:{status_id:0,//初始评分为0},};},};方法二：商品评分:{{status_id}}★exportdefault{data(){return{status_i</div> </li> <li><a href="/article/1763418858875609088.htm" title="Python辽宁沈阳二手房源爬虫数据可视化分析大屏全屏系统开题报告" target="_blank">Python辽宁沈阳二手房源爬虫数据可视化分析大屏全屏系统开题报告</a> <span class="text-muted">黄菊华老师</span> <a class="tag" taget="_blank" href="/search/%E6%AF%95%E8%AE%BE%E8%B5%84%E6%96%99/1.htm">毕设资料</a><a class="tag" taget="_blank" href="/search/%E8%BE%BD%E5%AE%81%E6%B2%88%E9%98%B3%E4%BA%8C%E6%89%8B%E6%88%BF%E6%BA%90%E7%88%AC%E8%99%AB%E6%95%B0%E6%8D%AE%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">辽宁沈阳二手房源爬虫数据可视化</a> <div>博主介绍：黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者，CSDN博客专家，在线教育专家，CSDN钻石讲师；专注大学生毕业设计教育和辅导。所有项目都配有从入门到精通的基础知识视频课程，学习后应对毕业设计答辩。项目配有对应开发文档、开题报告、任务书、PPT、论文模版等项目都录了发布和功能操作演示视频；项目的界面和功能都可以定制，包安装运行！！！如果需要联系我，可以在CSD</div> </li> <li><a href="/article/1763192907243806720.htm" title="如何快速上手Vue框架" target="_blank">如何快速上手Vue框架</a> <span class="text-muted">程序老猫</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>快速上手Vue.js框架，你可以遵循以下步骤：###**环境准备**1.**安装Node.js**：确保你的开发环境中已安装了最新版的Node.js，因为VueCLI（Vue的命令行工具）需要Node.js环境。2.**全局安装VueCLI**：打开终端或命令提示符，运行以下命令来全局安装VueCLI：```bashnpminstall-g@vue/cli```3.**创建新项目**：使用VueC</div> </li> <li><a href="/article/1762644614835167232.htm" title="vue.js的介绍" target="_blank">vue.js的介绍</a> <span class="text-muted">Komorebi_9999</span> <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（通常简称为Vue）是一个构建用户界面的渐进式框架。Vue被设计为自底向上逐层应用，其核心库只关注视图层，易于与其他库或已有项目整合。Vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。Vue.js和Vue实际上是指同一个东西，Vue.js是Vue的全称。当人们在讨论Vue时，他们通常指的是Vue.js这个框架。Vue.js提供了一种声明式渲染的语法，可以非常方便地</div> </li> <li><a href="/article/1760867124231852032.htm" title="uni-pp(一)什么是uni-pp" target="_blank">uni-pp(一)什么是uni-pp</a> <span class="text-muted">AlanGe</span> <div>uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app），腾讯课堂官方为uni-</div> </li> <li><a href="/article/1760786426762416128.htm" title="vue.js之视频播放器组件" target="_blank">vue.js之视频播放器组件</a> <span class="text-muted">一个小前端程序员</span> <div>首先，安装依赖npminstallvue-video-player-S然后，在src/main.js中importVueVideoPlayerfrom'vue-video-player'import'video.js/dist/video-js.css'Vue.use(VueVideoPlayer)最后，在组件中使用exportdefault{data(){return{playerOptions</div> </li> <li><a href="/article/90.htm" title="java观察者模式" target="_blank">java观察者模式</a> <span class="text-muted">3213213333332132</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</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/%E6%B8%B8%E6%88%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> <div>观察者模式——顾名思义，就是一个对象观察另一个对象，当被观察的对象发生变化时，观察者也会跟着变化。在日常中，我们配java环境变量时，设置一个JAVAHOME变量,这就是被观察者，使用了JAVAHOME变量的对象都是观察者，一旦JAVAHOME的路径改动，其他的也会跟着改动。这样的例子很多，我想用小时候玩的老鹰捉小鸡游戏来简单的描绘观察者模式。老鹰会变成观察者，母鸡和小鸡是</div> </li> <li><a href="/article/217.htm" title="TFS RESTful API 模拟上传测试" target="_blank">TFS RESTful API 模拟上传测试</a> <span class="text-muted">ronin47</span> <div> TFS RESTful API 模拟上传测试。　　细节参看这里：https://github.com/alibaba/nginx-tfs/blob/master/TFS_RESTful_API.markdown 模拟POST上传一个图片： curl --data-binary @/opt/tfs.png http</div> </li> <li><a href="/article/344.htm" title="PHP常用设计模式单例, 工厂, 观察者, 责任链, 装饰, 策略,适配,桥接模式" target="_blank">PHP常用设计模式单例, 工厂, 观察者, 责任链, 装饰, 策略,适配,桥接模式</a> <span class="text-muted">dcj3sjt126com</span> <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/PHP/1.htm">PHP</a> <div>// 多态, 在JAVA中是这样用的, 其实在PHP当中可以自然消除, 因为参数是动态的, 你传什么过来都可以, 不限制类型, 直接调用类的方法 abstract class Tiger { public abstract function climb(); } class XTiger extends Tiger { public function climb()</div> </li> <li><a href="/article/471.htm" title="hibernate" target="_blank">hibernate</a> <span class="text-muted">171815164</span> <a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div>main,save Configuration conf =new Configuration().configure(); SessionFactory sf=conf.buildSessionFactory(); Session sess=sf.openSession(); Transaction tx=sess.beginTransaction(); News a=new </div> </li> <li><a href="/article/598.htm" title="Ant实例分析" target="_blank">Ant实例分析</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/ant/1.htm">ant</a> <div> 下面是一个Ant构建文件的实例，通过这个实例我们可以很清楚的理顺构建一个项目的顺序及依赖关系，从而编写出更加合理的构建文件。下面是build.xml的代码： <?xml version="1</div> </li> <li><a href="/article/725.htm" title="[简单]工作记录_接口返回405原因" target="_blank">[简单]工作记录_接口返回405原因</a> <span class="text-muted">53873039oycg</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a> <div> 最近调接口时候一直报错，错误信息是: responseCode:405 responseMsg:Method Not Allowed 接口请求方式Post. </div> </li> <li><a href="/article/852.htm" title="关于java.lang.ClassNotFoundException 和 java.lang.NoClassDefFoundError 的区别" target="_blank">关于java.lang.ClassNotFoundException 和 java.lang.NoClassDefFoundError 的区别</a> <span class="text-muted">程序员是怎么炼成的</span> <div> 真正完成类的加载工作是通过调用 defineClass来实现的；而启动类的加载过程是通过调用 loadClass来实现的；就是类加载器分为加载和定义 protected Class<?> findClass(String name) throws ClassNotFoundExcept</div> </li> <li><a href="/article/979.htm" title="JDBC学习笔记-JDBC详细的操作流程" target="_blank">JDBC学习笔记-JDBC详细的操作流程</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a> <div>所有的JDBC应用程序都具有下面的基本流程：　　1、加载数据库驱动并建立到数据库的连接。　　2、执行SQL语句。　　3、处理结果。　　4、从数据库断开连接释放资源。下面我们就来仔细看一看每一个步骤：其实按照上面所说每个阶段都可得单独拿出来写成一个独立的类方法文件。共别的应用来调用。 1、加载数据库驱动并建立到数据库的连接： Html代码 St</div> </li> <li><a href="/article/1106.htm" title="rome创建rss" target="_blank">rome创建rss</a> <span class="text-muted">antonyup_2006</span> <a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/cms/1.htm">cms</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a><a class="tag" taget="_blank" href="/search/Opera/1.htm">Opera</a> <div>引用 1.RSS标准 RSS标准比较混乱，主要有以下3个系列 RSS 0.9x / 2.0 : RSS技术诞生于1999年的网景公司(Netscape)，其发布了一个0.9版本的规范。2001年，RSS技术标准的发展工作被Userland Software公司的戴夫温那(Dave Winer)所接手。陆续发布了0.9x的系列版本。当W3C小组发布RSS 1.0后，Dave W</div> </li> <li><a href="/article/1233.htm" title="html表格和表单基础" target="_blank">html表格和表单基础</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E6%A0%BC/1.htm">表格</a><a class="tag" taget="_blank" href="/search/%E8%A1%A8%E5%8D%95/1.htm">表单</a><a class="tag" taget="_blank" href="/search/meta/1.htm">meta</a><a class="tag" taget="_blank" href="/search/%E9%94%9A%E7%82%B9/1.htm">锚点</a> <div>第一次用html来写东西,感觉压力山大,每次看见别人发的都是比较牛逼的再看看自己什么都还不会, html是一种标记语言,其实很简单都是固定的格式 _----------------------------------------表格和表单表格是html的重要组成部分,表格用在body里面的主要用法如下; <table> &</div> </li> <li><a href="/article/1360.htm" title="ibatis如何传入完整的sql语句" target="_blank">ibatis如何传入完整的sql语句</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/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/ibatis/1.htm">ibatis</a> <div> ibatis如何传入完整的sql语句？进一步说，String str ="select * from test_table"，我想把str传入ibatis中执行，是传递整条sql语句。解决办法： <</div> </li> <li><a href="/article/1487.htm" title="精通Oracle10编程SQL(14)开发动态SQL" target="_blank">精通Oracle10编程SQL(14)开发动态SQL</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a> <div>/* *开发动态SQL */ --使用EXECUTE IMMEDIATE处理DDL操作 CREATE OR REPLACE PROCEDURE drop_table(table_name varchar2) is sql_statement varchar2(100); begin sql_statement:='DROP TABLE '||table_name; </div> </li> <li><a href="/article/1614.htm" title="【Linux命令】Linux工作中常用命令" target="_blank">【Linux命令】Linux工作中常用命令</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/linux%E5%91%BD%E4%BB%A4/1.htm">linux命令</a> <div>不断的总结工作中常用的Linux命令 1.查看端口被哪个进程占用通过这个命令可以得到占用8085端口的进程号，然后通过ps -ef|grep 进程号得到进程的详细信息 netstat -anp | grep 8085 察看进程ID对应的进程占用的端口号 netstat -anp | grep 进程ID &</div> </li> <li><a href="/article/1741.htm" title="优秀网站和文档收集" target="_blank">优秀网站和文档收集</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%AB%99/1.htm">网站</a> <div>集成 Flex, Spring, Hibernate 构建应用程序性能测试工具-JMeter Hmtl5-IOCN网站 Oracle精简版教程网站鸟哥的linux私房菜 Jetty中文文档 50个jquery必备代码片段 swfobject.js检测flash版本号工具</div> </li> <li><a href="/article/1868.htm" title="angular.extend" target="_blank">angular.extend</a> <span class="text-muted">boyitech</span> <a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/angular.extend/1.htm">angular.extend</a><a class="tag" taget="_blank" href="/search/AngularJS+API/1.htm">AngularJS API</a> <div>angular.extend 复制src对象中的属性去dst对象中. 支持多个src对象. 如果你不想改变一个对象，你可以把dst设为空对象{}: var object = angular.extend({}, object1, object2). 注意: angular.extend不支持递归复制. 使用方法: angular.extend(dst, src); 参数: </div> </li> <li><a href="/article/1995.htm" title="java-谷歌面试题-设计方便提取中数的数据结构" target="_blank">java-谷歌面试题-设计方便提取中数的数据结构</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>网上找了一下这道题的解答，但都是提供思路，没有提供具体实现。其中使用大小堆这个思路看似简单，但实现起来要考虑很多。以下分别用排序数组和大小堆来实现。使用大小堆： import java.util.Arrays; public class MedianInHeap { /** * 题目：设计方便提取中数的数据结构 * 设计一个数据结构，其中包含两个函数，1.插</div> </li> <li><a href="/article/2122.htm" title="ajaxFileUpload 针对 ie jquery 1.7+不能使用问题修复版本" target="_blank">ajaxFileUpload 针对 ie jquery 1.7+不能使用问题修复版本</a> <span class="text-muted">Chen.H</span> <a class="tag" taget="_blank" href="/search/ajaxFileUpload/1.htm">ajaxFileUpload</a><a class="tag" taget="_blank" href="/search/ie6/1.htm">ie6</a><a class="tag" taget="_blank" href="/search/ie7/1.htm">ie7</a><a class="tag" taget="_blank" href="/search/ie8/1.htm">ie8</a><a class="tag" taget="_blank" href="/search/ie9/1.htm">ie9</a> <div>jQuery.extend({ handleError: function( s, xhr, status, e ) { // If a local callback was specified, fire it if ( s.error ) { s.error.call( s.context || s, xhr, status, e ); } </div> </li> <li><a href="/article/2249.htm" title="[机器人制造原则]机器人的电池和存储器必须可以替换" target="_blank">[机器人制造原则]机器人的电池和存储器必须可以替换</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E5%88%B6%E9%80%A0/1.htm">制造</a> <div> 机器人的身体随时随地可能被外来力量所破坏,但是如果机器人的存储器和电池可以更换,那么这个机器人的思维和记忆力就可以保存下来,即使身体受到伤害,在把存储器取下来安装到一个新的身体上之后,原有的性格和能力都可以继续维持..... 另外,如果一</div> </li> <li><a href="/article/2376.htm" title="Oracle Multitable INSERT 的用法" target="_blank">Oracle Multitable INSERT 的用法</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a> <div>转载Oracle笔记-Multitable INSERT 的用法 http://blog.chinaunix.net/uid-8504518-id-3310531.html 一、Insert基础用法语法： Insert Into 表名 (字段1,字段2,字段3...） Values (值1,</div> </li> <li><a href="/article/2503.htm" title="专访黑客历史学家George Dyson" target="_blank">专访黑客历史学家George Dyson</a> <span class="text-muted">datamachine</span> <a class="tag" taget="_blank" href="/search/on/1.htm">on</a> <div>20世纪最具威力的两项发明——核弹和计算机出自同一时代、同一群年青人。可是，与大名鼎鼎的曼哈顿计划（第二次世界大战中美国原子弹研究计划）相比，计算机的起源显得默默无闻。出身计算机世家的历史学家George Dyson在其新书《图灵大教堂》（Turing’s Cathedral）中讲述了阿兰·图灵、约翰·冯·诺依曼等一帮子天才小子创造计算机及预见计算机未来</div> </li> <li><a href="/article/2630.htm" title="小学6年级英语单词背诵第一课" target="_blank">小学6年级英语单词背诵第一课</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/english/1.htm">english</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a> <div>always 总是 rice 水稻，米饭 before 在...之前 live 生活，居住 usual 通常的 early 早的 begin 开始 month 月份 year 年 last 最后的 east 东方的 high 高的 far 远的 window 窗户 world 世界 than 比...更 </div> </li> <li><a href="/article/2757.htm" title="在线IT教育和在线IT高端教育" target="_blank">在线IT教育和在线IT高端教育</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E6%95%99%E8%82%B2/1.htm">教育</a> <div>codecademy http://www.codecademy.com codeschool https://www.codeschool.com teamtreehouse http://teamtreehouse.com lynda http://www.lynda.com/ Coursera https://www.coursera.</div> </li> <li><a href="/article/2884.htm" title="Struts2 xml校验框架所定义的校验文件" target="_blank">Struts2 xml校验框架所定义的校验文件</a> <span class="text-muted">蕃薯耀</span> <a class="tag" taget="_blank" href="/search/Struts2+xml%E6%A0%A1%E9%AA%8C/1.htm">Struts2 xml校验</a><a class="tag" taget="_blank" href="/search/Struts2+xml%E6%A0%A1%E9%AA%8C%E6%A1%86%E6%9E%B6/1.htm">Struts2 xml校验框架</a><a class="tag" taget="_blank" href="/search/Struts2%E6%A0%A1%E9%AA%8C/1.htm">Struts2校验</a> <div> >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年7月11日 15:54:59 星期六 http://fa</div> </li> <li><a href="/article/3011.htm" title="mac下安装rar和unrar命令" target="_blank">mac下安装rar和unrar命令</a> <span class="text-muted">hanqunfeng</span> <a class="tag" taget="_blank" href="/search/mac/1.htm">mac</a> <div>1.下载：http://www.rarlab.com/download.htm 选择 RAR 5.21 for Mac OS X 2.解压下载后的文件 tar -zxvf rarosx-5.2.1.tar 3.cd rar sudo install -c -o $USER unrar /bin #输入当前用户登录密码 sudo install -c -o $USER rar</div> </li> <li><a href="/article/3138.htm" title="三种将list转换为map的方法" target="_blank">三种将list转换为map的方法</a> <span class="text-muted">jackyrong</span> <a class="tag" taget="_blank" href="/search/list/1.htm">list</a> <div> 在本文中，介绍三种将list转换为map的方法： 1）传统方法假设有某个类如下 class Movie { private Integer rank; private String description; public Movie(Integer rank, String des</div> </li> <li><a href="/article/3265.htm" title="年轻程序员需要学习的5大经验" target="_blank">年轻程序员需要学习的5大经验</a> <span class="text-muted">lampcy</span> <a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a> <div>在过去的7年半时间里，我带过的软件实习生超过一打，也看到过数以百计的学生和毕业生的档案。我发现很多事情他们都需要学习。或许你会说，我说的不就是某种特定的技术、算法、数学，或者其他特定形式的知识吗？没错，这的确是需要学习的，但却并不是最重要的事情。他们需要学习的最重要的东西是“自我规范”。这些规范就是：尽可能地写出最简洁的代码；如果代码后期会因为改动而变得凌乱不堪就得重构；尽量删除没用的代码，并添加</div> </li> <li><a href="/article/3392.htm" title="评“女孩遭野蛮引产致终身不育 60万赔偿款1分未得”医腐深入骨髓" target="_blank">评“女孩遭野蛮引产致终身不育 60万赔偿款1分未得”医腐深入骨髓</a> <span class="text-muted">nannan408</span> <div>先来看南方网的一则报道：再正常不过的结婚、生子，对于29岁的郑畅来说，却是一个永远也无法实现的梦想。从2010年到2015年，从24岁到29岁，一张张新旧不一的诊断书记录了她病情的同时，也清晰地记下了她人生的悲哀。　　粗暴手术让人发寒　　2010年7月，在酒店做服务员的郑畅发现自己怀孕了，可男朋友却联系不上。在没有和家人商量的情况下，她决定堕胎。　　12月5日，</div> </li> <li><a href="/article/3519.htm" title="使用jQuery为input输入框绑定回车键事件 VS 为a标签绑定click事件" target="_blank">使用jQuery为input输入框绑定回车键事件 VS 为a标签绑定click事件</a> <span class="text-muted">Everyday都不同</span> <a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/input/1.htm">input</a><a class="tag" taget="_blank" href="/search/%E5%9B%9E%E8%BD%A6%E9%94%AE%E7%BB%91%E5%AE%9A/1.htm">回车键绑定</a><a class="tag" taget="_blank" href="/search/click/1.htm">click</a><a class="tag" taget="_blank" href="/search/enter/1.htm">enter</a> <div>假设如题所示的事件为同一个，必须先把该js函数抽离出来，该函数定义了监听的处理： function search() { //监听函数略...... } 为input框绑定回车事件，当用户在文本框中输入搜索关键字时，按回车键，即可触发search(): //回车绑定 $(".search").keydown(fun</div> </li> <li><a href="/article/3646.htm" title="EXT学习记录" target="_blank">EXT学习记录</a> <span class="text-muted">tntxia</span> <a class="tag" taget="_blank" href="/search/ext/1.htm">ext</a> <div> 1. 准备（1）官网：http://www.sencha.com/ 里面有源代码和API文档下载。 EXT的域名已经从www.extjs.com改成了www.sencha.com ，但extjs这个域名会自动转到sencha上。（2）帮助文档：想要查看EXT的官方文档的话，可以去这里h</div> </li> <li><a href="/article/3773.htm" title="mybatis3的mapper文件报Referenced file contains errors" target="_blank">mybatis3的mapper文件报Referenced file contains errors</a> <span class="text-muted">xingguangsixian</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div>最近使用mybatis.3.1.0时无意中碰到一个问题： The errors below were detected when validating the file "mybatis-3-mapper.dtd" via the file "account-mapper.xml". In most cases these errors can be d</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>