Sup星月★然
Sup星月★然

Vue学习

Vue学习

  • 1. Vue概述
  • 2. 快速入门
  • 3. Vue 指令
    • 2.3.1 v-bind 和 v-model
    • 2.3.2 v-on
    • 2.3.3 v-if 和 v-show
    • 2.3.4 v-for
  • 4. 案例
  • 5. 生命周期

1. Vue概述

Vue 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，容易与其它库或已有项目整合。vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

2. 快速入门

  • 1） 在VS Code 中创建文件 Vue-入门.html，并在同级目录中创建js文件夹，将 vue.js 文件拷贝到 js 目录。

  • 2）在 Vue-入门.html 中引入 vue.js 文件

  • 3）在html区域编写视图，其中{{}}是插值表达式，是用来将vue对象中定义的model展示到页面上的。

    
    
    
        
        {{message}}

  • 4） 定义vue对象，代码如下：

    其中，有三个属性：

    • el: 用来指定哪些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值
    • data: 用来定义数据模型
    • methods: 用来定义函数。这个我们在后面就会用到。

    浏览器打开效果如图所示：
    Vue学习_第1张图片
    整体代码如下：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-快速入门title>
    <script src="js/vue.js">script>
head>
<body>

    <div id="app">
        <input type="text" v-model="message">
        {{message}}
    div>

body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
            message: "Hello Vue"
        }
    })
script>
html>

3. Vue 指令

上述案例中出现了属性v-model，这个就是vue的指令。
指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…
在vue中，通过大量的指令来实现数据绑定到视图，如下表所示：

指令 作用
v-bind 为HTML标签绑定属性值，如设置 href , css样式等
v-model 在表单元素上创建双向数据绑定
v-on 为HTML标签绑定事件
v-if
v-else-if 条件性的渲染某元素，判定为true时渲染,否则不渲染
v-else
v-show 根据条件展示某元素，区别在于切换的是display属性的值
v-for 列表渲染，遍历容器的元素或者对象的属性

2.3.1 v-bind 和 v-model

  • v-bind: 为HTML标签绑定属性值，如设置 href , css样式等。当vue对象中的数据模型发生变化时，标签的属性值会随之发生变化。
    接下来我们通过代码来演示：

    DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令title>
    <script src="js/vue.js">script>
head>
<body>
    <div id="aa">
        <a v-bind:href="url">链接1a>
        <a :href="url">链接2a>
        <input type="text" v-model="url">
    div>
    
body>
<script>
    new Vue({
        el: "#aa",
        data: {
            url: "https://www.baidu.com"
        }
    })
script>
html>

    注意：v-bind: 可简写为: ，html属性前面有:表示采用的vue的属性绑定！

  • v-model： 在表单元素上创建双向数据绑定。什么是双向？

    • vue对象的data属性中的数据变化，视图展示会一起变化
    • 视图数据发生变化，vue对象的data属性中的数据也会随着变化。

    视图数据为什么会发生变化呢？只有表单项标签！所以双向绑定一定是使用在表单项标签上的。
    双向绑定的作用：可以获取表单的数据的值，然后提交给服务器

2.3.2 v-on

v-on: 用来给html标签绑定事件的。需要注意的是如下2点：

  • v-on语法给标签的事件绑定的函数，必须是vue对象种声明的函数
  • v-on语法绑定事件时，事件名相比较js中的事件名，没有on

例如：在js中，事件绑定demo函数：

vue中，事件绑定demo函数：

我们通过代码来演示：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令title>
    <script src="js/vue.js">script>
head>
<body>
    <div id="aa2">
        <input type="button" value="点我一下" v-on:click="handle()">
        <input type="button" value="点我一下" @click="handle()">
    div>
    
body>
<script>
    new Vue({
        el: "#aa2",
        data: {
            
        },
        methods: {
            handle: function(){
                alert("你点了我一下...");
            }
        }
    })
script>
html>

同样，v-on也存在简写方式，即v-on: 可以替换成@。

2.3.3 v-if 和 v-show

我们直接通过代码来演示效果。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-if与v-showtitle>
    <script src="js/vue.js">script>
head>
<body>
    <div id="app">
        
        年龄<input type="text" v-model="age">经判定,为:
        <span>年轻人(35及以下)span>
        <span>中年人(35-60)span>
        <span>老年人(60及以上)span>

        <br><br>
    div>
body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           age: 20
        },
        methods: {
            
        }
    })
script>
html>

其中采用了双向绑定到age属性，意味着我们可以通过表单输入框来改变age的值。
需求：
当我们改变年龄时，动态判断年龄的值，呈现对应年龄的文字描述。
可通过 v-if 指令编写如下代码：

年龄<input type="text" v-model="age">经判定,为:
<span v-if="age <= 35">年轻人(35及以下)span>
<span v-else-if="age > 35 && age < 60">中年人(35-60)span>
<span v-else>老年人(60及以上)span>

浏览器打开测试效果如下图：
Vue学习_第2张图片
如果我们修改 v-if 指令为 v-show 指令，代码如下：

年龄<input type="text" v-model="age">经判定,为:
<span v-show="age <= 35">年轻人(35及以下)span>
<span v-show="age > 35 && age < 60">中年人(35-60)span>
<span v-show="age >= 60">老年人(60及以上)span>

打开浏览器，可以发现，浏览器呈现的效果是一样的，但是浏览器中html源码不一样。
Vue学习_第3张图片
总结：
v-if指令，不满足条件的标签代码直接没了，而v-show指令中，不满足条件的代码依然存在，只是添加了css样式来控制标签不去显示。

2.3.4 v-for

从名字我们就能看出，这个指令是用来遍历的。其语法格式如下：

<标签 v-for="变量名 in 集合模型数据">
    {{变量名}}

需要注意的是：需要循环的那个标签，v-for 指令就写在那个标签上。
有时我们遍历时需要使用索引，那么 v-for 指令遍历的语法格式如下：

<标签 v-for="(变量名,索引变量) in 集合模型数据">
    
   {{索引变量 + 1}} {{变量名}}

不多说，直接代码演示：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-fortitle>
    <script src="js/vue.js">script>
head>
<body>
	<div id="app">
	     <div v-for="addr in addrs">{{addr}}div>
	     <hr>
	     <div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}div>
	div>
body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           addrs:["北京", "上海", "西安", "成都", "深圳"]
        },
        methods: {
            
        }
    })
script>
html>

Vue学习_第4张图片

4. 案例

需求：通过 Vue 完成表格数据的渲染展示。
Vue学习_第5张图片
提前准备如下代码：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-案例title>
    <script src="js/vue.js">script>
head>
<body>
    
    <div id="app"> 
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号th>
                <th>姓名th>
                <th>年龄th>
                <th>性别th>
                <th>成绩th>
                <th>等级th>
            tr>
        table>
    div>

body>

<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {
            
        },
    })
script>
html>

思路：

  • 使用v-for的带索引方式添加到表格的标签上
  • 使用{{}}插值表达式展示内容到单元格
  • 使用索引+1来作为编号
  • 使用v-if来判断，改变性别和等级这2列的值

需求实现代码：

 <tr align="center" v-for="(user,index) in users">
     <td>{{index + 1}}td>
     <td>{{user.name}}td>
     <td>{{user.age}}td>
     <td>
         <span v-if="user.gender == 1">男span>
         <span v-if="user.gender == 2">女span>
     td>
     <td>{{user.score}}td>
     <td>
         <span v-if="user.score >= 85">优秀span>
         <span v-else-if="user.score >= 60">及格span>
         <span style="color: red;" v-else>不及格span>
     td>
tr>

在这里插入图片描述

5. 生命周期

vue的生命周期：指的是vue对象从创建到销毁的过程。
vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：

状态 阶段周期
beforeCreate 创建前
created 创建后
beforeMount 挂载前
mounted 挂载完成
beforeUpdate 更新前
updated 更新后
beforeDestroy 销毁前
destroyed 销毁后

其中我们需要重点关注的是 mounted ,其他的了解即可。
Vue学习_第6张图片
Vue学习_第7张图片
mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。我们一般用于页面初始化自动的ajax请求后台数据。
编写mounted声明周期的钩子函数，与methods同级，代码如下：

<script>
    //定义Vue对象
    new Vue({
        el: "#app", //vue接管区域
        data:{
           
        },
        methods: {
            
        },
        mounted () {
            alert("vue挂载完成,发送请求到服务端");
        }
    })
script>
完结

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

  • python安装virtual虚拟环境 LookUpMan python
    本文参考：https://www.cnblogs.com/guishou/p/7134386.html1.安装pipinstallvirtualenv2.创建虚拟环境virtualenv-pc:\python3\python.exevenvc:\python3\python.exe为指定python解释器的路径3.激活虚拟环境首先进入创建的虚拟环境下目录中的scripts中cdvenv/scrip
  • (代码可运行)Bootstrap框架的HTML示例 程序员大侠 前端CSShtmlbootstrap前端
    Bootstrap：一套流行的前端开发框架，基于HTML、CSS和JavaScript，适用于快速构建响应式Web应用。以下是一个使用Bootstrap构建的简单响应式Web应用的HTML示例：BootstrapExampleHello,Bootstrap!CardtitleSomequickexampletexttobuildonthecardtitleandmakeupthebulkofthe
  • 移动端测试 渔jy Android系统及应用androidlinux
    三种移动端产品类型介绍移动端应用的测试其自身特点，和其他传统测试又有一些独特的测试方法与思路。移动端应用又可以进一步细分为三大类：WebApp指的是移动端的Web浏览器，其实和PC端的Web浏览器没有任何区别，只不过Web浏览器所依附的操作系统不再是Windows和Linux了，而是iOS和Android了。WebApp采用的技术主要是，传统的HTML、JavaScript、CSS等Web技术栈，
  • html 文本标签 不换行,css如何强制不允许换行？ 无名野人 html文本标签不换行
    在我们日常的编码中经常会遇到这段文字不可以换行，或者自动换行的需求。下面我们来看一下如何使用css设置强制文字不换行。white-space:nowrap;强制不换行，对中文英文都起作用。css代码：div{white-space:nowrap;}示例：p{white-space:nowrap}这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一些文本。这是一
  • 程序员技术练级攻略 bo o ya ka 操作系统设计模式python
    转自：http://coolshell.cn/articles/4990.html前言你是否觉得自己从学校毕业的时候只做过小玩具一样的程序？走入职场后哪怕没有什么经验也可以把以下这些课外练习走一遍（朋友的抱怨：学校课程总是从理论出发，作业项目都看不出有什么实际作用，不如从工作中的需求出发）建议：不要乱买书，不要乱追新技术新名词，基础的东西经过很长时间积累而且还会在未来至少10年通用。回顾一下历史，
  • Vue:设置背景图片&解决background-color不生效问题 蜉蝣Sakura vue初学vue
    在画页面时,想给页面设置背景图,采用如下的方案页面index.vue部分如下...页面index.vue样式部分如下.background{position:fixed;}效果如下这时,想给这一部分设置背景颜色为白色...样式如下.overview{margin:20pxauto;height:100%;width:70%;background-color:white;}发现设置backgroun
  • 【html+css网站设计】 小翔很开心 htmlcss前端
    学习笔记：HTML基础概念1.vscode常用设置1.1打开文件1.2新建文件1.3自动保存(ctrl+S)1.4文件重命名1.5删除文件2.vscode常用快捷键2.1自动补全HTML基本结构2.2标签自动补全2.3复制当前行|复制多行2.4删除当前行|删除多行2.5单行注释|取消单行注释2.6多行注释|取消多行注释2.7统一编辑2.8生成多个2.9文字2.10打开浏览器2.11快捷键可以组合使
  • vue css 背景图片路径 饭盒尽头的GIS cssvue.js
    vuecss背景图片路径background:url('~@/assets/images/nav/[email protected]')no-repeatcenter;
  • Vue 的常用指令以及相关修饰符的含义 渡鸦七 Vuevue.jsjavascript前端
    Vue的常用指令插值表达式{{}}用来在Vue模板中插入变量。{{message}}newVue({el:'#app',data:{message:'HelloVue!'}})v-textv-text指令用来设置元素的文本内容。newVue({el:'#app',data:{message:'HelloVue!'}})v-htmlv-html指令用来设置元素的HTML内容。newVue({el:'
  • html中，想添加一段文字，使用什么标签最合理？ 流泪兔兔头 html前端
    在HTML中，选择合适的标签来添加一段文字取决于这段文字在页面中的作用以及上下文。下面是一些常见的标签及其用途：:这是表示段落的最常见标签。当你要添加的是普通文本段落时，使用标签是最合理的。它告诉浏览器这是一个独立的段落，通常浏览器会在这段文字前后添加一些默认的外边距。:这是一个块级元素，用于组合其他HTML元素以形成更大的部分或区块。本身没有语义，通常用于布局目的或作为一个容器来应用样式。如果要
  • 使用vue2和css样式添加背景图片 Sky1900_ css前端css3html
    登录.ma{/*//这里地址是用项目中图片所在路径为准*/background:url("../assets/2.jpg");/*//将图片样式不重复*/background-repeat:no-repeat;/*//设置图片大小*/background-size:100%;/*设置全屏*/position:fixed;/*设置div高度*/height:100%;/*设置div宽度*/width
  • 【vue css】background设置背景图片不显示问题 米老鼠的摩托车日记 vue2CSS样式css前端
    问题：如上图所示，添加背景图片页面没有显示解决：添加background-position:centercenter即可显示但是不知道为什么添加这个属性就可以，求大神解惑
  • HTML 文本标签 一壶浊酒.. 前端开发html前端
    一个静态页面绝大部分都是由文字、图片、超链接、音频、视频组成。动态页面和静态页面的区别在于：是否与服务器进行数据交互标题标签这是一级标题这是二级标题这是三级标题这是四级标题这是五级标题这是六级标题web前端开发床前明月光，疑是地上霜。举头望明月，低头思故乡这是普通文本这是粗体文本这是粗体文本斜体文本斜体文本斜体文本--->(a+b)2=a2+b2+2abH2SO4是指硫酸分子水果原价：6元现在：5
  • 我们在进行前后端联调的时候 如何避免数据丢失 拿不到返回数据 查看不了状态信息等问题？ 朱道阳 底层原理面试八股回归前端npmgitpython
    最近在进行前后端联调开发的全栈开发工作但是这时候会出现很多问题比如说前端拿不到数据获得的状态码可能是正确的传的值却是null我进行了学习总结出一下几点一、数据校验前端程序员必须对后端提供的数据进行严格的数据校验。数据校验的目的是确保接收到的数据符合预期的格式和类型。在JavaScript中，可以使用typeof操作符或Array.isArray()方法进行基本的类型检查。更复杂的数据结构，可以使用
  • 《响应式 Web 设计：纯 HTML 和 CSS 的实现技巧》 陈在天box 前端htmlcss
    一、引言在当今数字化时代，人们使用各种不同的设备访问网页，包括台式电脑、笔记本电脑、平板电脑和智能手机等。为了确保网页在不同设备上都能提供良好的用户体验，响应式Web设计变得至关重要。响应式Web设计是一种能够根据设备屏幕大小和分辨率自动调整布局和样式的设计方法。本文将深入探讨如何使用纯HTML和CSS实现响应式Web设计，分享一些实用的技巧和最佳实践。二、响应式Web设计的重要性（一）满足不同设
  • 使用docker部署考试系统 汪公子492 docker
    web--拉取nginx--挂载项目文档dist--dockerrun-itd-v/root/pes/web/dist/:/usr/share/nginx/html-p80:80nginx:latest配置mysql服务--拉取mysql:5.7.44镜像--创建容器测试dockerrun-itd-p3306:3306-eMYSQL_ROOT_PASSWORD=rootmysql:5.7.44do
  • 掌握Go语言邮件发送：net/smtp实用教程与最佳实践 walkskyer golang标准库golanggithub开发语言
    掌握Go语言邮件发送：net/smtp实用教程与最佳实践概述基本配置与初始化导入`net/smtp`包设置SMTP服务器基本信息创建SMTP客户端实例身份验证发送简单文本邮件配置发件人信息构建邮件头部信息编写邮件正文使用`SendMail`方法发送邮件示例代码发送带附件的邮件邮件多部分格式简介构建带有附件的邮件体使用`SendMail`方法发送邮件发送HTML格式的邮件HTML邮件的优势和应用场景
  • windows安装openssh 大猫熊猫 openssh
    下载setupssh-9.8p1-1.exehttps://www.mls-software.com/opensshd.html安装完成后，会提示密码，记录cmd命令窗口，管理员权限打开#启动服务netstartopensshd#终止服务netstopopensshd用户名就是电脑的用户名
  • 基于SpringBoot+Vue+MySQL的社区维修平台 程序员毕设项目学长 Java项目springbootmysqlphpvue.jsjava开发语言后端
    系统背景  系统管理也都将通过计算机进行整体智能化操作，对于社区维修平台所牵扯的管理及数据保存都是非常多的，例如住户管理、社区公告管理、维修工管理、维修订单管理、接单信息管理、订单信息管理、在线沟通管理、举报信息管理、留言板管理、系统管理等，这给管理者的工作带来了巨大的挑战，面对大量的信息，传统的管理系统，都是通过笔记的方式进行详细信息的统计，后来出现电脑，通过电脑输入软件将纸质的信息统计到电脑上
  • 前端面试题（附答案）持续更新中…… 卖家导航 程序员前端
    块标签：div、h1~h6、ul、li、table、p、br、form。特征：独占一行，换行显示，可以设置宽高，可以嵌套块和行行标签：span、a、img、textarea、select、option、input。特征：只有在行内显示，内容撑开宽、高，不可以设置宽、高（img、input、textarea等除外）。5.清除浮动⭐⭐⭐父级div定义overflow:hidden结尾处加空div标签c
  • 牛客错题集3，前端开发结构 卖家导航 程序员oracle数据库
    在Thread中有一个成员变量ThreadLocals，该变量的类型是ThreadLocalMap,也就是一个Map，它的键是threadLocal，值为就是变量的副本。通过ThreadLocal的get()方法可以获取该线程变量的本地副本，在get方法之前要先set,否则就要重写initialValue()方法。ThreadLocal的使用场景：数据库连接：在多线程中，如果使用懒汉式的单例模式创
  • Node.js+Express|Cookie&Session机制理解|实现保存登录状态 绍重先
    Q&A各个用户的sessionname如何设置用登陆的用户名？用当时时间？req.session.name=req.body.usernamelogout？url列表标签posthtml退出登陆js//登出事件监听varlogout=document.getElementById('logout');logout.onclick=function(){alert('logout');varlogo
  • 掌财社:在html5中使用video进行全屏播放与自动播放的代码方法总结！ weixin_45378258 HTML
    今天由于在之前小编在项目中遇到的有关于：“在html5中使用video进行全屏播放与自动播放的代码方法总结！”这方面的内容，所以今天就来和大家分享有关于这方面的相关内容！近期开始开发公司新版官网，首页顶部（header）是一个全屏播放的小视频,现简单总结如下：页面代码：其中php简单判断了一下是否是移动设备,移动设备不展示视频(如果移动端展示的话,需要解决iOS上无法自动播放的问题):ps:如果H
  • 07_React 路由 qiao若huan喜 React全家桶react.js前端前端框架
    React路由（5.x版本）一、相关理解1、SPA的理解2、路由的理解2.1什么是路由？2.2路由分类2.2.1后端路由2.2.2前端路由3、react-router-dom（Web开发使用）的理解二、react-router-dom相关API1、内置组件1.1BrowserRouter1.2HashRouter1.3Route1.4Redirect1.5Link1.6NavLink1.7Swit
  • WebKit 简介及工作流程深度解析 不知名靓仔 webkitchromesafariedge
    WebKit是一个开源的浏览器引擎，最初由苹果公司为Safari浏览器开发，后来被多个浏览器和应用采纳，如早期的Chrome和众多移动平台上的浏览器。WebKit不仅仅是一个渲染引擎，它集成了HTML、CSS、JavaScript的解析与渲染能力，以及网络资源加载、图形处理、排版布局等功能，为用户提供丰富的网页浏览体验。本文将深入探讨WebKit的核心组件以及其复杂的工作流程。WebKit核心架构
  • 深入解析`node-html-to-image`的`main.ts`源码：实现HTML到图片的转换 软考鸭 nodeHtmlToImagehtml前端nodeHtmlToImage
    引言node-html-to-image是一个强大的Node.js库，它允许开发者将HTML内容转换为图片。本文将深入解析该库的main.ts文件，揭示其内部工作原理，并帮助开发者更好地理解和使用该库。项目背景与功能概述node-html-to-image的主要功能是将HTML字符串或文件渲染为图片。它支持多种输出格式（如PNG、JPEG等），并提供了一系列配置选项，如图片质量、透明度等。该库利用
  • ubuntu 16(7) 2401_84715880 单元测试功能测试学习
    网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化的资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！conf：存放配置文件html：静态网页logs：存
  • 使用transform对html的video播放器窗口放大 宣晨光 前端整理htmlvideo缩放transform
    核心是使用播放容器$('video').css({'transform':'scale(2)','transform-origin':'centertop'});其中scale表示放大倍数，可以是小数transform-origin表示位置，1）可以使用坐标点如'120px200px'2）或者使用方位坐标，leftrighttopbottom总共九个，如左上方'lefttop'上方‘topcent
  • RapidJson递归去除空值元素Value Cloudox_
    RapidJson是一款高效的C++处理JSON字符串的库。教程：http://rapidjson.org/zh-cn/md_doc_tutorial_8zh-cn.html#QueryObject源码：https://github.com/Tencent/rapidjson但不得不说教程写的不太全，网上资料也很少，大都重复教程的范畴。项目中有个蛋疼的需求要把JSON字符串中值为空的键值对去掉，C
  • element-ui layout布局 铺满整个空间方法 遇事不决AI解决 uicss3cssvue.jsjavascript
    h5布局文件上传css样式有些朋友用height:100%并不能铺满，这个时候可以使用height:100vh即可铺满html,body,.el-container{/*设置内部填充为0，几个布局元素之间没有间距*/padding:0px!important;/*外部间距也是如此设置*/margin:0px!important;/*统一设置高度为100%*/height:100vh;}有任何问题都
  • Java实现的基于模板的网页结构化信息精准抽取组件：HtmlExtractor yangshangchuan 信息抽取HtmlExtractor精准抽取信息采集
    HtmlExtractor是一个Java实现的基于模板的网页结构化信息精准抽取组件，本身并不包含爬虫功能，但可被爬虫或其他程序调用以便更精准地对网页结构化信息进行抽取。   HtmlExtractor是为大规模分布式环境设计的，采用主从架构，主节点负责维护抽取规则，从节点向主节点请求抽取规则，当抽取规则发生变化，主节点主动通知从节点，从而能实现抽取规则变化之后的实时动态生效。 如
  • java编程思想 -- 多态 百合不是茶 java多态详解
    一: 向上转型和向下转型 面向对象中的转型只会发生在有继承关系的子类和父类中（接口的实现也包括在这里）。父类：人    子类：男人向上转型： Person p = new Man() ; //向上转型不需要强制类型转化向下转型： Man man =
  • [自动数据处理]稳扎稳打,逐步形成自有ADP系统体系 comsci dp
          对于国内的IT行业来讲,虽然我们已经有了"两弹一星",在局部领域形成了自己独有的技术特征,并初步摆脱了国外的控制...但是前面的路还很长....       首先是我们的自动数据处理系统还无法处理很多高级工程...中等规模的拓扑分析系统也没有完成,更加复杂的
  • storm 自定义 日志文件 商人shang stormclusterlogback
    Storm中的日志级级别默认为INFO，并且，日志文件是根据worker号来进行区分的，这样，同一个log文件中的信息不一定是一个业务的，这样就会有以下两个需求出现： 1. 想要进行一些调试信息的输出 2. 调试信息或者业务日志信息想要输出到一些固定的文件中   不要怕，不要烦恼，其实Storm已经提供了这样的支持，可以通过自定义logback 下的 cluster.xml 来输
  • Extjs3 SpringMVC使用 @RequestBody 标签问题记录 21jhf
    springMVC使用 @RequestBody(required = false) UserVO userInfo 传递json对象数据，往往会出现http 415，400,500等错误，总结一下需要使用ajax提交json数据才行，ajax提交使用proxy，参数为jsonData，不能为params；另外，需要设置Content-type属性为json，代码如下： （由于使用了父类aaa
  • 一些排错方法 文强chu 方法
    1、java.lang.IllegalStateException: Class invariant violation at org.apache.log4j.LogManager.getLoggerRepository(LogManager.java:199)at org.apache.log4j.LogManager.getLogger(LogManager.java:228) at o
  • Swing中文件恢复我觉得很难 小桔子 swing
           我那个草了！老大怎么回事，怎么做项目评估的？只会说相信你可以做的，试一下，有的是时间！        用java开发一个图文处理工具，类似word，任意位置插入、拖动、删除图片以及文本等。文本框、流程图等，数据保存数据库，其余可保存pdf格式。ok,姐姐千辛万苦，
  • php 文件操作 aichenglong PHP读取文件写入文件
    1 写入文件 @$fp=fopen("$DOCUMENT_ROOT/order.txt", "ab"); if(!$fp){ echo "open file error" ; exit; } $outputstring="date:"." \t tire:".$tire."
  • MySQL的btree索引和hash索引的区别 AILIKES 数据结构mysql算法
    Hash 索引结构的特殊性，其 检索效率非常高，索引的检索可以一次定位，不像B-Tree 索引需要从根节点到枝节点，最后才能访问到页节点这样多次的IO访问，所以 Hash 索引的查询效率要远高于 B-Tree 索引。     可能很多人又有疑问了，既然 Hash 索引的效率要比 B-Tree 高很多，为什么大家不都用 Hash 索引而还要使用 B-Tree 索引呢
  • JAVA的抽象--- 接口 --实现 百合不是茶
    抽象 接口 实现接口   //抽象 类 ,方法   //定义一个公共抽象的类 ,并在类中定义一个抽象的方法体 抽象的定义使用abstract   abstract class A 定义一个抽象类 例如： //定义一个基类 public abstract class A{     //抽象类不能用来实例化，只能用来继承 //
  • JS变量作用域实例 bijian1013 作用域
    <script> var scope='hello'; function a(){ console.log(scope); //undefined var scope='world'; console.log(scope); //world console.log(b);
  • TDD实践（二） bijian1013 javaTDD
    实践题目：分解质因数 Step1： 单元测试： package com.bijian.study.factor.test; import java.util.Arrays; import junit.framework.Assert; import org.junit.Before; import org.junit.Test; import com.bijian.
  • [MongoDB学习笔记一]MongoDB主从复制 bit1129 mongodb
    MongoDB称为分布式数据库，主要原因是1.基于副本集的数据备份， 2.基于切片的数据扩容。副本集解决数据的读写性能问题，切片解决了MongoDB的数据扩容问题。   事实上，MongoDB提供了主从复制和副本复制两种备份方式，在MongoDB的主从复制和副本复制集群环境中，只有一台作为主服务器，另外一台或者多台服务器作为从服务器。 本文介绍MongoDB的主从复制模式，需要指明
  • 【HBase五】Java API操作HBase bit1129 hbase
    import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; import org.apache.hadoop.hbase.HColumnDescriptor; import org.apache.ha
  • python调用zabbix api接口实时展示数据 ronin47
    zabbix api接口来进行展示。经过思考之后，计划获取如下内容：     1、  获得认证密钥     2、  获取zabbix所有的主机组     3、  获取单个组下的所有主机     4、  获取某个主机下的所有监控项  
  • jsp取得绝对路径 byalias 绝对路径
    在JavaWeb开发中，常使用绝对路径的方式来引入JavaScript和CSS文件，这样可以避免因为目录变动导致引入文件找不到的情况，常用的做法如下： 一、使用${pageContext.request.contextPath} 　　代码” ${pageContext.request.contextPath}”的作用是取出部署的应用程序名，这样不管如何部署，所用路径都是正确的。
  • Java定时任务调度：用ExecutorService取代Timer bylijinnan java
    《Java并发编程实战》一书提到的用ExecutorService取代Java Timer有几个理由，我认为其中最重要的理由是： 如果TimerTask抛出未检查的异常，Timer将会产生无法预料的行为。Timer线程并不捕获异常，所以 TimerTask抛出的未检查的异常会终止timer线程。这种情况下，Timer也不会再重新恢复线程的执行了;它错误的认为整个Timer都被取消了。此时，已经被
  • SQL 优化原则 chicony sql
    一、问题的提出 　在应用系统开发初期，由于开发数据库数据比较少，对于查询SQL语句，复杂视图的的编写等体会不出SQL语句各种写法的性能优劣，但是如果将应用系统提交实际应用后，随着数据库中数据的增加，系统的响应速度就成为目前系统需要解决的最主要的问题之一。系统优化中一个很重要的方面就是SQL语句的优化。对于海量数据，劣质SQL语句和优质SQL语句之间的速度差别可以达到上百倍，可见对于一个系统
  • java 线程弹球小游戏 CrazyMizzz java游戏
    最近java学到线程，于是做了一个线程弹球的小游戏，不过还没完善 这里是提纲 1.线程弹球游戏实现 1.实现界面需要使用哪些API类 JFrame JPanel JButton FlowLayout Graphics2D Thread Color ActionListener ActionEvent MouseListener Mouse
  • hadoop jps出现process information unavailable提示解决办法 daizj hadoopjps
    hadoop jps出现process information unavailable提示解决办法   jps时出现如下信息： 3019 -- process information unavailable3053 -- process information unavailable2985 -- process information unavailable2917 --
  • PHP图片水印缩放类实现 dcj3sjt126com PHP
    <?php class Image{ private $path; function __construct($path='./'){ $this->path=rtrim($path,'/').'/'; } //水印函数，参数：背景图，水印图，位置，前缀,TMD透明度 public function water($b,$l,$pos
  • IOS控件学习：UILabel常用属性与用法 dcj3sjt126com iosUILabel
    参考网站： http://shijue.me/show_text/521c396a8ddf876566000007 http://www.tuicool.com/articles/zquENb http://blog.csdn.net/a451493485/article/details/9454695 http://wiki.eoe.cn/page/iOS_pptl_artile_281
  • 完全手动建立maven骨架 eksliang javaeclipseWeb
    建一个 JAVA 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=App [-Dversion=0.0.1-SNAPSHOT] [-Dpackaging=jar] 建一个 web 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=web-a
  • 配置清单 gengzg 配置
    1、修改grub启动的内核版本 vi /boot/grub/grub.conf 将default 0改为1 拷贝mt7601Usta.ko到/lib文件夹 拷贝RT2870STA.dat到 /etc/Wireless/RT2870STA/文件夹 拷贝wifiscan到bin文件夹，chmod 775 /bin/wifiscan 拷贝wifiget.sh到bin文件夹，chm
  • Windows端口被占用处理方法 huqiji windows
    以下文章主要以80端口号为例，如果想知道其他的端口号也可以使用该方法..........................1、在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等.        这里主要是用到windows下的DOS工具,点击"开始"--"运行",输入&
  • 开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！ 天梯梦 mobile
    CKplayer，其全称为超酷flv播放器，它是一款用于网页上播放视频的软件，支持的格式有：http协议上的flv,f4v,mp4格式，同时支持rtmp视频流格 式播放，此播放器的特点在于用户可以自己定义播放器的风格，诸如播放/暂停按钮，静音按钮，全屏按钮都是以外部图片接口形式调用，用户根据自己的需要制作 出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了，
  • 简单工厂设计模式 hm4123660 java工厂设计模式简单工厂模式
           简单工厂模式（Simple Factory Pattern）属于类的创新型模式，又叫静态工厂方法模式。是通过专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例。简单工厂模式是工厂模式家族中最简单实用的模式，可以理解为是不同工厂模式的一个特殊实现。
  • maven笔记 zhb8015 maven
    跳过测试阶段： mvn package -DskipTests 临时性跳过测试代码的编译： mvn package -Dmaven.test.skip=true   maven.test.skip同时控制maven-compiler-plugin和maven-surefire-plugin两个插件的行为，即跳过编译，又跳过测试。   指定测试类 mvn test
  • 非mapreduce生成Hfile，然后导入hbase当中 Stark_Summer maphbasereduceHfilepath实例
    最近一个群友的boss让研究hbase，让hbase的入库速度达到5w+/s，这可愁死了，4台个人电脑组成的集群，多线程入库调了好久，速度也才1w左右，都没有达到理想的那种速度，然后就想到了这种方式，但是网上多是用mapreduce来实现入库，而现在的需求是实时入库，不生成文件了，所以就只能自己用代码实现了，但是网上查了很多资料都没有查到，最后在一个网友的指引下，看了源码，最后找到了生成Hfile
  • jsp web tomcat 编码问题 王新春 tomcatjsppageEncode
    今天配置jsp项目在tomcat上，windows上正常，而linux上显示乱码，最后定位原因为tomcat 的server.xml 文件的配置，添加 URIEncoding 属性： <Connector port="8080" protocol="HTTP/1.1" connectionTi
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他