Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,因为其组件化的框架,还便于与第三方库或既有项目整合。
另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
一个.vue文件主要分成三个层:template+script+style,在我的理解上,这其实是将html+js+css整合成一个组件,方便组件化,自底向上逐层设计。下面介绍几个项目开发中比较常用到的点:
v-model是将view视图和持有的viewmodel数据给绑定起来的核心。参考样例:
<el-input class='login-input' v-model="loginForm.username" placeholder="用户名" autocomplete="off">el-input>
data() {
//...
return {
loginForm: {
username: '',
password: ''
},
//...
};
}
比如这里就是将data数据中loginForm字典中username的值与view视图中的一个输入框显示内容双向绑定。无论是data端修改数据还是输入框在浏览器中修改输入,都会导致loginForm.username值的改变。
比如项目中要展示评论队列信息,我们可以不用一个个手动添加控件,我们使用一个v-for循环构造,示例:
<el-select v-model="userInfoForm.major" slot="prepend" placeholder="学院">
<el-option v-for="major in majorList" :key="major" :label="major" :value="major">el-option>
el-select>
例如实现下图这样一个选择框:
我们需要多个选择项,我们不可能连续手写十多个控件,因此我们创建一个majorList数组来描述所有学院,然后使用v-for来循环构造空间,简介代码块。
v-on:click用来实现控件delegate代理,例如这里执行的按钮回调:
<el-button v-on:click='finishButtonClick'> {{ buttonText }} el-button>
在script的methods段内写上finishButtonClick的回调函数:
methods: {
finishButtonClick() {
console.log('finish button click');
}
}
beforeMount主要用于渲染vue视图界面载入前,完成data和el数据的初始化:
beforeMount() {
const task_id = this.$route.query.task_id;
const Loading = this.$loading({
lock: true,
text: '正在从数据库获取数据中',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
getTaskExtra(task_id).then(response => {
const status = response.status;
const data = response.data;
if (status === 200) {
const extra = data.data;
this.itemText = [
extra.courier_number,
extra.delivery_locker,
extra.pick_up_code,
extra.private_info
];
Loading.close();
} else {
throw data.error;
}
}).catch(err => {
Loading.close();
this.$message.error('获取信息失败:' + err);
});
}
文档参考:el-button属性及方法介绍
我们盈小钱项目统一规划样式为半圆角按钮,我们可以修改按钮的占位字符,按钮宽高,按钮圆角,按钮的类型属性等,对于方法方便,主要还是调用按钮的点击处理。
项目统一规划,对于输入框,登陆注册界面的登录框为半圆角,其余模块界面为方块带corners,关于输入框,我们可以修改输入框的模式(密码模式等)、输入框宽高、圆角、输入框文字属性、输入框占位字符串。
可以使用el-menu优雅地进行路由跳转导航:
<el-menu
default-active="2"
class="el-menu-vertical-demo">
<el-menu-item index="1" class="nav-menu-item">
<i class="el-icon-setting">i>
<span slot="title">设置span>
el-menu-item>
<el-menu-item index="2">
<i class="el-icon-menu">i>
<router-link to="/mainpage/setting/info">个人资料router-link>
el-menu-item>
<el-menu-item index="3">
<i class="el-icon-document">i>
<router-link to="/mainpage/setting/privacy">隐私router-link>
el-menu-item>
el-menu>
参考:
js常用正则表达式大全–如:数字,字符等
正则表达式使用示例:
// 8位数字的正则判断
var reg='^[0-9]{8}$';
var pattern = new RegExp(reg);
if(!pattern.test(this.userInfoForm.student_id)) {
this.$message.error("请输入正确的8位数字中大学号哦?");
return;
}
其余使用到的正则表达式:
// 手机号码判定
var reg = '^1[3-9][0-9]{9}$';
// 邮箱判定
var reg = '^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$';
// 6-18位由字母+数字+下划线组成的密码判定
var reg = '^([a-zA-Z0-9]|_){6,18}$';