1.vue中scss的安装
cnpm i node-sass@4.14.1 -D
cnpm i sass-loader@7.3.1 -D
在webpack.base.conf.js中的module的rules
加上
{
test: /\.scss$/,
loader: 'sass-loader!style-loader!css-loader',
},
2.如果echarts运行的时候由于v-if的切换造成重新渲染,
<div v-if="change === 1">
<div class="monitor panel monitor1" ref="monitor"></div>
</div>
<div v-if="change === 2">
<div class="monitor panel monitor1" ref="monitor2"></div>
</div>
然后报错 Cannot read property 'getAttribute' of undefined"
那么除了放到nextTick中之外 其实只要再做个判断,没获取到dom的时候不执行就可以了
if (this.$refs.monitor2) {
var myechart = this.$echarts.init(this.$refs.monitor2)
} else {
return false
}
3.react中有个state，需要创建组件得时候挂在在实例身上，有两种写法，在constructor中写this.state={} 或者是类里直接写state={}
其实目标只是把state挂在到实例身上，但是却有多种写法，多种实现方法，所以有时候你会发现就像数学题一样，解题方法很多，你要根据实际情况来判别
4.react为什么不做双向数据绑定呢,为什么只能单向数据流呢
https://www.zhihu.com/question/300849926 这文章总结一点就是为了维护的时候比较清晰,
为什么不推荐子组件里改父组件传的数据,
因为这个值可能传给了多个子组件,你其中一个子组件一改传的值,父组件的传的值也改了,但是这个值,父组件就这个一份,你一改,其他组件也变了,可能它们本来不需要变.....
一般情况下,只是需要父组件传的值到子组件中做一个展示,或者参与子组件其他值的运算得到别的值,而不需要把父组件这个值给改动,如果这个值总是要根据这个子组件改,你就得考虑这个值是不是该放在子组件中了或者多个地方又改又用,就用vuex
vue与react比较
不同之处
vue
一.vue是双向数据流,
体现在这几个地方,1.父传子,子直接改父,虽然报错,但是也能改,如果传的是对象,子组件改对象属性,甚至不会报错, 其实也许这里不能叫双向数据流,因为可能是这样的,父组件那一份data直接传到子组件,而不是copy一份改子组件,所以子组件改动,改的就是父组件的那个值
2.v-model,可以双向绑定,相当于帮你做了change,input啥的然后赋值给data里那个和v-model绑定的值,这个都是vue内部帮你做的,
react
二.react是单向数据流
体现在这几个地方,1.父传子,子直接改父,报错,且不会被改动
2.没有类似v-model的东西,只能通过change input啥的获取到动态的值,再赋值给state,感觉有点像之前在用dom写,每一步细节都自己来
相同之处
1.父传子,子改父,官方都推荐使用传父组件的一个函数进去,其实感觉就是回调,然后再子组件里执行,拿到值,父组件这个函数改父组件的state或者data
其他暂时没想到
5.moment.js时间操作后24小时制变成了12小时制
HH:mm:ss 24小时 hh:mm:ss12小时
https://blog.csdn.net/qq_17229141/article/details/110072694看这篇博客
6.vue国际化??https://q.cnblogs.com/q/108194/
:label="$t('createJsScript.paramRemark')" 原来这中$t()写法是国际化??
7.遇到个问题
一直以为是在请求里写数据操作，会阻塞导致不执行，原来是我代码写错了。。。。
rse.check为null，但是我没把这个判断加到if里，结果也没报错，找了半天
self.getApiTempStep(data.row.id, res => {
console.log('res', res)
if (res.check&&res.check.responseHeader && res.check.responeBody) {
self.apiEditCheck = Object.assign({}, res.check)
}
self.isApiEditShow = true
console.log(' self.isApiEditShow', self.isApiEditShow)
})
不过我之前确实也遇到过阻塞执行的，就是最早https://blog.csdn.net/qq_41430522/article/details/113342798这篇
这个问题哪里涉及到过这个问题，在请求里写数组操作，阻塞后面代码执行了，不知道咋回事，后来写在computed里面就好了。。。看来是没更新
8.关于对象拷贝
平时用的是Object.assign({})
但是实际上，这个贼坑，引用地址没分开
所以还是得正规点用深拷贝
自己写，或者用lodash的
看看这篇https://blog.csdn.net/tianxintiandisheng/article/details/106899369
9.关于对象.和[]
let a = 'hh'
let obj = {}
obj.a = 1 => {a:1}
obj['a'] =1 => {a:1}
obj[a]=1 => {hh:1}
给对象赋值的时候,如果使用[]方式,并且其中放的是变量而不是字符串,那么就会去读取这个变量的值,作为这个对象的key
10.vue组件生命周期调用顺序
组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。
组件的销毁操作是先父后子，销毁完成的顺序是先子后父。
11.关于vue的数据劫持响应一点东西,持续更新
data通过observer进行代理或者是拦截,获得getter和setter的能力,并且data中它们每一个属性都会有相应的Dep依赖,作为发布者
每个Dep发布者都有很多watcher观察者进行监视
当data中的属性改变时,通知给Dep,Dep再通知给watcher,watcher就从对应的data中拿到值后渲染到页面上
observer拦截代码data以及页面渲染数据更新数据都用到了defineproperty,都要拦截,而渲染是拦截之后触发相应的事件,修改页面上的值
举例子
data {
text:'111',
list:'2222'
}
text有对应的依赖dep,dep依赖有两个watcher或者说存着两个watcher,分别监视h1和input
text有对应的依赖dep,dep依赖有一个watcher或者说存着一个watcher,监视input
12.如何用border-image做一些特殊的边框效果,比如大屏echart中每一块的边框
<!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>Document</title>
<style>
.box {
width: 300px;
height: 300px;
background: red;
border: 1px solid pink;
border-image: url(./123444.png) 51 38 21 132;
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
}
/* https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-image */
/* 其中border-image-slice有上右下左四个属性,可以调节图像四个方向的缩放比例 */
/* border-width是一定要设置的,height也一定要设置 */
/* 如果不明白,你审查元素调一下就知道了 */
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>13.关于v-if能否触发销毁的生命周期
组件内部自己让自己消失,不会触发,因为只能控制dom的消失,只有外部控制这个组件,才能触发这个组件的销毁生命周期
14.一个css效果,透明度1到0的时候,要渐变,0到1的时候要直接变,如何做
其实很简单,动态加transition就行了
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1_引出生命周期</title>
<style>
.a {
transition: all 2s linear;
}
</style>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script type="text/javascript" src="../react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script type="text/javascript" src="../babel.min.js"></script>
<script type="text/babel">
//创建组件
//生命周期回调函数 <=> 生命周期钩子函数 <=> 生命周期函数 <=> 生命周期钩子
class Life extends React.Component {
state = { opacity: 1, flag: true }
death = () => {
//卸载组件
// ReactDOM.unmountComponentAtNode(document.getElementById('test'))
let opacity;
let flag;
this.state.opacity == 1 ? (opacity = 0, flag = true) : (opacity = 1, flag = false);
this.setState({ opacity, flag })
}
//组件挂完毕
componentDidMount() {
console.log('componentDidMount');
// this.timer = setInterval(() => {
// //获取原状态
// let { opacity } = this.state
// //减小0.1
// opacity -= 0.1
// if (opacity <= 0) opacity = 1
// //设置新的透明度
// this.setState({ opacity })
// }, 200);
}
//组件将要卸载
componentWillUnmount() {
//清除定时器
clearInterval(this.timer)
}
//初始化渲染、状态更新之后
render() {
console.log('render');
return (
<div>
<h2 style={{ opacity: this.state.opacity, transition: this.state.flag ? 'all 2s linear' : 'all 0s linear' }}>React学不会怎么办？</h2>
<button onClick={this.death}>不活了</button>
</div>
)
}
}
//渲染组件
ReactDOM.render(<Life />, document.getElementById('test'))
</script>
</body>
</html>15.怎么理解回调函数
普通定义一个函数调用,,先声明,后调用,这就比较拘束,声明了函数了做什么就得做什么,改不了了
但是回调,是先调用,后面传入要声明的函数,自定义声明函数中要做的事 这就比较自由,可以做各种各样的事
16.vue update的使用场景
https://www.freesion.com/article/91521063028/看看这个
17.vue中这两个要记得一下别忘了
导航守卫,有全局的,路由的,组件的
vue官网多看看,https://cn.vuejs.org/v2/api/?#vm-el,还有特别多的方法属性,你没接触过
18.记得我之前有个疑问
为什么引入一个js文件,或者有时候写一段js,要用 (js)()这样的自执行函数包起来,执行一下呢
一直觉得这样是脱裤子放屁一样,多此一举
后来发现,其实是这样可以避免变量污染,
目前看来最大的作用当然是隔离作用域，因为直到ES5为止JS里都只有函数作用域，没有局部作用域。那么要隔离作用域就只能把代码用一个函数框起来了，然后用所谓立即执行函数的方式。
就比如你写个function 函数,里面定义的变量不会影响外面对吧
另一个作用就是和很多以脚本语言出身的语言一样，JS里没有入口函数的概念，在现今的模块化方案成熟稳定之前，立即执行函数也常常用来充当主函数的角色。
19.关于路由守卫next堆栈溢出的问题
看来和重写路由方法没关系啊。。。。
20.关于粘贴事件以及粘贴上传图片
https://www.jb51.net/article/80657.htm这篇博客以及我的csdn的一些收藏
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
