智慧查验Vue、elementUI使用总结

官方网站

Vuejs: https://cn.vuejs.org/v2/guide/installation.html
elementUI: http://element-cn.eleme.io/#/zh-CN/component/installation

全局引入

SEVS.Web/App_Start/BundleConfig.cs

SEVS.Web/Views/Shared/_Layout.cshtml

结合cshtml使用的经验

1、绑定事件: @click 要写成@@click --原因是@符号在cshtml中是个特殊值

2、按键修饰符: 官方文档是这样用的 @keyup.enter (enter键释放时触发事件),但是结合elementUI使用需要加一个关键词native.所以应该这样写 @keyup.native.enter

3、基于第2条的代码,让下拉框默认选择集装箱号的方法就是直接赋予searchSelect一个container值

//搜索下拉框类型
searchSelect: "container",

4、v-for 使用索引index

5、elementUI 组件中的属性值如果是布尔类型，可以直接绑定字符串true | false

6、动态选择class

注意书写格式，非绑定的值用单引号括起来

7、动态设置style

item.thumbnail是动态的

8、过滤器

Vue 2.x 中，过滤器只能用在 mustache 绑定和 v-bind 表达式。

{{ message | capitalize }}

项目实例：

{{snippet.startTime | S}}


//S 定义在SEVS.Web/js/main.js
Vue.filter("F",
    function (value, formatString) {
        formatString = formatString || 'LL HH:mm:ss';
        return moment(value).format(formatString);
    });

Vue.filter("S",
    function (value, formatString) {
        formatString = formatString || 'LL';
        return moment(value).format(formatString);
    });



Vue.filter("T",
    function (value, formatString) {
        formatString = formatString || 'HH:mm:ss';
        return moment(value).format(formatString);
    });

Vue.filter("TS",
    function (value, formatString) {
        formatString = formatString || 'HH:mm';
        return moment(value).format(formatString);
    });

9、 element、vue 1.x版本的时候， 标签中的范围属性使用的是scope,升级为2.x后变成了slot-scope
现在elementUI的官方示例已全部使用slot-scope。

10、 使用el-dialog时建议加上属性before-close，用于清理资源

10、 日期时间组件，默认的格式可能不是我们想要的，所以我们需要指定一个value-format属性

11、 watch使用实践：

//检测浏览器窗口的变化
screenWidth:document.body.clientWidth,


watch:{
    screenWidth:function(val){
        //限制频繁触发
        if (!this.timer) {
            this.timer = true;
            var that = this;
            setTimeout(function(){
                that.timer = false;
            },1000);

            //业务处理
            playBtnCenter();
        }
    }
},