这篇文章主要讲解了“vue是不是前端css框架”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue是不是前端css框架”吧！
10多年专注建站、设计、互联网产品按需求定制开发服务，业务涵盖品牌网站制作、商城网站定制开发、微信小程序定制开发、软件系统开发、重庆APP开发等。凭借多年丰富的经验，我们会仔细了解每个客户的需求而做出多方面的分析、设计、整合，为客户设计出具风格及创意性的商业解决方案，成都创新互联公司更提供一系列网站制作和网站推广的服务，以推动各中小企业全面信息数字化，并利用创新技术帮助各行业提升企业形象和运营效率。
vue不是前端css框架，而是前端JavaScript框架。Vue是一套用于构建用户界面的渐进式JS框架，是基于MVVM设计模式的前端框架，且专注于View层。Vue.js的优点：1、体积小；2、基于虚拟DOM，有更高的运行效率；3、双向数据绑定，让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上；4、生态丰富、学习成本低。
本教程操作环境：windows7系统、vue3版，DELL G3电脑。
vue是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 ，Vue.js 也能驱动复杂的单页应用。
Vue.js的优点
体积小：压缩后只有33k；
更高的运行效率：基于虚拟DOM，一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这种DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM；
双向数据绑定：让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上；
生态丰富、学习成本低：市场上拥有大量成熟、稳定的基于vue.js的ui框架及组件，拿来即用实现快速开发；对初学者友好、入门容易、学习资料多；
VUE框架原理
Vue对象将页面中 要改变的元素 和 data中变量 进行绑定，绑定后它会一直监听data中变量值的改变，当值发生改变时，会自动找到与其绑定的元素并且让元素跟着发生改变，改变元素的过程不需要人工干预，提高了开发效率，而且这个过程不需要像 JavaScript 那样频繁DOM操作去改变页面结构，只是监听一片区域，提高了执行效率。
Vue.js和MVVM关系:
vue 框架 是基于MVVM设计模式的前端框架，其中的Vue对象是MVVM设计模式中的VM视图模型。
MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 ViewModel。ViewModel负责连接 View 和 Model,保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。
Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；
View 代表UI 组件，它负责将数据模型转化成UI 展现出来.
ViewModel 是一个同步View 和 Model的对象。
在MVVM架构下，ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
开始vue.js的安装
Vue Devtools调试工具的安装:可以在谷歌浏览器安装vue Devtools工具可以更好的审查和调试Vue应用.
根据自己的生产要求来安装对应版本.关于安装vue的方法官网给出了多种多样的方法,这里演示独立版本的安装.
使用独立版本是直接用script标签导入url即可.Vue会被注册为一个全局变量。
第一个vue实例:
标签用来声明HTML文档的编写标准,放在最开头位置,可写可不写. 和是中必须有的元素. 里面必须有标签,<meta>和<style>可选. charset属性指定HTML文档的编码为utf-8. <script>标签里面的url即为我下载的vue独立版本的地址.src标签指定超链接. View 层 - Div之间的代码属于html的view层 id指定HTML的唯一属性. {{ }} 用于输出对象属性和函数返回值. Model 层 - JavaScript代码如下(需放在指定的HTML元素之后) el标签为实例提供挂载元素.用来联立view层和model. data 用于定义属性.里面的内容也即最后的运行结果.</pre><p><img src="/upload/otherpic69/254.jpg" alt="vue是不是前端css框架"></p><p><strong>vue过滤器"|",和linux中管道用法类似,即上一级的输出作为下一级的输入.</strong></p><pre>HTML 中的<!--...--> 是注释标签,Split用于分割字符串,join是把数组拼接成为字符串. 整个代码就是调用了vue中过滤器的用法,使用了vue的内置函数和自定义的函数对data里面定义的属性进行了转换大写,反转的操作.</pre><p><img src="/upload/otherpic69/255.jpg" alt="vue是不是前端css框架"></p><p><strong>vue用法–条件判断</strong></p><h5><strong>v-***代表的是vue中的指令.</strong></h5><pre><h2>~<h7>用来表示标题的层级关系.<h2>表示最大. 在 Vue 中，我们使用 v-if 指令实现同样的功能,和其他编程语言的条件判断逻辑一样.条件成立才会执行相应的代码. <h2 v-if="ok">Yes</h2> 也可以用 v-else 添加一个“else 块”： <h2 v-if="ok">Yes</h2> <h2 v-else>No</h2> 同样也可以添加v-else-if在多种条件下进行判断.</pre><p>示例1:</p><p><img src="/upload/otherpic69/256.jpg" alt="vue是不是前端css框架"></p><p>示例2:</p><p><img src="/upload/otherpic69/257.jpg" alt="vue是不是前端css框架"></p><h5><strong>v-show指令根据条件展示元素,即不管初始条件如何元素都会被渲染.</strong></h5><pre>当ok为true的时候输出了指定的代码Hello!,相应的ok为false时候没有任何输出.</pre><p><img src="/upload/otherpic69/258.jpg" alt="vue是不是前端css框架"></p><h3><strong>vue用法–循环语句-v-for指令</strong><br/></h3><pre>v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。 <li>标签用于定义列表中的项目.可用于有序列表<ol>和无序列表<ul>中.也可以使用of替代in作为分隔符. 如下实例使用v-for指令依次遍历了data里面定义的数组元素.</pre><p><img src="/upload/otherpic69/259.jpg" alt="vue是不是前端css框架"></p><h5><strong>v-for迭代对象,v-for可以通过一个对象的属性来迭代数据.</strong></h5><p><img src="/upload/otherpic69/260.jpg" alt="vue是不是前端css框架"></p><h5><strong>v-for可以用来循环整数</strong></h5><p><img src="/upload/otherpic69/261.jpg" alt="vue是不是前端css框架"></p><h5><strong>对getter和setter的理解</strong></h5><pre>顾名思义，get为取值，set为赋值. 创建一个实例，isMe；此时，isMe是没有name属性的，当我们调用isMe.name时，我们会进入到get name(){...}中，先判断 isMe是否有name属性，答案是否定的，那麽就添加一个name属性并给它赋值；如果有name属性，那就返回name属性。 你可以把get看成一个取值的函数，函数的返回值就是它拿到的值。 set属性理解，当我给实例赋值： isMe.name="周神"此时，会进入set name(val){...}；形参val就是我赋给name属性的值，在这个函数里，我就可以做很多事了， 比如双向绑定！因为这个值的每次改变都必须经过set，其他方式是改变不了它的，相当于一个万能的监听器。</pre><h3><strong>vue用法之vue计算属性vs监听属性</strong></h3><pre>计算属性关键词: computed: 整个代码进行的流程: 1. data 属性初始化 getter setter(可理解为取值和赋值) 2. computed 计算属性初始化，提供的函数将用作属性 vm.reversedMessage 的 getter 3. 当首次获取 reversedMessage 计算属性的值时，dep 开始依赖收集. 4. 在执行 message getter 方法时，如果 dep 处于依赖收集状态，则判定 message 为 reversedMessage 的依赖，并建立依赖关系 5. 当 message 发生变化时，根据依赖关系，触发 reverseMessage 的重新计算</pre><p><img src="/upload/otherpic69/262.jpg" alt="vue是不是前端css框架"></p><h5><strong>methods也是vue的计算属性,介绍一下methods和computed的区别:</strong></h5><pre>使用computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。 而使用 methods ，在重新渲染的时候，函数总会重新调用执行。 以下实例分别调用了vue的两种计算属性computed和methods.可以从运行结果很清晰的看到computed在第一次渲染之后就有了缓存, 第二次调用的时候直接依赖缓存不会重新渲染,两次调用结果相同.而methods在每次调用的时候都会渲染,所以两次调用结果不同.</pre><p><img src="/upload/otherpic69/263.jpg" alt="vue是不是前端css框架"></p><h5><strong>vue之监听属性–watch,通过watch来响应数据的变化.</strong></h5><pre><button>标签是创建一个按钮. @click等同于v-on:click,是一个指令的缩写.v-on表示事件监听,后续会详细讲到. <script type = "text/javascript">表示说明内部的代码属于js. px表示像素. font-size设置字体大小. $watch是一个实例方法, nval表示新的数据, oval旧的数据. alert()方法用于显示带有一条信息和一个ok按钮的警告框. 以下示例首先通过v-on指令来监听按钮的按键变化,然后data里面进行定义属性,接着调用vue的监听属性$watch来监听counter的 变化,最后调用alert()方法弹出一个页面来直观显示数据的变化.</pre><p><img src="/upload/otherpic69/264.jpg" alt="vue是不是前端css框架"></p><h3><strong>vue用法之–vue样式绑定:v-bind用来绑定html属性</strong></h3><p>方法特别灵活可以绑定数组,属性等来实现需求.每个部分做一个演示.</p><pre>v-bind指令的缩写: <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a></pre><p>class 与 style 是 HTML 元素的属性，用于设置元素的样式，表达式的结果类型除了字符串之外，还可以是对象或数组。style标签用于为文档定义样式信息.v-bind:class表示class存在是否将取决于数据属性isActive的true/false</p><p><img src="/upload/otherpic69/265.jpg" alt="vue是不是前端css框架"></p><h5><strong>多属性动态切换class,可以实时调整data里面的值来改变输出结果:</strong></h5><p>style标签内定义了两种样式,并使用v-bind指令进行了样式绑定.由于data里面isActive属性为true所以对应样式被触发.可以更改data属性值来动态调整你想要的样式输出.</p><p><img src="/upload/otherpic69/266.jpg" alt="vue是不是前端css框架"></p><h5><strong>直接绑定数据里面的一个对象:classobject和class是对应的.</strong></h5><p>text-danger 类背景颜色覆盖了 active 类的背景色：</p><p><img src="/upload/otherpic69/267.jpg" alt="vue是不是前端css框架"></p><h5><strong>数组的用法:</strong></h5><p>可以把一个数组传给v-bind:class,以应用一个class列表.Text-danger会覆盖activeClass,所以显示结果为红色.</p><p><img src="/upload/otherpic69/268.jpg" alt="vue是不是前端css框架"></p><h5><strong>根据条件表达式判断输出:</strong></h5><p>以下实例使用了三元表达式.表示始终存在errorClass但是activeClass只能在isActive为true时候显示.</p><p><img src="/upload/otherpic69/269.jpg" alt="vue是不是前端css框架"></p><p><strong>Vue.js style(内联样式):我们可以在 v-bind:style 直接设置样式</strong></p><p><img src="/upload/otherpic69/270.jpg" alt="vue是不是前端css框架"></p><h5><strong>可以直接绑定到一个样式对象，让模板更清晰</strong></h5><p><img src="/upload/otherpic69/271.jpg" alt="vue是不是前端css框架"></p><h5><strong>v-bind:style 可以使用数组将多个样式对象应用到一个元素上：</strong></h5><p><img src="/upload/otherpic69/272.jpg" alt="vue是不是前端css框架"></p><p><strong>vue用法之–事件处理器:v-on指令用来事件监听.</strong></p><pre>以下示例调用了v-on指令来监听按钮的点击变化,每次点击counter加1最后做一个输出.</pre><p><img src="/upload/otherpic69/273.jpg" alt="vue是不是前端css框架"></p><h5><strong>v-on指令:处理用户输入</strong></h5><pre> 为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器， 通过它调用在 Vue 实例中定义的方法： methods是定义的函数. 以下示例同样是使用v-on来监听按钮的变化.当点击按钮会调用自定义的函数reverseMessage 来对data里面定义的message进行反转拼接操作.</pre><p><img src="/upload/otherpic69/274.jpg" alt="vue是不是前端css框架"></p><h5><strong>v-on用法:内联js语句中调用方法</strong></h5><pre>say()实际是一条JS语句，带有括号的就叫内联处理器.相当于直接使用v-on来监听一条js语句,当点击按钮时进行调用say语句进行输出.</pre><p><img src="/upload/otherpic69/275.jpg" alt="vue是不是前端css框架"></p><h5><strong>vue:事件修饰符</strong></h5><pre>Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。 Vue.js通过由点(.)表示的指令后缀来调用修饰符。 .stop .prevent .capture .self .once <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件侦听器时使用事件捕获模式 --> <p v-on:click.capture="doThis">...</p> <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --> <p v-on:click.self="doThat">...</p> <!-- click 事件只能点击一次，2.1.4版本新增 --> <a v-on:click.once="doThis"></a></pre><h5><strong>vue:按键修饰符</strong></h5><pre>Vue 允许为 v-on 在监听键盘事件时添加按键修饰符： <!-- 只有在 keyCode 是 13 时调用 vm.submit() --> <input v-on:keyup.13="submit"> 全部的按键别名： .enter .tab .delete (捕获 "删除" 和 "退格" 键) .esc .space .up .down .left .right .ctrl .alt .shift .meta 实例: <!-- Alt + C的ASCll码为67 --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <p @click.ctrl="doSomething">Do something</p></pre><h3><strong>vue.js表单</strong></h3><p>你可以用 v-model 指令在表单,,元素上创建双向数据绑定。V-model指令会自动根据控件类型自动选取正确的方法来更新元素.在input输入框中我们可以使用 v-model 指令来实现双向数据绑定.<br/><img src="/upload/otherpic69/276.jpg" alt="vue是不是前端css框架"></p><h5><strong>实例:</strong></h5><pre>以下实例将js代码单独分离出来用src标签引入即可.在主程序里面看起来代码量比较少. 使用了v-model指令将输入框内容就行了双向绑定.会自动对页面数据变化做出响应.</pre><p><img src="/upload/otherpic69/277.jpg" alt="vue是不是前端css框架"></p><p><strong>输出:</strong></p><p><img src="/upload/otherpic69/278.jpg" alt="vue是不是前端css框架"></p><p><strong>更改输入框数据查看效果</strong></p><p>以上实例中 {<!-- -->{message}} 会根据输入框 input 的改变而改变，如果你不想让其变化可以修改为：{<!-- -->{* message }}<br/><img src="/upload/otherpic69/279.jpg" alt="vue是不是前端css框架"></p><p><strong>v-model对input和textarea框进行双向数据绑定:</strong></p><pre>Placeholder是一个动态变量可以实现动态绑定.input单行文本框,textarea多行文本框. style标签用于定义一些代码的呈现样式,后面会有详细讲解. 本实例就是使用v-model指令对单行和多行文本框进行了双向数据绑定.当我们修改文本框内容,vue会自动响应页面数据变化.</pre><p><img src="/upload/otherpic69/280.jpg" alt="vue是不是前端css框架"></p><p><strong>v-model对复选框的双向数据绑定</strong></p><pre><input>标签用于收集用户信息.type规定了input元素的类型,value指定了输入字段的初始值. checkbox为复选框类型. <span>标签被用来组合文档中的行内元素. <br>是换行标签. <label> 标签为 input 元素定义标注（标记）,label 元素不会向用户呈现任何特殊效果。 不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。</pre><p><img src="/upload/otherpic69/281.jpg" alt="vue是不是前端css框架"></p><p><strong>v-model对单选按钮的双向绑定: radio为单选按钮类型</strong></p><p><img src="/upload/otherpic69/283.jpg" alt="vue是不是前端css框架"></p><p><strong>v-model对select下拉列表的双向绑定:</strong></p><pre>option 元素定义下拉列表中的一个选项。浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个 元素显示。option 元素位于 select 元素内部,必须与select元素配合使用不然没意义。<option> 标签可以在不带有任何属性的 情况下使用，但是您通常需要使用 value 属性，此属性会指示出被送往<a title="服务器" target="_blank" href="http://www.cdfuwuqi.com/">服务器</a>的内容。</pre><p><img src="/upload/otherpic69/285.jpg" alt="vue是不是前端css框架"></p><p><strong>v-model修饰符</strong></p><pre>.lazy 在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ,从而转变为在change 事件中同步,也就是在失去焦点或者按下回车键才更新. <!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" > .number 如果想自动将用户的输入值转为 Number 类型，可以添加一个修饰符number给v-model 来处理输入值：否则你输入的是数字 但是类型却是字符串String,在数字输入框中有用. <input v-model.number="age" type="number"> 这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。 .trim 如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入： <input v-model.trim="msg"></pre><p>undefined</p><p>感谢各位的阅读，以上就是“vue是不是前端css框架”的内容了，经过本文的学习后，相信大家对vue是不是前端css框架这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！</p> <br> 当前标题：vue是不是前端css框架 <br> 文章URL：<a href="http://kswjz.com/article/pdsepj.html">http://kswjz.com/article/pdsepj.html</a> </div> <div class="view-qrocde cl"> <div class="m z"><img src="/Public/Home/images/ew.jpg"/></div> <div class="text"> <h6>扫二维码与项目经理沟通</h6> <p>我们在微信上24小时期待你的声音</p> <p>解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流</p> </div> </div> <div class="othernews cl"> <h3>其他资讯</h3> <ul> <li><a href="/article/dschice.html">android窗口,Android窗口指定位置</a></li><li><a href="/article/dschiss.html">ios开发源码,ios原生代码</a></li><li><a href="/article/dschicc.html">python素数函数,python编写求素数的函数</a></li><li><a href="/article/dschico.html">python中pro函数,python prop</a></li><li><a href="/article/dschicj.html">输入数组元素代码Java,用指针输入数组元素</a></li> </ul> </div> </div> </div> <div class="sidebar"> <div class="tuijian"> <a href="#"> <h2 class="cl"><span>行业动态</span></h2> <h3>企业网站建设的重要性！</h3> <p>现在虽然是移动互联网时代，但企业网站依然重要，包含PC站点，移动站。可以说企业网站关系企业的未来发展和前途，尤其对中小企业更是如此，一些中小企业老板，对自己的名片很在乎，因为这是个门面。...</p> </a> </div> <div class="ser sidesub"> <h2>服务项目</h2> <ul class="ebox"> <li class="sub sub-1"> <div> <h3>网站建设</h3> <p></p> <a class="btn" href="/serve/website/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>移动端/APP</h3> <p></p> <a class="btn" href="/serve/moblie/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>微信/小程序</h3> <p></p> <a class="btn" href="/serve/small/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>技术支持</h3> <p></p> <a class="btn" href="/serve/tech/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>其它服务</h3> <p></p> <a class="btn" href="/serve/othe/">查看详情</a> </div> </li> <li class="sub sub-5"> <div> <h3>更多服务项目</h3> <p> <a>用我们的专业和诚信赢得您的信赖，从PC到移动互联网均有您想要的服务！</a></p> <a class="btn" href="/serve/">获取更多</a> </div> </li> </ul> </div> <div class="contact" id="fix"> <h2 class="cl"> <span>联系吧</span> <a href="https://map.baidu.com/" class="ditu" rel="nofollow" target="_blank">在百度地图上找到我们</a> </h2> <h3>电话：13518219792</h3> <p>如遇占线或暂未接听请拨：136xxx98888</p> <div class="qq"> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">业务咨询</a> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">技术咨询</a> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">售后服务</a> </div> </div> </div> <script> //固定滚动 (function () { var oDiv = document.getElementById("fix"); var H = 120, iE6; var Y = oDiv; while (Y) { H += Y.offsetTop; Y = Y.offsetParent }; iE6 = window.ActiveXObject && !window.XMLHttpRequest; if (!iE6) { window.onscroll = function () { var s = document.body.scrollTop || document.documentElement.scrollTop; if (s > H) { oDiv.className = "contact fixed"; if (iE6) { oDiv.style.top = (s - H) + "px"; } } else { oDiv.className = "contact "; } }; } })(); </script> </div> <div class="footer"> <div class="wp"> <div class="wpss cl"> <dl class="about"> <dt>网站设计</dt> <dd><a href="http://www.cdxwcx.cn/sheji/" target="_blank" title="企业网站设计">企业网站设计</a></dd><dd><a href="http://www.cdkjz.cn/fangan/led/" target="_blank" title="LED网站设计方案">LED网站设计方案</a></dd><dd><a href="http://www.4006tel.net/vision/website.html" target="_blank" title="网站设计">网站设计</a></dd><dd><a href="http://www.cdxwcx.cn/sheji/" target="_blank" title="成都网站设计">成都网站设计</a></dd> </dl> <dl class="about"> <dt>网站制作</dt> <dd><a href="https://www.cdcxhl.com/zhizuo/chengdu.html" target="_blank" title="四川成都网站制作">四川成都网站制作</a></dd><dd><a href="http://www.cdxwcx.cn/bj/" target="_blank" title="网站制作报价">网站制作报价</a></dd><dd><a href="http://www.wjwzjz.com/" target="_blank" title="温江网站制作">温江网站制作</a></dd><dd><a href="http://chengdu.cdxwcx.cn/" target="_blank" title="成都网站制作">成都网站制作</a></dd> </dl> <dl class="contact"> <dt>联系我们</dt> <dd>电话：13518219792</dd> <dd>邮箱：631063699@qq.com</dd> <dd>地址：成都青羊区锦天国际1002号</dd> <dd>网址：www.kswjz.com</dd> </dl> <dl class="about" style="margin-left:50px;width:235px;"> <dt>网站建设</dt> <dd><a href="http://www.cxhlcq.com/" target="_blank" title="重庆网站建设">重庆网站建设</a></dd><dd><a href="https://www.cdcxhl.com/mianfei/jianshe/chengdu.html" target="_blank" title="成都免费网站建设">成都免费网站建设</a></dd><dd><a href="https://www.cdxwcx.com/city/yaan/" target="_blank" title="雅安网站建设">雅安网站建设</a></dd><dd><a href="https://www.cdxwcx.com/city/mianzhu/" target="_blank" title="绵竹网站建设">绵竹网站建设</a></dd> </dl> <dl class="flow"> <dt></dt> <div class="ma cl"> <div class="m"> <img src="/Public/Home/images/ew.jpg" /> <p>微信二维码</p> </div> </div> </dl> </div> </div> <div class="footer-link wp"> <ul class="wpss cl"> <li class="fisrt">友情链接</li> <li><a href="https://www.cdcxhl.com/mobile.html" title="手机网站制作设计" target="_blank">手机网站制作设计</a></li><li><a href="http://chengdu.cdcxhl.com/xcx/" title="微信小程序开发" target="_blank">微信小程序开发</a></li><li><a href="http://www.pgwzsj.com/" title="普格博源建站" target="_blank">普格博源建站</a></li><li><a href="https://www.cdxwcx.com/jifang/leshan.html" title="四川乐山服务器托管" target="_blank">四川乐山服务器托管</a></li><li><a href="http://www.tyjierui.cn/" title="绵竹网站建设" target="_blank">绵竹网站建设</a></li><li><a href="http://www.cdkjz.cn/wangzhan/pinpai/" title="成都品牌网站建设" target="_blank">成都品牌网站建设</a></li><li><a href="http://www.cdhuace.com/faguangzi/minifgz.html" title="迷你发光字" target="_blank">迷你发光字</a></li><li><a href="https://www.cdxwcx.com/wangzhan/gaiban.html" title="成都网站改版" target="_blank">成都网站改版</a></li><li><a href="http://www.gzxishu.com/" title="自动门" target="_blank">自动门</a></li><li><a href="http://chengdu.cdcxhl.com/" title="成都网站设计" target="_blank">成都网站设计</a></li> </ul> </div> </div> <div class="bot-footer"> <div class="wp"> <p class="wpss"> <em>Copyright © 2002-2023 www.kswjz.com 快上网建站品牌 QQ：244261566 版权所有</em> <em>备案号：<a href="http://beian.miit.gov.cn/" rel="external nofollow">蜀ICP备19037934号</a></em> </p> <p class="wpss" style="line-height:30px !important;"> </p> </div> </div> <div class="footer-kefu"> <ul> <li class="qq"><a href="https://wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes"><em></em>在线咨询</a> </li> <li class="tel"><a href="tel:13518219792" target="_blank"><em></em>13518219792</a></li> <li class="wx"> <em></em> <div class="code"> <img src="/Public/Home/images/ew.jpg" /> <p>微信二维码</p> </div> </li> <li class="m"> <em></em> <div class="code"> <img src="/Public/Home/images/ew.jpg" /> <p>移动版官网</p> </div> </li> <li class="top"><em></em></li> </ul> </div> <script src="/Public/Home/js/all.js"></script> </body> </html> <script> $(".cont img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>