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....

February 14, 2022 · 1 分钟 · Lizicai

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对象中的数据....

December 30, 2021 · 6 分钟 · Lizicai

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....

December 10, 2021 · 7 分钟 · Lizicai

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() 清空指定元素的所有子元素 <!...

November 30, 2021 · 4 分钟 · Lizicai

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="....

November 24, 2021 · 5 分钟 · Lizicai

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 对象名 = { 变量名 : 变量值, 变量名 : 变量值, ....

November 19, 2021 · 5 分钟 · Lizicai

JavaScript一Li.066

JavaScript JS的2种引入方式 直接在页面写 在页面引入 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快速入门</title> </head> <body> <button id="btn">点我呀</button> <!--引入js的方式一: 内部方式--> <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....

November 14, 2021 · 7 分钟 · Lizicai

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); } <?...

November 4, 2021 · 7 分钟 · Lizicai