椛丿未眠”
椛丿未眠”

前端入门（二）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绑定

条件渲染

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

  • 基于SpringBoot+Vue+uniapp的4S店客户管理系统(源码+lw+部署文档+讲解等) 百奇的代码小屋 #微信小程序毕设springbootvue.jsuni-app小程序
    文章目录前言详细视频演示具体实现截图技术栈后端框架SpringBoot前端框架Vue持久层框架MyBaitsPlus系统测试系统测试目的系统功能测试系统测试结论为什么选择我代码参考数据库参考源码获取前言博主介绍：✌全网粉丝15W+,CSDN特邀作者、211毕业、高级全栈开发程序员、大厂多年工作经验、码云/掘金/华为云/阿里云/InfoQ/StackOverflow/github等平台优质作者、专注
  • 2024年前端面试题加答案 2401_86372526 前端
    26、eval是做什么的？eval可以把字符串解析成JS代码并运行；避免使用eval,不安全，非常消耗性能；把JSON字符串传换成JSON对象时可以使用eval。27、null和underfined的区别？null表示定义了一个对象，值为“空值”；underfined表示这个不存在这个值。28、说说同步和异步的区别？同步：在同一时间内不允许出现别的操作。异步：在同一时间内允许不同的操作。29、de
  • 前端性能优化：HMR热更新和预获取加载 疯狂小料 前端面试
    最近发现项目开发，有点加载快，有点却是卡机式，甚至刷新导致白屏情况。于是，我找开发和性能优化的方法，找到下面几种。本文将深入探讨预获取（Prefetch）、动态导入（DynamicImport）和热模块替换（HMR）这三个关键技术1.预获取（Prefetch）：加速后续页面加载1.1什么是预获取？预获取（Prefetch）是一种性能优化技术，允许浏览器在空闲时提前加载后续页面或功能所需的资源（如J
  • 前端 | es6模块化、promise回调、webpack打包发布 weixin_47249930 前端webpackes6
    25.ES6模块化规范25.1定义每个js文件都是独立的模块通过import关键字来向内导入其他模块成员通过export关键字来对外共享模块成员25.2Node.js体验ES6模块化版本为14.15.1及以上（空文件夹终端“type”:“module”,—>生成package.json文件）在package.json的根节点中添加“type”:“module”节点（不写默认是commonJS）配置
  • android定义前端布局单位 新青年. android前端
    fungetWindowWidth(context:Activity):Int{//context.resources.configuration.screenWidthDpvalresources=context.resourcesvaldisplayMetrics=resources.displayMetricsreturnif(android.os.Build.VERSION.SDK_INT
  • 前端25.1.26学习记录 RlTED 前端学习javascript
    DOM是给予如：JS编程语言使用的apiDOM是树状结构根节点是html节点是DOM的最小单位。等Node类型可以类比于java的object类，所有的节点都需要继承TA。TA提供了最基本的操作方法如：访问父、子、同级节点增加和删除节点。Document类型Document类指向整个HTML界面。操作的是html页面中的节点。Document可以通过class、tag（标签）、id对节点进行查询D
  • 25.1.13 前端 Vue组件 十、插槽slot best_virtuoso 前端前端vue.jsjavascript
    我们已经了解到了组件能够接受任意类型的js值作为props，但组件要如何接收模板内容(html信息)呢？在某些场景中，可能想要为子组件传递一些模板片段（div，a标签等），让子组件在它们的组件中渲染这些片段例：插槽标题插槽内容importSlotsBasefrom"./components/SlotsBase.vue";exportdefault{components:{SlotsBase}}——
  • 【愚公系列】《循序渐进Vue.js 3.x前端开发实践》027-组件的高级配置和嵌套 愚公搬代码 愚公系列-书籍专栏vue.js前端前端框架
    标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等
  • 前端版本号管理：理解和应用 山禾女鬼001 前端
    在前端开发中，版本号管理是一个非常重要的话题。它涉及到如何标记和管理应用、库、框架以及依赖项的版本，确保开发者和团队成员之间能够协调一致地进行开发，避免因版本冲突带来的问题。今天，我们将深入探讨版本号的基本概念，常见的版本号规范，以及在前端开发中如何使用版本号。一、什么是版本号？版本号是用来标识软件或应用的不同发布版本的一个数字序列。它能够帮助开发者、维护人员和用户区分不同版本之间的差异，明确功能
  • 前端请求gzip，响应里却没有压缩返回 a212121212121
    前端请求gzip，响应里却没有压缩返回前后端分离的框架，前端vue后端的springboot都开启了gzip。前端请求Accept-Encoding:gzip,deflate后端却没有响应。数据没有压缩。试过了好几个浏览器都没有用。后来以为是yml格式的问题，也没有效果。有经验的能告诉我是怎么回事吗?yml添加的代码.（两种格式）compression:enabled:truemin-respon
  • 使用SSE流式输出（Javaweb前后端实战） 记得开心一点嘛 JavaWeb后端开发技术栈SSEJava后端
    目录一.什么是SSE？主要特点：二.SSE的实现过程：三.SSE的前端实现：1.创建EventSource对象：2.处理接收到的信息：3.处理特定事件：4.处理连接错误问题：5.关闭连接：四.SSE的后端实现：1.导入web依赖：2.创建Controller类：3.SeeEmitter的介绍以及使用方法：（1）.构造方法（2）.发送数据（3）.关闭连接（4）.连接状态处理（5）.获取超时时间（6）
  • uniapp中＜map＞地图怎么实现点位聚合？ GoppViper 前端uni-appuniapp前端前端框架地图聚合
    推荐学习文档golang应用级os框架，欢迎stargolang应用级os框架使用案例，欢迎star案例：基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总想学习更多golang知识，这里有免费的golang学习笔记专栏想学习更多前端知识，这里有免费的前端专栏确定聚合条件定义聚合的距离阈值：根据你的需求确定一个合适的距离阈值，当两个标记点之
  • 深入了解 npm 和 pnpm：前端包管理工具的选择与比较 山禾女鬼001 前端npmnode.js
    在现代前端开发中，包管理工具已经成为了必不可少的组成部分。它们帮助我们管理项目的依赖、自动化任务、以及在团队协作时确保一致的开发环境。最常见的前端包管理工具有npm和pnpm，它们各自具有独特的特点和优势。今天，我们就来一起深入了解这两款工具，看看它们的异同以及在实际开发中如何选择合适的工具。一、什么是npm？npm(NodePackageManager)是目前最流行的JavaScript包管理工
  • 探索前端的未来：深度使用 SolidJS 构建高性能用户界面 桂月二二 前端ui
    SolidJS是近年来前端开发领域的一颗新星，它结合了React的思维模式和Vue的性能优势，提供了一种高效且轻量的框架解决方案。本文将带你深入了解SolidJS的实际使用，并探索如何利用其核心特性构建现代化的高性能应用。为什么选择SolidJS？相比于其他框架，SolidJS有以下独特优势：超高性能：基于fine-grainedreactivity（细粒度反应性）机制，仅更新必要的DOM节点。零
  • Electron: 跨平台桌面应用开发框架概览 百态老人 人工智能笔记
    Electron的背景Electron是一个开源框架，允许开发者使用Web技术构建跨平台的桌面应用程序。它最初由GitHub开发，用于构建Atom编辑器，后来发展成为一个独立的项目，支持构建各种桌面应用程序，如VisualStudioCode、Slack、WhatsApp等。Electron的核心优势在于它结合了Chromium的UI能力和Node.js的后端功能，使得前端开发者可以使用熟悉的HT
  • 终于把前后端sm加解密以及加签验证调通了。 清风孤客 前端javascriptspringjavaspringboot
    终于把前后端sm加解密以及加签验证调通了！领导要求我对项目的数据传输安全考虑下，因此就想到了对敏感字段做加密和对请求、响应做数字签名验证。网上看了很多文章，可能是因为我对加密这块不了解，感觉都比较乱。所以前前后后花了4天才把前后端调通。特地写一篇文章记录下流程。这里使用的是sm国密算法。不对的地方请读者评论指出。1.简单说明：前端使用sm-crypto库后端加密库使用bc库，架构上使用aop，注解
  • python web开发框架对比,python的web框架有哪些 2401_84503581 人工智能
    大家好，小编为大家解答pythonweb框架主要的三大基本框架的问题。很多人还不知道pythonweb开发框架对比，现在让我们一起来看看吧！本篇文章给大家谈谈pythonweb开发框架有哪些，以及pythonweb前端开发框架，希望对各位有所帮助，不要忘了收藏本站喔。1.Django框架官网：https://github.com/django/django.git优点：是一个高层次PythonWe
  • boostrap组件 柒染‍ csshtml5html
    Bootstrap来自Twitter（推特），是目前最受欢迎的前端框架。Bootstrap是基于HTML，css，JavaScript的，它简洁灵活，使得web开发更加快速。框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制的样式库，组件和插件。使用者要按照框架所规定的某种规范进行开发。这是我所学到的用CSS基础，所以我要分享给你们，希望可以帮助到你们。组
  • Vue前端项目构建 踏 浪 vuevuevue-clivue脚手架
    目录1、安装Vue脚手架1.1安装node.js1.2安装npm1.3安装Vue脚手架2、通过Vue脚手架创建项目2.1基于3.x版本的脚手架创建vue项目，这里使用图形界面方式创建。3、启动项目4、项目初始化文件结构5、Vue脚手架自定义配置6、安装Element-UI插件7、使用Element-UI
  • 如何设计一个合理的vue前端项目架构 叫我阿柒啊 vue.js前端架构
    在前端开发中，我学习的是vue的开发路线。在最初的学习中，除了学习理论知识，还有就是看一些开源项目学习如何将vue应用到实际开发中。合理的项目架构设计是项目成功的基础之一。一个好的架构不仅可以提升代码的可读性和可维护性，还能提高开发效率，并降低项目的长期维护成本。所以，本文将以构建项目为起点，探讨如何设计关于vue的前端架构。1.项目初始化1.1创建项目vue不是在IDE中创建项目，而是使用工具在
  • 前端开发实战：创建简易HTML计算器 不胖的羊
    本文还有配套的精品资源，点击获取简介：计算器是执行基本数学运算的应用程序，通常在IT和前端开发领域中通过HTML、CSS和JavaScript实现。HTML定义页面结构和布局，JavaScript赋予计算器动态交互功能，例如监听按钮点击事件、执行计算和更新结果显示。该项目涉及HTML的元素结构、JavaScript的事件处理和DOM操作，是学习Web开发基础的理想练习。1.计算器的基本概念和应用1
  • java毕业设计校园共享单车管理系统源码+lw文档+mybatis+系统+mysql数据库+调试 好好吃肉 mybatismysql数据库
    java毕业设计校园共享单车管理系统源码+lw文档+mybatis+系统+mysql数据库+调试java毕业设计校园共享单车管理系统源码+lw文档+mybatis+系统+mysql数据库+调试本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据
  • 独立站API接口安全：零信任架构的实践与挑战 FBAPI3713612741 pythononeapi爬虫网络大数据
    随着数字化时代的深入发展，电商平台已成为全球经济的重要支柱。在这些平台中，API（应用程序编程接口）接口扮演着越来越重要的角色，不仅连接了电商平台的前端和后端系统，还促进了与第三方服务和应用的无缝集成。然而，随着API接口在电商平台中的广泛应用，其安全性问题也日益凸显。为了应对这一挑战，零信任架构作为一种先进的安全理念，被越来越多的电商平台采用来保障API接口的安全。本文将深入探讨独立站API接口
  • SpringBoot后端服务重定向 m0_74825634 面试学习路线阿里巴巴springboot后端java
    SpringBoot后端服务重定向方法引言方案使用SpringMVC的重定向功能使用SpringBoot的路径匹配功能使用反向代理使用SpringCloudGateway直接调用Controller层接口最后引言SpringBoot开发中，后端服务对代码进行重构后，计划更改一个功能接口的URL地址。但是却不想更改前端代码。这时就需要用到重定向，将前端原来的URL请求重定向到新的URL地址。方案使用
  • 前端力扣刷题 | 5：hot100之 普通数组 酒酿泡芙1217 力扣hot100leetcode前端算法
    53.最大子数组和给你一个整数数组nums，请你找出一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。子数组是数组中的一个连续部分。示例：输入：nums=[-2,1,-3,4,-1,2,1,-5,4]输出：6解释：连续子数组[4,-1,2,1]的和最大，为6。法一：双指针初始化：res用来存储当前的最大和，初始值为负无穷大。left是子数组的左边界，但它并不在实际计算中起作用，因
  • 影视仓—2025年最新源接口，最强大便捷的影视盒子工具 SunnyRun！ 智能电视电视盒子tvbox影视仓影视仓最新接口源2025影视仓最新接口电视安装三方软件
    《前端开发面试题进阶秘籍》：前端登顶-前端知识点梳理小米盒子丨小米丨红米电视安装第三方软件教程！华为荣耀电视智慧屏安装第三方软件教程！天猫魔盒安装第三方软件、设置第三方软件自启方法！海信电视安装第三方软件通用教程！创维电视安装第三方软件！影视仓配置教程与使用小技巧！影视仓最新接口,2025免费API接口,TVBox源,影视仓源,4K配置接口,免费数据调用,绛州速寄,五折快递,寄大件物流,TV盒子配
  • （React组件基础）前端八股文修炼Day6 筱语悠里 前端react.js前端框架
    一类组件与函数组件有什么异同在React中，类组件和函数组件是创建组件的两种主要方式。随着React的发展，尤其是自Hooks在React16.8中引入以来，函数组件的功能变得更加强大，使得它们能够更加方便地与类组件相竞争。下面是类组件与函数组件在不同方面的异同：类组件特征:使用ES6的类语法定义。必须包含render()方法，其返回React元素。可以使用React生命周期方法（如compone
  • 基于SpringBoot的模拟证券交易系统 SAFE20242034 #一SpringBootspringboot后端java
    模拟证券交易系统项目概述本项目是一个基于Java的模拟证券交易系统，主要功能包括用户注册、登录、账户管理、股票查询、股票买卖以及交易记录查询等操作。系统采用SpringBoot实现后端，MySQL作为数据存储，前端使用HTML和JavaScript提供简单交互。主要功能模块1.用户注册与登录用户可以注册一个账户，包括用户名、密码、初始余额。用户登录后可访问其账户信息和进行股票交易操作。2.股票查询
  • 【自己动手开发Webpack插件：开启前端构建工具的个性化定制之旅】 Orange301511 大前端前端webpacknode.jsjavascripttypescript
    在前端开发的世界里，Webpack无疑是构建工具中的“明星”。它强大的功能可以帮助我们高效地打包和管理前端资源。然而，有时候默认的Webpack功能可能无法完全满足我们的特定需求，这时候就需要自定义Webpack插件来大展身手啦！今天，我们就来一起探索如何开发自己的Webpack插件。一、什么是Webpack插件？Webpack插件就像是一个神奇的小助手，在Webpack打包的过程中，在特定的时刻
  • 在 Vue 3 中，怎么管理环境变量 ＆白帝＆ vue3vue.js前端javascript
    在Vue3中，环境变量管理是通过.env文件来进行的，利用这些文件可以让开发者根据不同的环境（开发、生产、测试等）配置不同的变量。这一机制由Vite构建工具支持，它帮助开发者根据不同的环境需求做出相应配置。1.环境变量的基本概念在前端开发中，环境变量通常用于存储配置信息、密钥、API地址等，这些信息可能会因不同的部署环境而有所不同。通过.env文件，开发者可以确保在开发环境、生产环境等不同环境下使
  • 关于旗正规则引擎下载页面需要弹窗保存到本地目录的问题 何必如此 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其他