java⼊职学习五之核⼼框架（springboot和vue）
⼀、springboot
1、简介
SpringBoot是⼀个默认就集成了绝⼤部分常规开发时都使⽤的依赖、完成了绝⼤部分的常规配置、基于SpringMVC的框架。
SpringBoot的核⼼思想是约定⼤于配置，因为在传统的SSM项⽬中，创建项⽬后，需要⾃定义⼤量的配置，⽽不同的项⽬的配置却⼤同⼩异，甚⾄就是完全相同，所以，SpringBoot就直接完成了相关的配置，并要求使⽤者遵循配置值的约定，例如它将DispatcherServlet的映射路径配置为/*，则使⽤者就按照这个配置值使⽤即可，⽆须⾃已编写配置！
2、特点
Spring boot是⼀个脚⼿架，构建于Spring框架(Framework)基础之上，基于快速构建理念，提供了⾃动配置功能，可实现其开箱即⽤特性（创建完⼀个基本的项⽬以后，可零配置或者少量配置即可运⾏我们的项⽬），其核⼼主要有如下⼏个⽅⾯：
1. 起步依赖(Starter Dependency)-项⽬创建时底层帮你关联依赖。
2. ⾃动配置(Auto Configuration)。
3. 健康检查(Actator)-监控。
其中，为spring.io/projects/spring-boot。
3、Spring Boot 环境配置
4、创建springboot⼯程
1. 创建项⽬ 选择Spring Initializr，右边选择⾃⼰配置的jdk，下⽅默认spring⽀持url，然后next
2. 进⾏路径、包名的配置
3. 配置项⽬所需要jar包依赖，这个地⽅选择会⾃动带⼊l中（可以创建项⽬之后⾃⾏进⾏配置）
4. 创建项⽬
5、项⽬简介
查看项⽬结构（注意：DemoApplication⼀定要在路径的最外层），resources为资源⽂件路径：存放propertie⽂件，（static、templates⽬录存放前端页⾯⽂件：static存放 js、css⽂件，templates存放html等⽂件。）
⼆、vue.js
1、简介
1、Vue.js（读⾳ /vjuː/, 类似于 view） 是⼀套构建⽤户界⾯的渐进式框架。
2、Vue 只关注视图层， 采⽤⾃底向上增量开发的设计。
3、Vue 的⽬标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
1.1 Vue可以⽤来做什么？
Vue可以做从简单到复杂的前端单页应⽤，随处可见的Web前端都可以⽤Vue来开发。
1.2 为什么使⽤Vue？
1、轻量级
2、js语法
3、⼊门及上⼿快
1.3 vue与Jquery⽐较?
1、jquery关注dom
2、vue关注数据，不关注domjquery框架定义
1.4 Vue.js 安装
使⽤
2、 Vue的书写格式
<div id="vue_det">
<h1>{{details()}}</h1><!--使⽤两个括号来展⽰数据-->
</div>
<script type="text/javascript">
var vm =new Vue({
el:'#vue_det',//表明作⽤域
data:{//存储数据
………
},
methods:{//事件处理⽅法
details:function(){
……
}
}
})
</script>
3、 Vue的对象
1、el：Vue的作⽤域，即只有在这个作⽤域⾥⾯的dom受Vue控制
2、data：vue页⾯的数据模型，该数据模型为⼀个javascript对象，且在运⾏过程中该对象的属性不允许增加，因此页⾯数据模型必须提前定义好
3、methods：事件处理⽅法对象
3.1数据绑定
1、数据绑定最常见的形式就是使⽤ {{…}}（双⼤括号） 的⽂本插值
2、使⽤ v-html 指令⽤于输出 html 代码
⽰例：
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el:'#app',
data:{
message:'<h1>Vue</h1>'
}
})
</script>
3、HTML 属性中的值应使⽤ v-bind 指令，参数在指令后以冒号指明。
⽰例
<div id="app">
<pre><a v-bind:href="url">百度</a></pre>
</div>
<script>
new Vue({
el:'#app',
data:{
url:'www.baidu'
}
})
</script>
4、 v-model 指令来实现双向数据绑定
5、 v-on 指令，它⽤于监听 DOM 事件
过滤器（可以接受参数）
⽰例
<div id="app">
{{ message | capitalize }}
<div v-bind:id="rawId | formatId"></div>
</div>
<script>
new Vue({
el:'#app',
data:{
message:'runoob'
},
filters:{//过滤器都书写在这个关键字⾥⾯
capitalize:function(value){//过滤器函数接受表达式的值作为第⼀个参数。
if(!value)return''
value = String()
return value.charAt(0).toUpperCase()+ value.slice(1)
}
}
})
</script>
3.2 条件语句
1、v-if
2、v-else
3、v-else-if
4、v-show
注意：v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
⽰例

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。