1.##############
js中的join(),reverse()与 split()函数用法解析
<script>
/*
* 1:arrayObject.reverse()
* 注意: 该方法会改变原来的数组,而不会创建新的数组。
* 2:arrayObject.join()
* 注意:join() 方法用于把数组中的所有元素放入一个字符串。
* 元素是通过指定的分隔符进行分隔的。
* 指定分隔符方法join("#");其中#可以是任意
* 3:stringObject.split(a,b)这是它的语法
* 方法:用于把一个字符串分割成字符串数组.
* a是必须的决定个从a这分割
* b不是必须的,可选。该参数可指定返回的数组的最大长度 。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。
* 注意:返回的数组中不包括a本身;
* 提示和注释:
* 注释:如果把空字符串 ("") 用作 a,那么 stringObject 中的每个字符之间都会被分割。
* 注释:String.split() 执行的操作与 Array.join 执行的操作是相反的。
*
*
*/
var str = "a,b,c,d,e,f,g";//声明一个字符串
str = str.split(',').reverse();//用split函数拆分成数组对象,再用reverse函数将数组倒序排列
alert(str.length+":"+typeof(str));
alert(typeof(str.join)+":"+str.join('#')+":"+str.join('#').length);
var s = str.reverse().join("#");
alert(typeof(s)+":"+s);
</script>
2.############ Vue-cli搭建完,各文件解释
a、脚手架vue-cli搭建完成后,会生成一些文件,总结学习一下这些文件是做什么用的:Vue-cli搭建完,各文件解释
1、一级目录:
build和config文件夹是wbepack配置的文件夹;
node_modules是在我npm install后存放一些依赖和插件的文件夹;
src是存放我们项目源码的文件,通常我们的vue组件就写在这里,其中main.js是页面的入口文件,初始化vue实例并使用需要的插件【插件router、resource等】,而App.vue看作是一个大组件,也就是整个页面的vue实例文件;
static是存放第三方静态资源的,比如css的reset.css等等。
2、二级目录:
.babelrc是Es6语法的一些转换配置,其中presets是预设,plugins是转换的插件,comments的值如果为false,表示转换后不生成注释;
.editorconfig是编辑器的配置,它配置了一些语言,缩进的风格大小,换行符风格等等;
.eslintignore是忽略语法检查的目录文件,一般是build/*.js、config/*.js这两个文件;
.eslintrc.js是eslint的配置文件,其中extends: 'standard'表示标准规则,如:要求===之类的;‘rule’表示配置具体的规则,我们改eslint就在这个下面进行修改,如:// 没有分号就报错 'semi': ['error', 'always']或者忽略某种检查,将值设为0即可;
index.html是入口文件,js和css会被动态的插入这个文件;
package.json定义了整个项目所需要的这种模块,以及项目的配置信息。
b、HTML <!--...--> 注释 、CSS/JS //注释 和 /*.....*/ 注释
3.##########################
1.双向绑定
<div id="app">
<p>{{message}}</p>
<input v-model="message"/>
</div>
new Vue({
el:'#app',
data:{
message:'Hello vue.js'
}
})
2.渲染列表
<div id="app">
<ul>
<li v-for="todo in todos">{{todo.text}}</li>
</ul>
</div>
new Vue({
el:'#app',
data:{
todos:[
{text:'学习vue'},
{text:'学习Sass'},
{text:'学习webpack'}
]
}
})
3.处理用户输入
<div id="app">
<p>{{message}}</p>
<input v-model='message'/>
<button type="button" v-on:click="reverseMessage">反转</button>
</div>
new Vue({
el:'#app',
data:{
message:'hello world'
},
methods:{
reverseMessage:function(){
this.message=this.message.split('').reverse().join('')
}
}
})
4.记事本
<div id="app">
<input v-model="newTodo" v-on:keyup.enter="addTodo" placeholder="请记录未完成的计划" />
<ul>
<li v-for="todo in todos">
<span>{{todo.text}}</span>
<button type="button" v-on:click="removeTodo($index)">X</button>
</li>
</ul>
</div>
new Vue({
el:'#app',
data:{
newTodo:'',
todos:[
{text:'学习Vue'},
{text:'学习Sass'},
{text:'学习webpack'}
]
},
methods:{
addTodo:function(){
var text = this.newTodo.trim();
if(text){
this.todos.push({text:text});
this.newTodo='';
}
},
removeTodo:function(index){
this.todos.splice(index,1);
}
}
})
5. 插值
<div id="app">
<!-- 单次文本插值 -->
<p>{{*message}}</p>
<!-- 解析真的html字符串 -->
<p>{{{raw_html}}}</p>
<!-- html特性 -->
<p id="item-{{id}}">html特性</p>
</div>
new Vue({
el:'#app',
data:{
message:'Hello vue.js',
raw_html:'<span>原始的html</span>',
id:'1'
}
})
6.绑定表达式
<div id="app">
<!-- javascript表达式 -->
<p>{{number+1}}</p>
<p>{{ok ? 'Yes' : 'No'}}</p>
<p>{{message.split('').reverse().join('')}}</p>
<!-- 过滤器 -->
<p>{{name | capitalize}}</p>
</div>
new Vue({
el:'#app',
data:{
number:2,
ok:false,
message:'123456789',
name:'brucee lee'
}
})
7.指令
<div id="app">
<!-- 参数 -->
<a v-bind:href="url" v-on:click="dosomething">指令带参数</a>
<!-- v-bind、v-on缩写 -->
<a :href="url" @click="dosomething">指令缩写</a>
</div>
new Vue({
el:'#app',
data:{
url:'http://g.pptv.com'
},
methods:{
dosomething:function(){
alert(this.url);
}
}
})
8.计算属性
<div id="app">
<p>a={{a}},b={{b}}</p>
<p>{{fullName}}</p>
</div>
new Vue({
el:'#app',
data:{
a:1,
firstName:'Micro',
lastName:'Jodon'
},
computed:{
b:function(){
return this.a + 1;
},
/*fullName:function(){
return this.firstName + ' ' + this.lastName;
}*/
fullName:{
get:function(){
return this.firstName + ' ' + this.lastName;
},
set:function(newValue){
var names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length-1];
}
}
}
})
9.class与css绑定
.static{
width: 200px;
margin: 20px auto;
height: 25px;
line-height: 25px;
text-align: center;
font-size: 18px;
}
.class-a{
background-color: #f00;
}
.class-b{
color: #fff;
}
.class-c{
padding: 5px 0;
}
<div id="app">
<!-- 绑定class:对象语法 -->
<p class="static" v-bind:class="{'class-a':isA,'class-b':isB}">绑定class</p>
<p class="static" v-bind:class="classObject">绑定class</p>
<!-- 绑定class:数组语法 -->
<p class="static" v-bind:class="[classA,classB,classC]">绑定class</p>
<p class="static" v-bind:class="[classA,{ 'class-b': isB,'class-c': isC}]">绑定class</p>
<!-- 绑定style:对象语法 -->
<p class="static" v-bind:style="styleObject">绑定style</p>
<!-- 绑定style:数组语法 -->
<p class="static" v-bind:style="[styleObjectA,styleObjectB]">绑定style</p>
</div>
new Vue({
el:'#app',
data:{
classA:'class-a',
classB:'class-b',
classC:'class-c',
isA:true,
isB:false,
isC:true,
classObject:{
'class-a':true,
'class-b':true
},
styleObject:{
color:'red',
fontSize:'13px',
backgroundColor:'#00f'
},
styleObjectA:{
color:'green',
fontSize:'16px'
},
styleObjectB:{
backgroundColor:'#f0f',
transform:'rotate(7deg)'
}
}
})
10.条件渲染
<div id="app">
<h1 v-if="Math.random() > 0.5">对不起!</h1>
<h1 v-else>没关系</h1>
<template v-if="ok">
<h1>标题</h1>
<p>段落1</p>
<p>段落2</p>
</template>
<h1 v-show="isShow">Hello!</h1>
<custom-component v-show="condition"></custom-component>
<p v-show="!condition">这可能也是一个组件</p>
</div>
// 定义
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>'
});
// 注册
Vue.component('custom-component', MyComponent);
new Vue({
el:'#app',
data:{
ok:true,
isShow:false,
condition:true
},
})
11. 列表渲染
ul{
list-style: none;
width: 150px;
}
.divider{
height: 2px;
background-color: #00f;
}
span{
padding: 0 2px;
}
<div id="app">
<!-- 数组v-for -->
<ul>
<template v-for="item in items" track-by="_uid">
<li>{{ parentMessage }} - {{ $index }} - {{ item.message }}</li>
<li class="divider"></li>
</template>
</ul>
<!-- 对象v-for -->
<ul>
<li v-for="(key,val) in object">{{key}} : {{val}}</li>
</ul>
<!-- 值域v-for -->
<span v-for="n in 10">{{ n }}</span>
</div>
var vm=new Vue({
el:'#app',
data:{
parentMessage:'水果',
items:[
{ _uid:'001',message:'香蕉'},
{ _uid:'002',message:'橘子'}
],
object:{
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
});
//变异方法:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
vm.items.push({message:'苹果'},{message:'梨子'});//推入两项
vm.items.shift();//取出第一项
//非变异方法:filter(), concat(), slice(),可用替换数组来修改原数组
vm.items=vm.items.filter(function (item) {
return item.message.match(/子/);
})
12.方法与事件处理器
<div id="app">
<!-- 内联语句处理器 -->
<button type="button" v-on:click="say('Hello',$event)">提交</button>
<!-- 事件修饰符 -->
<!-- 阻止单击事件冒泡 -->
<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>
<!-- 添加事件侦听器时使用 capture 模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- 按键修饰符 -->
<input v-on:keyup.enter="submit">
</div>
var vm=new Vue({
el:'#app',
methods:{
say:function(msg,event){
alert(msg+","+event.target.tagName);
event.preventDefault();
}
}
});
13.表单控件绑定
<div id="app">
<!-- 多行文本 -->
<span>这是您的评论:</span>
<p>{{message}}</p>
<textarea v-model="message" placeholder="请输入您的评论"></textarea>
<br>
<!-- 单选框 -->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<br>
<!-- 多个单选框 -->
<input type="checkbox" id="jack" value="马云" v-model="checkedNames">
<label for="jack">马云</label>
<input type="checkbox" id="john" value="马化腾" v-model="checkedNames">
<label for="john">马化腾</label>
<input type="checkbox" id="mike" value="李彦宏" v-model="checkedNames">
<label for="mike">李彦宏</label>
<br>
<span>选中的值: {{ checkedNames | json }}</span>
<br>
<!-- 单选钮 -->
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>选中的值: {{ picked }}</span>
<br>
<!-- 下拉列表单选 -->
<select v-model="selected">
<option selected>湖北</option>
<option>北京</option>
<option>上海</option>
</select>
<span>选中的值: {{ selected }}</span>
<br>
<!-- 下拉列表多选 -->
<select v-model="selecteds" multiple>
<option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option>
</select>
<br>
<span>选中的值: {{ selecteds | json }}</span>
<br>
<!--绑定动态值到Vue实例-->
<!-- 选中时为a,未选中时为b -->
<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b"/>
<span>选中时的值:{{toggle}}</span>
<br>
<input type="radio" v-model="pick" v-bind:value="c">男
<input type="radio" v-model="pick" v-bind:value="d">女
<span>选中时的值:{{pick}}</span>
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model="msg" lazy>
<!-- 设置转换为数值类型 -->
<input v-model="age" number>
<!-- 设置延时 -->
<input v-model="msg" debounce="500">
</div>
var vm=new Vue({
el:'#app',
data: {
checkedNames: [],
options:[
{text:'南京',value:'南京'},
{text:'苏州',value:'苏州'},
{text:'无锡',value:'无锡'}
],
a:'选中',
b:'未选中',
c:'男',
d:'女'
}
});
作者: 建人boy
链接:https://www.imooc.com/article/19153
4.#############################
webpack 入门
目录
1 安装 webpack
2 初始化项目
3 webpack 配置
4 自动刷新
5 第三方库
6 模块化
7 打包、构建
8 webpack 模板
我最近大量使用的是 jspm,但因为用它搭建的前端开发环境中,写测试代码非常困难,而项目又需要写测试,所以决定先试试 webpack。
安装 webpack
webpack 是一个 npm 包,所以我们通过 npm 命令来全局安装:
npm install webpack -g
安装完成后,命令行下就有 webpack 命令可用,执行 webpack --help 可以查看 webpack 提供的各种命令。
初始化项目
grunt.js 一类工具可以借助 yeoman 来初始化项目,目前我并没有看到 webpack 有类似方法,所以当 node.js 项目来初始化。
npm init 创建一个 package.json 文件
npm install webpack --save-dev 在当前目录下安装局域的 webpack
完成以上两个步骤后,我们的项目下有一个 package.json 文件,一个 node_modules 文件夹,我们还需要一个 index.html 文件,内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack 教程</title>
</head>
<body>
</body>
</html>
webpack 配置
我们的代码将组织在 JavaScript 模块中,项目会有一个入口(entry)文件,比如 main.js,我们需要通过 webpack 的配置文件指明它的位置。
在根目录新建一个 webpack.config.js 文件,添加如下内容:
module.exports = {
entry: './main.js'
};
因为我们在项目部署前需要打包合并 js 文件,所以还需要在 webpack.config.js 中配置一个 output:
module.exports = {
entry: './main.js',
output: {
path: __dirname,
filename: 'bundle.js'
}
}
output 定义我们打包出来的文件位置及名称。
完成以上后,试着在项目根目录下执行 webpack 命令,我们的根目录下会多出一个 bundle.js 文件:
webpack build
自动刷新
到现在为止,我们还没在浏览器中打开 index.html 文件,实际上,我们连 bundle.js 文件都还没加入 index.html 文件中。现在且先加入:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack 教程</title>
</head>
<body>
<script src="./bundle.js"></script> <!-- 在 index.html 文件中添加这一行代码 -->
</body>
</html>
这是 webpack 异于其它工具的地方,它在 HTML 文件中直接引用了 build 后的 js 文件,而不是原始的 main.js 文件。这就会有几个问题:
Q: main.js 或它所引用的模块的变化如何实时编译到 bundle.js?
A: 非常简单,在根目录下执行 webpack --watch 就可以监控文件变化并实时编译了
Q: 上面只是实时编译了 js 文件,我们该如何把变化同步到浏览器页面上,实现实时刷新?
A: webpack 提供了 webpack-dev-server 解决实时刷新页面的问题,同时解决上面一个问题。
?
安装 webpack-dev-server
执行 npm install webpack-dev-server -g 在全局环境中安装 webpack-dev-server
在项目根目录下执行命令:
$ webpack-dev-server
这样,我们就可以在默认的 http://localhost:8080 网址上打开我们的项目文件了。
此时,我们可能会认为,
js 文件修改
webpack-dev-server 监控到变化
webpack 重新编译
实时更新浏览器中的页面
但不幸的是,我们「自以为是」了。http://localhost:8080 这个网站对 js 文件的变化无动于衷。
我们可以启用 webpack-dev-server 的 hot 模式,在代码中插入如下一行:
<script src="http://localhost:8080/webpack-dev-server.js"></script>
这样 http://localhost:8080/ 这个网址也可以根据 js 的变化相应地自动刷新了。
第三方库
webpack 并不是包管理器,所以如果我们要使用第三方库,则需要借助 npm 或其它工具。比如,在项目里安装 jQuery:
npm install jquery --save
模块化
webpack 自称 module bundler,在它的定义中,CSS、图片、文件等等,都可以通过相应的 loader 加载,变成 JavaScript模块,以下具体展开说明。
模块化 JavaScript
如果我想使用 ES6 的方式引入某个 es6 模块,比如:
import $ from 'whatever';
怎么办?浏览器并不提供原生支持,webpack 通过各种 loader 来解决这类问题。比如这 ES6 的语法,可以借助 babel-loader:
安装 babel-loader
npm install --save-dev babel-loader
配置 webpack.config.js
在 module.exports 值中添加 module:
module.exports = {
entry: {
app: ['webpack/hot/dev-server', './main.js']
},
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
]
}
}
这样我们就可以在我们的 js 文件中使用 ES6 语法,babel-loader 会负责编译。
上面的方法,是在 webpack.config.js 文件中定义某一类型文件的加载器,我们也可以在代码中直接指定:
import $ from 'babel!whatever'
因为 babel-loader 允许我们使用 ES6 语法,于是我们的模块完全可以用 ES6 的 module 来组织代码: export 一个简单的模块:
// script/log.js 文件
export default (param) => {
console.log('你好啊', param);
}
然后在 main.js 中导入使用:
// main.js 文件
import log from "./script/log.js";
CSS 加载器
我们可以按传统方法使用 CSS,即在 HTML 文件中添加:
<link rel="stylesheet" href="style/app.css">
但 webpack 里,CSS 同样可以模块化,然后使用 import 导入。
因此我们不再使用 link 标签来引用 CSS,而是通过 webpack 的 style-loader 及 css-loader。前者将 css 文件以 <style></style> 标签插入 <head> 头部,后者负责解读、加载 CSS 文件。
安装 CSS 相关的加载器
npm install style-loader css-loader --save-dev
配置 webpack.config.js 文件
{
// ...
module: {
loaders: [
{ test: /\.css$/, loaders: ['style', 'css'] }
]
}
}
在 main.js 文件中引入 css
import'./style/app.css';
重启 webpack-dev-server
模块化 CSS
上一步里,我们 import 到 JavaScript 文件中的 CSS 文件中的 CSS 类打包时是 export 到全局环境的,也就是说,我们只是换了种加载 CSS 的方式,在书写 CSS 的时候,还是需要注意使用命名规范,比如 BEM,否则全局环境 CSS 类的冲突等问题不会消失。
这里,webpack 做了一个模块化 CSS 的尝试,真正意思上的「模块化」,即 CSS 类不会泄露到全局环境中,而只会定义在 UI 模块内 – 比如 react.js 这类模块,或者 web components。类似的尝试还有 ember-component-css 与 jspm 的 plugin css。
autoprefixer
我们在书写 CSS 时,按规范写,构建时利用 autoprefixer 可以输出 -webkit、-moz 这样的浏览器前缀,webpack 同样是通过 loader 提供该功能。
安装 autoprefixer-loader
npm install autoprefixer-loader --save-dev
配置 webpack.config.js
loaders: [{
loader: 'style!css!autoprefixer?{browsers:["last 2 version", "> 1%"]}',
//...
}]
重启 webpack-dev-server
假如我们在 CSS 中写了 body { display: flex; } 规则,再查看 bundle.js 文件的话,我们能看到类似如下的代码:
body {\n\tdisplay: -webkit-box;\n\tdisplay: -webkit-flex;\n\tdisplay: -ms-flexbox;\n\tdisplay: flex;\n}
图片
图片同样可是是模块,但使用的是 file loader 或者 url loader,后者会根据定义的大小范围来判断是否使用 data url。
import loadingIMG from 'file!../img/loading.gif'
React.render(<img src={loadingIMG} />, document.getElementById('app'));
打包、构建
项目结束后,代码要压缩、混淆、合并等,只需要在命令行执行:
webpack
即可,webpack 根据 webpack.config.js 文件中的配置路径、构建文件名生成相应的文件。
webpack 模板
上面说的是一步一步使用 webpack 搭建开发环境,当然,实际应用中,大可以借用一些模板,比如 react hot boilerplate 这样的库。
5.#################################
windows安装yarn
下载地址:https://yarnpkg.com/latest.msi
npm 的方式:npm install -g yarn
关于安装,你可以去官网查看到更多资料 https://yarnpkg.com/en/docs/install
安装完成后,测试下自己的版本:yarn --version
开始使用,我们新建一个文件夹yarn测试下,输入命令: yarn init,一路enter下去就行
然后我们试着加一些依赖:yarn add gulp-less
如果加入具体版本可以后面写上@0.x.x 这样子
Po主试着装了三个gulp插件,这个时候package.json里面是这个样子的:
如果你要移除的话,可以使用yarn remove package_name 比如:yarn remove gulp-less
升级更新某个依赖可以使用这个:yarn upgrade [package]
6.###########################
Error: Cannot find module 'webpack-merge'
缺少webpack-merge包,首先查看是否安装了webpack-merge模块
npm ls --depth=0
如果没有重新安装
npm install
还是不行的话说明package.json里缺少webpack-merge的配置,直接安装
npm install webpack-merge --save-dev
7.########################
Node.js Error: Cannot find module express的解决办法
在执行完下面的全局安装
npm -p install express
复制代码
仍报Error: Cannot find module express错误。
解决办法:
在自己的工程目录下再次执行
npm install express
复制代码
8、###############
Error: Cannot find module 'webpack'
npm install webpack --save
9.####################
vuex的使用
开始:首先,dos或者直接进入所要建立项目的文件夹;使用命令:vue init airyland/vux2 projectPath(自命名名称),或者用命令:vue init webpack projectPath,后者(使用命令npm run dev时)会自动打开网页;
其次,用命令:cd projectPath
再次,npm install --registry=https://registry.npm.taobao.org 或者npm install // 安装依赖包
最后,npm run dev;// 启动服务;---会打开页面监听
###########################
1、parse用于从一个字符串中解析出json对象,如
var str = '{"name":"huangxiaojian","age":"23"}' //所给字符串
结果:
JSON.parse(str) 得json对象Object如下:
age: "23"
name: "huangxiaojian"
__proto__: Object
2、stringify()用于从一个对象解析出字符串,如
var a = {a:1,b:2} //所给对象
结果:
执行:JSON.stringify(a) 得到:
"{"a":1,"b":2}"
3、json的解析方法共有两种:eval_r() 和 JSON.parse()。用eval解析一个json字符串而造成原先的value的值改变。
4、JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 javascript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。
本文主要是对js操作JSON的要领做下总结。
在JSON中,有两种结构:对象和数组。
1. 一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间运用 “,”(逗号)分隔。 名称用引号括起来;值如果是字符串则必须用括号,数值型则不须要。例如:
var o={"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"};
2. 数组是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间运用 “,”(逗号)分隔。
例如:
var jsonranklist=[{"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"},{"xlid":"zd","xldigitid":123456,"topscore":1500,"topplaytime":"2009-11-20"}];
为了方便地处理JSON数据,JSON提供了json.js包,下载地址:http://www.json.org/json.js
在数据传输流程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。例如:
JSON字符串:
var str1 = '{ "name": "cxh", "sex": "man" }';
JSON对象:
var str2 = { "name": "cxh", "sex": "man" };
一、JSON字符串转换为JSON对象
要运用上面的str1,必须运用下面的要领先转化为JSON对象:
//由JSON字符串转换为JSON对象
var obj = eval('(' + str + ')');
或者
var obj = str.parseJSON(); //由JSON字符串转换为JSON对象
或者
var obj = JSON.parse(str); //由JSON字符串转换为JSON对象
然后,就可以这样读取:
Alert(obj.name);
Alert(obj.sex);
特别留心:如果obj本来就是一个JSON对象,那么运用 eval()函数转换后(哪怕是多次转换)还是JSON对象,但是运用 parseJSON()函数处理后会有疑问(抛出语法异常)。
二、可以运用 toJSONString()或者全局要领 JSON.stringify()将JSON对象转化为JSON字符串。
例如:
var last=obj.toJSONString(); //将JSON对象转化为JSON字符
或者
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符
alert(last);
留心:
上面的多个要领中,除了eval()函数是js自带的之外,其他的多个要领都来自json.js包。新版本的 JSON 修改了 API,将 JSON.stringify() 和 JSON.parse() 两个要领都注入到了 Javascript 的内建对象里面,前者变成了 Object.toJSONString(),而后者变成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()要领,则说明您的json包版本太低。
############
表单提交中get和post方式的区别有5点
1.get是从服务器上获取数据,post是向服务器传送数据。
2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTPpost机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3.对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。
4.get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中为100KB。
5.get安全性非常低,post安全性较高。
HTTP请求:get与post方法的区别
HTTP 定义了与服务器交互的不同方法,最基本的方法是 get 和 post。事实上 get 适用于多数请求,而保留 post仅用于更新站点。根据 HTTP 规范,get 用于信息获取,而且应该是安全的和幂等的。所谓安全的意味着该操作用于获取信息而非修改信息。换句话说,get 请求一般不应产生副作用。幂等的意味着对同一 URL的多个请求应该返回同样的结果。完整的定义并不像看起来那样严格。从根本上讲,其目标是当用户打开一个链接时,她可以确信从自身的角度来看没有改变资源。比如,新闻站点的头版不断更新。虽然第二次请求会返回不同的一批新闻,该操作仍然被认为是安全的和幂等的,因为它总是返回当前的新闻。反之亦然。post请求就不那么轻松了。post 表示可能改变服务器上的资源的请求。仍然以新闻站点为例,读者对文章的注解应该通过 post请求实现,因为在注解提交之后站点已经不同了(比方说文章下面出现一条注解);
在FORM提交的时候,如果不指定Method,则默认为get请求,Form中提交的数据将会附加在url之后,以?分开与url分开。字母数字字符原样发送,但空格转换为“+“号,其它符号转换为%XX,其中XX为该符号以16进制表示的ASCII(或ISOLatin-1)值。get请求请提交的数据放置在HTTP请求协议头中,而post提交的数据则放在实体数据中;
get方式提交的数据最多只能有1024字节,而post则没有此限制。
在表单里使用”post”和”get”有什么区别
在Form里面,可以使用post也可以使用get。它们都是method的合法取值。但是,post和get方法在使用上至少有两点不同:
1、get方法通过URL请求来传递用户的输入。post方法通过另外的形式。
2、get方式的提交你需要用Request.QueryString来取得变量的值,而post方式提交时,你必须通过Request.Form来访问提交的内容。
仔细研究下面的代码。你可以运行之来感受一下:
代码
〈!–两个Form只有Method属性不同–〉
〈FORM ACTION=“getpost.asp” METHOD=“get”?
〈INPUT TYPE=“text” NAME=“Text” VALUE=“Hello World”〉〈/INPUT〉
〈INPUT TYPE=“submit” VALUE=“Method=get”〉〈/INPUT〉
〈/FORM〉
〈BR〉
〈FORM ACTION=“getpost.asp” METHOD=“post”〉
〈INPUT TYPE=“text” NAME=“Text” VALUE=“Hello World”〉〈/INPUT〉
〈INPUT TYPE=“submit” VALUE=“Method=post”〉〈/INPUT〉
〈/FORM〉
〈BR〉
〈BR〉
〈% If Request.QueryString(“Text”) 〈〉 ““ Then %〉
通过get方法传递来的字符串是: “〈B〉〈%= Request.QueryString(“Text”) %〉〈/B〉“〈BR〉
〈% End If %〉
〈% If Request.Form(“Text”) 〈〉 ““ Then %〉
通过post方法传递来的字符串是: “〈B〉〈%= Request.Form(“Text”) %〉〈/B〉“〈BR〉
〈% End If %〉
说明
把上面的代码保存为getpost.asp,然后运行,首先测试post方法,这时候,浏览器的url并没有什么变化,返回的结果是:
通过post方法传递来的字符串是: "Hello World"
然后测试用get方法提交,请注意,浏览器的url变成了:
http://localhost/general/form/getpost.asp?Text=Hello+World
而返回的结果是:
通过get方法传递来的字符串是: "Hello World"
最后再通过post方法提交,浏览器的url还是:
http://localhost/general/form/getpost.asp?Text=Hello+World
而返回的结果变成:
通过get方法传递来的字符串是: "Hello World"
通过post方法传递来的字符串是: "Hello World"
提示
通过get方法提交数据,可能会带来安全性的问题。比如一个登陆页面。当通过get方法提交数据时,用户名和密码将出现在URL上。如果:
1、 登陆页面可以被浏览器缓存;
2、 其他人可以访问客户的这台机器。
那么,别人即可以从浏览器的历史记录中,读取到此客户的账号和密码。所以,在某些情况下,get方法会带来严重的安全性问题。
建议
http://www.devdao.com/
在Form中,建议使用post方法。
get与post的区别2
get:是以实体的方式得到由请求URI所指定资源的信息,如果请求URI只是一个数据产生过程,那么最终要在响应实体中返回的是处理过程的结果所指向的资源,而不是处理过程的描述。
post:用来向目的服务器发出请求,要求它接受被附在请求后的实体,并把它当作请求队列中请求URI所指定资源的附加新子项,post被设计成用统一的方法实现下列功能:
1:对现有资源的解释
2:向电子公告栏、新闻组、邮件列表或类似讨论组发信息。
3:提交数据块
4:通过附加操作来扩展数据库
从上面描述可以看出,get是向服务器发索取数据的一种请求;而post是向服务器提交数据的一种请求,要提交的数据位于信息头后面的实体中。
很理论化,但是很标准,method=“get”并不是从服务器上获取数据,get和post 只是发送机制不同,并不是一个取一个发!
get方法会在IE地址栏里显示表示你提交时候所带的值;post方法不会
1、get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTPpost机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
2、对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。两种方式的参数都可以用Request来获得。
3、get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中为100KB。
4、get安全性非常低,post安全性较高。
5、 〈form method="get" action="a.asp?b=b"〉跟〈form method="get"action="a.asp"〉是一样的,也就是说,action页面后边带的参数列表会被忽视;而〈formmethod="post" action="a.asp?b=b"〉跟〈form method="post"action="a.asp"〉是不一样的。
另外,get请求有如下特性:它会将数据添加到URL中,通过这种方式传递到服务器,通常利用一个问号?代表URL地址的结尾与数据参数的开端,后面的参数每一个数据参数以“名称=值”的形式出现,参数与参数之间利用一个连接符&来区分。
post请求有如下特性:数据是放在HTTP主体中的,其组织方式不只一种,有&连接方式,也有分割符方式,可隐藏参数,传递大批数据,比较方便。
post 地址栏不会出现一大串?bjnghfgreygt这样的东西
如果是get,就会出现了
1、get 方法通过 URL 请求来传递用户的数据,将表单内各字段名称与其内容,以成对的字符串连接,置于 action 属性所指程序的 url后,如http://www.mdm.com/test.asp?name=asd&passWord=sad,数据都会直接显示在 url 上,就像用户点击一个链接一样;post 方法通过 HTTP post 机制,将表单内各字段名称与其内容放置在 HTML表头(header)内一起传送给服务器端交由 action属性能所指的程序处理,该程序会通过标准输入(stdin)方式,将表单的数据读出并加以处理
2、 get 方式需要使用 Request.QueryString 来取得变量的值;而 post 方式通过 Request.Form 来访问提交的内容
3、 get 方式传输的数据量非常小,一般限制在 2 KB 左右,但是执行效率却比 post 方法好;而 post方式传递的数据量相对较大,它是等待服务器来读取数据,不过也有字节限制,这是为了避免对服务器用大量数据进行恶意攻击,根据微软方面的说法,微软对用 Request.Form() 可接收的最大数据有限制,IIS 4 中为 80 KB 字节,IIS 5 中为 100 KB 字节
建议:除非你肯定你提交的数据可以一次性提交,否则请尽量用 post 方法
4、 get 方式提交数据,会带来安全问题,比如一个登陆页面,通过 get 方式提交数据时,用户名和密码将出现在 URL上,如果页面可以被缓存或者其他人可以访问客户这台机器,就可以从历史记录获得该用户的帐号和密码,所以表单提交建议使用 post 方法;post方法提交的表单页面常见的问题是,该页面如果刷新的时候,会弹出一个对话框
1、get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTPpost机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
2、 对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。两种方式的参数都可以用Request来获得。
3、get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中为100KB。
4、get安全性非常低,post安全性较高。
5、〈form method="get" action="a.asp?b=b"〉跟〈form method="get"action="a.asp"〉是一样的,也就是说,action页面后边带的参数列表会被忽视;而〈formmethod="post" action="a.asp?b=b"〉跟〈form method="post"action="a.asp"〉是不一样的。
################
java toString()用法:原文查看:http://blog.csdn.net/liumx2007/article/details/2817567
1.toString()方法
Object类具有一个toString()方法,你创建的每个类都会继承该方法。它返回对象的一个String表示,并且对于调试非常有帮助。然而对于默认的toString()方法往往不能满足需求,需要覆盖这个方法。
toString()方法将对象转换为字符串。看以下代码:************
2.在容器类中使用toString()
编写一个工具类,用于在控制台输出Iterator。
***************
3.一个实现toString()的通用的Bean
在作一个项目时发现,许多bean需要实现toString()方法,就实现一个通用的bean,然后通过其他继承即可。
###########################
react-router的 <Link/>中的属性:http://blog.csdn.net/itpinpai/article/details/53908854
使用Link标签
// 字符串定位描述符 String location descriptor.
<Link to="/hello">
Hello
</Link>
// 对象定位描述符 Object location descriptor.
<Link to={{ pathname: '/hello', query: { name: 'ryan' } }}>
Hello
</Link>
// 函数返回定位描述符Function returning location descriptor.
<Link to={location => ({ ...location, query: { name: 'ryan' } })}>
Hello
</Link>
属性描述
activeClassName
当被点击时,的className接受一个它的值(activeClassName),默认情况下它是不激活;
activeStyle
当被点击时,activeStyle中的值会添加到转换后的<a/>中,样式是style="color:red;"
onClick(e)
自定义单击事件处理程序。
e.preventDefault():阻止默认事件
e.stopPropagation():阻止事件冒泡
onlyActiveOnIndex
如果onlyActiveOnIndex的值是true,中的路径完全匹配时才会连接指定路由
其它
也可以在上定义 title、id、className属性;
#####################
js中的join(),reverse()与 split()函数用法解析
<script>
/*
* 1:arrayObject.reverse()
* 注意: 该方法会改变原来的数组,而不会创建新的数组。
* 2:arrayObject.join()
* 注意:join() 方法用于把数组中的所有元素放入一个字符串。
* 元素是通过指定的分隔符进行分隔的。
* 指定分隔符方法join("#");其中#可以是任意
* 3:stringObject.split(a,b)这是它的语法
* 方法:用于把一个字符串分割成字符串数组.
* a是必须的决定个从a这分割
* b不是必须的,可选。该参数可指定返回的数组的最大长度 。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。
* 注意:返回的数组中不包括a本身;
* 提示和注释:
* 注释:如果把空字符串 ("") 用作 a,那么 stringObject 中的每个字符之间都会被分割。
* 注释:String.split() 执行的操作与 Array.join 执行的操作是相反的。
*
*
*/
var str = "a,b,c,d,e,f,g";//声明一个字符串
str = str.split(',').reverse();//用split函数拆分成数组对象,再用reverse函数将数组倒序排列
alert(str.length+":"+typeof(str));
alert(typeof(str.join)+":"+str.join('#')+":"+str.join('#').length);
var s = str.reverse().join("#");
alert(typeof(s)+":"+s);
</script>
2.############ Vue-cli搭建完,各文件解释
a、脚手架vue-cli搭建完成后,会生成一些文件,总结学习一下这些文件是做什么用的:Vue-cli搭建完,各文件解释
1、一级目录:
build和config文件夹是wbepack配置的文件夹;
node_modules是在我npm install后存放一些依赖和插件的文件夹;
src是存放我们项目源码的文件,通常我们的vue组件就写在这里,其中main.js是页面的入口文件,初始化vue实例并使用需要的插件【插件router、resource等】,而App.vue看作是一个大组件,也就是整个页面的vue实例文件;
static是存放第三方静态资源的,比如css的reset.css等等。
2、二级目录:
.babelrc是Es6语法的一些转换配置,其中presets是预设,plugins是转换的插件,comments的值如果为false,表示转换后不生成注释;
.editorconfig是编辑器的配置,它配置了一些语言,缩进的风格大小,换行符风格等等;
.eslintignore是忽略语法检查的目录文件,一般是build/*.js、config/*.js这两个文件;
.eslintrc.js是eslint的配置文件,其中extends: 'standard'表示标准规则,如:要求===之类的;‘rule’表示配置具体的规则,我们改eslint就在这个下面进行修改,如:// 没有分号就报错 'semi': ['error', 'always']或者忽略某种检查,将值设为0即可;
index.html是入口文件,js和css会被动态的插入这个文件;
package.json定义了整个项目所需要的这种模块,以及项目的配置信息。
b、HTML <!--...--> 注释 、CSS/JS //注释 和 /*.....*/ 注释
3.##########################
1.双向绑定
<div id="app">
<p>{{message}}</p>
<input v-model="message"/>
</div>
new Vue({
el:'#app',
data:{
message:'Hello vue.js'
}
})
2.渲染列表
<div id="app">
<ul>
<li v-for="todo in todos">{{todo.text}}</li>
</ul>
</div>
new Vue({
el:'#app',
data:{
todos:[
{text:'学习vue'},
{text:'学习Sass'},
{text:'学习webpack'}
]
}
})
3.处理用户输入
<div id="app">
<p>{{message}}</p>
<input v-model='message'/>
<button type="button" v-on:click="reverseMessage">反转</button>
</div>
new Vue({
el:'#app',
data:{
message:'hello world'
},
methods:{
reverseMessage:function(){
this.message=this.message.split('').reverse().join('')
}
}
})
4.记事本
<div id="app">
<input v-model="newTodo" v-on:keyup.enter="addTodo" placeholder="请记录未完成的计划" />
<ul>
<li v-for="todo in todos">
<span>{{todo.text}}</span>
<button type="button" v-on:click="removeTodo($index)">X</button>
</li>
</ul>
</div>
new Vue({
el:'#app',
data:{
newTodo:'',
todos:[
{text:'学习Vue'},
{text:'学习Sass'},
{text:'学习webpack'}
]
},
methods:{
addTodo:function(){
var text = this.newTodo.trim();
if(text){
this.todos.push({text:text});
this.newTodo='';
}
},
removeTodo:function(index){
this.todos.splice(index,1);
}
}
})
5. 插值
<div id="app">
<!-- 单次文本插值 -->
<p>{{*message}}</p>
<!-- 解析真的html字符串 -->
<p>{{{raw_html}}}</p>
<!-- html特性 -->
<p id="item-{{id}}">html特性</p>
</div>
new Vue({
el:'#app',
data:{
message:'Hello vue.js',
raw_html:'<span>原始的html</span>',
id:'1'
}
})
6.绑定表达式
<div id="app">
<!-- javascript表达式 -->
<p>{{number+1}}</p>
<p>{{ok ? 'Yes' : 'No'}}</p>
<p>{{message.split('').reverse().join('')}}</p>
<!-- 过滤器 -->
<p>{{name | capitalize}}</p>
</div>
new Vue({
el:'#app',
data:{
number:2,
ok:false,
message:'123456789',
name:'brucee lee'
}
})
7.指令
<div id="app">
<!-- 参数 -->
<a v-bind:href="url" v-on:click="dosomething">指令带参数</a>
<!-- v-bind、v-on缩写 -->
<a :href="url" @click="dosomething">指令缩写</a>
</div>
new Vue({
el:'#app',
data:{
url:'http://g.pptv.com'
},
methods:{
dosomething:function(){
alert(this.url);
}
}
})
8.计算属性
<div id="app">
<p>a={{a}},b={{b}}</p>
<p>{{fullName}}</p>
</div>
new Vue({
el:'#app',
data:{
a:1,
firstName:'Micro',
lastName:'Jodon'
},
computed:{
b:function(){
return this.a + 1;
},
/*fullName:function(){
return this.firstName + ' ' + this.lastName;
}*/
fullName:{
get:function(){
return this.firstName + ' ' + this.lastName;
},
set:function(newValue){
var names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length-1];
}
}
}
})
9.class与css绑定
.static{
width: 200px;
margin: 20px auto;
height: 25px;
line-height: 25px;
text-align: center;
font-size: 18px;
}
.class-a{
background-color: #f00;
}
.class-b{
color: #fff;
}
.class-c{
padding: 5px 0;
}
<div id="app">
<!-- 绑定class:对象语法 -->
<p class="static" v-bind:class="{'class-a':isA,'class-b':isB}">绑定class</p>
<p class="static" v-bind:class="classObject">绑定class</p>
<!-- 绑定class:数组语法 -->
<p class="static" v-bind:class="[classA,classB,classC]">绑定class</p>
<p class="static" v-bind:class="[classA,{ 'class-b': isB,'class-c': isC}]">绑定class</p>
<!-- 绑定style:对象语法 -->
<p class="static" v-bind:style="styleObject">绑定style</p>
<!-- 绑定style:数组语法 -->
<p class="static" v-bind:style="[styleObjectA,styleObjectB]">绑定style</p>
</div>
new Vue({
el:'#app',
data:{
classA:'class-a',
classB:'class-b',
classC:'class-c',
isA:true,
isB:false,
isC:true,
classObject:{
'class-a':true,
'class-b':true
},
styleObject:{
color:'red',
fontSize:'13px',
backgroundColor:'#00f'
},
styleObjectA:{
color:'green',
fontSize:'16px'
},
styleObjectB:{
backgroundColor:'#f0f',
transform:'rotate(7deg)'
}
}
})
10.条件渲染
<div id="app">
<h1 v-if="Math.random() > 0.5">对不起!</h1>
<h1 v-else>没关系</h1>
<template v-if="ok">
<h1>标题</h1>
<p>段落1</p>
<p>段落2</p>
</template>
<h1 v-show="isShow">Hello!</h1>
<custom-component v-show="condition"></custom-component>
<p v-show="!condition">这可能也是一个组件</p>
</div>
// 定义
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>'
});
// 注册
Vue.component('custom-component', MyComponent);
new Vue({
el:'#app',
data:{
ok:true,
isShow:false,
condition:true
},
})
11. 列表渲染
ul{
list-style: none;
width: 150px;
}
.divider{
height: 2px;
background-color: #00f;
}
span{
padding: 0 2px;
}
<div id="app">
<!-- 数组v-for -->
<ul>
<template v-for="item in items" track-by="_uid">
<li>{{ parentMessage }} - {{ $index }} - {{ item.message }}</li>
<li class="divider"></li>
</template>
</ul>
<!-- 对象v-for -->
<ul>
<li v-for="(key,val) in object">{{key}} : {{val}}</li>
</ul>
<!-- 值域v-for -->
<span v-for="n in 10">{{ n }}</span>
</div>
var vm=new Vue({
el:'#app',
data:{
parentMessage:'水果',
items:[
{ _uid:'001',message:'香蕉'},
{ _uid:'002',message:'橘子'}
],
object:{
FirstName: 'John',
LastName: 'Doe',
Age: 30
}
}
});
//变异方法:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
vm.items.push({message:'苹果'},{message:'梨子'});//推入两项
vm.items.shift();//取出第一项
//非变异方法:filter(), concat(), slice(),可用替换数组来修改原数组
vm.items=vm.items.filter(function (item) {
return item.message.match(/子/);
})
12.方法与事件处理器
<div id="app">
<!-- 内联语句处理器 -->
<button type="button" v-on:click="say('Hello',$event)">提交</button>
<!-- 事件修饰符 -->
<!-- 阻止单击事件冒泡 -->
<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>
<!-- 添加事件侦听器时使用 capture 模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- 按键修饰符 -->
<input v-on:keyup.enter="submit">
</div>
var vm=new Vue({
el:'#app',
methods:{
say:function(msg,event){
alert(msg+","+event.target.tagName);
event.preventDefault();
}
}
});
13.表单控件绑定
<div id="app">
<!-- 多行文本 -->
<span>这是您的评论:</span>
<p>{{message}}</p>
<textarea v-model="message" placeholder="请输入您的评论"></textarea>
<br>
<!-- 单选框 -->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<br>
<!-- 多个单选框 -->
<input type="checkbox" id="jack" value="马云" v-model="checkedNames">
<label for="jack">马云</label>
<input type="checkbox" id="john" value="马化腾" v-model="checkedNames">
<label for="john">马化腾</label>
<input type="checkbox" id="mike" value="李彦宏" v-model="checkedNames">
<label for="mike">李彦宏</label>
<br>
<span>选中的值: {{ checkedNames | json }}</span>
<br>
<!-- 单选钮 -->
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>选中的值: {{ picked }}</span>
<br>
<!-- 下拉列表单选 -->
<select v-model="selected">
<option selected>湖北</option>
<option>北京</option>
<option>上海</option>
</select>
<span>选中的值: {{ selected }}</span>
<br>
<!-- 下拉列表多选 -->
<select v-model="selecteds" multiple>
<option v-for="option in options" v-bind:value="option.value">{{ option.text }}</option>
</select>
<br>
<span>选中的值: {{ selecteds | json }}</span>
<br>
<!--绑定动态值到Vue实例-->
<!-- 选中时为a,未选中时为b -->
<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b"/>
<span>选中时的值:{{toggle}}</span>
<br>
<input type="radio" v-model="pick" v-bind:value="c">男
<input type="radio" v-model="pick" v-bind:value="d">女
<span>选中时的值:{{pick}}</span>
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model="msg" lazy>
<!-- 设置转换为数值类型 -->
<input v-model="age" number>
<!-- 设置延时 -->
<input v-model="msg" debounce="500">
</div>
var vm=new Vue({
el:'#app',
data: {
checkedNames: [],
options:[
{text:'南京',value:'南京'},
{text:'苏州',value:'苏州'},
{text:'无锡',value:'无锡'}
],
a:'选中',
b:'未选中',
c:'男',
d:'女'
}
});
作者: 建人boy
链接:https://www.imooc.com/article/19153
4.#############################
webpack 入门
目录
1 安装 webpack
2 初始化项目
3 webpack 配置
4 自动刷新
5 第三方库
6 模块化
7 打包、构建
8 webpack 模板
我最近大量使用的是 jspm,但因为用它搭建的前端开发环境中,写测试代码非常困难,而项目又需要写测试,所以决定先试试 webpack。
安装 webpack
webpack 是一个 npm 包,所以我们通过 npm 命令来全局安装:
npm install webpack -g
安装完成后,命令行下就有 webpack 命令可用,执行 webpack --help 可以查看 webpack 提供的各种命令。
初始化项目
grunt.js 一类工具可以借助 yeoman 来初始化项目,目前我并没有看到 webpack 有类似方法,所以当 node.js 项目来初始化。
npm init 创建一个 package.json 文件
npm install webpack --save-dev 在当前目录下安装局域的 webpack
完成以上两个步骤后,我们的项目下有一个 package.json 文件,一个 node_modules 文件夹,我们还需要一个 index.html 文件,内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack 教程</title>
</head>
<body>
</body>
</html>
webpack 配置
我们的代码将组织在 JavaScript 模块中,项目会有一个入口(entry)文件,比如 main.js,我们需要通过 webpack 的配置文件指明它的位置。
在根目录新建一个 webpack.config.js 文件,添加如下内容:
module.exports = {
entry: './main.js'
};
因为我们在项目部署前需要打包合并 js 文件,所以还需要在 webpack.config.js 中配置一个 output:
module.exports = {
entry: './main.js',
output: {
path: __dirname,
filename: 'bundle.js'
}
}
output 定义我们打包出来的文件位置及名称。
完成以上后,试着在项目根目录下执行 webpack 命令,我们的根目录下会多出一个 bundle.js 文件:
webpack build
自动刷新
到现在为止,我们还没在浏览器中打开 index.html 文件,实际上,我们连 bundle.js 文件都还没加入 index.html 文件中。现在且先加入:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack 教程</title>
</head>
<body>
<script src="./bundle.js"></script> <!-- 在 index.html 文件中添加这一行代码 -->
</body>
</html>
这是 webpack 异于其它工具的地方,它在 HTML 文件中直接引用了 build 后的 js 文件,而不是原始的 main.js 文件。这就会有几个问题:
Q: main.js 或它所引用的模块的变化如何实时编译到 bundle.js?
A: 非常简单,在根目录下执行 webpack --watch 就可以监控文件变化并实时编译了
Q: 上面只是实时编译了 js 文件,我们该如何把变化同步到浏览器页面上,实现实时刷新?
A: webpack 提供了 webpack-dev-server 解决实时刷新页面的问题,同时解决上面一个问题。
?
安装 webpack-dev-server
执行 npm install webpack-dev-server -g 在全局环境中安装 webpack-dev-server
在项目根目录下执行命令:
$ webpack-dev-server
这样,我们就可以在默认的 http://localhost:8080 网址上打开我们的项目文件了。
此时,我们可能会认为,
js 文件修改
webpack-dev-server 监控到变化
webpack 重新编译
实时更新浏览器中的页面
但不幸的是,我们「自以为是」了。http://localhost:8080 这个网站对 js 文件的变化无动于衷。
我们可以启用 webpack-dev-server 的 hot 模式,在代码中插入如下一行:
<script src="http://localhost:8080/webpack-dev-server.js"></script>
这样 http://localhost:8080/ 这个网址也可以根据 js 的变化相应地自动刷新了。
第三方库
webpack 并不是包管理器,所以如果我们要使用第三方库,则需要借助 npm 或其它工具。比如,在项目里安装 jQuery:
npm install jquery --save
模块化
webpack 自称 module bundler,在它的定义中,CSS、图片、文件等等,都可以通过相应的 loader 加载,变成 JavaScript模块,以下具体展开说明。
模块化 JavaScript
如果我想使用 ES6 的方式引入某个 es6 模块,比如:
import $ from 'whatever';
怎么办?浏览器并不提供原生支持,webpack 通过各种 loader 来解决这类问题。比如这 ES6 的语法,可以借助 babel-loader:
安装 babel-loader
npm install --save-dev babel-loader
配置 webpack.config.js
在 module.exports 值中添加 module:
module.exports = {
entry: {
app: ['webpack/hot/dev-server', './main.js']
},
output: {
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.js$/, loader: 'babel', exclude: /node_modules/ }
]
}
}
这样我们就可以在我们的 js 文件中使用 ES6 语法,babel-loader 会负责编译。
上面的方法,是在 webpack.config.js 文件中定义某一类型文件的加载器,我们也可以在代码中直接指定:
import $ from 'babel!whatever'
因为 babel-loader 允许我们使用 ES6 语法,于是我们的模块完全可以用 ES6 的 module 来组织代码: export 一个简单的模块:
// script/log.js 文件
export default (param) => {
console.log('你好啊', param);
}
然后在 main.js 中导入使用:
// main.js 文件
import log from "./script/log.js";
CSS 加载器
我们可以按传统方法使用 CSS,即在 HTML 文件中添加:
<link rel="stylesheet" href="style/app.css">
但 webpack 里,CSS 同样可以模块化,然后使用 import 导入。
因此我们不再使用 link 标签来引用 CSS,而是通过 webpack 的 style-loader 及 css-loader。前者将 css 文件以 <style></style> 标签插入 <head> 头部,后者负责解读、加载 CSS 文件。
安装 CSS 相关的加载器
npm install style-loader css-loader --save-dev
配置 webpack.config.js 文件
{
// ...
module: {
loaders: [
{ test: /\.css$/, loaders: ['style', 'css'] }
]
}
}
在 main.js 文件中引入 css
import'./style/app.css';
重启 webpack-dev-server
模块化 CSS
上一步里,我们 import 到 JavaScript 文件中的 CSS 文件中的 CSS 类打包时是 export 到全局环境的,也就是说,我们只是换了种加载 CSS 的方式,在书写 CSS 的时候,还是需要注意使用命名规范,比如 BEM,否则全局环境 CSS 类的冲突等问题不会消失。
这里,webpack 做了一个模块化 CSS 的尝试,真正意思上的「模块化」,即 CSS 类不会泄露到全局环境中,而只会定义在 UI 模块内 – 比如 react.js 这类模块,或者 web components。类似的尝试还有 ember-component-css 与 jspm 的 plugin css。
autoprefixer
我们在书写 CSS 时,按规范写,构建时利用 autoprefixer 可以输出 -webkit、-moz 这样的浏览器前缀,webpack 同样是通过 loader 提供该功能。
安装 autoprefixer-loader
npm install autoprefixer-loader --save-dev
配置 webpack.config.js
loaders: [{
loader: 'style!css!autoprefixer?{browsers:["last 2 version", "> 1%"]}',
//...
}]
重启 webpack-dev-server
假如我们在 CSS 中写了 body { display: flex; } 规则,再查看 bundle.js 文件的话,我们能看到类似如下的代码:
body {\n\tdisplay: -webkit-box;\n\tdisplay: -webkit-flex;\n\tdisplay: -ms-flexbox;\n\tdisplay: flex;\n}
图片
图片同样可是是模块,但使用的是 file loader 或者 url loader,后者会根据定义的大小范围来判断是否使用 data url。
import loadingIMG from 'file!../img/loading.gif'
React.render(<img src={loadingIMG} />, document.getElementById('app'));
打包、构建
项目结束后,代码要压缩、混淆、合并等,只需要在命令行执行:
webpack
即可,webpack 根据 webpack.config.js 文件中的配置路径、构建文件名生成相应的文件。
webpack 模板
上面说的是一步一步使用 webpack 搭建开发环境,当然,实际应用中,大可以借用一些模板,比如 react hot boilerplate 这样的库。
5.#################################
windows安装yarn
下载地址:https://yarnpkg.com/latest.msi
npm 的方式:npm install -g yarn
关于安装,你可以去官网查看到更多资料 https://yarnpkg.com/en/docs/install
安装完成后,测试下自己的版本:yarn --version
开始使用,我们新建一个文件夹yarn测试下,输入命令: yarn init,一路enter下去就行
然后我们试着加一些依赖:yarn add gulp-less
如果加入具体版本可以后面写上@0.x.x 这样子
Po主试着装了三个gulp插件,这个时候package.json里面是这个样子的:
如果你要移除的话,可以使用yarn remove package_name 比如:yarn remove gulp-less
升级更新某个依赖可以使用这个:yarn upgrade [package]
6.###########################
Error: Cannot find module 'webpack-merge'
缺少webpack-merge包,首先查看是否安装了webpack-merge模块
npm ls --depth=0
如果没有重新安装
npm install
还是不行的话说明package.json里缺少webpack-merge的配置,直接安装
npm install webpack-merge --save-dev
7.########################
Node.js Error: Cannot find module express的解决办法
在执行完下面的全局安装
npm -p install express
复制代码
仍报Error: Cannot find module express错误。
解决办法:
在自己的工程目录下再次执行
npm install express
复制代码
8、###############
Error: Cannot find module 'webpack'
npm install webpack --save
9.####################
vuex的使用
开始:首先,dos或者直接进入所要建立项目的文件夹;使用命令:vue init airyland/vux2 projectPath(自命名名称),或者用命令:vue init webpack projectPath,后者(使用命令npm run dev时)会自动打开网页;
其次,用命令:cd projectPath
再次,npm install --registry=https://registry.npm.taobao.org 或者npm install // 安装依赖包
最后,npm run dev;// 启动服务;---会打开页面监听
###########################
1、parse用于从一个字符串中解析出json对象,如
var str = '{"name":"huangxiaojian","age":"23"}' //所给字符串
结果:
JSON.parse(str) 得json对象Object如下:
age: "23"
name: "huangxiaojian"
__proto__: Object
2、stringify()用于从一个对象解析出字符串,如
var a = {a:1,b:2} //所给对象
结果:
执行:JSON.stringify(a) 得到:
"{"a":1,"b":2}"
3、json的解析方法共有两种:eval_r() 和 JSON.parse()。用eval解析一个json字符串而造成原先的value的值改变。
4、JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 javascript 原生格式,这意味着在 JavaScript 中处理 JSON数据不须要任何特殊的 API 或工具包。
本文主要是对js操作JSON的要领做下总结。
在JSON中,有两种结构:对象和数组。
1. 一个对象以“{”(左括号)开始,“}”(右括号)结束。每个“名称”后跟一个“:”(冒号);“‘名称/值’ 对”之间运用 “,”(逗号)分隔。 名称用引号括起来;值如果是字符串则必须用括号,数值型则不须要。例如:
var o={"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"};
2. 数组是值(value)的有序集合。一个数组以“[”(左中括号)开始,“]”(右中括号)结束。值之间运用 “,”(逗号)分隔。
例如:
var jsonranklist=[{"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"},{"xlid":"zd","xldigitid":123456,"topscore":1500,"topplaytime":"2009-11-20"}];
为了方便地处理JSON数据,JSON提供了json.js包,下载地址:http://www.json.org/json.js
在数据传输流程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键。例如:
JSON字符串:
var str1 = '{ "name": "cxh", "sex": "man" }';
JSON对象:
var str2 = { "name": "cxh", "sex": "man" };
一、JSON字符串转换为JSON对象
要运用上面的str1,必须运用下面的要领先转化为JSON对象:
//由JSON字符串转换为JSON对象
var obj = eval('(' + str + ')');
或者
var obj = str.parseJSON(); //由JSON字符串转换为JSON对象
或者
var obj = JSON.parse(str); //由JSON字符串转换为JSON对象
然后,就可以这样读取:
Alert(obj.name);
Alert(obj.sex);
特别留心:如果obj本来就是一个JSON对象,那么运用 eval()函数转换后(哪怕是多次转换)还是JSON对象,但是运用 parseJSON()函数处理后会有疑问(抛出语法异常)。
二、可以运用 toJSONString()或者全局要领 JSON.stringify()将JSON对象转化为JSON字符串。
例如:
var last=obj.toJSONString(); //将JSON对象转化为JSON字符
或者
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符
alert(last);
留心:
上面的多个要领中,除了eval()函数是js自带的之外,其他的多个要领都来自json.js包。新版本的 JSON 修改了 API,将 JSON.stringify() 和 JSON.parse() 两个要领都注入到了 Javascript 的内建对象里面,前者变成了 Object.toJSONString(),而后者变成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()要领,则说明您的json包版本太低。
############
表单提交中get和post方式的区别有5点
1.get是从服务器上获取数据,post是向服务器传送数据。
2.get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTPpost机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3.对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。
4.get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中为100KB。
5.get安全性非常低,post安全性较高。
HTTP请求:get与post方法的区别
HTTP 定义了与服务器交互的不同方法,最基本的方法是 get 和 post。事实上 get 适用于多数请求,而保留 post仅用于更新站点。根据 HTTP 规范,get 用于信息获取,而且应该是安全的和幂等的。所谓安全的意味着该操作用于获取信息而非修改信息。换句话说,get 请求一般不应产生副作用。幂等的意味着对同一 URL的多个请求应该返回同样的结果。完整的定义并不像看起来那样严格。从根本上讲,其目标是当用户打开一个链接时,她可以确信从自身的角度来看没有改变资源。比如,新闻站点的头版不断更新。虽然第二次请求会返回不同的一批新闻,该操作仍然被认为是安全的和幂等的,因为它总是返回当前的新闻。反之亦然。post请求就不那么轻松了。post 表示可能改变服务器上的资源的请求。仍然以新闻站点为例,读者对文章的注解应该通过 post请求实现,因为在注解提交之后站点已经不同了(比方说文章下面出现一条注解);
在FORM提交的时候,如果不指定Method,则默认为get请求,Form中提交的数据将会附加在url之后,以?分开与url分开。字母数字字符原样发送,但空格转换为“+“号,其它符号转换为%XX,其中XX为该符号以16进制表示的ASCII(或ISOLatin-1)值。get请求请提交的数据放置在HTTP请求协议头中,而post提交的数据则放在实体数据中;
get方式提交的数据最多只能有1024字节,而post则没有此限制。
在表单里使用”post”和”get”有什么区别
在Form里面,可以使用post也可以使用get。它们都是method的合法取值。但是,post和get方法在使用上至少有两点不同:
1、get方法通过URL请求来传递用户的输入。post方法通过另外的形式。
2、get方式的提交你需要用Request.QueryString来取得变量的值,而post方式提交时,你必须通过Request.Form来访问提交的内容。
仔细研究下面的代码。你可以运行之来感受一下:
代码
〈!–两个Form只有Method属性不同–〉
〈FORM ACTION=“getpost.asp” METHOD=“get”?
〈INPUT TYPE=“text” NAME=“Text” VALUE=“Hello World”〉〈/INPUT〉
〈INPUT TYPE=“submit” VALUE=“Method=get”〉〈/INPUT〉
〈/FORM〉
〈BR〉
〈FORM ACTION=“getpost.asp” METHOD=“post”〉
〈INPUT TYPE=“text” NAME=“Text” VALUE=“Hello World”〉〈/INPUT〉
〈INPUT TYPE=“submit” VALUE=“Method=post”〉〈/INPUT〉
〈/FORM〉
〈BR〉
〈BR〉
〈% If Request.QueryString(“Text”) 〈〉 ““ Then %〉
通过get方法传递来的字符串是: “〈B〉〈%= Request.QueryString(“Text”) %〉〈/B〉“〈BR〉
〈% End If %〉
〈% If Request.Form(“Text”) 〈〉 ““ Then %〉
通过post方法传递来的字符串是: “〈B〉〈%= Request.Form(“Text”) %〉〈/B〉“〈BR〉
〈% End If %〉
说明
把上面的代码保存为getpost.asp,然后运行,首先测试post方法,这时候,浏览器的url并没有什么变化,返回的结果是:
通过post方法传递来的字符串是: "Hello World"
然后测试用get方法提交,请注意,浏览器的url变成了:
http://localhost/general/form/getpost.asp?Text=Hello+World
而返回的结果是:
通过get方法传递来的字符串是: "Hello World"
最后再通过post方法提交,浏览器的url还是:
http://localhost/general/form/getpost.asp?Text=Hello+World
而返回的结果变成:
通过get方法传递来的字符串是: "Hello World"
通过post方法传递来的字符串是: "Hello World"
提示
通过get方法提交数据,可能会带来安全性的问题。比如一个登陆页面。当通过get方法提交数据时,用户名和密码将出现在URL上。如果:
1、 登陆页面可以被浏览器缓存;
2、 其他人可以访问客户的这台机器。
那么,别人即可以从浏览器的历史记录中,读取到此客户的账号和密码。所以,在某些情况下,get方法会带来严重的安全性问题。
建议
http://www.devdao.com/
在Form中,建议使用post方法。
get与post的区别2
get:是以实体的方式得到由请求URI所指定资源的信息,如果请求URI只是一个数据产生过程,那么最终要在响应实体中返回的是处理过程的结果所指向的资源,而不是处理过程的描述。
post:用来向目的服务器发出请求,要求它接受被附在请求后的实体,并把它当作请求队列中请求URI所指定资源的附加新子项,post被设计成用统一的方法实现下列功能:
1:对现有资源的解释
2:向电子公告栏、新闻组、邮件列表或类似讨论组发信息。
3:提交数据块
4:通过附加操作来扩展数据库
从上面描述可以看出,get是向服务器发索取数据的一种请求;而post是向服务器提交数据的一种请求,要提交的数据位于信息头后面的实体中。
很理论化,但是很标准,method=“get”并不是从服务器上获取数据,get和post 只是发送机制不同,并不是一个取一个发!
get方法会在IE地址栏里显示表示你提交时候所带的值;post方法不会
1、get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTPpost机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
2、对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。两种方式的参数都可以用Request来获得。
3、get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中为100KB。
4、get安全性非常低,post安全性较高。
5、 〈form method="get" action="a.asp?b=b"〉跟〈form method="get"action="a.asp"〉是一样的,也就是说,action页面后边带的参数列表会被忽视;而〈formmethod="post" action="a.asp?b=b"〉跟〈form method="post"action="a.asp"〉是不一样的。
另外,get请求有如下特性:它会将数据添加到URL中,通过这种方式传递到服务器,通常利用一个问号?代表URL地址的结尾与数据参数的开端,后面的参数每一个数据参数以“名称=值”的形式出现,参数与参数之间利用一个连接符&来区分。
post请求有如下特性:数据是放在HTTP主体中的,其组织方式不只一种,有&连接方式,也有分割符方式,可隐藏参数,传递大批数据,比较方便。
post 地址栏不会出现一大串?bjnghfgreygt这样的东西
如果是get,就会出现了
1、get 方法通过 URL 请求来传递用户的数据,将表单内各字段名称与其内容,以成对的字符串连接,置于 action 属性所指程序的 url后,如http://www.mdm.com/test.asp?name=asd&passWord=sad,数据都会直接显示在 url 上,就像用户点击一个链接一样;post 方法通过 HTTP post 机制,将表单内各字段名称与其内容放置在 HTML表头(header)内一起传送给服务器端交由 action属性能所指的程序处理,该程序会通过标准输入(stdin)方式,将表单的数据读出并加以处理
2、 get 方式需要使用 Request.QueryString 来取得变量的值;而 post 方式通过 Request.Form 来访问提交的内容
3、 get 方式传输的数据量非常小,一般限制在 2 KB 左右,但是执行效率却比 post 方法好;而 post方式传递的数据量相对较大,它是等待服务器来读取数据,不过也有字节限制,这是为了避免对服务器用大量数据进行恶意攻击,根据微软方面的说法,微软对用 Request.Form() 可接收的最大数据有限制,IIS 4 中为 80 KB 字节,IIS 5 中为 100 KB 字节
建议:除非你肯定你提交的数据可以一次性提交,否则请尽量用 post 方法
4、 get 方式提交数据,会带来安全问题,比如一个登陆页面,通过 get 方式提交数据时,用户名和密码将出现在 URL上,如果页面可以被缓存或者其他人可以访问客户这台机器,就可以从历史记录获得该用户的帐号和密码,所以表单提交建议使用 post 方法;post方法提交的表单页面常见的问题是,该页面如果刷新的时候,会弹出一个对话框
1、get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTPpost机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
2、 对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。两种方式的参数都可以用Request来获得。
3、get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中为100KB。
4、get安全性非常低,post安全性较高。
5、〈form method="get" action="a.asp?b=b"〉跟〈form method="get"action="a.asp"〉是一样的,也就是说,action页面后边带的参数列表会被忽视;而〈formmethod="post" action="a.asp?b=b"〉跟〈form method="post"action="a.asp"〉是不一样的。
################
java toString()用法:原文查看:http://blog.csdn.net/liumx2007/article/details/2817567
1.toString()方法
Object类具有一个toString()方法,你创建的每个类都会继承该方法。它返回对象的一个String表示,并且对于调试非常有帮助。然而对于默认的toString()方法往往不能满足需求,需要覆盖这个方法。
toString()方法将对象转换为字符串。看以下代码:************
2.在容器类中使用toString()
编写一个工具类,用于在控制台输出Iterator。
***************
3.一个实现toString()的通用的Bean
在作一个项目时发现,许多bean需要实现toString()方法,就实现一个通用的bean,然后通过其他继承即可。
###########################
react-router的 <Link/>中的属性:http://blog.csdn.net/itpinpai/article/details/53908854
使用Link标签
// 字符串定位描述符 String location descriptor.
<Link to="/hello">
Hello
</Link>
// 对象定位描述符 Object location descriptor.
<Link to={{ pathname: '/hello', query: { name: 'ryan' } }}>
Hello
</Link>
// 函数返回定位描述符Function returning location descriptor.
<Link to={location => ({ ...location, query: { name: 'ryan' } })}>
Hello
</Link>
属性描述
activeClassName
当被点击时,的className接受一个它的值(activeClassName),默认情况下它是不激活;
activeStyle
当被点击时,activeStyle中的值会添加到转换后的<a/>中,样式是style="color:red;"
onClick(e)
自定义单击事件处理程序。
e.preventDefault():阻止默认事件
e.stopPropagation():阻止事件冒泡
onlyActiveOnIndex
如果onlyActiveOnIndex的值是true,中的路径完全匹配时才会连接指定路由
其它
也可以在上定义 title、id、className属性;
#####################