Vue页面Demo
为了学习了解Vue.js，试着写了一个demo，如下;
准备工作：
需要引入的js和css库有：
1、vue.js 主要是学习，所以引入了这个js库，实际运行时应该使用vue.min.js
2、axios.js 主要作用是网络请求，vue2.0推荐使用这个js库；
3、pure.css 轻量级的css库。
后台接口实现使用springMvc,引入的包如下：
<?xml version="1.0" encoding="UTF-8"?>
<ivy-module version="2.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="http://ant.apache.org/ivy/schemas/ivy.xsd">
<info
organisation="com.my"
module="httpdemo"
status="integration">
</info>
<configurations>
<conf name="default" visibility="public" description="runtime dependencies and master artifact can be used with this conf" extends="runtime,master"/>
<conf name="master" visibility="public" description="contains only the artifact published by this module itself, with no transitive dependencies"/>
<conf name="compile" visibility="public" description="this is the default scope, used if none is specified. Compile dependencies are available in all classpaths."/>
<conf name="provided" visibility="public" description="this is much like compile, but indicates you expect the JDK or a container to provide it. It is only available on the compilation classpath, and is not transitive."/>
<conf name="runtime" visibility="public" description="this scope indicates that the dependency is not required for compilation, but is for execution. It is in the runtime and test classpaths, but not the compile classpath." extends="compile"/>
<conf name="test" visibility="private" description="this scope indicates that the dependency is not required for normal use of the application, and is only available for the test compilation and execution phases." extends="runtime"/>
<conf name="system" visibility="public" description="this scope is similar to provided except that you have to provide the JAR which contains it explicitly. The artifact is always available and is not looked up in a repository."/>
<conf name="sources" visibility="public" description="this configuration contains the source artifact of this module, if any."/>
<conf name="javadoc" visibility="public" description="this configuration contains the javadoc artifact of this module, if any."/>
<conf name="optional" visibility="public" description="contains all optional dependencies"/>
</configurations>
<dependencies>
<!-- Spring 相关内容 -->
<dependency org="org.springframework" name="spring-core" rev="4.3.9.RELEASE" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.springframework" name="spring-beans" rev="4.3.9.RELEASE" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.springframework" name="spring-web" rev="4.3.9.RELEASE" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.springframework" name="spring-context" rev="4.3.9.RELEASE" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.springframework" name="spring-context-support" rev="4.3.9.RELEASE" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.springframework" name="spring-aop" rev="4.3.9.RELEASE" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.springframework" name="spring-expression" rev="4.3.9.RELEASE" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.springframework" name="spring-tx" rev="4.3.9.RELEASE" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.springframework" name="spring-jms" rev="4.3.9.RELEASE" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.springframework" name="spring-jdbc" rev="4.3.9.RELEASE" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.springframework" name="spring-webmvc" rev="4.3.9.RELEASE" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="aopalliance" name="aopalliance" rev="1.0" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="com.sun.xml.fastinfoset" name="FastInfoset" rev="1.2.13" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="cglib" name="cglib-nodep" rev="3.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.aspectj" name="aspectjrt" rev="1.8.0" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.aspectj" name="aspectjweaver" rev="1.8.0" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<!-- CXF 相关内容 -->
<dependency org="org.apache.cxf" name="cxf-bundle" rev="2.7.11" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.apache.geronimo.specs" name="geronimo-javamail_1.4_spec" rev="1.7.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.apache.geronimo.specs" name="geronimo-activation_1.1_spec" rev="1.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.apache.geronimo.specs" name="geronimo-annotation_1.0_spec" rev="1.1.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.apache.geronimo.specs" name="geronimo-stax-api_1.0_spec" rev="1.0.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.apache.geronimo.specs" name="geronimo-ws-metadata_2.0_spec" rev="1.1.3" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.apache.geronimo.specs" name="geronimo-jaxws_2.2_spec" rev="1.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.apache.neethi" name="neethi" rev="3.0.3" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.apache.velocity" name="velocity" rev="1.7" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.apache.ws.xmlschema" name="xmlschema-core" rev="2.1.0" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="javax.xml.bind" name="jaxb-api" rev="2.2.4" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="javax.xml.soap" name="saaj-api" rev="1.3.5" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="javax.ws.rs" name="javax.ws.rs-api" rev="2.0-m10" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="com.sun.xml.bind" name="jaxb-xjc" rev="2.2.7" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="com.sun.xml.bind" name="jaxb-core" rev="2.2.7" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="com.sun.xml.messaging.saaj" name="saaj-impl" rev="1.3.23" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.codehaus.woodstox" name="woodstox-core-asl" rev="4.3.0" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.codehaus.woodstox" name="stax2-api" rev="3.1.4" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.codehaus.jettison" name="jettison" rev="1.3.5" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="wsdl4j" name="wsdl4j" rev="1.6.3" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="asm" name="asm" rev="3.3.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="mysql" name="mysql-connector-java" rev="5.1.18" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<!-- Log 相关内容 -->
<dependency org="org.slf4j" name="slf4j-api" rev="1.7.7" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.slf4j" name="jcl-over-slf4j" rev="1.7.7" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.slf4j" name="jul-to-slf4j" rev="1.7.7" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.slf4j" name="log4j-over-slf4j" rev="1.7.7" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="ch.qos.logback" name="logback-classic" rev="1.1.2" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="ch.qos.logback" name="logback-core" rev="1.1.2" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<!-- json序列化相关 -->
<dependency org="com.fasterxml.jackson.core" name="jackson-core" rev="2.7.4" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="com.fasterxml.jackson.core" name="jackson-annotations" rev="2.7.4" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="com.fasterxml.jackson.core" name="jackson-databind" rev="2.7.4" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="javax.servlet" name="javax.servlet-api" rev="3.1.0" conf="provided->*" transitive="false"/>
<dependency org="dom4j" name="dom4j" rev="1.6.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="jaxen" name="jaxen" rev="1.1.3" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="com.googlecode.aviator" name="aviator" rev="2.3.3" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="commons-beanutils" name="commons-beanutils" rev="1.8.2" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.apache.commons" name="commons-vfs2" rev="2.0" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.apache.commons" name="commons-lang3" rev="3.4" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.apache.poi" name="poi" rev="3.10-FINAL" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.apache.poi" name="poi-ooxml" rev="3.10-FINAL"/>
<!--文件上传-->
<dependency org="commons-fileupload" name="commons-fileupload" rev="1.3.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="commons-io" name="commons-io" rev="2.4" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="com.google.code.gson" name="gson" rev="2.3" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<!-- weibo使用 -->
<dependency org="commons-httpclient" name="commons-httpclient" rev="3.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="com.sina" name="weibo4j-oauth2" rev="2.1.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<!-- BaiduPush使用 -->
<dependency org="com.baidu" name="baidu-push" rev="1.1.2" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<!-- 编辑器使用 -->
<dependency org="com.baidu" name="baidu-ueditor" rev="1.1.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<!-- Unit Test -->
<dependency org="org.springframework" name="spring-test" rev="4.3.9.RELEASE" conf="test->*" transitive="false" />
<dependency org="junit" name="junit" rev="4.10" conf="test->*" transitive="false" />
<dependency org="org.hamcrest" name="hamcrest-core" rev="1.1" conf="test->*" transitive="false" />
<dependency org="org.dbunit" name="dbunit" rev="2.4.8" conf="test->*" transitive="false" />
<dependency org="com.yahoo.platform.yui" name="yuicompressor" rev="2.4.7" conf="compile->compile(*),master(*)" transitive="false"/>
<!--image metadata-->
<dependency org="com.drewnoakes" name="metadata-extractor" rev="2.8.1" conf="compile->compile(*),master(*)" transitive="false"/>
<dependency org="com.adobe.xmp" name="xmpcore" rev="5.1.2" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<!-- FreeMarker -->
<dependency org="org.freemarker" name="freemarker" rev="2.3.23" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false" />
<!-- 亚马逊-->
<dependency org="com.amazonaws" name="aws-java-sdk-s3" rev="1.10.43" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="com.amazonaws" name="aws-java-sdk-core" rev="1.10.43" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="com.amazonaws" name="aws-java-sdk-kms" rev="1.10.43" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="joda-time" name="joda-time" rev="2.8.1" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<!-- 阿里云 -->
<dependency org="com.aliyun.openservices" name="aliyun-openservices" rev="OTS-2.0.4" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="commons-codec" name="commons-codec" rev="1.10" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="commons-logging" name="commons-logging" rev="1.2" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<dependency org="org.jdom" name="jdom" rev="1.1.3" conf="compile->compile(*),master(*);runtime->runtime(*)" transitive="false"/>
<!--华为云-->
<dependency org="com.jamesmurty.utils" name="java-xmlbuilder" rev="0.4" transitive="false" />
<dependency org="com.huawei.obs" name="obs-client" rev="1.5.50" transitive="false" /> </dependencies>
</ivy-module>
ivy.xml
后台代码主要实现接口的发布，用于前台交互，这里就不写了！
开始写代码：
新建html页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>文件迁移监控</title>
<script src="vue/vue.js"></script>
<script src="vue/axios.js"></script>
<script src="vue/js/vuemain.js"></script>
<!-- pure的 -->
<link rel="stylesheet" href="pure/pure-min.css">
<link rel="stylesheet" href="pure/base-min.css">
<link rel="stylesheet" href="pure/buttons-min.css">
<link rel="stylesheet" href="pure/forms-min.css">
<link rel="stylesheet" href="pure/grids-min.css">
<link rel="stylesheet" href="pure/menus-min.css">
<link rel="stylesheet" href="pure/tables-min.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="pure/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="pure/grids-responsive-min.css">
<!--<![endif]-->
<!-- 自己的 -->
<link type="text/css" media="screen,projection" rel="stylesheet" href="vue/css/vue.css" />
</head>
<body>
<div class="header">文件迁移监控</div>
<div id="app" class="pure-g content">
<div class="pure-u-4-5 high-100">
<div class="high-5">
<div class="pure-u-1-12 high-100 runnig" @click="show()">{{runing}}</div>
<div class="pure-u-1-12 high-100 complate">{{complate}}</div>
<div class="pure-u-1-12 high-100 fail">{{fail}}</div>
</div>
<div class="pure-u-1-1 high-80">
<div class="high-100">
<table class="pure-table pure-table-bordered">
<thead>
<tr>
<th>#</th>
<th v-for="th in taskTh">
{{th}}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(task,index) in taskList">
<td>{{index + 1}}</td>
<td>{{task.id}}</td>
<td>{{task.src}}</td>
<td>{{task.dest}}</td>
<td>{{task.state}}</td>
<td>{{task.startTime}}</td>
<td>{{task.endTime}}</td>
<td v-on:click="deleteTask(index)">删除</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<ul class="pagination" >
<li> <button v-on:click="refersh">刷新</button></li>
<!--
<li>
<select v-model="pageLen">
<option v-for="len in lenArr" v-bind:value="len">
{{ len }}
</option>
</select>
</li>
-->
<li v-show="current != 1" @click="goto(1)" ><a href="#">首页</a></li>
<li v-show="current != 1" @click="current-- && goto(current)" ><a href="#">上一页</a></li>
<li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
<a href="#" >{{index}}</a>
</li>
<li v-show="totalPage != current && totalPage != 0 " @click="current++ && goto(current++)"><a href="#" >下一页</a></li>
<li v-show="totalPage != current && totalPage != 0 " @click="totalPage" ><a href="#">末页</a></li>
<li><span>总数：{{total}},共{{totalPage}}页,当前页：{{current}}</span></li>
</ul>
</div>
</div>
<div class="pure-u-1-5 high-100">
<label>新建迁移任务</label>
<form class="pure-form pure-form-stacked">
<fieldset>
<div class="pure-control-group">
<label>源文件路径:</label>
<input v-model="source" type="text" placeholder="" required="required">
<span class="pure-form-message" hidden="hidden">请输入源路径</span>
</div> <div class="pure-control-group">
<label class="list-left">目标路径:</label>
<input v-model="dest" type="text" placeholder="" required="required">
<span class="pure-form-message" hidden="hidden">请输入目标路径</span>
</div>
</fieldset>
</form>
<span class="pure-controls">
<button v-on:click="createTask" class="pure-button pure-button-primary list-left">创建</button>
</span> </div>
</div>
<div class="footer">Write By Lgp</div>
</body>
</html>
使用pure.css，采用上中下布局，实现表格，表单和分页的展示；
css代码：
html , body, .high-100 {
height: 100%;
}
.high-3 {
height: 3%;
}
.high-5 {
height: 5%;
}
.high-10 {
height: 10%;
}
.high-20 {
height: 20%;
}
.high-33 {
height: 33%;
}
.high-50 {
height: 50%;
}
.high-66 {
height: 66%;
}
.high-80 {
height: 80%;
}
.high-90 {
height: 90%;
}
.header {
height: 2%;
background: #0080c0;
color: #ffffff;
text-align: left;
padding: 1em;
font-size: 100%;
}
.content{
height: 88%;
overflow: auto;
}
.content>div , .content>div>div{
border: 1px solid #400040;
box-sizing: border-box;
padding: 5px;
}
.runnig{
background: #42bdb0;
}
.complate{
background: #b6ec13;
}
.fail{
background: #b5804a;
}
.pagination {
position: relative;
}
.pagination li{
display: inline-block;
margin:0 5px;
}
.pagination li a{
padding:.5rem 1rem;
display:inline-block;
border:1px solid #ddd;
background:#fff;
color:#0E90D2;
}
.pagination li a:hover{
background:#eee;
}
.pagination li.active a{
background:#0E90D2;
color:#fff;
}
.footer {
height: 2%;
background: #808080;
color: #000000;
text-align: center;
padding: 1em;
font-size: 80%;
}
vue.css
重点来了，js代码：
window.onload=function(){
var content = new Vue({
el: '#app',
data:{
runing:'正在运行',
complate:'已完成',
fail:'失败任务',
source:'',
dest:'',
taskTh:[
'id','源文件','目标文件','状态','开始时间','结束时间','操作'
],
taskList:[
],
current:1,
lenArr:[
5,10,20
],
total:0,
pageLen:10,
showItem:5,
totalPage:7
},
created:function(){
this.refersh();
},
methods:{
// 函数
createTask : function(){
this.taskList.push({
'id':this.uuid(),
'src':this.source,
'dest':this.dest,
'state':'waiting',
'startTime': new Date(),
'endTime':''
});
},
deleteTask: function(index){
this.taskList.splice(index, 1);
},
goto:function(index){
if(index == this.current) return;
this.current = index;
},
refersh:function(data){
var self = this;
axios.get('/httpdemo/api/transfer/list',data).then(function(resp){
self.taskList = resp.data;
});
},
uuid : function() {
var s = [];
var hexDigits = "0123456789abcdef";
for (var i = 0; i < 36; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
}
s[14] = "4";
s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
s[8] = s[13] = s[18] = s[23] = "-";
var uuid = s.join("");
return uuid;
},
},
computed:{
pages:function(){
var pag = [];
if( this.current < this.showItem ){ // 如果当前的激活的项 小于要显示的条数
// 总页数和要显示的条数那个大就显示多少条
var i = Math.min(this.showItem,this.totalPage);
while(i){
pag.unshift(i--);
}
}else{ // 当前页数大于显示页数了
var middle = this.current - Math.floor(this.showItem / 2 ),// 从哪里开始
i = this.showItem;
if( middle > (this.totalPage - this.showItem) ){
middle = (this.totalPage - this.showItem) + 1
}
while(i--){
pag.push( middle++ );
}
}
return pag
}
},
watch:{
// 监控
}
});
}
以上！
Vue页面Demo的更多相关文章
- Vue页面骨架屏（一）
在开发webapp的时候总是会受到首屏加载时间过长的影响,主流的解决方法是在载入完成之前显示loading图效果,而一些大公司会配置一套服务端渲染的架构来解决这个问题.考虑到ssr所要解决的一系列问题 ...
- vue+websocket demo 实例
vue+websocket demo: <!-- vue + websocket连接demo --> <template> <div class="" ...
- 一个基于ES6+webpack的vue小demo
上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...
- 一个基于ES5的vue小demo
由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...
- iframe嵌套vue页面打开新窗口
iframe嵌套vue页面时目录结构为下图: 此时出口文件指向index.html, 所以只需要用a标签动态拼接href, 并设置属性 target="_blank" ,即可在if ...
- python 全栈开发，Day92(编程式的导航,vue页面布局,marked包的使用)
昨日内容回顾 1. 组件间的传值 1. bus --> 空Vue对象 通过向bus对象抛出自定义事件的方式在组件间传递信息 2. 注意事项: 1. bus.$on()应该在组件mounted(挂 ...
- 大项目之网上书城（六）——个人页面和书页面Demo
目录 大项目之网上书城(六)--个人页面和书页面Demo 主要改动 1.user.jsp 代码 效果图 user.js 代码 3.shu.jsp 代码 效果图 4.其他小改动 LoginServlet ...
- Vue页面间传值，以及客户端数据存储
初学Vue,遇到了页面传值的问题,大概网上学习了解了一下,在此跟大家分享一下学习心得,欢迎批评指正. 一.参数传值 如果是简单的页面传值,比如传一个id到详情页等等,推荐使用参数传值. 这里页面是通过 ...
- URL不变的情况下，最实用的vue刷新当前页面，provide / inject 组合 方式实现vue页面刷新
原文:https://blog.csdn.net/Dream_xun/article/details/83024487 其他参考:https://blog.csdn.net/liyunkun888/a ...
随机推荐
- 深度理解Node.js单线程模型
Node.js采用 事件驱动 和 异步I/O 的方式,实现了一个单线程.高并发的运行时环境,而单线程就意味着同一时间只能做一件事,那么Node.js如何利用单线程来实现高并发和异步I/O?本文将围绕这 ...
- python编程快速上手之第3章实践项目参考答案
1 #!/usr/bin/env python 2 # coding:utf-8 3 # write by mfyang 4 # collatz.py 5 # 从用户读入一个值,并判断这个值是不是一个 ...
- 跨域访问之CORS
CORS:定义 2014年1月16日,W3C的Web应用工作组(Web Applications Working Group)和Web应用安全工作组(Web AppSec)联合发布了跨源资源共享(Cr ...
- Struts2+Spring+Hibernate+Jbpm技术实现Oa（Office Automation）办公系统第一天框架搭建
=============编码规范,所有文健,所有页面,所有数据库的数据表都采用UTF-8编码格式,避免乱码:===========开发环境:jdk1.7+tomcat8.0+mysql5.7+ecl ...
- es6的模块化编程
es6的模块化编程 基本用法 es6 中新增了两个命令 export 和 import , export 命令用于规定模块的对外接口,import 命令用于输入其他模块提供的功能. 一个模块就是一个独 ...
- 不同浏览器创建 ajax XMLHTTPRequest对象的方法及兼容性问题总结
XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpReques ...
- MongoDB 安装和配置
[前言] Mongodb是一款nosql数据库,关于nosql 以及 mongodb本文不进行介绍,在数据库的选型方面,本人说是在机缘巧合之下选择了mongodb,并且拟使用mongodb搭建日志系统 ...
- luogu P3398 仓鼠找sugar [LCA]
题目描述 小仓鼠的和他的基(mei)友(zi)sugar住在地下洞穴中,每个节点的编号为1~n.地下洞穴是一个树形结构.这一天小仓鼠打算从从他的卧室(a)到餐厅(b),而他的基友同时要从他的卧室(c) ...
- JavaScript语法基础(1)
1.JavaScript是什么? 1)定义: JavaScript「JS」是一种高级的.动态的. 弱类型的.解释型的计算机编程脚本语言. 2)原理: 3)组成: 3大部分: ◆ ECMAScript: ...
- tensorflow Sigmoid 应用
1.函数 函数:f(z) = 1 / (1 + exp( − z)) 导数:f(z)' = f(z)(1 − f(z)) 2.tensorflow实现 #!/usr/bin/env python # ...