看动漫什么网站好,wordpress用户注册插件,怎么在网站上添加广告代码,嘉兴专业定制网站制作企业系列文章目录
IDEA项目实践——JavaWeb简介以及Servlet编程实战
IDEA项目实践——Spring集成mybatis、spring当中的事务
IDEA项目实践——Spring当中的切面AOP
IDEWA项目实践——mybatis的一些基本原理以及案例
IDEA项目实践——Spring框架简介#xff0c;以及IOC注解
I…系列文章目录
IDEA项目实践——JavaWeb简介以及Servlet编程实战
IDEA项目实践——Spring集成mybatis、spring当中的事务
IDEA项目实践——Spring当中的切面AOP
IDEWA项目实践——mybatis的一些基本原理以及案例
IDEA项目实践——Spring框架简介以及IOC注解
IDEA项目实践——动态SQL、关系映射、注解开发
文章目录
系列文章目录
前言
1.VUE
1.1 概述
1.2 快速入门
1.3 Vue 指令
1.3.1 v-bind v-model 指令
1.3.2 v-on 指令
1.3.3 条件判断指令
1.5.3 添加功能
总结 前言
本文主要介绍VUE相关的知识 补充内容
VUEElement
今日目标 能够使用VUE中常用指令和插值表达式 能够使用VUE生命周期函数 mounted 能够进行简单的 Element 页面修改 能够完成查询所有功能 能够完成添加功能 DOM对象
文档对象模型DOM是 web 上构成文档结构和内容的对象的数据表示。本部分将简短介绍DOM 如何在内存中表示 HTML 文档以及如何使用 API 来创建 web 内容和应用程序。
文档对象模型DOM是一个网络文档的编程接口。它代表页面以便程序可以改变文档的结构、风格和内容。DOM 将文档表示为节点和对象这样编程语言就可以与页面交互。
DOM 是使用多个 API 构建的它们一起工作。核心 DOM 定义了描述任何文档和其中对象的实体。其他 API 会根据需要对其进行扩展为 DOM 增加新的特性和功能。例如HTML DOM API 为核心 DOM 增加了对表示 HTML 文档的支持而 SVG API 增加了对表示 SVG 文档的支持。
DOM 不是一种编程语言但如果没有它JavaScript 语言就不会有任何关于网页、HTML 文档、SVG 文档及其组成部分的模型或概念。文档作为一个整体标题、文档中的表格、表头、表格单元中的文本以及文档中的所有其他元素都是该文档对象模型的一部分。它们都可以使用 DOM 和像 JavaScript 这样的脚本语言进行访问和操作。
DOM 不是 JavaScript 语言的一部分而是用于建立网站的 Web API。JavaScript 也可以在其他情况下使用。例如Node.js 在计算机上运行 JavaScript 程序但提供了一套不同的 API而且 DOM API 不是 Node.js 运行时的核心部分。
更多请看此文DOM对象概述
DOM对象概述 1.VUE
1.1 概述
接下来我们学习一款前端的框架就是 VUE。
Vue 是一套前端框架免除原生JavaScript中的DOM操作简化书写。
我们之前也学习过后端的框架 Mybatis Mybatis 是用来简化 jdbc 代码编写的而 VUE 是前端的框架是用来简化 JavaScript 代码编写的。前一天我们做了一个综合性的案例里面进行了大量的DOM操作如下 学习了 VUE 后这部分代码我们就不需要再写了。那么 VUE 是如何简化 DOM 书写呢
基于MVVM(Model-View-ViewModel)思想实现数据的双向绑定将编程的关注点放在数据上。之前我们是将关注点放在了 DOM 操作上而要了解 MVVM 思想必须先聊聊 MVC 思想如下图就是 MVC 思想图解 C 就是咱们 js 代码M 就是数据而 V 是页面上展示的内容如下图是我们之前写的代码 MVC 思想是没法进行双向绑定的。双向绑定是指当数据模型数据发生变化时页面展示的会随之发生变化而如果表单数据发生变化绑定的模型数据也随之发生变化。接下来我们聊聊 MVVM 思想如下图是三个组件图解 图中的 Model 就是我们的数据View 是视图也就是页面标签用户可以通过浏览器看到的内容Model 和 View 是通过 ViewModel 对象进行双向绑定的而 ViewModel 对象是 Vue 提供的。 data bindings 自动绑定数据DOM listeners是监听器监听数据修改 接下来让大家看一下双向绑定的效果下图是提前准备的代码输入框绑定了 username 模型数据而在页面上也使用 {{}} 绑定了 username 模型数据 通过浏览器打开该页面可以看到如下页面 当我们在输入框中输入内容而输入框后面随之实时的展示我们输入的内容这就是双向绑定的效果。 添加web模块 修改名称 修改webapp的路径 1.2 快速入门
Vue 使用起来是比较简单的总共分为如下三步 新建 HTML 页面引入 Vue.js文件 script srcjs/vue.js/script 在JS代码区域创建Vue核心对象进行数据绑定 new Vue({el: #app,data() {return {username: }}
}); 创建 Vue 对象时需要传递一个 js 对象而该对象中需要如下属性 el 用来指定哪些标签受 Vue 管理。 该属性取值 #app 中的 app 需要是受管理的标签的id属性值 data 用来定义数据模型 methods 用来定义函数。这个我们在后面就会用到 编写视图 div idappinput nameusername v-modelusername {{username}}
/div {{}} 是 Vue 中定义的 插值表达式 在里面写数据模型到时候会将该模型的数据值展示在这个位置。
整体代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div idappinput v-modelusername!--插值表达式--{{username}}
/div
script srcjs/vue.js/script
script//1. 创建Vue核心对象new Vue({el:#app,data(){ // data() 是 ECMAScript 6 版本的新的写法return {username:}}/*data: function () {return {username:}}*/});/script
/body
/html
1.3 Vue 指令
指令HTML 标签上带有 v- 前缀的特殊属性不同指令具有不同含义。例如v-ifv-for…
常用的指令有
指令作用v-bind为HTML标签绑定属性值如设置 href , css样式等v-model在表单元素上创建双向数据绑定v-on为HTML标签绑定事件v-if条件性的渲染某元素判定为true时渲染,否则不渲染v-elsev-else-ifv-show根据条件展示某元素区别在于切换的是display属性的值v-for列表渲染遍历容器的元素或者对象的属性
接下来我们挨个学习这些指令
1.3.1 v-bind v-model 指令 v-bind 该指令可以给标签原有属性绑定模型数据。这样模型数据发生变化标签属性值也随之发生变化 例如 a v-bind:hrefurl百度一下/a 上面的 v-bind: 可以简化写成 : 如下 !--v-bind 可以省略
--
a :hrefurl百度一下/a v-model 该指令可以给表单项标签绑定模型数据。这样就能实现双向绑定效果。例如 input nameusername v-modelusername
代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div idappa v-bind:hrefurl点击一下/aa :hrefurl点击一下/ainput v-modelurl
/divscript srcjs/vue.js/script
script//1. 创建Vue核心对象new Vue({el:#app,data(){return {username:,url:https://www.baidu.com}}});
/script
/body
/html
通过浏览器打开上面页面并且使用检查查看超链接的路径该路径会根据输入框输入的路径变化而变化这是因为超链接和输入框绑定的是同一个模型数据
1.3.2 v-on 指令 我们在页面定义一个按钮并给该按钮使用 v-on 指令绑定单击事件html代码如下
input typebutton value一个按钮 v-on:clickshow()
input typebutton value一个按钮 v-on:clickshow() 而使用 v-on 时还可以使用简化的写法将 v-on: 替换成 html代码如下
input typebutton value一个按钮 clickshow()
上面代码绑定的 show() 需要在 Vue 对象中的 methods 属性中定义出来
new Vue({el: #app,methods: {show(){alert(我被点了);}}
}); 注意v-on: 后面的事件名称是之前原生事件属性名去掉on。 例如 单击事件 事件属性名是 onclick而在vue中使用是 v-on:click 失去焦点事件事件属性名是 onblur而在vue中使用时 v-on:blur 整体页面代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div idappinput typebutton value一个按钮 v-on:clickshow()brinput typebutton value一个按钮 clickshow()
/div
script srcjs/vue.js/script
script//1. 创建Vue核心对象new Vue({el:#app,data(){return {username:,}},methods:{show(){alert(我被点了...);}}});
/script
/body
/html
1.3.3 条件判断指令 接下来通过代码演示一下。在 Vue中定义一个 count 的数据模型如下
//1. 创建Vue核心对象new Vue({el:#app,data(){return {count:3}}
});
现在要实现当 count 模型的数据是1时在页面上展示 div1 内容当 count 模型的数据是2时在页面上展示 div2 内容count 模型数据是其他值时在页面上展示 div3。这里为了动态改变模型数据 count 的值再定义一个输入框绑定 count 模型数据。html 代码如下
div idappdiv v-ifcount 1div1/divdiv v-else-ifcount 2div2/divdiv v-elsediv3/divhrinput v-modelcount
/div
整体页面代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div idappdiv v-ifcount 3div1/divdiv v-else-ifcount 4div2/divdiv v-elsediv3/divhrinput v-modelcount
/divscript srcjs/vue.js/script
script//1. 创建Vue核心对象new Vue({el:#app,data(){return {count:3}}});
/script
/body
/html
通过浏览器打开页面并在输入框输入不同的值效果如下 然后我们在看看 v-show 指令的效果如果模型数据 count 的值是3时展示 div v-show 内容否则不展示html页面代码如下
div v-showcount 3div v-show/div
br
input v-modelcount
浏览器打开效果如下 这个指令看到名字就知道是用来遍历的该指令使用的格式如下 标签 v-for变量名 in 集合模型数据{{变量名}}
/标签 注意需要循环那个标签v-for 指令就写在那个标签上。 如果在页面需要使用到集合模型数据的索引就需要使用如下格式 标签 v-for(变量名,索引变量) in 集合模型数据!--索引变量是从0开始所以要表示序号的话需要手动的加1--{{索引变量 1}} {{变量名}}
/标签 代码演示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div idappdiv v-foraddr in addrs{{addr}} br/divhrdiv v-for(addr,i) in addrs{{i1}}--{{addr}} br/div
/divscript srcjs/vue.js/script
script//1. 创建Vue核心对象new Vue({el:#app,data(){return {addrs:[北京,上海,西安]}}});
/script
/body
/html
通过浏览器打开效果如下 在 list.html 页面引入 vue 的js文件 script srcjs/vue.js/script 创建 Vue 对象 在 Vue 对象中定义模型数据 在钩子函数中发送异步请求并将响应的数据赋值给数据模型 new Vue({el: #app,data(){return{students:[]}},mounted(){// 页面加载完成后发送异步请求查询数据var _this this;axios({method:get,url:http://localhost:8080/ssm-ajax/findAll}).then(function (resp) {_this.brands resp.data;})}
}) 修改视图 定义 div idapp/div 指定该 div 标签受 Vue 管理 将 body 标签中所有的内容拷贝作为上面 div 标签中 删除表格的多余数据行只留下一个 在表格中的数据行上使用 v-for 指令遍历 tr v-for(stu,i) in studentstd{{i1}}/tdtd{{stu.name}}/tdtd{{stu.age}}/tdtdbutton typebutton data-bs-togglemodal data-bs-target#modifyModal clicktoUptStudent(stu) classbtn btn-primary uptBtn修改/buttonbutton typebutton data-bs-togglemodal data-bs-target#confirmModal clickdelId stu.id classbtn btn-danger delBtn删除/button/td
/tr
整体页面代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div idappa hrefaddBrand.htmlinput typebutton value新增/abrhrtable classtable text-centerthead classtable-darktrthID/ththName/ththAge/thth classcol-2操作/th/tr/theadtbodytr v-for(stu,i) in studentstd{{i1}}/tdtd{{stu.name}}/tdtd{{stu.age}}/tdtdbutton typebutton data-bs-togglemodal data-bs-target#modifyModal clicktoUptStudent(stu) classbtn btn-primary uptBtn修改/buttonbutton typebutton data-bs-togglemodal data-bs-target#confirmModal clickdelId stu.id classbtn btn-danger delBtn删除/button/td/tr/tbody/table
/div
script srcjs/axios-0.18.0.js/script
script srcjs/vue.js/scriptscriptnew Vue({el: #app,data(){return{students:[]}},mounted(){// 页面加载完成后发送异步请求查询数据var _this this;axios({method:get,url:../findAll}).then(function (resp) {_this.students resp.data;})}})
/script
/body
/html
1.5.3 添加功能
整体流程如下 注意前端代码的关键点在于使用 v-model 指令给标签项绑定模型数据利用双向绑定特性在发送异步请求时提交数据。 在 list.html 页面引入 vue 的js文件 script srcjs/vue.js/script 创建 Vue 对象 在 Vue 对象中定义模型数据 student 定义一个 submitForm() 函数用于给 提交 按钮提供绑定的函数 在 submitForm() 函数中发送 ajax 请求并将模型数据 student 作为参数进行传递 new Vue({el: #app,data(){return {student:{}}},methods:{submitForm(){// 发送ajax请求添加var _this this;axios({method:post,url:http://localhost:8080/ssm-ajax/addStudent,data:_this.student}).then(function (resp) {// 判断响应数据是否为 successif(resp.data success){location.href http://localhost:8080/ssm-ajax/list.html;}})}}
}) 修改视图 定义 div idapp/div 指定该 div 标签受 Vue 管理 将 body 标签中所有的内容拷贝作为上面 div 标签中 给每一个表单项标签绑定模型数据。最后这些数据要被封装到 student 对象中 !-- 添加/修改-模态框 --
div classmodal fade idaddModaldiv classmodal-dialog modal-lgdiv classmodal-content!-- 模态框头部 --div classmodal-headerh4 classmodal-title新增学生/h4button typebutton classbtn-close data-bs-dismissmodal/button/divform action methodpost!-- 模态框内容 --div classmodal-bodydiv classcontainer mt-3div classmb-3 mt-3label fornewname classform-label姓名:/labelinput typetext classform-control idnewname v-modelstudent.name placeholderEnter Name namename/divdiv classmb-3label fornewage classform-label年龄:/labelinput typenumber classform-control idnewage v-modelstudent.age placeholderEnter Age nameage/div/div/div!-- 模态框底部 --div classmodal-footerbutton typebutton classbtn btn-primary data-bs-dismissmodal clicksubmitForm提交/buttonbutton typebutton classbtn btn-danger data-bs-dismissmodal关闭/button/div/form/div/div
/div
通过上面的优化前端代码确实简化了不少。但是页面依旧是不怎么好看那么接下来我们学习 Element它可以美化页面。
总结
以上就是今天的内容~
欢迎大家点赞收藏⭐转发 如有问题、建议请您在评论区留言哦。
最后转载请注明出处
