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>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
