2. 技术
    3. Vue&ElementUI基础

    Vue&ElementUI基础

    技术2025-10-01  9

    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-ifv-else-ifv-elsev-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>
    Processed: 0.012, SQL: 9