官方网站
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
<el-input style="width: inherit;" id="searchId" value="" v-bind:minlength="3" :disabled="searchInput" @@keyup.native.enter="searchBtn">
<el-select v-model="searchSelect" slot="prepend" placeholder="请选择" @@change="searchChange">
<el-option label="集装箱号" value="container"></el-option>
<el-option label="报关单号" value="entry"></el-option>
<el-option label="查验单号" value="examin"></el-option>
<!-- <el-option label="关员工号" value="officer"></el-option> -->
</el-select>
<el-button @@click="searchBtn" slot="append" icon="el-icon-search"></el-button>
</el-input>
3、基于第2条的代码,让下拉框默认选择集装箱号的方法就是直接赋予searchSelect一个container值
//搜索下拉框类型
searchSelect: "container",
4、v-for 使用索引index
<template v-for="(plat,index) in platDatas.examFields" v-cloak>
</template>
5、elementUI 组件中的属性值如果是布尔类型，可以直接绑定字符串true | false
<!-- 注意：不能直接写 enterable="false" --默认当作字符串来处理 -->
<el-tooltip class="item" effect="dark" placement="top" :enterable="false"></el-tooltip>
6、动态选择class
<i :class="data.id === selectedExamSiteId ? 'fa fa-check-square fa-3x highlight':'fa fa-check-square fa-3x'" style="color: #00a65a" aria-hidden="true" v-else-if="data.statusCode=='examing'"></i>
注意书写格式，非绑定的值用单引号括起来
7、动态设置style
item.thumbnail是动态的
<div :style="'background-image:url('+ item.thumbnail + ');width:178px; height:100px; background-size: cover;text-align:center;vertical-align:central;'">
<i class="fa fa-play-circle-o fa-3x " style="margin-top: 28px;" aria-hidden="true"></i>
</div>
8、过滤器
Vue 2.x 中，过滤器只能用在 mustache 绑定和 v-bind 表达式。
<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>
项目实例：
{{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版本的时候，<template></template> 标签中的范围属性使用的是scope,升级为2.x后变成了slot-scope
现在elementUI的官方示例已全部使用slot-scope。
10、 使用el-dialog时建议加上属性before-close，用于清理资源
<el-dialog :title="examDialogField.examFieldName" :before-close="closeDialog" :visible.sync="spDialog" v-cloak>
</el-dialog>
10、 日期时间组件，默认的格式可能不是我们想要的，所以我们需要指定一个value-format属性
<el-date-picker type="datetime" placeholder="选择开始日期" v-model="complexSearchObj.from" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
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();
}
}
},
