#npm install 报错的情况下
可以先清理缓存:npm cache clean --force
然后升级版本:npm install -g npm
重新安装: npm install -g cnpm --registry=http://registry.npm.taobao.org
一次不行可以反复几次,就可以进行npm install操作了
#命令删除node_modules
npm install rimraf -g
rimraf node_modules
npm install/cnpm install
重新安装依赖后,需要重新cnpm install --save video.js
#datav使用教程:
下载:npm install @jiaminghi/data-view / npm install --save @jiaminghi/data-view
全局引用:
import dataV from ‘@jiaminghi/data-view’
Vue.use(dataV)
按需引入:
import { borderBox1 } from ‘@jiaminghi/data-view’
Vue.use(borderBox1)
#父子组件之间的传值: https://www.cnblogs.com/vickylinj/p/10877765.html
=====父传子:父:v-bind:valuekey1=“value”
子:props:{
valuekey1:{
type:Array,
default:’’
},
valuekey2:{
type:Array,
default:’’
}
}
=====子传父:
子:this.$emit(‘methodname’,value);
父组件:< @methodname=‘fathermethod’ />
fathermethod(value) {value就是子组件传过来的值}
======兄弟组件之间:通过vuex,或者eventBus(通过on监听,emit触发的方式):
组件A: < @click=‘emitToB’ />
emitToB() {
eventBus.KaTeX parse error: Expected 'EOF', got '}' at position 26: …tFromA',要传递的值) }̲ 组件B: mounted:…on(‘eventFromA’,function(val) {
that.title = val;
})
}
}
#sync修饰符
https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6
双向数据绑定,存在维护上的问题。没有明显的数据变更来源,使用sync可以避免
子组件向父组件传值,父组件绑定响应数据,:属性名+.sync
:title.sync=“zhantitle”
#v-model / v-bind 区别
#路由跳转
this.
r
o
u
t
e
r
.
p
u
s
h
(
′
/
h
o
m
e
′
)
t
h
i
s
.
router.push('/home') this.
router.push(′/home′)this.router.push({name:‘home’})
this.$router.push({path:’/home’})
#vue中使用bootstrap,bootstrap基于jquery框架:
npm install jquery --save
npm install bootstrap --save
npm install popper.js --save
完了在main.js总引入 import ‘bootstrap’
import $ from ‘jquery’
如果cli版本低于V3 配置webpack.base.conf.js: https://segmentfault.com/a/1190000014509984
css需要手动引入:在相关的vue文件中添加如下代码
import ‘bootstrap/dist/css/bootstrap.min.css’
import ‘bootstrap/dist/js/bootstrap.min’
import ‘bootstrap/dist/js/bootstrap.min.js’
使用echarts
cnpm install echarts --save
在main.js全局引用:
import echarts from “echarts”;
Vue.prototype.$echarts = echarts;
import echarts from ‘echarts/lib/echarts’
// 引入提示框组件、标题组件、工具箱组件。
import ‘echarts/lib/component/tooltip’
import ‘echarts/lib/component/title’
import ‘echarts/lib/component/toolbox’
Vue.prototype.$echarts = echarts
使用echarts步骤:
1,给一个一定宽高的div盒子
2,echarts.init()初始化一个实例
3,setOptions({}) 将图表数据放进去
#vue项目中引入视频
cnpm install video.js
在main.js中引入:
import Video from ‘video.js’
import ‘video.js/dist/video-js.css’
Vue.prototype.$video = Video;
在组件中使用:
your browser does not support the video tag
#使用全局过滤器 / 局部过滤器 使用时通过插值表达式{{ name | 过滤器的名称 }}或者v-bind
--------全局过滤器
Vue.filter(‘publicfilter’,function(data,params) {//过滤器可以接受多个参数,可以连续调用多个过滤器,直接累加管道符和过滤器就行
var a = data.replace(/h/g,params);//替换 正则表达式,两个斜杠表示开头和结尾,g表示全局匹配
return a + ‘全局过滤器的基本使用’;
})
--------局部过滤器
filters:{//定义局部过滤器
filter1() {
},
filter2() {
}
}
#使用全部指令/私有指令 使用时加上V-
-------全局指令
Vue.directive(‘color’,{
bind:function(el) {//和样式相关的最好写在bind中;和js行为相关的最好写在inserted中【防止js行为不生效】。
el.style.color=‘red’;
},
})
-------私有指令
directives:{//自定义私有指令
‘fontweight’:{
bind:function(el,binding) {
el.style.fontWeight = binding.value;
}
},
‘fontsize’: function(el,binding){
el.style.fontsize = parseInt(binding.value) + ‘px’;
}
}
#在vue中操作数据,不提倡操作DOM,而jquery是操作DOM的,所以在vue中一般不使用jquery
#在vue中引入quasar:
cnpm install -g @quasar/cli
cnpm install 启动quasar项目:quasar dev
main.js中引入
import quasar from ‘quasar’
Vue.use(quasar)
#quasard中英文对照文档
https://blog.csdn.net/liub37/article/details/83344994?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2allfirst_rank_v2~rank_v25-1-83344994.nonecase&utm_term=vue%E5%BC%95%E5%85%A5quasar