Hi 👋 欢迎来逛逛~
可关注知乎 RSS Telegram Twitter…

Vue和Element二Li.072

Vue的自定义组件自宣言组件: 本质上, 组件是带有一个名称且可复用的Vue实例 Vue.component(组件名称,{ props:组件的属性, data:组件的数据函数, template:组件解析的标签模板 } ) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定义组件</title> <script src="../js2/vue.js"></script> </head> <body> <div id="div"> <my-button>我的按钮</my-button> </div> </body> <script> Vue.component("my-button",{ // 属性 props:["style"] , // 数据函数 data: function (){ return{ msg:"我的按钮" } }, // 解析标签模板 template:"<button style='color:red'>{{msg}}</button>" }); new Vue({ el:"#div" }) </script> </html> Vue的生命周期生命周期的八个阶段状态阶段周期 beforeCreate 创建前 created 创建后 beforeMount 载入前 mounted 载入后 beforeUpdate 更新前 updated 更新后 beforeDestroy 销毁前 destroyed 销毁后 Vue 异步操作在Vue中发送异步请求, 本质上还是AJAX....

Vue和Element一Li.071

Vue 简介 Vue 是一套构建用户界面的渐进式前端框架。只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。通过尽可能简单的 API来实现响应数据的绑定和组合的视图组件。特点易用：在有HTML CSS JavaScript 的基础上，快速上手。灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。性能：20kb min+gzip运行大小、超快虛拟DOM、最省心的优化。 Vue 入门 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快速入门</title> </head> <body> <div id="div"> {{msg}} </div> </body> <script src="js/vue.js"></script> <script> // 脚本 new Vue({ el:"#div", data:{ msg:"Hello Vue" } }) </script> </html> Vue 核心对象: 每一个Vue程序都是从一个Vue核心对象开始的 let vm = new Vue({ 选项列表; }) Vue的程序包含视图和脚本两个核心部分选项列表 el选项: 用于接收获取到页面中的元素.(根据常用选择器获取) data选项: 用于保存当前Vue对象中的数据....

AJAX Li.070

AJAX 介绍 AJAX(Asynchronous JavaScript And XML): 异步的JavaScript和XML 本身不是新技术, 而是多个技术的综合. 用于快速创建动态网页的技术. 一般的负面如果需要更新内容, 必需重新加载整个页面而AJAX通过浏览器与服务器进行少量数据交换, 不可以使网页异步更新. 不重新加载整个页面, 对网页部分内容局部更新原生JavaScript 实现AJAX 核心对象：xMLHttpRequest 用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。打开链接：open(method,url,async) method ：请求的类型 GET 或 POST. url：请求资源的路径, async：true(异步) 或false(同步）。发送请求：send(String params) params：请求的参数(POST 专用）。处理响应：onreadystatechange readyState ：0-请求末初始化，1-服务器连接已建立，2-请求已接收，3-请求处理中，4-请求已完成，且响应已就绪。 status：200-响应已全部OK。获得响应数据形式 response Text ：获得字符串形式的响应数据。 responseXML：获得XML形式的响应 jQuery的Get方式实现AJAX 核心语法：$.get(url,[data],[callback],[type]); url：请求的资源路径 data：发送给服务器端的请求参数，格式可以是key=value，也可以是js对象 callback ：当请求成功后的回调函数，可以在函数中编写我们的逻辑代码 type : 预期的返回数据的类型, 取值可以是xml, html, js, ison, text等 @WebServlet("/userServlet") public class UserServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req....

jQuery二Li.069

jQuery DOM 常用方法方法作用 html() 获取标签的文本 html(value) 设置标签的文本内容,解析标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操作文本</title> </head> <body> <div id="div">我是div</div> <input type="button" id="btn1" value="获取div的文本"> <input type="button" id="btn2" value="获取div的文本"> </body> <script src="../jQuery/jquery-3.6.0.js"></script> <script> // html() 获取标签的文本 let div = $("div"); // html(value) 设置标签的文本内容,解析标签 let btn1 = $("#btn1") btn1.click(cc1) function cc1() { alert(div.html()) } let btn2 = $("#btn2") btn2.click(cc2) function cc2(){ div.html("<b>小明</b>") } </script> </html> jQuery 操作对象方法作用 $("元素") 创建指定元素 append(element) 添加成最后一个子元素,由添加者对象调用 appendTo(element) 添加成最后一个子元素,由被添加者对象调用 prepend(element) 添加成第一个子元素,由添加者对象调用 prependTo(element) 添加成第一个子元素,由被添加者对象调用 before(element) 添加到当前元素的前面,两者是兄弟关系,由添加者对象调用 after(element) 添加到当前元素的后面,两者之间是兄弟关系,由添加者对象调用 remove() 删除指定元素(自己移除自己) empty() 清空指定元素的所有子元素 <!...

jQuery一Li.068

jQuery 介绍 jQuery是一个JavaScript库封装了很多预定义的函数, 获取元素, 执行隐藏移动等目的就是在使用时直接调用, 不需要再重复定义, 这样就可以极大地简化了JavaScript编程 jQuery 快速入门 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快速入门jQuery</title> </head> <body> <div id="div">我是div</div> </body> <script src="../jQuery/jquery-3.6.0.js"></script> <script> // let div = document.getElementById("div"); // alert(div.innerText) // jQuery 方式 let jqDiv = $("#div"); alert(jqDiv) alert(jqDiv.html()) </script> </html> JS对象和jQuery对象黑的 jQuery本质上虽然也是JS, 但如果想使用jQuery的属性和方法那么必须保证对象是jQuery对象, 而不是JS方式获得的DOM对象二者的API方法不能混合使用, 若想使用对方的API, 需要进行对象转换 JS的DOM对象黑的成jQuery对象 $(JS的DOM对象); jQuery对象转换成jQuery对象 jQuery对象[索引]; jQuery对象.get(索引); <body> <div id="div">我是div</div> </body> <script src="....

JavaScript二Li.067

JavaScript 面向对象, 类的定义和使用定义格式 class 类名{ constructor(变量列表){ 变量赋值; } 方法名(参数列表){ 方法体; return 返回值; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>类的定义和使用</title> </head> <body> </body> <script> class Person{ constructor(name,age) { this.name = name this.age = age } // show method show(){ document.write(this.name+" "+this.age+"<br/>"); } eat(){ document.write("吃饭<br>"); } } let p = new Person("张三",23) p.show() p.eat() </script> </html> 字面量定义类和使用 let 对象名 = { 变量名 : 变量值, 变量名 : 变量值, ....

JavaScript一Li.066

JavaScript JS的2种引入方式直接在页面写在页面引入 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快速入门</title> </head> <body> <button id="btn">点我呀</button>  <script type="text/javascript"> document.getElementById("btn").onclick = function (){ alert("点我干嘛") } </script> <script src="js/my.js"></script> </body> </html> 输入输出语句输入框 prompt(“提示内容”); 弹出警告框 alert(“提示内容”); 控制台输出 console.log(“显示内容”); 页面内容输出 document.write(“显示内容”); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>输入输出语句</title> </head> <body> <script> /* * 输入框 * prompt("提示内容"); * 弹出警告框 * alert("提示内容"); * 控制台输出 * console....

MyBatis框架三Li.065

注解开发MyBatis 操作创建接口和查询方法在核心配置文件中配置映射关系编写测试类 package com.lizicai.mapper; import com.lizicai.bean.Student; import org.apache.ibatis.annotations.Delete; import org.apache.ibatis.annotations.Insert; import org.apache.ibatis.annotations.Select; import org.apache.ibatis.annotations.Update; import java.util.List; public interface StudentMapper { // 查询 @Select( "SELECT * FROM student") public abstract List<Student> selectAll(); // 插入数据 @Insert("INSERT INTO student VALUES (#{id},#{name},#{age})") public abstract Integer insert(Student stu); // 修改数据 @Update("UPDATE student SET name=#{name},age=#{age} WHERE id=#{id}" ) public abstract Integer update(Student stu); // 删除数据 @Delete("DELETE FROM student WHERE id=#{id}") public abstract Integer delete(Integer id); } <?...