【JavaWeb学习】13Vue&Element

JavaWeb(B站黑马)学习笔记

03JDBC

04Maven&MyBatis

08HTTP&Tomcat&Servlet

09Request&Response

10JSP&MVC模式和三层架构

11会话跟踪技术(Cookie&Session)

12Filter&Listener&Ajax

13Vue&Element

14综合案例  


目录

JavaWeb(B站黑马)学习笔记

前言

Vue

Vue快速入门

Vue常用指令

v-bind  v-model

v-on绑定事件

v-if等条件判断

v-for  循环遍历容器内属性

Vue生命周期

Vue-案例查询所有&新增品牌

查询所有

新增品牌

Element

Element快速入门

Element布局

Element常用组件

注:


前言

JavaWeb(B站黑马)学习笔记 13Vue&Element


Vue

Vue是一套前端框架,免去原始JavaScript中的DOM操作,简化书写。

基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,通过数据的绑定让模型变了视图变,视图变了模型变

Vue快速入门

el:"#app"设置当前vue的作用范围是被<div id="app">包裹的整个范围

实现效果

注意:要出现如下Vue输入提示,需安装Vue.js插件

Vue常用指令

v-bind  v-model

v-on绑定事件

v-if等条件判断

区别:v-if没达到条件标签压根不渲染,例如当count=3时div2和div3直接没出现,v-show则是将display:none

v-for  循环遍历容器内属性

Vue生命周期

从new Vue({})创建核心对象开始一直到销毁完毕,每个节点上对应一个生命周期事件,我们可以在不同位置绑定一个生命周期的方法让它自动执行。这八个生命周期的方法目前一般只需知道mounted,挂载完成之后说明vue已经完全初始化好了,相当于页面已经加载完成了,这时我们就可以发送异步请求例如查询所有列表数据

Vue-案例查询所有&新增品牌

查询所有

在vue初始化完成后(生命周期mounted)通过ajax异步请求获取到数据,在用v-for遍历出来

细节:注意在axios中设置brands要进行搭桥的小操作,因为此处的this是axios的

循环遍历中brand.statusStr是通过Brand模型类的逻辑视图经过判断后将0显示禁用1显示启用(下方图一),但奇怪的是通过service查询出来的brands没有statusStr,转换成JSON数据后又有,且单独打印brands.get(0).getStatusStr()又出现了(下方图二)

新增品牌

数据绑定

Element

官网:Element - The world's most popular Vue UI framework

饿了么公司前端开发团队提供的一套基于Vue的组件库用于快速构建网页

Element快速入门

Element布局

Layout布局

一栏是24格,通过调整每栏格数实现分格效果

Container布局容器

Element常用组件


注:

该内容是根据B站黑马程序员学习时所记,相关资料可在B站查询黑马程序员最新版JavaWeb基础教程,Java web从入门到企业实战完整版_哔哩哔哩_bilibili
 


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值