8月21
本文基于 "element-ui": "^2.4.3", tree控件文档:https://element.faas.ele.me/#/zh-CN/component/tree#tree-shu-xing-kong-jian
这是个坑,如果遇到这个问题,先到git上看下人家的bug fix:https://github.com/ElemeFE/element/issues/4944
然并卵,我这没搞定,通过下面方法搞定

具体操作:
1、在tree外包一层div,给class=‘tree’
2、定义tree的样式
3、重写tree样式
代码:
template
[codes=c#]
:props="page.tree.defaultProps"
:filter-node-method="filterNode"
ref="tree"
accordion
node-key="id"
:default-expanded-keys="page.tree.defaultExpandedKeys"
@node-click="handleNodeClick">
class="custom-tree-node"
slot-scope="{ node, data }">
{{ node.label }}
[/codes]
style
[codes=c#]
.tree {
overflow-y: auto;
overflow-x: scroll;
/* width: 80px; */
height: 500px;
background-color: #ffffff;
}
.el-tree {
min-width: 100%;
font-size: 14px;
display: inline-block !important;
}
[/codes]
这是个坑,如果遇到这个问题,先到git上看下人家的bug fix:https://github.com/ElemeFE/element/issues/4944
然并卵,我这没搞定,通过下面方法搞定
具体操作:
1、在tree外包一层div,给class=‘tree’
2、定义tree的样式
3、重写tree样式
代码:
template
[codes=c#]
:filter-node-method="filterNode"
ref="tree"
accordion
node-key="id"
:default-expanded-keys="page.tree.defaultExpandedKeys"
@node-click="handleNodeClick">
class="custom-tree-node"
slot-scope="{ node, data }">
{{ node.label }}
[/codes]
style
[codes=c#]
.tree {
overflow-y: auto;
overflow-x: scroll;
/* width: 80px; */
height: 500px;
background-color: #ffffff;
}
.el-tree {
min-width: 100%;
font-size: 14px;
display: inline-block !important;
}
[/codes]
8月21
在VUE单页应用项目开发过程树形中有一个需求,需要选中树形控件(可以是点击选中行或者复选框),但是只能选中一个。控件使用的是Element ui中的el-tree,但是找了一下并没有单选组件的API,慢慢琢磨中。

1.el-tree组件

2.主要是通过两个事件进行联合判断,
node-click节点被点击时的回调,check-change节点选中状态发生变化时的回调.
由于nodeClick被调用时checkChange也会被调用,因此需要一个editCheckId辅助避免出现因为联动导致选中状态错乱

git项目地址:https://github.com/heyoju/vueDemo
1.el-tree组件
2.主要是通过两个事件进行联合判断,
node-click节点被点击时的回调,check-change节点选中状态发生变化时的回调.
由于nodeClick被调用时checkChange也会被调用,因此需要一个editCheckId辅助避免出现因为联动导致选中状态错乱
git项目地址:https://github.com/heyoju/vueDemo
8月15
我在vue.js中使用axios发送post请求到后台。提交的对象是vue中定义的。代码如下:
[codes=c#]
axios({
url: '/user',
method: 'post',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
},
transformRequest: [function (data) {
// Do whatever you want to transform the data
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
[/codes]
[codes=c#]
axios({
url: '/user',
method: 'post',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
},
transformRequest: [function (data) {
// Do whatever you want to transform the data
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
[/codes]
8月14
1.for in 循环 并且使用hasOwnProperty 方法
[codes=c#]
var jsonObject1 = {
"name": "xiaoming",
"age": 29
},
var keys1 = [];
for (var p1 in jsonObject1) {
if (jsonObject1.hasOwnProperty(p1))
keys1.push(p1);
}
alert(keys1);
[/codes]
如果不使用 hasOwnProperty,给Object 添加自己的属性时,也会输出出来
[codes=c#]
Object.prototype.test = "I am test";
var jsonObject = {
"name": "xiaoming",
"age": 29
},
keys = [];
for (var p in jsonObject)
keys.push(p);
alert(keys); //name,age, test
[/codes]
[codes=c#]
var jsonObject1 = {
"name": "xiaoming",
"age": 29
},
var keys1 = [];
for (var p1 in jsonObject1) {
if (jsonObject1.hasOwnProperty(p1))
keys1.push(p1);
}
alert(keys1);
[/codes]
如果不使用 hasOwnProperty,给Object 添加自己的属性时,也会输出出来
[codes=c#]
Object.prototype.test = "I am test";
var jsonObject = {
"name": "xiaoming",
"age": 29
},
keys = [];
for (var p in jsonObject)
keys.push(p);
alert(keys); //name,age, test
[/codes]
8月9
JavaScript使用一种称为垃圾收集的技术来管理分配给它的内存。这与C这样的底层语言不同,C要求使用多少借多少,用完再释放回去。其他语言,比如 Objective-C,实现了一个引用计数系统来辅助完成这些工作,我们能够了解到有多少个程序块使用了一个特定的内存段,因而可以在不需要时清除这些内存段。
JavaScript是一种高级语言,它一般是通过后台来维护这种计数系统。
当JavaScript代码生成一个新的内存驻留项时(比如一个对象或函数),系统就会为这个项留出一块内存空间。因为这个对象可能会被传递给很多函数,并且会被指定给很多变量,所以很多代码都会指向这个对象的内存空间。JavaScript会跟踪这些指针,当最后一个指针废弃不用时,这个对象占用的内存会被释放。
A ---------> B ------------> C
例如对象A有一个属性指向B,而B也有一个属性指向C。即使当前作用域中只有对象A有效,但由于指针的关系所有3个对象都必须保留在内存中。当离开A的当前作用域时(例如代码执行到声明A的函数的末尾处),垃圾收集器就可以释放A占用的内存。此时,由于没有什么指向B,因此B可以释放,最后,C也可以释放。
然而,当对象间的引用关系变得复杂时,处理起来也会更加困难。
A ---------> B ------------> C
^、_ _ _ _ _ _ _|
这里,我们又为对象C添加了一个引用B的属性。在这种情况下,当A释放时,仍然有来自C的指针指向B。这种引用循环需要由JavaScript进行特殊的处理,但必须考虑到整个循环与作用域中的其他变量已经处于隔离状态。
从这里我们可以看到,闭包问题的本质是作用域的问题,我平时写的闭包大多出现在:
循环引用
闭包可能会导致在不经意间创建循环引用。因为函数是必须保存在内存中的对象,所以位于函数执行上下文中的所有变量也需要保存在内存中:
[codes=c#]
function outerFn() {
var outerVar = {};
function innerFn() {
console.log(outerVar);
}
outerVar.fn = innerFn;
return innerFn;
};
[codes]
这里创建了一个名为 outerVar 的对象,该对象在内部函数innerFn()中被引用。然后,为 outerVar 创建了一个指向 innerFn()的属性,之后返回了innerFn()。这样就在 innerFn() 上创建了一个引用outerVar的闭包,而outerVar又引用了innerFn()。
这会导致变量在内存中存在的时间比想象得长,而且又不容易被发现。这还不算完,还有可能会出现比这种情况更隐蔽的引用循环:
[codes=c#]
function outerFn() {
var outerVar = {};
function innerFn() {
console.log('hello');
}
outerVar.fn = innerFn;
return innerFn;
};
[/codes]
这里我们修改了innerFn(),不再招惹 outerVar。但是,这样做仍然没有断开循环引用。
即使innerFn()不再勾引 outerVar,outerVar 也仍然位于innerFn()的封闭环境中。由于闭包的原因,位于 outerFn()中的所有变量都隐含地被 innerFn()所引用。我们再想一想,在 java 中的内部类不也是类似当前情况吗,内部类能够‘看’外部的 this。此时此刻,正如彼时彼刻,竟如此相像。因此,闭包会使意外地创建这些引用循环变得易如反掌。
DOM与JavaScript的循环
虽然我很早就知道闭包,也在调试内存问题时在 chrome F12 里的 profile 是里看到 closure reference,但是并不清除这个问题的根源。因为上述情况通常不是什么问题,JavaScript能够检测到这些情况并在它们孤立时将其清除。
最近看到关于这个问题的解释:在旧版本IE中存在一种难以处理的循环引用问题。
当一个循环中同时包含DOM元素和常规JavaScript对象时,IE无法释放任何一个对象——因为这两类对象是由不同的内存管理程序负责管理的。
除非关闭浏览器,否则这种循环在IE中永远得不到释放。为此,随着时间的推移,这可能会导致大量内存被无效地占用。
导致这种循环的一个常见原因是简单的事件处理:
[codes=c#]
$(document).ready(function() {
var button = document.getElementById('button-1');
button.onclick = function() {
console.log('hello');
return false;
};
});
[/codes]
当指定单击事件处理程序时,就创建了一个在其封闭的环境中包含button变量的闭包。而且,现在的button也包含一个指向闭包(onclick属性自身)的引用。这样,就导致了在IE中即使离开当前页面也不会释放这个循环。
为了释放内存,就需要断开循环引用,例如关闭窗口,删除onclick属性。另外,也可以像下面这样重写代码来
避免这种闭包:
[codes=c#]
function hello() {
console.log('hello');
return false;
}
$(document).ready(function() {
var button = document.getElementById('button-1');
button.onclick = hello;
});
[/codes]
因为hello()函数不再包含 button,引用就成了单向的(从button到hello),不存的循环,所以就不会造成内存泄漏了。
用jQuery化解引用循环
下面,我们通过常规的jQuery结构来编写同样的代码:
[codes=c#]
$(document).ready(function() {
var $button = $('#button-1');
$button.click(function(event) {
event.preventDefault();
console.log('hello');
});
});
[/codes]
即使此时仍然会创建一个闭包,并且也会导致同前面一样的循环,但这里的代码却不会使 IE 发生内存泄漏。由于jQuery考虑到了内存泄漏的潜在危害,所以它会手动释放自己指定的所有事件处理程序。只要坚持使用jQuery的事件绑定方法,就无需为这种特定的常见原因导致的内存泄
漏而担心。
但是,这并不意味着我们完全脱离了险境。当对DOM元素进行其他操作时,仍然要处处留心。只要是将JavaScript对象指定给DOM元素,就可能在旧版本IE中导致内存泄漏。jQuery只是有助于减少发生这种情况的可能性。
有鉴于此,jQuery为我们提供了另一个避免这种泄漏的工具。用.data()方法,将信息附加到DOM元素。由于这里的数据并非直接保存在扩展属性中(jQuery使用一个内部对象并通过它创建的ID来保存这里所说的数
据),因此永远也不会构成引用循环,从而有效回避了内存泄漏问题。
下面附上 jQuery 源码的相关说法:
[codes=c#]
// We have to handle DOM nodes and JS objects differently because IE6-7
// can't GC object references properly across the DOM-JS boundary
// Only DOM nodes need the global jQuery cache; JS object data is
// attached directly to the object so GC can occur automatically
[/codes]
JavaScript是一种高级语言,它一般是通过后台来维护这种计数系统。
当JavaScript代码生成一个新的内存驻留项时(比如一个对象或函数),系统就会为这个项留出一块内存空间。因为这个对象可能会被传递给很多函数,并且会被指定给很多变量,所以很多代码都会指向这个对象的内存空间。JavaScript会跟踪这些指针,当最后一个指针废弃不用时,这个对象占用的内存会被释放。
A ---------> B ------------> C
例如对象A有一个属性指向B,而B也有一个属性指向C。即使当前作用域中只有对象A有效,但由于指针的关系所有3个对象都必须保留在内存中。当离开A的当前作用域时(例如代码执行到声明A的函数的末尾处),垃圾收集器就可以释放A占用的内存。此时,由于没有什么指向B,因此B可以释放,最后,C也可以释放。
然而,当对象间的引用关系变得复杂时,处理起来也会更加困难。
A ---------> B ------------> C
^、_ _ _ _ _ _ _|
这里,我们又为对象C添加了一个引用B的属性。在这种情况下,当A释放时,仍然有来自C的指针指向B。这种引用循环需要由JavaScript进行特殊的处理,但必须考虑到整个循环与作用域中的其他变量已经处于隔离状态。
从这里我们可以看到,闭包问题的本质是作用域的问题,我平时写的闭包大多出现在:
循环引用
闭包可能会导致在不经意间创建循环引用。因为函数是必须保存在内存中的对象,所以位于函数执行上下文中的所有变量也需要保存在内存中:
[codes=c#]
function outerFn() {
var outerVar = {};
function innerFn() {
console.log(outerVar);
}
outerVar.fn = innerFn;
return innerFn;
};
[codes]
这里创建了一个名为 outerVar 的对象,该对象在内部函数innerFn()中被引用。然后,为 outerVar 创建了一个指向 innerFn()的属性,之后返回了innerFn()。这样就在 innerFn() 上创建了一个引用outerVar的闭包,而outerVar又引用了innerFn()。
这会导致变量在内存中存在的时间比想象得长,而且又不容易被发现。这还不算完,还有可能会出现比这种情况更隐蔽的引用循环:
[codes=c#]
function outerFn() {
var outerVar = {};
function innerFn() {
console.log('hello');
}
outerVar.fn = innerFn;
return innerFn;
};
[/codes]
这里我们修改了innerFn(),不再招惹 outerVar。但是,这样做仍然没有断开循环引用。
即使innerFn()不再勾引 outerVar,outerVar 也仍然位于innerFn()的封闭环境中。由于闭包的原因,位于 outerFn()中的所有变量都隐含地被 innerFn()所引用。我们再想一想,在 java 中的内部类不也是类似当前情况吗,内部类能够‘看’外部的 this。此时此刻,正如彼时彼刻,竟如此相像。因此,闭包会使意外地创建这些引用循环变得易如反掌。
DOM与JavaScript的循环
虽然我很早就知道闭包,也在调试内存问题时在 chrome F12 里的 profile 是里看到 closure reference,但是并不清除这个问题的根源。因为上述情况通常不是什么问题,JavaScript能够检测到这些情况并在它们孤立时将其清除。
最近看到关于这个问题的解释:在旧版本IE中存在一种难以处理的循环引用问题。
当一个循环中同时包含DOM元素和常规JavaScript对象时,IE无法释放任何一个对象——因为这两类对象是由不同的内存管理程序负责管理的。
除非关闭浏览器,否则这种循环在IE中永远得不到释放。为此,随着时间的推移,这可能会导致大量内存被无效地占用。
导致这种循环的一个常见原因是简单的事件处理:
[codes=c#]
$(document).ready(function() {
var button = document.getElementById('button-1');
button.onclick = function() {
console.log('hello');
return false;
};
});
[/codes]
当指定单击事件处理程序时,就创建了一个在其封闭的环境中包含button变量的闭包。而且,现在的button也包含一个指向闭包(onclick属性自身)的引用。这样,就导致了在IE中即使离开当前页面也不会释放这个循环。
为了释放内存,就需要断开循环引用,例如关闭窗口,删除onclick属性。另外,也可以像下面这样重写代码来
避免这种闭包:
[codes=c#]
function hello() {
console.log('hello');
return false;
}
$(document).ready(function() {
var button = document.getElementById('button-1');
button.onclick = hello;
});
[/codes]
因为hello()函数不再包含 button,引用就成了单向的(从button到hello),不存的循环,所以就不会造成内存泄漏了。
用jQuery化解引用循环
下面,我们通过常规的jQuery结构来编写同样的代码:
[codes=c#]
$(document).ready(function() {
var $button = $('#button-1');
$button.click(function(event) {
event.preventDefault();
console.log('hello');
});
});
[/codes]
即使此时仍然会创建一个闭包,并且也会导致同前面一样的循环,但这里的代码却不会使 IE 发生内存泄漏。由于jQuery考虑到了内存泄漏的潜在危害,所以它会手动释放自己指定的所有事件处理程序。只要坚持使用jQuery的事件绑定方法,就无需为这种特定的常见原因导致的内存泄
漏而担心。
但是,这并不意味着我们完全脱离了险境。当对DOM元素进行其他操作时,仍然要处处留心。只要是将JavaScript对象指定给DOM元素,就可能在旧版本IE中导致内存泄漏。jQuery只是有助于减少发生这种情况的可能性。
有鉴于此,jQuery为我们提供了另一个避免这种泄漏的工具。用.data()方法,将信息附加到DOM元素。由于这里的数据并非直接保存在扩展属性中(jQuery使用一个内部对象并通过它创建的ID来保存这里所说的数
据),因此永远也不会构成引用循环,从而有效回避了内存泄漏问题。
下面附上 jQuery 源码的相关说法:
[codes=c#]
// We have to handle DOM nodes and JS objects differently because IE6-7
// can't GC object references properly across the DOM-JS boundary
// Only DOM nodes need the global jQuery cache; JS object data is
// attached directly to the object so GC can occur automatically
[/codes]
8月6
情景【Situation】:
编写通用的输入组件时,子组件要绑定到父组件的某个变量上dataA,当父组件要拿到自组件的值时不能通过this.$children.xxx取值然后付给dataA,
而是父组件可以直接this.dataA就可以取到当前子组件最新值。
任务【Task】:
实现在父组件直接this.dataA就可以取到当前子组件最新值。
行动【Action】:
首先要了解v-model这个指令,许多认真阅读过完整vue文档的同学可能已经知道了关于v-model。
v-model官方给出的说发是:这其实是一个简写的形式,v-model实际执行的是下面的绑定:
[codes=c#][/codes]
v-model是动态绑定值到value,然后监听input的inpit事件获取值后赋给dataA的一个过程。
在说一下input的value属性,在组件内部要定义一个value的props属性,以便能够动态绑定上父组件传过来的值;
组件内部还要做一件事情:
动态计算(获取和设置)currentValue的值,用到了vue的对象的get和set函数;
讲到这里,我们就可以解决上面的问题了;
首先定义一个通用输入组件:
[codes=c#]
Vue.component('my-component',{
template:'',
data:function(){
return {
// 双向绑定值-必须
currentValue:this.value
}
},
props:['value'],// 设置value为props属性-必须
computed:{
currentValue: {
// 动态计算currentValue的值
get:function() {
return this.value;
},
set:function(val) {
this.$emit('input', val);
}
}
}
})
[/codes]
在Html里绑定到vue实例的一个字段上;
[codes=c#]
[/codes]
实例里写一个方法
打印一下我们绑定的值;
[codes=c#]
var demo_01 = new Vue({
el:'#demo_01',
data:{
postData:{
name:'李雷',
age:'80',
describ:'这是一个传奇的人物'
}
},
methods:{
showValue:function(){
console.log(this.postData)
}
}
});
[/codes]
是不是以后就不用繁琐冗长的this.$children.xxx取值方式了?
结果【Result】:
提供了有效的解决了关于输入类组件取值方案,并且已经部署实施。
总结:v-model是value和oninput事件的结合,可以动态地对value进行改变,就是如果value被改变了,可以很快地反映到对应的组件当中,改变该组件的value
编写通用的输入组件时,子组件要绑定到父组件的某个变量上dataA,当父组件要拿到自组件的值时不能通过this.$children.xxx取值然后付给dataA,
而是父组件可以直接this.dataA就可以取到当前子组件最新值。
任务【Task】:
实现在父组件直接this.dataA就可以取到当前子组件最新值。
行动【Action】:
首先要了解v-model这个指令,许多认真阅读过完整vue文档的同学可能已经知道了关于v-model。
v-model官方给出的说发是:这其实是一个简写的形式,v-model实际执行的是下面的绑定:
[codes=c#][/codes]
v-model是动态绑定值到value,然后监听input的inpit事件获取值后赋给dataA的一个过程。
在说一下input的value属性,在组件内部要定义一个value的props属性,以便能够动态绑定上父组件传过来的值;
组件内部还要做一件事情:
动态计算(获取和设置)currentValue的值,用到了vue的对象的get和set函数;
讲到这里,我们就可以解决上面的问题了;
首先定义一个通用输入组件:
[codes=c#]
Vue.component('my-component',{
template:'',
data:function(){
return {
// 双向绑定值-必须
currentValue:this.value
}
},
props:['value'],// 设置value为props属性-必须
computed:{
currentValue: {
// 动态计算currentValue的值
get:function() {
return this.value;
},
set:function(val) {
this.$emit('input', val);
}
}
}
})
[/codes]
在Html里绑定到vue实例的一个字段上;
[codes=c#]
[/codes]
实例里写一个方法
打印一下我们绑定的值;
[codes=c#]
var demo_01 = new Vue({
el:'#demo_01',
data:{
postData:{
name:'李雷',
age:'80',
describ:'这是一个传奇的人物'
}
},
methods:{
showValue:function(){
console.log(this.postData)
}
}
});
[/codes]
是不是以后就不用繁琐冗长的this.$children.xxx取值方式了?
结果【Result】:
提供了有效的解决了关于输入类组件取值方案,并且已经部署实施。
总结:v-model是value和oninput事件的结合,可以动态地对value进行改变,就是如果value被改变了,可以很快地反映到对应的组件当中,改变该组件的value
7月19
首先要知道export,import ,export default是什么
ES6模块主要有两个功能:export和import
export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口
import用于在一个模块中加载另一个含有export接口的模块。
也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。这几个都是ES6的语法。
export和import(一个导出一个导入)
一个a.js文件有如下代码:
export var name="李四";
在其它文件里引用如下:
[codes=c#]
import { name } from "/.a.js" //路径根据你的实际情况填写
export default {
data () {
return { }
},
created:function(){
alert(name)//可以弹出来“李四”
}
}
[/codes]
上面的例子是导出单个变量的写法,如果是导出多个变量就应该按照下边的方法,用大括号包裹着需要导出的变量:
[codes=c#]
var name1="李四";
var name2="张三";
export { name1 ,name2 }
[/codes]
在其他文件里引用如下:
[codes=c#]
import { name1 , name2 } from "/.a.js" //路径根据你的实际情况填写
export default {
data () {
return { }
},
created:function(){
alert(name1)//可以弹出来“李四”
alert(name2)//可以弹出来“张三”
}
}
[/codes]
如果导出的是个函数呢,那应该怎么用呢,其实一样,如下
[codes=c#]
function add(x,y){
alert(x*y)
// 想一想如果这里是个返回值比如: return x-y,下边的函数怎么引用
}
export { add }
[/codes]
在其他文件里引用如下:
复制代码
import { add } from "/.a.js" //路径根据你的实际情况填写
export default {
data () {
return { }
},
created:function(){
add(4,6) //弹出来24
}
}
[/codes]
export与export default
看完上面这几个例子,想必你一定了解了如何使用export,import,如果还是不懂可以自己动手试一试。上面讲的是export和import,但是export跟export default 有什么区别呢?如下:
1、export与export default均可用于导出常量、函数、文件、模块等
2、你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用
3、在一个文件或模块中,export、import可以有多个,export default仅有一个
4、通过export方式导出,在导入时要加{ },export default则不需要
这样来说其实很多时候export与export default可以实现同样的目的,只是用法有些区别。注意第四条,通过export方式导出,在导入时要加{ },export default则不需要。使用export default命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名。
[codes=c#]
var name="李四";
export { name }
//import { name } from "/.a.js"
可以写成:
var name="李四";
export default name
//import name from "/.a.js" 这里name不需要大括号
[/codes]
再看第3条,在一个文件或模块中,export、import可以有多个,export default仅有一个,也就是说如下代码:
[codes=c#]
var name1="李四";
var name2="张三";
export { name1 ,name2 }
[/codes]
也可以写成如下,也是可以的,import跟他类似。
[codes=c#]
var name1="李四";
var name2="张三";
export name1;
export name2;
[/codes]
一个人如果不想输,就要不断学好眼前的东西,它们将来都会大有用处…
ES6模块主要有两个功能:export和import
export用于对外输出本模块(一个文件可以理解为一个模块)变量的接口
import用于在一个模块中加载另一个含有export接口的模块。
也就是说使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。这几个都是ES6的语法。
export和import(一个导出一个导入)
一个a.js文件有如下代码:
export var name="李四";
在其它文件里引用如下:
[codes=c#]
import { name } from "/.a.js" //路径根据你的实际情况填写
export default {
data () {
return { }
},
created:function(){
alert(name)//可以弹出来“李四”
}
}
[/codes]
上面的例子是导出单个变量的写法,如果是导出多个变量就应该按照下边的方法,用大括号包裹着需要导出的变量:
[codes=c#]
var name1="李四";
var name2="张三";
export { name1 ,name2 }
[/codes]
在其他文件里引用如下:
[codes=c#]
import { name1 , name2 } from "/.a.js" //路径根据你的实际情况填写
export default {
data () {
return { }
},
created:function(){
alert(name1)//可以弹出来“李四”
alert(name2)//可以弹出来“张三”
}
}
[/codes]
如果导出的是个函数呢,那应该怎么用呢,其实一样,如下
[codes=c#]
function add(x,y){
alert(x*y)
// 想一想如果这里是个返回值比如: return x-y,下边的函数怎么引用
}
export { add }
[/codes]
在其他文件里引用如下:
复制代码
import { add } from "/.a.js" //路径根据你的实际情况填写
export default {
data () {
return { }
},
created:function(){
add(4,6) //弹出来24
}
}
[/codes]
export与export default
看完上面这几个例子,想必你一定了解了如何使用export,import,如果还是不懂可以自己动手试一试。上面讲的是export和import,但是export跟export default 有什么区别呢?如下:
1、export与export default均可用于导出常量、函数、文件、模块等
2、你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用
3、在一个文件或模块中,export、import可以有多个,export default仅有一个
4、通过export方式导出,在导入时要加{ },export default则不需要
这样来说其实很多时候export与export default可以实现同样的目的,只是用法有些区别。注意第四条,通过export方式导出,在导入时要加{ },export default则不需要。使用export default命令,为模块指定默认输出,这样就不需要知道所要加载模块的变量名。
[codes=c#]
var name="李四";
export { name }
//import { name } from "/.a.js"
可以写成:
var name="李四";
export default name
//import name from "/.a.js" 这里name不需要大括号
[/codes]
再看第3条,在一个文件或模块中,export、import可以有多个,export default仅有一个,也就是说如下代码:
[codes=c#]
var name1="李四";
var name2="张三";
export { name1 ,name2 }
[/codes]
也可以写成如下,也是可以的,import跟他类似。
[codes=c#]
var name1="李四";
var name2="张三";
export name1;
export name2;
[/codes]
一个人如果不想输,就要不断学好眼前的东西,它们将来都会大有用处…
7月19
[codes=c#]
Vue的报错:Uncaught TypeError: Cannot assign to read only property 'exports' of object '#
Vue的报错:Uncaught TypeError: Cannot assign to read only property 'exports' of object '#
7月17
1、浏览器限制
2、跨域(域名,端口不一样都是跨域)
3、XHR(XMLHttpRequest请求)
同时满足三个条件才有可能产生跨域问题。
解决跨域问题方案。
1,从浏览器出发,允许浏览器跨域。
2,从XHR(XMLHttpRequest)出发
(1)避免发生跨域。使用jsonp,由于jsonp请求是通过script的方式发送的(只有xhr的请求方式才有可能产生跨域问题),所以不会产生跨域问题。Spring MVC实现过程:前台使用ajax的get请求,将dataType设为“jsonp”;服务器创建一个类并继承抽象类AbstractJsonReponseBodyAdvice,最后注解@ControllerAdivece。使用jsonp的弊端,只能使用get方式请求,服务器需要改动代码,发送的不是xhr请求。
(2)产生跨域后解决。
从被调用方考虑,有三种情况,分别是服务器实现,nginx配置和apache配置。
服务器实现需要注意两种情况,简单请求和非简单请求。简单请求是先执行请求再验证,非简单请求是先验证再请求。
简单请求(比较常见):方法为get,head,post,请求header里面没有自定义头,Content-Type的值为以下几种 text/plain,multipart/form-data,application/x-www-form-urlencoded。
非简单请求(比较常见):put,delect方法的ajax请求,发送json格式的ajax请求,带自定义头的ajax请求。
简单请求处理方案:在响应头中添加
Access-Control-Allow-Origin=“允许跨域的url”,即跨省域时,请求头Origin的值,所以一般是获取Origin的值。
Access-Control-Allow-Method=“*”,允许的方法。
非简单请求处理方案:在相应头中添加
Access-Control-Allow-Origin=“允许跨域的url”,即跨域时,可以获取请求头Origin的值。
Access-Control-Allow-Method=“*”,允许的方法
Access-Control-Request-Headers=“Content-Type,自定义的header的key”。
带cookies的跨域解决:在响应头添加
Access-Control-Allow-Credentials,="true",允许使用cookies
ngnix配置:

apache配置:没搞过
若是使用spring框架:使用@CrossOrigin注解既可以实现服务端跨域
2、跨域(域名,端口不一样都是跨域)
3、XHR(XMLHttpRequest请求)
同时满足三个条件才有可能产生跨域问题。
解决跨域问题方案。
1,从浏览器出发,允许浏览器跨域。
2,从XHR(XMLHttpRequest)出发
(1)避免发生跨域。使用jsonp,由于jsonp请求是通过script的方式发送的(只有xhr的请求方式才有可能产生跨域问题),所以不会产生跨域问题。Spring MVC实现过程:前台使用ajax的get请求,将dataType设为“jsonp”;服务器创建一个类并继承抽象类AbstractJsonReponseBodyAdvice,最后注解@ControllerAdivece。使用jsonp的弊端,只能使用get方式请求,服务器需要改动代码,发送的不是xhr请求。
(2)产生跨域后解决。
从被调用方考虑,有三种情况,分别是服务器实现,nginx配置和apache配置。
服务器实现需要注意两种情况,简单请求和非简单请求。简单请求是先执行请求再验证,非简单请求是先验证再请求。
简单请求(比较常见):方法为get,head,post,请求header里面没有自定义头,Content-Type的值为以下几种 text/plain,multipart/form-data,application/x-www-form-urlencoded。
非简单请求(比较常见):put,delect方法的ajax请求,发送json格式的ajax请求,带自定义头的ajax请求。
简单请求处理方案:在响应头中添加
Access-Control-Allow-Origin=“允许跨域的url”,即跨省域时,请求头Origin的值,所以一般是获取Origin的值。
Access-Control-Allow-Method=“*”,允许的方法。
非简单请求处理方案:在相应头中添加
Access-Control-Allow-Origin=“允许跨域的url”,即跨域时,可以获取请求头Origin的值。
Access-Control-Allow-Method=“*”,允许的方法
Access-Control-Request-Headers=“Content-Type,自定义的header的key”。
带cookies的跨域解决:在响应头添加
Access-Control-Allow-Credentials,="true",允许使用cookies
ngnix配置:
apache配置:没搞过
若是使用spring框架:使用@CrossOrigin注解既可以实现服务端跨域