本文详细介绍了Vue.js的开发工具DevTools的使用，列表渲染、条件渲染、属性绑定、计算器实现、表单操作和监听器的运用，以及Vue的生命周期。通过实例展示了如何在实际开发中运用这些关键特性，帮助读者深入理解并掌握Vue.js的核心知识。
文章目录
01-devtool工具使用(掌握)
-
开发步骤
- ①解压vuedevtools
- ②打开google浏览器，打开扩展程序
- ③开启开发者模式，加载已解压的扩展程序
-
①解压vuedevtools
-
②打开google浏览器，打开扩展程序
-
③开启开发者模式，加载已解压的扩展程序
02-Vue列表渲染(掌握)
-
概述
- Vue中通过v-for指令来实现将列表渲染到页面
-
语法
//item : 列表中的元素 //itemList : 列表 v-for="item in itemList" //index : 元素在列表中的位置 v-for="(item,index) in itemList" -
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>02-Vue列表渲染</title> </head> <body> <div id="app"> <table border="1px" cellpadding="10px" cellspacing="0px" rules="all" width="400px" height="300px"> <tr> <th>序号</th> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> <tr v-for="(stu,index) in stuList"> <td v-text="index"></td> <td v-text="stu.stuId"></td> <td v-text="stu.stuName"></td> <td v-text="stu.age"></td> </tr> </table> </div> </body> <script src="js/vue.js"></script> <script> var vue = new Vue({ el: "#app", data: { stuList:[ { stuId:1, stuName:"张三", age:18 }, { stuId:2, stuName:"李四", age:19 }, { stuId:3, stuName:"王五", age:20 } ] }, methods: {} }) </script> </html>
03-Vue条件渲染(掌握)
-
概述
- 根据条件决定是否渲染指定组件。
- v-if : 组件直接不在dom树中。
- v-show ：组件还在dom书中，只是修改了display=none
-
适用场景
- 用于登录状态的显示。
-
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>03-Vue条件渲染</title> </head> <body> <div id="app"> <span v-if="flag">if的span</span><br> <span v-show="flag">show的span</span> </div> </body> <script src="js/vue.js"></script> <script> var vue = new Vue({ el: "#app", data: { flag: false }, methods: {} }) </script> </html>
04-Vue属性绑定(掌握)
-
概述
- 使用"v-bind:属性"指令，给元素的属性设置Vue实例中的变量值，也可以简写成":属性"
-
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>04-Vue属性绑定</title> </head> <body> <div id="app"> <input type="text" v-bind:value="msg"> <input type="text" :value="msg"> <a :href="myUrl">跳转</a> </div> </body> <script src="js/vue.js"></script> <script> var vue = new Vue({ el: "#app", data: { msg: "fuck", myUrl:"http://www.baidu.com" }, methods: {} }) </script> </html> -
注意事项
- 需要接收Vue容器中的组件的输入值就需要用到双向绑定v-model
05-制作计算器(掌握)
-
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>05-制作计算器</title> </head> <body> <div id="app"> <input type="text" v-model="num1"> <select v-model="operate"> <option value="+">加</option> <option value="-">减</option> <option value="*">乘</option> <option value="/">除</option> </select> <input type="text" v-model="num2"> = <span v-text="result"></span><br> <button @click="calculate()">计算</button> </div> </body> <script src="js/vue.js"></script> <script> var vue = new Vue({ el: "#app", data: { num1: 1, num2: 1, operate: "+", result: 2 }, methods: { calculate() { //执行计算 var result = eval(this.num1 + this.operate + this.num2); console.log(result); this.result = result; } } }) </script> </html>
06-表单操作(掌握)
-
代码准备
<form > 姓名:<input type="text" /><br><br> 密码:<input type="text" /><br><br> 性别:<input type="radio" name="sex" value="male" >男 <input type="radio" name="sex" value="female" >女<br/><br> 爱好:<input type="checkbox" value="java" >java <input type="checkbox" value="html">html <input type="checkbox" value="php">php<br/><br> 职业: <select > <option value="java工程师">java工程师</option> <option value="html工程师">html工程师</option> <option value="全栈工程师">全栈工程师</option> </select><br><br> 个人简介<textarea ></textarea> <br><br> <input type="submit" value="提交修改" /> </form> -
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>20-Vue的事件处理</title> </head> <body> <div id="app"> <form @submit.prevent="fn1()"> 姓名:<input type="text" v-model="user.userName"/><br><br> 密码:<input type="text" v-model="user.userPwd"/><br><br> 性别:<input type="radio" name="sex" value="male" v-model="user.gender">男 <input type="radio" name="sex" value="female" v-model="user.gender">女<br/><br> 爱好:<input type="checkbox" value="java" v-model="user.hobbys">java <input type="checkbox" value="html" v-model="user.hobbys">html <input type="checkbox" value="php" v-model="user.hobbys">php<br/><br> 职业: <select v-model="user.job"> <option value="java工程师">java工程师</option> <option value="html工程师">html工程师</option> <option value="全栈工程师">全栈工程师</option> </select><br><br> 个人简介<textarea v-model="user.introduce"></textarea> <br><br> <input type="submit" value="提交修改"/> </form> </div> </body> <script src="js/vue.js"></script> <script> var vue = new Vue({ el: "#app", data: { user: { userName: "", userPwd: "", gender: "male", hobbys: [], job: "java工程师", introduce: "这个人很懒，什么都没留下。" } }, methods: { fn1(){ console.log(this.user); } } }) </script> </html>
07-Vue监听器(掌握)
-
概述
- 监听数据的变化
-
分类
- ①监听简单类型数据的变化
- ②监听引用类型数据的变化
-
①监听简单类型数据的变化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>07-Vue监听器</title> <!--①监听简单类型数据的变化--> </head> <body> <div id="app"> <input type="text" v-model="info" @change="fn1()"> </div> </body> <script src="js/vue.js"></script> <script> var vue = new Vue({ el: "#app", data: { info: "" }, methods: { fn1() { console.log("change新值 : " + this.info) } }, watch: { info(newVal, oldVal) { console.log("新值 : " + newVal); console.log("老值 : " + oldVal); } } }) </script> </html> -
②监听引用类型数据的变化
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>07-Vue监听器</title> <!--②监听引用类型数据的变化--> </head> <body> <div id="app"> <input type="text" v-model="user.userName" @change="fn1()"> </div> </body> <script src="js/vue.js"></script> <script> var vue = new Vue({ el: "#app", data: { user: { userName: "" } }, methods: { fn1() { console.log("change新值 : " + this.user.userName); } }, watch: { "user.userName"(newVal, oldVal) { console.log("新值 : " + newVal); console.log("老值 : " + oldVal); } /* "user.userName": { handler: function (newVal, oldVal) { console.log("新值 : " + newVal); console.log("老值 : " + oldVal); } }*/ } }) </script> </html>
08-Vue的生命周期(难点)
-
钩子函数
- beforeCreate : 创建vue对象后，初始化事件和钩子函数，未初始化data和methods
- created : 创建vue对象后，初始化data和methods
- beforeMount : 生成虚拟dom树，虚拟dom树没有挂载到页面
- mouted : 根据虚拟dom树生成真实dom树，真实dom树挂载到页面
- beforeDestroy : Vue对象销毁之前
- destroyd : Vue对象销毁完成
- beforeUpdate : 修改后，生成虚拟dom树
- updated : 修改后，根据虚拟dom树生成真实dom树
-
代码实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>08-Vue的生命周期</title> </head> <body> <div id="app"> <span v-text="msg" id="spn"></span><br> <button @click="myDestroy()">销毁</button><br> <button @click="updateMsg()">修改msg</button> </div> </body> <script src="js/vue.js"></script> <script> var vue = new Vue({ el: "#app", data: { msg: "hello" }, methods: { show() { console.log("show show show"); }, myDestroy(){ this.$destroy(); }, updateMsg(){ this.msg = "fuck"; } }, beforeCreate() {//没有初始化data和methods console.log("--------------------------------beforeCreate--------------------------------"); console.log("msg = " + this.msg); this.show(); }, created(){//初始化data和methods console.log("--------------------------------created--------------------------------"); console.log("msg = " + this.msg); this.show(); }, beforeMount(){//生成虚拟dom树 console.log("--------------------------------beforeMount--------------------------------"); var spnEle = document.getElementById("spn"); console.log(spnEle.innerHTML); }, mounted(){//将虚拟dom树变成了真实dom树 console.log("--------------------------------mounted--------------------------------"); var spnEle = document.getElementById("spn"); console.log(spnEle.innerHTML); }, beforeDestroy(){ console.log("--------------------------------beforeDestroy--------------------------------"); }, destroyed(){ console.log("--------------------------------destroyed--------------------------------"); }, beforeUpdate(){//修改后，生成虚拟dom树 console.log("--------------------------------beforeUpdate--------------------------------"); var spnEle = document.getElementById("spn"); console.log(spnEle.innerHTML); }, updated(){//修改后，生成真实dom树 console.log("--------------------------------updated--------------------------------"); var spnEle = document.getElementById("spn"); console.log(spnEle.innerHTML); } }) </script> </html>
09-Xml概述(了解)
-
概述
- XML : extensive markup language , 可扩展标签语言
- HTML : hyper text markup language , 超文本标签语言
-
作用
- 用来传输和存储数据、作为配置文件。
-
树结构
<?xml version="1.0" encoding="UTF-8" ?> <bookstore> <book category="magic"> <title lang="english">Harry Potter</title> <author>J K. Rowling</author> <year>2005</year> <price>29.9</price> </book> </bookstore>
10-Xml组成(了解)
- 组成
- 文档声明
- 属性
- 元素
- 注释
- CDATA
11-Xml约束(了解)
- 概述
- 在xml中，标签、标签内容、属性、属性值都可以随意写，这就给开发人员解析xml文件造成困难。
- 约束
- DTD约束 : 标签、属性做出限制，比如：mybatis。
- schema约束 : 标签、标签内容、属性、属性值做出限制，比如：spring
12-DTD约束(了解)
-
概述
- 标签、属性做出限制，比如：mybatis。
-
①内部结合
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE students [ <!ELEMENT students (student*)> <!ELEMENT student (name,age,sex)> <!ELEMENT name (#PCDATA)> <!ELEMENT age (#PCDATA)> <!ELEMENT sex (#PCDATA)> <!ATTLIST student id CDATA #REQUIRED> <!ATTLIST student classname CDATA #IMPLIED>]> <students> <student id="1" classname="WH222222"> <name>张三</name> <age>18</age> <sex>男</sex> </student> </students> -
②外部结合
<?xml version="1.0" encoding="UTF-8"?> <!-- xml文件中有一个根节点students,students下可以有n个student子节点(包括0个) --> <!ELEMENT students (student*)> <!-- student节点下,可以有name节点、age节点和sex节点,且name节点、age节点和sex节点是按照先后顺序出现 --> <!ELEMENT student (name,age,sex)> <!-- 定义name节点,且节点内容的类型为字符 --> <!ELEMENT name (#PCDATA)> <!-- 定义age节点,且节点内容的类型为字符 --> <!ELEMENT age (#PCDATA)> <!-- 定义sex节点,且节点内容的类型为字符 --> <!ELEMENT sex (#PCDATA)> <!-- 给节点student设置属性,属性名称为id,属性的类型为CDATA(字符), #REQUIRED指本属性是必须的 #IMPLIED指属性是可选的 --> <!ATTLIST student id CDATA #REQUIRED> <!-- 给节点student设置属性,属性名称为classname,属性的类型为CDATA(字符), #REQUIRED指本属性是必须的 #IMPLIED指属性是可选的 --> <!ATTLIST student classname CDATA #IMPLIED><?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE students SYSTEM "students.dtd"> <students> <student id="1" classname="WH220106"> <name>张三</name> <age>18</age> <sex>男</sex> </student> </students>
13-SCHEMA约束(了解)
-
概述
- 标签、标签内容、属性、属性值做出限制，比如：spring
-
代码实现
<?xml version="1.0" encoding="UTF-8"?> <schema xmlns="http://www.w3.org/2001/XMLSchema" targetNamespace="http://www.example.org/students" elementFormDefault="qualified"> <!-- element:申明元素,包括根元素和子元素 这里就是申明根元素class --> <element name="students"> <!-- 复杂元素 --> <complexType> <!-- squence:子元素按照顺序 1,子元素如果只有一种,那么就写一个,比如student元素 2,子元素如果有多种,那么就按想要的顺序写,比如:name,age,sex --> <sequence> <!-- 申明子元素student minOccurs:最少出现次数 maxOccurs:最大出现次数,数值或unbounded(无限大) --> <element name="student" minOccurs="0" maxOccurs="unbounded"> <complexType> <sequence> <!-- 申明子元素name --> <element name="name" type="string"></element> <!-- 申明子元素age simpleType:元素age是一个简单元素 restriction:age的取值范围在1~150之间 --> <element name="age"> <simpleType> <restriction base="integer"> <minInclusive value="1"></minInclusive> <maxInclusive value="150"></maxInclusive> </restriction> </simpleType> </element> <!-- 申明子元素 sex restriction:取值范围在"男"和"女" --> <element name="sex"> <simpleType> <restriction base="string"> <enumeration value="男"></enumeration> <enumeration value="女"></enumeration> </restriction> </simpleType> </element> </sequence> <!-- 定义了一个属性id use="required":属性是必须的 <pattern value="java_\d{4}"></pattern>:id的值必须满足这个正则表达式:以java_开头,后面跟四个数字 --> <attribute name="id" use="required"> <simpleType> <restriction base="string"> <pattern value="WH-\d{4}"></pattern> </restriction> </simpleType> </attribute> </complexType> </element> </sequence> </complexType> </element> </schema><?xml version="1.0" encoding="UTF-8" ?> <students xmlns="http://www.example.org/students"> <student id="WH-1234" > <name>张三</name> <age>110</age> <sex>男</sex> </student> </students>
扫一扫
5777
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
