【Vue学习笔记十三：Vue+Bootstrap+vue-resource从接口获取数据库数据】的更多相关文章

Vue学习笔记十三：Vue+Bootstrap+vue-resource从接口获取数据库数据

目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例和Vue学习笔记十二vue-resource这两章结合一下,不在使用假数据了,这次从后台接口获取json数据. Vue前端框架提供交互逻辑处理 Bootstrap前端css提供美化渲染 SpringBoot后端提供接口 MySQL数据库提供数据 SpringBoot提供后端接口 由于前端第九章我都写…

vue学习笔记（六） ----- vue组件

一.模块化与组件化 模块化的定义 模块化在Node中是一个规范,定义一些模块的相关的规则,从代码角度上来说,方便做区别,如果不使用模块化,写在js文件中不利于后期维护和扩展,从代码的层面上就把相关的功能脱离出来,所以模块化从从代码的角度触发,分析项目,把项目中一些功能类型的代码,单独抽离为一个个的模块,那么为了保证大家以相同的方式去封装模块,于是我们就创造了CommentJS规范 模块化的优点 在我们项目中,如果需要是实现相同的功能,就不需要再重写,所以模块化从一定程度上提高我们的开发效率,有一…

vue学习笔记（四）——Vue实例以及生命周期

1.Vue实例API 1.构造器(实例化) var vm = new Vue({ //选项 |-------DOM(3) |   |-------el (提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标.) |   |-------template (一个字符串模板作为 Vue 实例的标识使用.模板将会 替换 挂载的元素.挂载元素的内容都将被忽略,除非模板的内容有分发 slot.) |   |-------render (字符串模板的代替方案,允许你发挥 JavaScript…

Vue学习笔记一：初识Vue

目录 什么是Vue? 为什么要学习前端框架? MVC,MVP 和 MVVM 最简单的入门小案例 下载Vue.js 新建文件结构 写一个html 运行 可笑的小报错 Vue和MVVM 什么是Vue? Vue就是一个渐进式的JavaScript框架. 为什么要学习前端框架? 我们要做前端,不可避免的要写HTML,要写JavaScript,但是自己一个一个打多麻烦啊,于是,前端之路有了以下的发展变化. 原生JavaScripts:各个浏览器的兼容性无法保证 Jquery 前端引擎模板:表格1000条数…

Vue学习笔记【25】——Vue组件（组件间传值）

父组件向子组件传值 组件实例定义方式,注意:一定要使用props属性来定义父组件传递过来的数据  <script>    // 创建 Vue 实例,得到 ViewModel    var vm = new Vue({      el: '#app',      data: {        msg: '这是父组件中的消息'      },      components: {        son: {          template: '<h1>这是子组件 --- {{fin…

Vue学习笔记【23】——Vue组件（组件的定义）

定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可: 组件化和模块化的不同: 模块化: 是从代码逻辑的角度进行划分的:方便代码分层开发,保证每个功能模块的职能单一: 组件化: 是从UI界面的角度进行划分的:前端的组件化,方便UI组件的重用: 全局组件定义的三种方式 使用 Vue.extend 配合 Vue.component 方法:  var login = Vue.ext…

Vue学习笔记【4】——Vue指令之v-on

Vue指令之v-on v-on指令介绍 直接使用指令v-on 使用简化指令@ 绑定事件代码:@事件名="methods中的方法名称" <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in…

Vue学习笔记【31】——Vue路由（computed计算属性的使用）

computed计算属性的使用 默认只有getter的计算属性:  <div id="app">    <input type="text" v-model="firstName"> +    <input type="text" v-model="lastName"> =    <span>{{fullName}}</span>  </di…

Vue学习笔记【30】——Vue路由（watch属性的使用）

考虑一个问题:想要实现 名 和 姓 两个文本框的内容改变,则全名的文本框中的值也跟着改变:(用以前的知识如何实现???) 监听data中属性的改变:  <div id="app">    <input type="text" v-model="firstName"> +    <input type="text" v-model="lastName"> =    <…

Vue学习笔记【29】——Vue路由（命名视图实现经典布局）

命名视图实现经典布局 标签代码结构:  <div id="app">    <router-view></router-view>    <div class="content">      <router-view name="a"></router-view>      <router-view name="b"></router-v…