Vue与Element入门使用

Vue:

  • Vue是一套构建用户界面的渐进式前端框架。
  • 只关注视图层,并且非常容易学习,还可以很方便的与其它库或已有项目整合。
  • 通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。
  • 视图:负责页面渲染,主要由HTML+CSS构成。
  • 脚本:负责业务数据模型(Model)以及数据的处理逻辑。

特点:

  • 易用:在有HTMLCSSJavaScript的基础上,快速上手。
  • 灵活:简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。
  • 性能:20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。

Vue的快速入门:

开发步骤:

  1. 下载和引入vue.js文件。
  2. 编写入门程序。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入门</title>
</head>
<body>
<!-- 视图 -->
<div id="div"><div>姓名:{{name}}</div><div>职位:{{classRoom}}</div><button onclick="hi()">打招呼</button><button onclick="update()">修改状态</button>
</div>
</body>
<script src="vue.js"></script>
<script>// 脚本let vm = new Vue({el: "#div",data: {name: "韩信",classRoom: "王者峡谷"},methods: {study() {alert(this.name + "正在" + this.classRoom + "被追杀!");}}});//定义打招呼方法function hi() {vm.study();}//定义修改职业function update() {vm.classRoom = "中单";}
</script>
</html>

Vue快速入门详解:

Vue 核心对象:每一个 Vue 程序都是从一个 Vue 核心对象开始的。

let vm = new Vue({选项列表;
});

选项列表:

  • el选项:用于接收获取到页面中的元素。(根据常用选择器获取)。
  • data选项:用于保存当前Vue对象中的数据。在视图中声明的变量需要在此处赋值。
  • methods选项:用于定义方法。方法可以直接通过对象名调用,this代表当前Vue对象。

数据绑定:

在视图部分获取脚本部分的数据:{{变量名}}

Vue 常用指令:

  • 指令:是带有 v- 前缀的特殊属性,不同指令具有不同含义。例如 v-html,v-if,v-for。

  • 使用指令时,通常编写在标签的属性上,值可以使用 JS 的表达式。

常用指令:

在这里插入图片描述

文本插值:

  • v-html:把文本解析为 HTML 代码。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本插值</title>
</head>
<body><div id="div"><div>{{msg}}</div><div v-html="msg"></div></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{msg:"<b>Hello Vue</b>"}});
</script>
</html>

绑定属性:

v-bind:为 HTML 标签绑定属性值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>绑定属性</title><style>.my{border: 1px solid red;}</style>
</head>
<body><div id="div"><a v-bind:href="url">百度一下</a><br><a :href="url">百度一下</a><br><div :class="cls">我是div</div></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{url:"https://www.baidu.com",cls:"my"}});
</script>
</html>

条件渲染:

  • v-if:条件性的渲染某元素,判定为真时渲染,否则不渲染。

  • v-else:条件性的渲染。

  • v-else-if:条件性的渲染。

  • v-show:根据条件展示某元素,区别在于切换的是display属性的值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>条件渲染</title>
</head>
<body><div id="div"><!-- 判断num的值,对3取余  余数为0显示div1  余数为1显示div2  余数为2显示div3 --><div v-if="num % 3 == 0">div1</div><div v-else-if="num % 3 == 1">div2</div><div v-else="num % 3 == 2">div3</div><div v-show="flag">div4</div></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{num:1,flag:false}});
</script>
</html>

列表渲染:

v-for:列表渲染,遍历容器的元素或者对象的属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表渲染</title>
</head>
<body><div id="div"><ul><!--name in names  的意思就是 遍历names赋值给name--><li v-for="name in names">{{name}}</li><li v-for="value in student">{{value}}</li></ul></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{names:["张三","李四","王五"],student:{name:"张三",age:23}}});
</script>
</html>

事件绑定:

v-on:为 HTML 标签绑定事件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>事件绑定</title>
</head>
<body><div id="div"><div>{{name}}</div><button v-on:click="change()">改变div的内容</button><button v-on:dblclick="change()">改变div的内容</button><button @click="change()">改变div的内容</button></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{name:"黑马程序员"},methods:{change(){this.name = "传智播客"}}});
</script>
</html>

表单绑定:

  • 表单绑定
    v-model:在表单元素上创建双向数据绑定。

  • 双向数据绑定
    更新data数据,页面中的数据也会更新。
    更新页面数据,data数据也会更新。

  • MVVM模型(ModelViewViewModel):是MVC模式的改进版
    在前端页面中,JS对象表示Model,页面表示View,两者做到了最大限度的分离。
    将Model和View关联起来的就是ViewModel,它是桥梁。
    ViewModel负责把Model的数据同步到View显示出来,还负责把View修改的数据同步回Model。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单绑定</title>
</head>
<body><div id="div"><form autocomplete="off">姓名:<input type="text" name="username" v-model="username"><br>年龄:<input type="number" name="age" v-model="age"></form></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{username:"张三",age:23}});
</script>
</html>

Element 基本使用

  • Element:网站快速成型工具。是饿了么公司前端开发团队提供的一套基于Vue的网站组件库。

  • 使用Element前提必须要有Vue。

  • 组件:组成网页的部件,例如超链接、按钮、图片、表格等等~

  • Element官网:https://element.eleme.cn/#/zh-CN

Element快速入门:

开发步骤:

  1. 下载 Element 核心库。
  2. 引入 Element 样式文件。
  3. 引入 Vue 核心 js 文件。
  4. 引入 Element 核心 js 文件。
  5. 编写按钮标签。
  6. 通过 Vue 核心对象加载元素。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入门</title><link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"><script src="vue.js"></script><script src="https://unpkg.com/vue/dist/vue.js"></script><script src="../element-ui/lib/index.js"></script>
</head><body>¬
<div id="div"><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row><br><el-row><el-button plain>朴素按钮</el-button><el-button type="primary" plain>主要按钮</el-button><el-button type="success" plain>成功按钮</el-button><el-button type="info" plain>信息按钮</el-button><el-button type="warning" plain>警告按钮</el-button><el-button type="danger" plain>危险按钮</el-button></el-row><br><el-row><el-button round>圆角按钮</el-button><el-button type="primary" round>主要按钮</el-button><el-button type="success" round>成功按钮</el-button><el-button type="info" round>信息按钮</el-button><el-button type="warning" round>警告按钮</el-button><el-button type="danger" round>危险按钮</el-button></el-row><br><el-row><el-button icon="el-icon-search" circle></el-button><el-button type="primary" icon="el-icon-edit" circle></el-button><el-button type="success" icon="el-icon-check" circle></el-button><el-button type="info" icon="el-icon-message" circle></el-button><el-button type="warning" icon="el-icon-star-off" circle></el-button><el-button type="danger" icon="el-icon-delete" circle></el-button></el-row>
</div></body>
<script>new Vue({el: "#div"});
</script>
</html>

基础布局:

将页面分成最多 24 个部分,自由切分。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"><script src="vue.js"></script><script src="../element-ui/lib/index.js"></script><style>.el-row {/* 行距为20px */margin-bottom: 20px;}.bg-purple-dark {background: red;}.bg-purple {background: blue;}.bg-purple-light {background: green;}.grid-content {/* 边框圆润度 */border-radius: 4px;/* 行高为36px */min-height: 36px;}</style>
</head>
<body><div id="div"><el-row><el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col></el-row><el-row><el-col :span="12"><div class="grid-content bg-purple"></div></el-col><el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col></el-row><el-row><el-col :span="8"><div class="grid-content bg-purple"></div></el-col><el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="8"><div class="grid-content bg-purple"></div></el-col></el-row><el-row><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col></el-row><el-row><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="4"><div class="grid-content bg-purple"></div></el-col><el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col></el-row>
</div>
</body>
<script>new Vue({el: "#div"});
</script>
</html>

容器布局:

将页面分成头部区域、侧边栏区域、主区域、底部区域。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"><script src="vue.js"></script><script src="../element-ui/lib/index.js"></script>
</head>
<style>.el-header, .el-footer {background-color: #d18e66;color: #333;text-align: center;height: 100px;}.el-aside {background-color: #55e658;color: #333;text-align: center;height: 580px;}.el-main {background-color: #5fb1f3;color: #333;text-align: center;height: 520px;}
</style>
<body>
<div id="div"><el-container><el-header>头部区域</el-header><el-container><el-aside width="200px">侧边栏区域</el-aside><el-container><el-main>主区域</el-main><el-footer>底部区域</el-footer></el-container></el-container></el-container>
</div>
</body>
<script>new Vue({el: "#div"});
</script>
</html>

表单组件:

由输入框、下拉列表、单选框、多选框等控件组成,用以收集、校验、提交数据。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"><script src="vue.js"></script><script src="../element-ui/lib/index.js"></script>
</head><body>
<div id="div"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="活动名称" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="活动区域" prop="region"><el-select v-model="ruleForm.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活动时间" required><el-col :span="11"><el-form-item prop="date1"><el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1"style="width: 100%;"></el-date-picker></el-form-item></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-form-item prop="date2"><el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker></el-form-item></el-col></el-form-item><el-form-item label="即时配送" prop="delivery"><el-switch v-model="ruleForm.delivery"></el-switch></el-form-item><el-form-item label="活动性质" prop="type"><el-checkbox-group v-model="ruleForm.type"><el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox><el-checkbox label="地推活动" name="type"></el-checkbox><el-checkbox label="线下主题活动" name="type"></el-checkbox><el-checkbox label="单纯品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="特殊资源" prop="resource"><el-radio-group v-model="ruleForm.resource"><el-radio label="线上品牌商赞助"></el-radio><el-radio label="线下场地免费"></el-radio></el-radio-group></el-form-item><el-form-item label="活动形式" prop="desc"><el-input type="textarea" v-model="ruleForm.desc"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form>
</div>
</body>
<script>new Vue({el: "div",data: {ruleForm: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},rules: {name: [{required: true, message: '请输入活动名称', trigger: 'blur'},{min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}],region: [{required: true, message: '请选择活动区域', trigger: 'change'}],date1: [{type: 'date', required: true, message: '请选择日期', trigger: 'change'}],date2: [{type: 'date', required: true, message: '请选择时间', trigger: 'change'}],type: [{type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change'}],resource: [{required: true, message: '请选择活动资源', trigger: 'change'}],desc: [{required: true, message: '请填写活动形式', trigger: 'blur'}]}},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}});
</script>
</html>

表格组件:

用于展示多条结构类似的数据,可对数据进行编辑、删除或其他自定义操作。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"><script src="vue.js"></script><script src="../element-ui/lib/index.js"></script></head>
<body><div id="div"><template><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column><el-table-columnlabel="操作"width="180"><el-button type="warning">编辑</el-button><el-button type="danger">删除</el-button></el-table-column></el-table></template>
</div>
</body>
<script>new Vue({el: "#div",data: {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>
</html>

顶部导航栏组件:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入门</title><link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"><script src="vue.js"></script><script src="../element-ui/lib/index.js"></script></head>
<body>
<div id="div"><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>
</div>
</body>
<script>new Vue({el: "#div"});
</script>
</html>

侧边导航栏组件:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入门</title><link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"><script src="vue.js"></script><script src="../element-ui/lib/index.js"></script></head>
<body>
<div id="div"><el-col :span="3"><el-menudefault-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>
</div>
</body>
<script>new Vue({el: "#div"});
</script>
</html>

综合案例 学生列表:

头部区域的实现:

实现思路

  • 头部效果实现。
  • 侧边栏和主区域效果实现。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学生列表</title><link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"><script src="js/vue.js"></script><script src="element-ui/lib/index.js"></script><style>.el-header{background-color: #545c64;}.header-img{width: 100px;margin-top: 20px;}</style>
</head>
<body><div id="div"><el-container><!-- 头部 --><el-header class="el-header"><el-container><div><el-image src="img/export.png" class="header-img"></el-image></div><el-menu:default-active="activeIndex2"mode="horizontal"@select="handleSelect"background-color="#545c64"text-color="white"active-text-color="#ffd04b"style="margin-left: auto;"><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><el-menu-item index="3"><a href="学生列表.html" target="_self">首页</a></el-menu-item></el-menu></el-container></el-header></el-container></div>
</body>
<script>new Vue({el:"#div"});
</script>
</html>

侧边栏区域的实现:

<!-- 侧边栏区域 -->
<el-container style="height: 580px; border: 1px solid #eee"><el-aside width="200px" style="background-color: rgb(238, 241, 246)"><el-menu :default-openeds="['1']"><el-submenu index="1"><template slot="title"><i class="el-icon-menu"></i>学工部</template><el-menu-item-group><el-menu-item index="1-1"><i class="el-icon-help"></i>在校学生管理</el-menu-item><el-menu-item index="1-2"><i class="el-icon-help"></i>学生升级/留级</el-menu-item><el-menu-item index="1-3"><i class="el-icon-help"></i>学生就业情况</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i>咨询部</template><el-menu-item-group><el-menu-item index="2-1"><i class="el-icon-help"></i>意向学生管理</el-menu-item><el-menu-item index="2-2"><i class="el-icon-help"></i>未报名学生管理</el-menu-item><el-menu-item index="2-3"><i class="el-icon-help"></i>已报名学生管理</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-menu"></i>教研部</template><el-menu-item-group><el-menu-item index="3-1"><i class="el-icon-help"></i>已有课程管理</el-menu-item><el-menu-item index="3-2"><i class="el-icon-help"></i>正在研发课程管理</el-menu-item><el-menu-item index="3-3"><i class="el-icon-help"></i>新技术课程管理</el-menu-item></el-menu-item-group></el-submenu></el-menu></el-aside></el-container>

主区域的实现:

主区域和侧边栏区域放在一起

<!-- 主区域 -->
<el-container><el-main><b style="color: red;font-size: 20px;">学生列表</b><div style="float:right"><el-button type="primary">添加学生</el-button></div><el-table :data="tableData"><el-table-column prop="date" label="日期" width="140"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-columnlabel="操作"width="180"><el-button type="warning">编辑</el-button><el-button type="danger">删除</el-button></el-table-column></el-table></el-main>
</el-container>

在vue中定义data

<script>new Vue({el:"#div",data:{tableData:[{date:"2088-08-08",name:"张三",address:"北京市昌平区"},{date:"2088-08-08",name:"李四",address:"北京市昌平区"},{date:"2088-08-08",name:"王五",address:"北京市昌平区"},]}});
</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/572180.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis基础-下载安装配置

Nosql&#xff1a; NoSQL&#xff1a;即 Not-Only SQL&#xff08; 泛指非关系型的数据库&#xff09;&#xff0c;作为关系型数据库的补充。 作用&#xff1a; 应对基于海量用户和海量数据前提下的数据处理问题。 特征&#xff1a; 可扩容&#xff0c;可伸缩大数据量下高性能…

转:20分钟教你使用hexo搭建github博客

注册Github账号 这里我们就不多讲了&#xff0c;小伙伴们可以点击这里&#xff0c;进入官网进行注册。 创建仓库 图片来自Github登录账号后&#xff0c;在Github页面的右上方选择New repository进行仓库的创建。 图片来自Github在仓库名字输入框中输入&#xff1a; Github昵称.…

Maven入门详解与安装配置

Maven&#xff1a; Maven出现前的问题&#xff1a; 假设你现在做了一个项目&#xff0c;项目中肯定要用到一些jar包&#xff0c;比如说mybatis&#xff0c;log4j&#xff0c;JUnit等&#xff0c;除了这些之外&#xff0c;你有可能用到你的同事开发的其他的东西&#xff0c;比如…

Vue生命周期与自定义组件

自定义组件&#xff1a; Element 组件其实就是自定义的标签。例如<el-button> 就是对<button>的封装。 本质上&#xff0c;组件是带有一个名字且可复用的 Vue 实例&#xff0c;完全可以自己定义。 定义格式&#xff1a; Vue.component(组件名称, {props:组件的属性…

Spring DI(依赖注入)

DI依赖注入 IoC&#xff08;Inversion Of Control&#xff09;控制翻转&#xff0c;Spring反向控制应用程序所需要使用的外部资源DI&#xff08;Dependency Injection&#xff09;依赖注入&#xff0c;应用程序运行依赖的资源由Spring为其提供&#xff0c;资源进入应用程序的方…

Spring注解开发入门教程

注解开发&#xff1a; 什么是驱动注解&#xff1f; 注解启动时使用注解的形式替代xml配置&#xff0c;将繁杂的spring配置文件从工程中彻底消除掉&#xff0c;简化书写 注解驱动的弊端 为了达成注解驱动的目的&#xff0c;可能会将原先很简单的书写&#xff0c;变的更加复杂XM…

Spring整合Mybatis和JUnit

Spring整合Mybatis&#xff1a; 注解整合MyBatis分析 业务类使用注解形式声明bean&#xff0c;属性采用注解注入建立独立的配置管理类&#xff0c;分类管理外部资源&#xff0c;根据功能进行分类&#xff0c;并提供对应的方法获取bean使用注解形式启动bean扫描&#xff0c;加载…

Java-NIO(三):直接缓冲区与非直接缓冲区

直接缓冲区与非直接缓冲区的概念&#xff1a;1&#xff09;非直接缓冲区&#xff1a;通过 static ByteBuffer allocate(int capacity) 创建的缓冲区&#xff0c;在JVM中内存中创建&#xff0c;在每次调用基础操作系统的一个本机IO之前或者之后&#xff0c;虚拟机都会将缓冲区的…

Spring IOC扫描器与注册器

核心接口&#xff1a; 组件扫描器&#xff1a; 开发过程中&#xff0c;需要根据需求加载必要的bean&#xff0c;排除指定bean 设定组件扫描加载过滤器&#xff1a; 名称&#xff1a;ComponentScan 类型&#xff1a;类注解 位置&#xff1a;类定义上方 作用&#xff1a;设置…

Spring AOP切入点与通知XML类型

AOP&#xff1a; AOP(Aspect Oriented Programing)面向切面编程&#xff0c;一种编程范式&#xff0c;隶属于软工范畴&#xff0c;指导开发者如何组织程序结构AOP弥补了OOP的不足&#xff0c;基于OOP基础之上进行横向开发 uOOP规定程序开发以类为主体模型&#xff0c;一切围绕对…

给iOS项目中添加图片,并通过UIImageView引用和显示该UIImage图片

【问题】 关于iOS/iPhone中的文件选择对话框&#xff0c;用于用户去选择图片等文件 过程中&#xff0c;问题转换为&#xff0c;需要给当前iOS项目中&#xff0c;添加一个图片。 类似于Windows开发中的资源文件&#xff0c;其中图片文件属于资源的一种。 并且&#xff0c;接着可…

AOP底层原理与注解配置详解

注解开发AOP制作步骤&#xff1a; 在XML格式基础上 导入坐标&#xff08;伴随spring-context坐标导入已经依赖导入完成开启AOP注解支持配置切面Aspect定义专用的切入点方法&#xff0c;并配置切入点Pointcut为通知方法配置通知类型及对应切入点Before 注解开发AOP注意事项&am…

MacOS Apple M1 安装ARM架构的JDK及动态切换版本

JDK下载安装&#xff1a; 咱就是说&#xff0c;ARM版本的JDK就是一个字&#xff0c;真特么快&#xff0c;想变快吗&#xff0c;赶紧下载叭&#xff01;&#xff01; 1、下载地址&#xff1a;https://www.azul.com/downloads/?packagejdk 筛选一下MacOS下ARM架构的JDK版本&…

梯度下降和EM算法,kmeans的em推导

I. 牛顿迭代法给定一个复杂的非线性函数f(x)&#xff0c;希望求它的最小值&#xff0c;我们一般可以这样做&#xff0c;假定它足够光滑&#xff0c;那么它的最小值也就是它的极小值点&#xff0c;满足f′(x0)0&#xff0c;然后可以转化为求方程f′(x)0的根了。非线性方程的根我…

Spring事务详解与使用

Spring事务核心对象 J2EE开发使用分层设计的思想进行&#xff0c;对于简单的业务层转调数据层的单一操作&#xff0c;事务开启在业务层或者数据层并无太大差别&#xff0c;当业务中包含多个数据层的调用时&#xff0c;需要在业务层开启事务&#xff0c;对数据层中多个操作进行组…

黑马程序员博学谷Java就业班课程

1、资料全无加密&#xff0c;可任意试看 2、内容包括课程资料 地址:https://www.boxuegu.com/class/outline-1112.html

设计模式一の设计模式详解

一、设计模式定义 设计模式&#xff08;Design Pattern&#xff09;是一套被反复使用、多数人知晓的、经过分类的、代码设计经验的总结。使用设计模式的目的&#xff1a;为了代码可重用性、让代码更容易被他人理解、保证代码可靠性。 设计模式使代码编写真正工程化&#xff1b;…

Spring模板对象

Spring模块对象: 把共性的方法抽取出来固定为一个模板&#xff0c;后续再操作只需要填充内容即可。 比如&#xff1a;淘宝每次买东西都要填写地址&#xff0c;只是每次买的东西不一样&#xff0c;所以可以做一个默认地址&#xff0c;每次买东西都要去选商品就行了&#xff0c;不…

SpringMVC入门案例

SpringMVC 概述&#xff1a; SpringMVC是一种基于Java实现MVC模型的轻量级Web框架 三层架构 表现层&#xff1a;负责数据展示业务层&#xff1a;负责业务处理数据层&#xff1a;负责数据操作 MVC&#xff08;Model View Controller&#xff09;&#xff1a;一种用于设计创建…

SpringMVC请求中的普通、POJO、数组集合类型传参与类转换器

SpringMVC将传递的参数封装到处理器方法的形参中&#xff0c;达到快速访问参数的目的。 普通类型参数传参 参数名与处理器方法形参名保持一致 访问URL&#xff1a; http://localhost/requestParam1?nameitzhuzhu&age14 RequestMapping("/requestParam1")publi…