Javascript、axios、vue基础命令快速学习
1.js: JavaScript
基础学习
JavaScript基础学习简单案例
1.点击img1，则展示img1图片默认，点击img2则展示img2图片
2.输入框鼠标聚焦onfocus后，显示小写toLowerCase()，失去焦点onblur后显示大写toUpperCase()
3.点击全选按钮，所有复选框为被选中状态，点击反选则取消勾选状态
JavaScript案例
2.Vue2入门
Vue是一套前端框架，免除JavaScript中的DOM操作，简化书写。
基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。
2.1下载Vue.js文件，引入到项目中
<script src="js/vue.js"></script>
2.2Vue基础指令
v-bind:给标签属性绑定vue中定义的模型数据，可简写为：
v-model：给表单项双向绑定vue中定义的模型数据
v-on：给标签绑定事件，v-on:事件名="方法名()"，可简写为@事件名="方法名()"
v-if、v-else-if、v-else; v-show、v-for
<div id = "study01"> <!-- 插值表达式{{message}}:将变量的值显示到标签内容体 --> <p>{{message}}</p> <!-- 展示到标签中使用 v-model --> <input type="text" v-model="message"> </div> <div id = "study02"> <!-- v-bind:href、v-model的使用 --> <a v-bind:href="url">链接1</a> <a :href="url">链接2</a> <br> <!-- 在text里面修改网址，也会直接修改了链接12的网址：双向绑定 --> <input type="text" v-model="url"> <br> <!-- v-on使用:给HTML标签绑定事件 --> <input type="button" value="按钮1" v-on:click="handle()"> <input type="button" value="按钮2" @click="handle()"> <br> <!-- v-if、v-else-if、v-else; v-show --> 年龄<input type="text" v-model="age">经判定，为： <span v-if="age <= 35">年轻人</span> <span v-else-if="age>35&&age<=60">中年人</span> <span v-else>老年人</span> <br> <!-- v-show --> 年龄<input type="text" v-model="age">经判定，为： <span v-show="age <= 35">年轻人</span> <span v-show="age>35&&age<=60">中年人</span> <span v-show>老年人</span> <br> <!-- v-for --> <p v-for="ithem in addrs">{{ithem}}</p> <p v-for="(ithem,index) in addrs">{{index+1}},{{ithem}}</p> </div> <script> new Vue({ //定义Vue接管的区域 el:"#study01", data: { //定义模型数据 message: "hello Vue" } }) new Vue({ el: "#study02", data: { url:"http://www.baidu.com", age: 20, addrs: ["北京","上海","广州","深圳"] }, methods:{ //定义绑定的自定义函数 handle: function(){ alert("按钮被点击了..."); } } }) </script>
2.3案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue案例1</title> <script src="js/vue.js"></script> </head> <body> <div id="app"> <table border="1" cellspacing="0" width="60%"> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>成绩</th> <th>等级</th> </tr> <tr align="center" v-for="(user,index) in users"> <td>{{index+1}}</td> <td>{{user.name}}</td> <td>{{user.age}}</td> <td>{{user.gender==1?"男":"女"}}</td> <td>{{user.score}}</td> <td v-if="user.score<60" style="color: red;">不及格</td> <td v-else-if="user.score>=60&&user.score<80">及格</td> <td v-else>优秀</td> </tr> </table> </div> </body> <script> new Vue({ el:"#app", data: { users: [ { name: "Tom", age: 20, gender: 1, score: 78 }, { name: "Rose", age: 18, gender: 2, score: 86 }, { name: "Jerry", age: 26, gender: 1, score: 90 }, { name: "Tony", age: 30, gender: 1, score: 52 } ] } }) </script> </html>
3.Ajax和Axios
3.1Ajax
Asynchronous JavaScript And XML，异步的JavaScript和XML
作用：
数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据
异步交互：可以在不刷新加载整个页面的情况下，与服务器交换数据且更新部分网页的技术
3.2Axios
官方文档：起步 | Axios中文文档 | Axios中文网 (axios-http.cn)
Axios对原生的Ajax进行封装，简化书写，快速开发。
3.2.1下载并引入Axios的js文件
3.2.2基础学习
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Axios基础学习</title> <script src="js/axios-0.18.0.js"></script> </head> <body> <input type="button" value="获取数据Get请求" onclick="get()"> <input type="button" value="删除数据Post请求" onclick="post()"> </body> <script> //基础学习 function get(){ axios({ method: "get",//发送get请求 url: "https://mock.apifox.cn/m1/2954513-0-default/emp/list"//请求地址 }).then(result=>{ console.log(result.data);//获取响应回来的数据要加data }) //优化写法 // axios.get("https://mock.apifox.cn/m1/2954513-0-default/emp/list").then(result=>{ // console.log(result.data); // }) } function post(){ axios({ method: "post", url: "https://mock.apifox.cn/m1/2954513-0-default/emp/deleteById", data: "id=10" //获取id=10的数据 }).then(result=>{ console.log(result.data); }) } </script> </html>
3.3.3案例
页面刷新 vue中：mounted()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Axios案例1</title> <script src="js/axios-0.18.0.js"></script> <script src="js/vue.js"></script> </head> <!-- 页面加载的函数vue中：mounted() --> <body> <div id = "app"> <table border="1" cellspacing="0" width="60%"> <tr> <th>编号</th> <th>姓名</th> <th>图像</th> <th>性别</th> <th>职位</th> <th>入职日期</th> <th>最后操作时间</th> </tr> <tr align="center" v-for="(emp,index) in emps"> <td>{{index+1}}</td> <td>{{emp.name}}</td> <td> <img v-bind:src="emp.image" width="70px" height="50px"> </td> <td> {{emp.gender==1?"男":"女"}} </td> <td>{{emp.job}}</td> <td>{{emp.entrydate}}</td> <td>{{emp.updatetime}}</td> </tr> </table> </div> </body> <script> new Vue({ el:"#app", data:{ emps: [ {name: "小名",img: "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",gender: 1,job: "班主任",entrydate: "2018-09-10",updatetime:"2020-02-28"} ] }, //mounted:页面加载完成后的方法 mounted(){ axios.get("https://mock.apifox.cn/m1/2954513-0-default/emp/list").then(result=>{ //注意result.data得到响应回来的数据，该数据中又有code、message、data，数据在data中 console.log(result.data.data); //给emps赋值 //不能直接写emps=result.data.data,这里的emps不是指vue中的ems，而是外层的 this.emps=result.data.data; }) } }) </script> </html>
