VUE&Element-UI
Vue基础入门
一套构建用户界面的渐进式前端框架
jquery vs VUE
jquery操作数据时伴随着需要操作dom
Vue主要面向数据操作(JSP),面向数据编程
使用步骤
- 导包(jar、js文件)
- 编写模板结构(body中的HTML)文件
- 编写脚本
- 创建VUE对象
- el属性指定需要绑定的元素
- 编写对应的data
vue特点
整体构成=模板+数据
- 模板
- 数据来源
<!--快速入门-->
<body>
<!--视图-->
<div id="div">
{{msg}}
</div>
</body>
<script src="js/vue.js"></script>
<script>
//脚本
new Vue({
el:"#div",//选择器
data:{msg:"hello Vue"}
});
</script>
vue参数
-
el
- 指定你的模板元素位置
-
data
- 指定模板中使用的数据
-
methods:
-
可以定义方法,并且在方法中能够使用this来操作数据
-
普通对象定义形式
methods:{ study: function(){ alert(this.namejs + "正在" + this.classRoom + "好好学习!"); } }
-
简写对象定义形式
methods:{ study(){ alert(this.name + "正在" + this.classRoom + "好好学习!"); } }
-
Vue常用指令
作用:编写模板文件时使用
-
文本插值html
v-html:可解析标签,将变量内容存放到标签文本处
{{}}:直接绑定变量并将数据直接展示在符号出=处
-
属性绑定
v-bind:为标签绑定属性
-
普通形式
<a v-bind:href="url">百度一下</a>
-
简写形式
百度一下
-
-
条件渲染(条件显示指令)
- v-if
- v-else-if
- v-else
- v-show
- 使用这个指令元素依然会被加载是否展示同display属性决定
-
列表渲染(循环指令)
v-for 写在对应元素上即可遍历生成多个该元素
<li v-for="name in names">{{name}}</li>
-
事件绑定
- 普通方式v-on:事件名=“函数名”
- 简写形式@事件名=“函数名”
<button v-on:click="change()">改变div的内容</button> <button @click="change()">改变div的内容</button>
-
表单绑定
v-model:在表单元素上创建双向数据绑定,将变量和输入框进行双向数据绑定
- 更新data数据
- 更新页面数据
<input type="text" name="username" v-model="username">
Vue高级使用
自定义组件
-
组件其实就是自定义的标签,例如 就是对的封装。本质上,组件是带有一个名字且可复用的 Vue 实例,我们完全可以自己定义。
-
定义格式:
Vue.component(组件名称, {
props:组件的属性,
data: 组件的数据函数,
template: 组件解析的标签模板
})
Vue生命周期()
- 生命周期的八个阶段(生命周期方法:钩子函数):
状态 | 阶段周期 |
---|---|
beforeCreate | 创建前 |
created | 创建后(vue实列创建完成,页面还没有加载也没有解析) |
beforeMount | 载入前 |
mounted | 载入后(此时的功能是完成模板的解析) |
beforeUpdate | 更新前 |
updated | 更新后 |
beforeDestroy | 销毁前 |
destroyed | 销毁后 |
Vue异步操作
在 Vue 中发送异步请求,本质上还是 AJAX。可以使用 axios 这个插件来简化操作!
- 使用步骤
-
引入 axios 核心 js 文件。(vue\axios)
-
调用 axios 对象的方法来发起异步请求。
-
get
axios.get("testServlet?name=" + this.name) .then(resp => { alert(resp.data); }) .catch(error => { alert(error); })
-
post
axios.post("testServlet","name="+this.name) //发送请求 .then(resp => { //然后呢 alert(resp.data); }) .catch(error => { //出错了 alert(error); })
-
-
调用 axios 对象的方法来处理响应的数据。
- axios 常用方法
方法名 | 作用 |
---|---|
get(请求的资源路径与请求的参数) | 发起GET方式请求 |
post(请求的资源路径,请求的参数) | 发起POST方式请求 |
then(response) | 请求成功后的回调函数,通过response获取响应的数据 |
catch(error) | 请求失败后的回调函数,通过error获取错误信息 |
Element-UI 基本使用
简介:Element:网站快速成型工具。是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库。
- 使用 Element 前提必须要有 Vue。
- 组件:组成网页的部件,例如 超链接、按钮、图片、表格等等~
- Element 官网:https://element.eleme.cn/#/zh-CN
- 导包
- css文件导入
- 先导入vue的js文件
- 导入element-ui自己的js
- 使用
- 编写模板(vue)
- 拷贝对应需要的组件到模板中
- 初始化Vue实列
基础布局
- 概念:将页面分成最多24个部份,自由切分。
- 行
- 列
- 划分
- 每一个行一共24份
- 所有的el-col的span属性指定每一列的比例,数字之和24
容器布局
概念:将页面分成头部区域、侧边栏区域、主区域、底部区域。
表单组件
Form表单(以实体为单位传递数据)
-
- 其中的prop属性指定的是form中的rules的属性名称
- 和实体类中的属性名相同
-
- model: 指定实体对象,data中的属性
- rules: 指定校验规则, 也是data中的属性
- ruleForm:相当于id
-
rules规则信息
name1: [ // required:是否必须, message:如果不满足校验条件显示内容,trigger:什么时候触发校验 { required: true, message: '请输入活动名称123132', trigger: 'blur' }, // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' } ]
Form表单拷贝
-
标签内容可以直接完全拷贝
<el-form ref="form" :model="form" label-width="80px"> <el-form-item label="活动名称"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="活动区域"> <el-select v-model="form.region" placeholder="请选择活动区域"> <el-option label="区域一" value="shanghai"></el-option> <el-option label="区域二" value="beijing"></el-option> </el-select> </el-form-item> </el-form>
-
数据拷贝
-
自己创建vue实列
-
拷贝别人data函数中的返回值
new Vue({ el:"#div", data:{ form: { name: '', region: '', date1: '', date2: '', delivery: false, type: [], resource: '', desc: '' } } });
-
Form 表单问题
-
函数问题(箭头函数,lambda表达式一个意思)
(valid) => { if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }
-
箭头函数和普通函数一样
function(valid){ if (valid) { alert('submit!'); } else { console.log('error submit!!'); return false; } }
-
vue中的获取元素
this.$refs["student"]
-
拷贝elementui需要注意
- 拷贝data时注意只需要data函数中return语句返回的对象即可
- 方法直接拷贝methods
表格组件
- 指定表格对象data,他指定一个数组
- 当
el-table
元素中注入data
对象数组后,在el-table-column
中用prop
属性来对应对象中的键名即可填入数据,用label
属性来定义表格的列名。可以使用width
属性来定义列宽。
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
</script>
导航栏组件
导航菜单默认为垂直模式,通过mode
属性可以使导航菜单变更为水平模式。另外,在菜单中通过submenu
组件可以生成二级菜单。Menu 还提供了background-color
、text-color
和active-text-color
,分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。
-
顶部导航栏
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"> <el-menu-item index="1">处理中心</el-menu-item> <el-submenu index="2"> <template slot="title">我的工作台</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item> <el-submenu index="2-4"> <template slot="title">选项4</template> <el-menu-item index="2-4-1">选项1</el-menu-item> <el-menu-item index="2-4-2">选项2</el-menu-item> <el-menu-item index="2-4-3">选项3</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="3" disabled>消息中心</el-menu-item> <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> </el-menu> <div class="line"></div> <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-menu-item index="1">处理中心</el-menu-item> <el-submenu index="2"> <template slot="title">我的工作台</template> <el-menu-item index="2-1">选项1</el-menu-item> <el-menu-item index="2-2">选项2</el-menu-item> <el-menu-item index="2-3">选项3</el-menu-item> <el-submenu index="2-4"> <template slot="title">选项4</template> <el-menu-item index="2-4-1">选项1</el-menu-item> <el-menu-item index="2-4-2">选项2</el-menu-item> <el-menu-item index="2-4-3">选项3</el-menu-item> </el-submenu> </el-submenu> <el-menu-item index="3" disabled>消息中心</el-menu-item> <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item> </el-menu> <script> export default { data() { return { activeIndex: '1', activeIndex2: '1' }; }, methods: { handleSelect(key, keyPath) { console.log(key, keyPath); } } } </script>
-
侧边导航栏
垂直菜单,可内嵌子菜单。通过
el-menu-item-group
组件可以实现菜单进行分组,分组名可以通过title
属性直接设定,也可以通过具名 slot 来设定。
<el-row class="tac">
<el-col :span="12">
<h5>默认颜色</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</el-col>
<el-col :span="12">
<h5>自定义颜色</h5>
<el-menu
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航三</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
<script>
export default {
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>