vue

vue.js 使用jsx语法

在项目目录下安装

npm install babel-plugin-syntax-jsx
npm install babel-plugin-transform-vue-jsx
npm install babel-helper-vue-jsx-merge-props
npm install babel-preset-es2015

执行后，项目目录下会生成一个

.babelrc

文件,修改文件，如果有其他的内容要合并

{
"presets": ["es2015"],
"plugins": ["transform-vue-jsx"]
}

参考：https://github.com/vuejs/babel-plugin-transform-vue-jsx#usage

vue在jsx语法中定义的事件，阻止冒泡

使用了element的属性结构，在后面添加了“修改”“删除”功能，点击这两个按钮时，阻止冒泡，禁止父元素展开和折叠

<div class="form-box">
<el-tree :data="data" :props="defaultProps"  node-key="id"  :render-content="renderContent" ></el-tree>
</div>

renderContent(h, { node, data, store }) {

return (
<span >

<span >
<span>{node.label}</span>
</span>
<span style="margin-left:200px;">
<el-button size="small" icon="edit" class="warning-btn"  on-click={ ()=>this.handleNodeClick(store,data)}>修改</el-button>
<el-button size="small" icon="delete" class="danger-btn" on-click={ ()=>this.remove(store,data)}>删除</el-button>
</span>
</span>
);
},

handleNodeClick(store,data) {
event.cancelBubble = true;
},

vue表单

select

<el-select v-model="form.role" placeholder="请选择">
<el-option v-for="item in roles"
:key="item.id"
:label="item.roleName"
:value="item.id"></el-option>

</el-select>

注意： 如果key和value属性前面没有加‘：’,则item.id都为最后一个元素的id

密码验证

data: function(){
var validatePass = (rule, value, callback) => {
if (value === '')
{
callback(new Error('请输入密码'));
}
else
{
if( !/^[a-zA-Z]\w{5,17}$/g.exec(value) )
{
callback(new Error('密码必须以字母开头，长度在6~18之间，只能包含字母、数字和下划线'));
}else{
callback();
}
}
};
return {
form: {
name: '',
pass: ''
},
rules: {
name: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
],
pass: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 3, message: '长度至少6个字符', trigger: 'blur' },
{ validator: validatePass, trigger: 'blur' }
]
}
}
},

日期格式化

// 格式化日期
formatDate( _now ) {
var now = new Date(_now);
var year = now.getFullYear();
var month = (now.getMonth()+1)>9 ? (now.getMonth()+1) : "0"+(now.getMonth()+1);
var date = now.getDate()>9 ? now.getDate() : "0"+now.getDate();

var hour = now.getHours()>9 ? now.getHours() : "0"+now.getHours();
var minute = now.getMinutes()>9 ? now.getMinutes() : "0"+now.getMinutes();
var second = now.getSeconds()>9 ? now.getSeconds() : "0"+now.getSeconds();

return year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
},
formatter1(row, column) {

row.createTime = this.formatDate(row.createTime);
return row.createTime;
},
formatter2(row, column) {

row.lastLoginTime = this.formatDate(row.lastLoginTime);
return row.lastLoginTime;
},
filterTag(value, row) {
return row.tag === value;
},

使用 moment 格式化时间

import moment from 'moment';
<div  class="col-item">{{ dateFormat(item.regTime) }}</div>

methods里面
//时间格式化
dateFormat:function(date) {
if (date == undefined || !date) {
return "";
}
return this.$moment(date).format("YYYY-MM-DD");
},

tree树节点,添加修改和删除

##html

<el-tree :data="data" :props="defaultProps"  node-key="id" ref="tree" :render-content="renderContent"></el-tree>

export default {
data() {
return {
data: [],
defaultProps: {
children: 'subs',
label: 'title',
}
};
},
created(){
this.getData();
},
methods: {
getData(){},
renderContent(h, { node, data, store }) {
return (
<span >

<span >
<span>{node.label}</span>
</span>
<span style="margin-left:200px;">
<el-button size="small" icon="edit" class="warning-btn"  on-click={ ()=>this.handleNodeClick(store,data)}>修改</el-button>
</span>
</span>
);
},
}
};

使用拦截器，拦截返回的状态码不在200和300之间的结果

import axios from 'axios';
// http response 拦截器
axios.interceptors.response.use(
response => {
return response;
},
error => {
return Promise.reject(error.response.data)   // 返回接口返回的错误信息
});

//post请求封装
Vue.prototype.$mPost = function(paramObj,okCallback,errorCallback = null,catchCallback=null){
var data = JSON.parse(localStorage.getItem('data'));
this.$axios.post(this.$global.API_URL,{
"param":paramObj.param
},{
headers:{'stoken':data.stoken,'sid':data.sid}
}).then((res) => {
if(res.data.code == 200 || res.data.result == 200){
//状态码为200
okCallback ? okCallback.call(null, res) : function(){}
}else{
//状态码>200,小于300
errorCallback ? errorCallback.call(null,res) : this.$router.push('/login');
}

}).catch((ret)=>{
//状态码不在200和300之间的情况
catchCallback ? catchCallback.call(null, ret) : function(){}
});
}

在vue中引入外部插件（生成二维码插件为例）

mounted: function () {
//钩子函数，等于vue1.0中的ready
this.$nextTick(function () {
require ('./../../../static/js/jquery.min.js');
require ('../../../static/js/jquery.qrcode.min.js');
this.qrcode();//调用二维码生成函数
})
},
methods: {
qrcode () {
$("#code").qrcode({
text: this.codeUrl,
width:130,
height:130
});
}
}

@command 将多个时间绑定到同一个函数中，通过command区分每个事件

<el-dropdown trigger="click" @command="handleCommand">
<span class="el-dropdown-link">
莉莉安
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="loginout">退出</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
methods:{
handleCommand(command) {
if(command == 'loginout'){
this.$router.push('/login');
}
}
}