vue学习过程遇到问题（二）

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">&times;</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页面上引入即可。