1、.vue文件
代码没有发现问题,老是发现以下的错误位置
23 | isvisible:false,
24 | },
> 25 | methods:{
| ^
26 | click(){
27 | this.isvisible=true
28 | },
源代码:
export default {
name: 'droplist',
data(){
return {
isvisible:false,
},
methods:{
click(){
this.isvisible=true
}
}
最后发现调换data与methods可以解决
2、vue-router 路由问题
Uncaught TypeError: Cannot read property ‘matched’ of undefined
是router,别乱起名字
import router from './router'
new Vue({
el: '#app',
router,
template: '<App></App>',
components: {
App
},
})
最后记得加<router-view></router-view>
不然就缺了一部分
3、引入scss文件错误
Cannot find module ‘node-sass’
发现这个错误要安装其他东西不仅仅需要node-sass,下面的有需要的都装
cnpm install --save css-loader
cnpm install --save style-loader
cnpm install –-save sass-loader
cnpm install –-save node-sass
安装完毕可以在package.json查看
"dependencies": {
"css-loader": "^0.28.4",
"extract-text-webpack-plugin": "^2.1.2",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"vue": "^2.3.3",
"vue-router": "^2.3.1"
}
4、组件数据删除问题
父组件有一个list数组传递给子组件,一个删除数组的方法
list:[
{‘code’:’001’,’name’:’张三’},
{‘code’:’002’,’name’:’李四’},
{‘code’:’003’,’name’:’王五’},
{‘code’:’004’,’name’:’牛逼’}
]
父删除方法
pdel:function(index){
this.list.splice(index,1);
}
<ul>
<li is="mycom" v-for='(item,index) in list' :itemval="item" @childemit="pdel(index)"></li>
</ul>
<template>
<li>
<a>{{itemval.name}}</a>
<span class="close" @click="cddel">×</span>
</li>
</template>
<script>
export default {
name: 'mycom',
props:['itemval'],
template:htmlstr,
methods:{
cddel:function(){
this.$emit('childemit');
}
},
data:function(){
return {
myli:this.itemval,
}
}
}
</script>
如果使用的是子组件的myli,当成功删除数组时,数组数据能被正确删除,但是页面渲染数据错误了,显示的是删除最后一条记录,所以这里用itemval.name 解决问题
5、引入jQuery、boostrap、icheck、datetimepicker
引入jQuery
安装vue-cli脚手架,可以在webpack中全局引入jquery,cnpm install --save jquery
,听说安装后可以改jquery版本,试着在package.json文件找到jquery,本来想改1.11.3,vue也不支持IE8,所以还是不改了。
在webpack.base.conf.js中加入一行代码
var webpack=require("webpack")
在webpack.base.conf.js中module.exports的最后加入这行代码,
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery"
})
]
在main.js中引入,加入下面这行代码
import $ from 'jquery'
重新跑一边就好,cnpm run dev
引入boostrap
安装boostrap , cnpm install --save boostrap
import bootstrap from 'bootstrap'
boostrap就可以有效果了
引入icheck或datetimepicker
尝试过webpack.base.conf.js中的module.exports增加代码,如下:
'iCheck':path.resolve(__dirname, '../../static/js/icheck.min.js')
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery",
iCheck: "iCheck",
})
]
main.js 导入
import iCheck from 'iCheck'
或者是直接
import '../xxx/icheck.min.js'
都能成功引入,但是这两个控件都是要初始化,不然会报错。也尝试过在js文件加入以下初始化代码,或者是created,mounted 都是不行
window.onload=function(){
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue', // 注意square和blue的对应关系,用于type=checkbox
radioClass: 'iradio_square-blue', // 用于type=radio
increaseArea: '20%' // 增大可以点击的区域
});
}
没办法了,最后解决是直接在html页面上引入即可。