椛丿未眠”
椛丿未眠”

前端入门（二）Vue2到Vue3

文章目录

  • Vue简介
    • Vue的特点
    • Hello, Vue
  • Vue基本语法
    • 模板语法
    • 数据绑定（v-bind、v-model）
      • el与data的两种写法
    • 数据代理实现原理
      • Object.defineProperty()
      • 数据代理
    • 事件处理（v-on:click / @click）
      • 事件修饰符
      • 键盘事件（略）
    • 计算属性与监视（computed、watch）
      • 计算属性-computed
      • 监视属性-watch
      • 深度监视-deep
      • computed和watch的区别
  • 样式渲染
    • class与style绑定
    • 条件渲染

Vue简介

前端入门（二）Vue2到Vue3_第1张图片

Vue的特点

前端入门（二）Vue2到Vue3_第2张图片

前端入门（二）Vue2到Vue3_第3张图片

3、使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。

前端入门（二）Vue2到Vue3_第4张图片

Hello, Vue

1、Vue实例与HTML容器是一一对应的，使用el属性让容器与Vue实例关联起来。
2、Vue可以使用插值语法（双层花括号）解析Vue的data属性，插值语法还可以解析其他的js表达式（所谓js表达式，就是可以产生一个值的js语句，一般为元素赋值语句的等号右边部分或者函数的返回值）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>初始Vue</title>
</head>
<body>
    <script type="text/javascript">
        Vue.config.productionTip = false;  // 开发环境， 关闭vue对于生产环境的提示信息
    </script>

    <div id = "r1">
        <h1>
            {{msg}}  // vue的插值语法
        </h1>
    </div>

    <script type="text/javascript">
        const x = new Vue({
            el: "#r1",  // el element 元素 表示当前vue实例要控制的区域 类似css的条件选择器
            data: {
                msg: "hello vue"
            }
        });
    </script>
</body>

</html>

Vue基本语法

模板语法

Vue模板语法有2大类：
1、插值语法：

  • 功能：用于解析标签体（开闭标签之间部分）内容。
  • 写法：{{****}} ****是js表达式，且可以读取vue实例中data的所有属性。

2、指令语法：

  • 功能：用于解析标签（包括标签属性，标签体内容，绑定事件……）
  • 举例：v-bind:href = "***" 或简写为 ::href="***"，***同样要写js表达式，且可以直接读取到data中的属性。
  • 注：vue中除了v-bind还有很多v-???的属性。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>初始Vue</title>
</head>
<body>
    <script type="text/javascript">
        Vue.config.productionTip = false;  // 开发环境， 关闭vue对于生产环境的提示信息
    </script>

    <div id = "root">
        <h1>
        差值语法
            <h3>{{name}}</h3>  // vue的插值语法
        </h1>
        <h1>
			指令语法
			<a v-bind:href="school.url.toUpperCase()">点我去{{school.url}}学习</a>
		</h1>
    </div>

    <script type="text/javascript">
        const x = new Vue({
            el: "#root",  // el element 元素 表示当前vue实例要控制的区域 类似css的条件选择器
            data: {
            	name: 'jack'
                school:{
					name:'ULCA',
					url:'https://www.ulca.com'
				}
            }
        });
    </script>
</body>
</html>

数据绑定（v-bind、v-model）

Vue中有2中数据绑定方式：

  • 1、单向绑定（v-bind）：数据只能从data流向页面
  • 2、双向绑定（v-model）：数据不仅能从data流向页面，也可以从页面流向data。
    • 双向绑定一般应用在表单元素上（如：input、select等，这些元素都有value属性，v-model绑定的正是这个value属性）
    • v-model:value 可以简写为v-model，因为v-model默认收集的就是value值。

el与data的两种写法

el：

  • 使用el属性绑定容器
  • 使用代码.$mount('#root')绑定

下边演示了一个案例，使用一个定时器，在1秒后再建立vue实例与html容器之间的关联。
前端入门（二）Vue2到Vue3_第5张图片
data：

  • 使用data属性，对象式
  • 使用函数返回值，函数式。当学习组件时，data必须使用函数式，否则会报错。
  • 一个重要的原则，由Vue管理的函数，不可以写箭头式，一旦写了箭头式，this就不再是Vue实例了。

前端入门（二）Vue2到Vue3_第6张图片

数据代理实现原理

Object.defineProperty()

Object.defineProperty()字面意思就是可以为对象设置属性，且在设置属性时，可以控制属性的一些高级选项：

  • enumerable：是否可以枚举
  • writable：是否可修改
  • configurable：是否可删除
    前端入门（二）Vue2到Vue3_第7张图片
    此外可以设置属性的get()和set()方法。

数据代理

  1. Vue中通过VM对象来代理data对象属性中的操作（读/写）
  2. 数据代理可以更加方便的操作data中的数据
  3. 实现原理：通过Object.defineProperty()把data对象中所有属性添加到vm上，为每一个属性指定getter和setter方法，在这些方法中去读/写data中对于的属性。
    前端入门（二）Vue2到Vue3_第8张图片

事件处理（v-on:click / @click）

  1. 使用v-on:××× 或@×××绑定事件，其中××× 是事件名。
  2. 事件的回调需要配置在method对象中，最终会在vm上。
  3. method中配置的函数都是被Vue管理的函数，this指向的就是组件实例对象，最好不要用箭头函数（lambda）表示。
  4. @click="demo" 和 @click="deme($event)"效果是一致的，但是后者可以给函数传参数。

事件修饰符

Vue中的事件修饰符：

  1. prevent：阻止默认事件（常用）
  2. stop：阻止事件冒泡（即事件不会向外层传播，常用）
  3. once：事件只触发一次（常用）
  4. capture：使用事件的捕获模式（即外层容器的事件也会被捕获）
  5. self：只有event.target是当前操作的元素才触发事件
  6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕。

键盘事件（略）

计算属性与监视（computed、watch）

计算属性-computed

计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数;简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已;可以想象为缓存！

计算在虚拟dom中进行，计算结果在缓存中，不会随时间变化，当计算属性中的参数有更新时，虚拟dom清空，重新计算，这时计算属性才会发生变化。
注意计算属性是vue component的属性，可以用方法定义，但不可用作方法调用。

计算属性的优势：有缓存，多次调用，只计算一次。仅当计算所依赖的数据变化后才会重新修改。

computed: {
		fullname:{
			get(){
				return this.firstName + '-' + this.lastName;
				}
			}
        }

计算属性：也可以使用函数返回值设置，但是methods，computed 方法名不能重名，重名字后，只会调用methods的方法。

computed: {
            //计算属性：methods，computed 方法名不能重名，重名字后，只会调用methods的方法
            fullname: function () {
				return this.firstName + '-' + this.lastName;
            }
            // 或者函数也可直接这样写：
            fullname() {
				return this.firstName + '-' + this.lastName;
            }
        }

监视属性-watch

监视属性有两种配置方式：

  • Vue实例中使用watch
  • 调用Vue实例的.$watch方法

主要是可以设置handler(new, old)方法，每次监测的值变化时，都会调用该方法。
前端入门（二）Vue2到Vue3_第9张图片

和计算属性一样，监测属性也可以进行简写：
前端入门（二）Vue2到Vue3_第10张图片

深度监视-deep

监视多级结构中的某个属性时，使用’number.a’指定对象的key。
前端入门（二）Vue2到Vue3_第11张图片
深度监视：

  • Vue中的watch默认不监测对象内部值的改变
  • 配置deep:true，则可以监测对象内部值的改变（多层）

在下边的例子中number对象开启了深度监测，无论属性a还是b变化，都会触发handler(）。
前端入门（二）Vue2到Vue3_第12张图片

computed和watch的区别

  1. computed能完成的功能，watch都可以完成。
  2. watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作。

两个重要的小原则：

  • 被Vue管理的函数，最好不要写为箭头函数，即写成普通函数，这样this的指向才是Vue实例对象。
  • 所有不被Vue管理的函数（定时器回调函数，Ajax的回调函数等），最好写成箭头函数，这样this的指向才是Vue实例对象。

样式渲染

class与style绑定

条件渲染

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

  • 如何为 Web 前端开发面试做好准备 贵州数擎科技有限公司 前端面试职场和发展
    大家好！我是[数擎AI]，一位热爱探索新技术的前端开发者，在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！开发领域：前端开发|AI应用|Web3D|元宇宙技术栈：JavaScript、React、ThreeJs、WebGL、Go经验经验：6年+前端开发经验，专注于图形渲染和AI技术开源项目：智简未来、晓智科技、数擎科技1.确定目标岗位
  • 使用 Three.js 创建动态光效 贵州数擎科技有限公司 javascript开发语言ecmascript
    大家好！我是[数擎AI]，一位热爱探索新技术的前端开发者，在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！开发领域：前端开发|AI应用|Web3D|元宇宙技术栈：JavaScript、React、ThreeJs、WebGL、Go经验经验：6年+前端开发经验，专注于图形渲染和AI技术开源项目：AI简历、元宇宙、数字孪生本篇文章将使用Th
  • 多租户适配、多租户隔离 Java掌门人 技术资料公有云多租户javawebsocket混合云
    多租户适配很多产品只有专属化版本，需要从产品底层进行尽量少的改造，满足上云之后多租户的数据、缓存、定时任务等隔离多租户适配条目条目名称适配方案持久层适配支持schema和字段隔离两种方案quartz定时任务上下文无法获取租户信息，通过JobGroup识别reids缓存缓存key体现租户id即可websocket场景从cookie获取、前端调用diwork的api获取租户信息塞到cookie，后端w
  • Threejs实现加载loading动画 贵州数擎科技有限公司 游戏面试javascript
    大家好！我是[数擎AI]，一位热爱探索新技术的前端开发者，在这里分享前端和Web3D、AI技术的干货与实战经验。如果你对技术有热情，欢迎关注我的文章，我们一起成长、进步！开发领域：前端开发|AI应用|Web3D|元宇宙技术栈：JavaScript、React、ThreeJs、WebGL、Go经验经验：6年+前端开发经验，专注于图形渲染和AI技术开源项目：智简未来、晓智科技、数擎科技核心实现原理1.
  • 前端怎么实现聊天输入框？怎么实现类似b站评论的输入并发送自定义表情包？输入回显、发送时表情包转义为[emoji]字符串、页面展示回显 旅行中的伊蕾娜 前端javascriptvue.jshtml5
    之前做项目实现聊天功能，有几个功能点我觉得挺复杂的。今天我来说一下，我是如何实现图片小表情在输入框中显示，发送给后端时只发送一个含义字符串如：[emoji]，然后正常回显在页面上。此demo使用vue3源码已上传：源码地址实现效果图：输入自定义表情发送并回显声明：这只是个demo，不涉及与后端交互，不过会在该交互的地方标记，如需实际应用于项目，请根据实际情况进行改造完善！父组件定义及逻辑实现父组件
  • VsCode使用 keep one's resolveY 前端vscodeide编辑器
    vscode前端vue项目启动：Vue项目的创建启动及注意事项-CSDN博客vscode使用教程：史上最全vscode配置使用教程-夏天的思考-博客园vscode如何从git拉取代码：vscode如何从git拉取代码•Worktile社区
  • 【前端】【vue-i8n】【element】Element 框架国际化配置指南：从 element-ui 到 element-plus 患得患失949 面试考题专栏（前后端）前端组件前端系统功能vue.js前端uii18nvue-i18nelment
    Element框架国际化配置指南：从element-ui到element-plus在全球化的大背景下，构建支持多语言的应用程序变得愈发重要。Element作为一款广泛使用的前端UI框架，为开发者提供了便捷的国际化（i18n）解决方案。本文将详细介绍在element-ui和element-plus中如何进行按需加载里的i18n定制。一、element-ui的i18n定制（一）官方文档指引elemen
  • vue框架使用 asuka613 前端基础知识汇总前端javascriptvue.js
    1.vue基础1.1特点渐进式框架国人开发、易学、易上手Vue的核心库只关注视图层声明式渲染组件系统1.2开发模式比较常见的三种开发模式：MVC、MVP、MVVMMVVM模式M：（model）数据对象，数据层V：（view）前端展示页面，显示层VM：（ViewModel）vue对象，逻辑层所谓的mvvm模式，通过vm层可以将v层和m层的数据进行双向绑定1.3设计模式设计模式：开发模式、发布订阅模式
  • 132java ssm springboot基于大数据的吉林省农村产权交易数据分析可视化平台系统（源码+文档+运行视频+讲解视频） QQ2279239102 springboot大数据数据分析开发语言mavenvue.js
    文章目录系列文章目录目的前言一、详细视频演示二、项目部分实现截图三、技术栈后端框架springboot前端框架vue持久层框架MyBaitsPlus系统测试四、代码参考源码获取目的摘要：本文介绍了基于JavaSSM和SpringBoot开发的吉林省农村产权交易数据分析可视化平台系统，为农村产权交易市场提供决策支持。系统前端利用HTML、CSS和JavaScript构建直观的可视化界面，后端运用Ja
  • 【Swift 算法实战】判断数组中是否存在重复元素 网罗开发 Swiftvue.jsleetcode算法
    网罗开发（小红书、快手、视频号同名）  大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、HarmonyOS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。图书作者：《ESP32-C3物联网工程开发实战》图书作者：《SwiftUI入门，进阶与实战》超级个体：CO
  • 前端笔记：vscode Vue nodejs npm 彳亍261 前端vscode
    1VSCode终端中默认cmd默认使用cmd(CommandPrompt),不使用PowerShell解决方式：【vscode配置】：vscode配置终端为cmd1命令面板（Ctrl+shift+p）2输入Terminal:SelectDefaultProfile之后回车3选择cmd(CommandPrompt)即可2npm镜像源配置在中国使用npm时，由于网络问题，经常需要配置镜像源以提高下载速
  • 添加按钮活蹦乱跳，子组件的Mounted 却装死？Vue 子组件的生命周期探秘！ 小丁学Java 产品资质管理系统vue2
    父组件index.vue，使用子组件ave-form.vue。子组件ave-form.vue，负责添加、查看、编辑、表单的显示。点击父组件中的添加按钮，子组件中的Mounted函数没有执行！！！“点击添加没反应？Vue子组件Mounted之谜大揭秘！”作者：小丁|日期：2025-03-04嘿，各位前端探险家‍‍！今天我们要一起破解一个让人抓狂的小谜题：为什么我在Vue子组件里辛辛苦苦写的mount
  • 从 ISO 到 GMT+8：Vue 前端时间格式的奇妙之旅！ 小丁学Java 产品资质管理系统vue.js前端javascript
    “从ISO到GMT+8：Vue前端时间格式的奇妙之旅！”作者：小丁|日期：2025-03-04嘿，各位前端探险家‍‍！今天我要带你们走进一个时间格式的“变形记”：从前端的ISO格式（"2025-03-04T07:28:17.058Z"）到后端期待的GMT+8"yyyy-MM-ddHH:mm:ss"（"2025-03-0415:28:17"），我如何在Vue项目中搞定这个“时间旅行”的小挑战？别急，
  • Getter 和 Setter 的秘密：为什么 Location 不翼而飞？ 小丁学Java 产品资质管理系统状态模式
    标题：Getter和Setter的秘密：为什么Location不翼而飞？️‍♂️嘿，各位技术探险家！欢迎来到今天的博客，今天我们要聊一个既基础又充满戏剧性的问题：为什么我的location字段没有getter方法就没法返回给前端？这是一个发生在Java和JSON序列化世界中的小小“悬案”，让我们戴上侦探帽，一起揭开它的神秘面纱吧！故事的开端：Location的失踪案想象一下，你是一个勤奋的后端开发
  • Svelte vs Vue：前端框架的深度对比与应用场景分析 赵大仁 Vue.js前端大语言模型vue.js前端框架javascript
    SveltevsVue：前端框架的深度对比与应用场景分析1.引言前端开发领域的框架选择一直是开发者关注的重点。在现代Web开发中，Vue和Svelte都是备受瞩目的框架，各自拥有不同的架构设计和适用场景。本文将从核心架构、性能对比、开发体验、生态系统、适用场景等多个维度，深入对比Vue和Svelte，帮助开发者做出更明智的选择。2.VuevsSvelte：基础概述特性VueSvelte发布年份20
  • 若依前后端不分离登录大致代码 m0_71908411 okhttp
    前端：地址：ruoyi-ui/src/views/login.vue中的方法下面这个就是登陆方法，看我注解。this.$store.dispatch是调用vuex中actions中的方法，是vuex相关知识。handleLogin(){this.$refs.loginForm.validate(valid=>{if(valid){this.loading=true;//判断是否勾选记住密码的操作i
  • 纯前端实现「羊了个羊」小游戏(附源码） 软件技术NINI 趣味源码前端
    实现一个类似于「羊了个羊」的纯前端小游戏是一个相对复杂的项目，因为它涉及许多前端技术和游戏逻辑。以下是一个简要的步骤指南，帮助你入门并实现这个项目。由于篇幅限制，这里只提供一个基础框架和一些关键点的实现思路。准备工作工具选择：使用一个现代的前端框架，如React、Vue或Angular。这里以React为例。使用CSS或预处理器（如Sass）进行样式管理。使用状态管理库（如Redux）管理游戏状态
  • 基于Vue&Axios制作音乐播放器(bilibili黑马程序员Vue入门学习记录) xxxrsongseven 前端javascriptvuevue.js前端css
    目录使用Vue制作一个音乐播放器前言VueVue导入Vue挂载Vue指令v-textv-htmlv-onv-showv-ifv-bindv-forv-modelaxiosaxios导入axios使用音乐网站代码HTMLCSSJS使用Vue制作一个音乐播放器前言第一次写，如有不足请指正！音乐播放器效果展示音乐播放器（密码：He371226）（域名出了点问题，临时使用）学习链接：黑马程序员vue前端基
  • [前端笔记——HTML介绍] 3.＜head＞标签里有什么？ 弓早早o_O 前端#前端html
    [前端笔记——HTML介绍]3.head标签里有什么？1.标题2.元数据：元素3.在站点增加自定义图标4.HTML中应用CSS和JavaScript5.为文档设定主语言元素的内容不会再浏览器中显示，它的作用是保存页面的一些元数据。接下来介绍几个head中重要的常用元素：1.标题元素可以为文档添加标题。注意和的区别：元素在页面加载完毕时显示在页面中，是为body添加标题的，通常只出现一次，用来标记页
  • 前端入门HTML篇 JackHell. 前端学习前端html
    前端学习HTML篇[W3school：https://www.w3school.com.cn/html/index.asp]HTML是用于创建可从一个平台移植到另一平台的超文本文档的一种简单标记语言，经常用来创建web页面。html是制作网页的基础，我们在网络营销中讲的静态网页，就是以html为基础制作的网页。//src为属性名"photo.jpg"为属性值页面标题一级标题二级标题段落内容标签是什
  • 前端vue面试题 微微的猪食小窝 vue面试题ajaxnode.jsvue.js
    一.自我介绍(我是谁来自哪里,今天来的目的,面试的岗位是什么,几年的工作经验,掌握的技术栈有哪些,开发过什么项目,项目中负责的板块是什么)面试官您好!我叫XXX,来自XXX,很荣幸能来我们公司面试,我从事前端开发有3年了,目前掌握的技术有html,css,js,ajax,vue,小程序,参与过各种类型的项目。我做过的项目有A,B,C,D,E那么最近做的一个项目是XXX在这个项目中我主要负责的板块是
  • 鸿蒙5.0实战案例：基于Search组件实现搜索栏 敢嗣先锋 鸿蒙开发HarmonyOS移动开发harmonyos鸿蒙开发移动开发组件化ArkUISearch页面布局
    往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）✏️鸿蒙（HarmonyOS）北向开发知识点记录~✏️鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~✏️鸿蒙应用开发与鸿蒙系统开发哪个更有前景？✏️嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~✏️对于大前端开发来说，转鸿蒙开发究竟是福还是祸？✏️鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？✏️记录一场鸿蒙开发岗位面
  • 鸿蒙5.0实战案例：基于ArkUI的验证码实现 敢嗣先锋 移动开发鸿蒙开发HarmonyOSharmonyos鸿蒙开发openharmony移动开发ArkUI
    往期推文全新看点（文中附带全新鸿蒙5.0全栈学习笔录）✏️鸿蒙（HarmonyOS）北向开发知识点记录~✏️鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~✏️鸿蒙应用开发与鸿蒙系统开发哪个更有前景？✏️嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~✏️对于大前端开发来说，转鸿蒙开发究竟是福还是祸？✏️鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？✏️记录一场鸿蒙开发岗位面
  • HTML面试题 没资格抱怨 HTML面试题html前端
    1.前端页面有哪三层构成，分别是什么？作用是什么？前端页面主要由三层构成，分别是结构层、表示层和行为层。这三层各自的作用如下：1.HTML（HyperTextMarkupLanguage）：结构层，它是网页的基础，用于定义网页的内容结构，如标题、段落、列表、图像等元素。HTML标签告诉浏览器如何组织和呈现这些内容。2.CSS（CascadingStyleSheets）：样式层，CSS负责为HTML
  • 【前端】Node.js使用教程 m0_74825172 面试学习路线阿里巴巴前端node.jsvim
    目录一、?Node.js开发环境和编译1.1安装Node.js1.2创建一个Node.js项目1.3编写Node.js程序1.4运行Node.js程序1.5使用Node.js模块二、高级的Node.js编程概念和示例2.1异步编程2.2错误处理2.3网络请求2.4构建Web服务器2.5数据库交互三、Node.js开发中重要方面和概念3.1环境变量和配置文件3.1.1使用环境变量3.1.2使用配置文
  • 带你深入了解前端【HTML+JavaScript】 软件技术NINI 前端htmljavascript
    DeepSeek-R1满血版思考完成嗯，用户想要深入了解前端中的HTML和JavaScript，所以我需要整理相关的信息，参考提供的搜索结果，特别是‌和‌，因为它们直接提到了HTML和JavaScript的结合使用。首先，确定HTML和JavaScript的基本关系，然后看看各个搜索结果里的内容有什么可以整合的。比如，搜索结果‌详细介绍了src和href的区别，而‌则讲解了如何在HTML中使用sc
  • AI生成的web框架 包含前后端 k8s管理等 LCY133 人工智能前端kubernetes
    好的，我现在需要根据用户提供的技术栈来设计一个Web平台的搭建方案。用户提到的技术包括前端、后端、算法，GitLab、Jenkins，阿里云ACK和ECS，MongoDB、Redis，Docker、K8s、Nginx。我需要综合考虑这些技术的整合，确保整个架构的高效、可靠和可扩展。首先，用户之前已经得到了一个架构方案，现在可能希望进一步细化或者调整。我需要回顾之前的方案，看看是否有遗漏或可以优化的
  • 【异常】商城H5首页接口调用慢开发踩坑日记 本本本添哥 003-中间件redis缓存数据库
    一、业务功能描述最近业务提出了修改首页UI功能的需求，原来首页都是通过店铺装修功能来实现的，但是原来店铺装修功能，通过接口/mallapi/pagedevise?pageType=1返回给前端数据是存在局限性，返回的都是在店铺装修后数据的缓存值，即返回的内容是用户点击确认之后，记录的是系统商品当时的瞬时值。下面让我们来看看这段代码，代码很简单，主要做了如下事情（1）校验页面分类pageType（1
  • 后端有没有开“跨域通行证”，对前端有什么影响？—— 一看就懂的对比指南 劲雨波 前端前端javascript
    一、快递员的规矩：跨域问题的核心想象浏览器是个严格的快递员，遵守一个规矩：“只送同小区快递，除非对方小区开了通行证！”这里的“通行证”就是后端的CORS配置。后端有没有开这个通行证，直接影响前端能不能顺利发送请求。二、两种场景对比：后端开没开通行证？场景1：后端没开通行证（没配置CORS）对前端的影响：开发时：快递员（浏览器）直接拒单！#控制台报错Accesstofetchat'http://ap
  • 前端开发手册大全 而 已 webjavascriptcsshtmljquerycss3
    web前端开发手册大全(学习参考)html中文中文参考手册：https://www.html.cn/shouce/html/1.htmlJavaScript中文参考手册：https://www.html.cn/shouce/js/11.htmlCSS3.0参考手册：https://www.html.cn/doc/css3/CSS教程手册（新）：https://www.html.cn/book/cs
  • 关于旗正规则引擎下载页面需要弹窗保存到本地目录的问题 何必如此 jsp超链接文件下载窗口
    生成下载页面是需要选择“录入提交页面”，生成之后默认的下载页面<a>标签超链接为：<a href="<%=root_stimage%>stimage/image.jsp?filename=<%=strfile234%>&attachname=<%=java.net.URLEncoder.encode(file234filesourc
  • 【Spark九十八】Standalone Cluster Mode下的资源调度源代码分析 bit1129 cluster
    在分析源代码之前，首先对Standalone Cluster Mode的资源调度有一个基本的认识： 首先，运行一个Application需要Driver进程和一组Executor进程。在Standalone Cluster Mode下，Driver和Executor都是在Master的监护下给Worker发消息创建(Driver进程和Executor进程都需要分配内存和CPU，这就需要Maste
  • linux上独立安装部署spark daizj linux安装spark1.4部署
    下面讲一下linux上安装spark，以 Standalone Mode 安装   1）首先安装JDK   下载JDK：jdk-7u79-linux-x64.tar.gz  ，版本是1.7以上都行，解压 tar -zxvf jdk-7u79-linux-x64.tar.gz     然后配置 ~/.bashrc&nb
  • Java 字节码之解析一 周凡杨 java字节码javap
        一： Java 字节代码的组织形式   类文件 {     OxCAFEBABE ，小版本号，大版本号，常量池大小，常量池数组，访问控制标记，当前类信息，父类信息，实现的接口个数，实现的接口信息数组，域个数，域信息数组，方法个数，方法信息数组，属性个数，属性信息数组 } &nbs
  • java各种小工具代码 g21121 java
    1.数组转换成List import java.util.Arrays; Arrays.asList(Object[] obj); 2.判断一个String型是否有值 import org.springframework.util.StringUtils; if (StringUtils.hasText(str)) 3.判断一个List是否有值 import org.spring
  • 加快FineReport报表设计的几个心得体会 老A不折腾 finereport
    一、从远程服务器大批量取数进行表样设计时，最好按“列顺序”取一个“空的SQL语句”，这样可提高设计速度。否则每次设计时模板均要从远程读取数据，速度相当慢！！ 二、找一个富文本编辑软件（如NOTEPAD+）编辑SQL语句，这样会很好地检查语法。有时候带参数较多检查语法复杂时，结合FineReport中生成的日志，再找一个第三方数据库访问软件（如PL/SQL）进行数据检索，可以很快定位语法错误。
  • mysql linux启动与停止 墙头上一根草
    如何启动/停止/重启MySQL一、启动方式1、使用 service 启动：service mysqld start2、使用 mysqld 脚本启动：/etc/inint.d/mysqld start3、使用 safe_mysqld 启动：safe_mysqld&二、停止1、使用 service 启动：service mysqld stop2、使用 mysqld 脚本启动：/etc/inin
  • Spring中事务管理浅谈 aijuans spring事务管理
    Spring中事务管理浅谈 By Tony Jiang@2012-1-20 Spring中对事务的声明式管理 拿一个XML举例 [html]  view plain copy print ? <?xml version="1.0" encoding="UTF-8"?>&nb
  • php中隐形字符65279（utf-8的BOM头）问题 alxw4616
    php中隐形字符65279（utf-8的BOM头）问题 今天遇到一个问题. php输出JSON 前端在解析时发生问题:parsererror.   调试: 1.仔细对比字符串发现字符串拼写正确.怀疑是 非打印字符的问题. 2.逐一将字符串还原为unicode编码. 发现在字符串头的位置出现了一个 65279的非打印字符.        
  • 调用对象是否需要传递对象(初学者一定要注意这个问题) 百合不是茶 对象的传递与调用技巧
        类和对象的简单的复习,在做项目的过程中有时候不知道怎样来调用类创建的对象,简单的几个类可以看清楚,一般在项目中创建十几个类往往就不知道怎么来看   为了以后能够看清楚,现在来回顾一下类和对象的创建,对象的调用和传递(前面写过一篇)   类和对象的基础概念:   JAVA中万事万物都是类 类有字段(属性),方法,嵌套类和嵌套接
  • JDK1.5 AtomicLong实例 bijian1013 javathreadjava多线程AtomicLong
    JDK1.5 AtomicLong实例 类 AtomicLong 可以用原子方式更新的 long 值。有关原子变量属性的描述，请参阅 java.util.concurrent.atomic 包规范。AtomicLong 可用在应用程序中（如以原子方式增加的序列号），并且不能用于替换 Long。但是，此类确实扩展了 Number，允许那些处理基于数字类的工具和实用工具进行统一访问。  
  • 自定义的RPC的Java实现 bijian1013 javarpc
            网上看到纯java实现的RPC，很不错。         RPC的全名Remote Process Call，即远程过程调用。使用RPC，可以像使用本地的程序一样使用远程服务器上的程序。下面是一个简单的RPC 调用实例，从中可以看到RPC如何
  • 【RPC框架Hessian一】Hessian RPC Hello World bit1129 Hello world
    什么是Hessian The Hessian binary web service protocol makes web services usable without requiring a large framework, and without learning yet another alphabet soup of protocols. Because it is a binary p
  • 【Spark九十五】Spark Shell操作Spark SQL bit1129 shell
    在Spark Shell上，通过创建HiveContext可以直接进行Hive操作   1. 操作Hive中已存在的表   [hadoop@hadoop bin]$ ./spark-shell Spark assembly has been built with Hive, including Datanucleus jars on classpath Welcom
  • F5　往header加入客户端的ip ronin47
    when HTTP_RESPONSE {if {[HTTP::is_redirect]}{         HTTP::header replace Location [string map {:port/ /} [HTTP::header value Location]]HTTP::header replace Lo
  • java-61-在数组中，数字减去它右边(注意是右边)的数字得到一个数对之差. 求所有数对之差的最大值。例如在数组{2, 4, 1, 16, 7, 5, bylijinnan java
    思路来自： http://zhedahht.blog.163.com/blog/static/2541117420116135376632/ 写了个java版的 public class GreatestLeftRightDiff { /** * Q61.在数组中，数字减去它右边(注意是右边)的数字得到一个数对之差。 * 求所有数对之差的最大值。例如在数组
  • mongoDB 索引 开窍的石头 mongoDB索引
    在这一节中我们讲讲在mongo中如何创建索引       得到当前查询的索引信息      db.user.find(_id:12).explain();        cursor: basicCoursor 指的是没有索引  &
  • [硬件和系统]迎峰度夏 comsci 系统
      从这几天的气温来看，今年夏天的高温天气可能会维持在一个比较长的时间内    所以，从现在开始准备渡过炎热的夏天。。。。    每间房屋要有一个落地电风扇，一个空调(空调的功率和房间的面积有密切的关系)    坐的，躺的地方要有凉垫，床上要有凉席       电脑的机箱
  • 基于ThinkPHP开发的公司官网 cuiyadll 行业系统
    后端基于ThinkPHP，前端基于jQuery和BootstrapCo.MZ 企业系统 轻量级企业网站管理系统 运行环境:PHP5.3+, MySQL5.0 系统预览 系统下载：http://www.tecmz.com 预览地址：http://co.tecmz.com 各种设备自适应 响应式的网站设计能够对用户产生友好度，并且对于
  • Transaction and redelivery in JMS (JMS的事务和失败消息重发机制) darrenzhu jms事务承认MQacknowledge
    JMS Message Delivery Reliability and Acknowledgement Patterns http://wso2.com/library/articles/2013/01/jms-message-delivery-reliability-acknowledgement-patterns/ Transaction and redelivery in
  • Centos添加硬盘完全教程 dcj3sjt126com linuxcentoshardware
    Linux的硬盘识别: sda        表示第1块SCSI硬盘 hda       表示第1块IDE硬盘 scd0      表示第1个USB光驱 一般使用“fdisk -l”命
  • yii2 restful web服务路由 dcj3sjt126com PHPyii2
    路由 随着资源和控制器类准备，您可以使用URL如 http://localhost/index.php?r=user/create访问资源，类似于你可以用正常的Web应用程序做法。 在实践中，你通常要用美观的URL并采取有优势的HTTP动词。 例如，请求POST /users意味着访问user/create动作。 这可以很容易地通过配置urlManager应用程序组件来完成 如下所示
  • MongoDB查询(4)——游标和分页[八] eksliang mongodbMongoDB游标MongoDB深分页
    转载请出自出处：http://eksliang.iteye.com/blog/2177567 一、游标         数据库使用游标返回find的执行结果。客户端对游标的实现通常能够对最终结果进行有效控制，从shell中定义一个游标非常简单，就是将查询结果分配给一个变量（用var声明的变量就是局部变量），便创建了一个游标，如下所示： > var
  • Activity的四种启动模式和onNewIntent() gundumw100 android
    Android中Activity启动模式详解 　　在Android中每个界面都是一个Activity，切换界面操作其实是多个不同Activity之间的实例化操作。在Android中Activity的启动模式决定了Activity的启动运行方式。 　　Android总Activity的启动模式分为四种： Activity启动模式设置： <acti
  • 攻城狮送女友的CSS3生日蛋糕 ini htmlWebhtml5csscss3
    在线预览：http://keleyi.com/keleyi/phtml/html5/29.htm   代码如下：   <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>攻城狮送女友的CSS3生日蛋糕-柯乐义<
  • 读源码学Servlet（1）GenericServlet 源码分析 jzinfo tomcatWebservlet网络应用网络协议
    Servlet API的核心就是javax.servlet.Servlet接口，所有的Servlet 类（抽象的或者自己写的）都必须实现这个接口。在Servlet接口中定义了5个方法，其中有3个方法是由Servlet 容器在Servlet的生命周期的不同阶段来调用的特定方法。     先看javax.servlet.servlet接口源码：  package
  • JAVA进阶：VO(DTO)与PO(DAO)之间的转换 snoopy7713 javaVOHibernatepo
      PO即 Persistence Object　　VO即 Value Object 　VO和PO的主要区别在于：　　VO是独立的Java Object。　　PO是由Hibernate纳入其实体容器（Entity Map）的对象，它代表了与数据库中某条记录对应的Hibernate实体，PO的变化在事务提交时将反应到实际数据库中。 　实际上，这个VO被用作Data Transfer
  • mongodb group by date 聚合查询日期 统计每天数据（信息量） qiaolevip 每天进步一点点学习永无止境mongodb纵观千象
    /* 1 */ { "_id" : ObjectId("557ac1e2153c43c320393d9d"), "msgType" : "text", "sendTime" : ISODate("2015-06-12T11:26:26.000Z")
  • java之18天 常用的类(一) Luob. MathDateSystemRuntimeRundom
    System类 import java.util.Properties; /** * System: * out:标准输出,默认是控制台 * in:标准输入,默认是键盘 * * 描述系统的一些信息 * 获取系统的属性信息:Properties getProperties(); * * * */ public class Sy
  • maven wuai maven
    1、安装maven：解压缩、添加M2_HOME、添加环境变量path 2、创建maven_home文件夹，创建项目mvn_ch01,在其下面建立src、pom.xml，在src下面简历main、test、main下面建立java文件夹 3、编写类，在java文件夹下面依照类的包逐层创建文件夹，将此类放入最后一级文件夹 4、进入mvn_ch01 4.1、mvn compile ,执行后会在
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他