Vue初学者使用篇

前言

最近使用Vue开发项目，感觉比以前直接使用H5开发容易一些，内部的组件化思想感觉还是比较好的。

常见使用问题

需要在页面加载完成后处理事情

在如下mounted方法中添加处理，即和jquery中的$(document).ready(function(){})时机一致。

export default {
    name:'test',
    data() {
        return {
            
        }
    },
    mounted() {
        // 此处添加处理
    }
}

图片引用

问题：发现本地引用图片没有问题，发布到服务器上，无法显示。 解决方法：

第一步：将图片放到assets目录下。引用方法仍然是相对路径引用;

第二步：检查config/index.js文件中assetsPublicPath路径是否正确，正确的路径如下:

日期时间组件

在vue中需要使用日期时间时，直接使用现有的组件即可。引用方法：

第一步：在根目录安装vue-datepicker npm install vue-datepicker --save,由于此包中引用了moment组件，再安装moment npm install moment --save。

第二步：在需要使用日期组件的页面导入Datepicker

import Datepicker from 'vue-datepicker/vue-datepicker-es6.vue'

第三步：在script中对日期组件进行进行个性化设置

export default {
 components: {
     'date-picker': Datepicker
   },
  data () {
    return {
        startTime: {
            time: ''
        },
        endTime: {
            time: ''
        },
        option: {
            type: 'day',
            week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            month: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            format: 'YYYY-MM-DD HH:mm',
            placeholder: '请输入日期',
            inputStyle: {
                'display': 'inline-block',
                'padding': '4px',
                'line-height': '17px',
                'font-size': '14px',
                'width': '190px',
                'border': '1px solid #ddd',
                // 'box-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.2)',
                'border-radius': '5px',
                'color': '#5F5F5F'
            },
            color: {
                header: '#ccc',
                headerText: '#f00'
            },
            buttons: {
                ok: '确定',
                cancel: '取消'
            },
            overlayOpacity: 0.5, // 0.5 as default
            dismissible: true // as true as default
        },
        timeoption: {
            type: 'min',
            week: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                    month: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    format: 'YYYY-MM-DD HH:mm'
            },
            multiOption: {
                type: 'multi-day',
                week: ['周一', '周二', '周三', '周四', '周五', '周六',         '周日'],
                month: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    format: 'YYYY-MM-DD HH:mm'
                },
                limit: [{
                    type: Array,
                    default:function _default(){
                    return [];
                }
            }]
        }
    }
}

第四步：组件引入

<date-picker :date="startTime" :option="option" :limit="limit" id="startTime"></date-picker>