JavaWeb(B站黑马)学习笔记
目录
前言
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布局
一栏是24格,通过调整每栏格数实现分格效果
Container布局容器
Element常用组件
注:
该内容是根据B站黑马程序员学习时所记,相关资料可在B站查询黑马程序员最新版JavaWeb基础教程,Java web从入门到企业实战完整版_哔哩哔哩_bilibili