一、简介
什么是vue?
快速入门
<!-- 3.准备视图元素 --><div id="app"><!-- 6.数据渲染 --><h1>{{ msg }}</h1></div><script type="module">// 1.引入vueimport { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'// 2.创建Vue实例const app = createApp({// 4.定义数据模型data() {return {msg: 'Hello Vue!'}}}).mount('#app') //5.挂载视图</script>
二、基础-常用指令
v-for
<div id="app"><!-- <p v-for="name in names">{{name}}</p> --><p v-for="(name, index) in names">{{index + 1}} : {{name}}</p></div><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data(){return {names: ['张无忌', '张三丰', '韦一笑', '殷天正']}}}).mount('#app')</script>
v-bind
<div id="app"><a v-bind:href="url">链接1</a><br><br><a :href="url">链接2</a></div><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data(){return {url: "https://www.4399.com"}}}).mount('#app')</script>
v-if&v-show
<tr v-for="(user, index) in userList"><td>{{index+1}}</td><td>{{user.name}}</td><td> <img :src="user.image"> </td><td><span v-if="user.gender==1">男</span><span v-else-if>女</span><span v-else>妖</span></td><td><span v-show="user.job==1">讲师</span><span v-show="user.job==2">班主任</span><span v-show="user.job!=1 && user.job!=2">其他</span></td>
v-model-双向数据绑定
<div id="app"><input type="text" v-model="name"> {{name}}</div><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data(){return {name: 'Tom'}}}).mount('#app')</script>
v-on
<div id="app"><input type="button" value="点我一下试试" v-on:click="console.log('试试就试试1')"><input type="button" value="再点我一下试试" v-on:click="handle"><input type="button" value="再点我一下试试3" @click="handle"></div><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({// 数据模型data(){return {name: 'Vue'}},// 定义函数methods: {handle(){console.log("试试就试试3");}},}).mount('#app')</script>
案例：获取用户输入条件
效果图上面列表
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue3-案例1</title><style>table,th,td {border: 1px solid #000;border-collapse: collapse;line-height: 50px;text-align: center;}#center,table {width: 60%;margin: auto;}#center {margin-bottom: 20px;}img {width: 50px;}input,select {width: 17%;padding: 10px;margin-right: 30px;border: 1px solid #ccc;border-radius: 4px;}.btn {background-color: #ccc;}</style>
</head><body><div id="app"><div id="center">姓名: <input type="text" name="name" v-model="name">性别:<select name="gender" v-model="gender"><option value="1">男</option><option value="2">女</option></select>职位:<select name="job" v-model="job"><option value="1">讲师</option><option value="2">班主任</option><option value="3">其他</option></select><input class="btn" type="button" value="查询" @click="query"></div><!-- {{name}}, {{gender}}, {{job}} --><table><tr><th>序号</th><th>姓名</th><th>头像</th><th>性别</th><th>职位</th><th>入职时间</th><th>更新时间</th></tr><tr v-for="(user, index) in userList"><td>{{index+1}}</td><td>{{user.name}}</td><td> <img :src="user.image"> </td><td><span v-if="user.gender==1">男</span><span v-else-if>女</span><span v-else>妖</span></td><td><span v-show="user.job==1">讲师</span><span v-show="user.job==2">班主任</span><span v-show="user.job!=1 && user.job!=2">其他</span></td><td>{{user.entrydate}}</td><td>{{user.updatetime}}</td></tr></table></div><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data() {return {name: '',gender: '',job: '',userList: [{"id": 1,"name": "谢逊","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg","gender": 1,"job": 1,"entrydate": "2023-06-09","updatetime": "2023-07-01 00:00:00"},{"id": 2,"name": "韦一笑","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/2.jpg","gender": 1,"job": 1,"entrydate": "2023-06-09","updatetime": "2023-07-01 00:00:00"},{"id": 3,"name": "黛绮丝","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/3.jpg","gender": 2,"job": 2,"entrydate": "2023-06-09","updatetime": "2023-07-01 00:00:00"},{"id": 4,"name": "殷天正","image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg","gender": 1,"job": 3,"entrydate": "2023-06-09","updatetime": "2023-07-01 00:00:00"}]}},methods: {query() {console.log(this.name + " " + this.gender + " " + this.job);}}}).mount("#app");</script>
</body></html>
三、Ajax
什么是ajax?
<input id="btn1" type="button" value="获取数据"><div id="div1"></div><script>document.querySelector('#btn1').addEventListener('click', ()=> {//1. 创建XMLHttpRequest var xmlHttpRequest = new XMLHttpRequest();//2. 发送异步请求xmlHttpRequest.open('GET', 'https://mock.apifox.cn/m1/3128855-0-default/emp/list');xmlHttpRequest.send();//发送请求//3. 获取服务响应数据xmlHttpRequest.onreadystatechange = function(){if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;}}})</script>
同步和异步
原生ajax
小结
axios使用
<input type="button" value="获取数据GET" id="btnGet"><input type="button" value="删除数据POST" id="btnPost"><!-- 1.引入js文件 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><!-- <script src="../js/axios.js"></script> --><script>document.querySelector("#btnGet").addEventListener('click', function(){// 调用axios发送get请求 https://mock.apifox.cn/m1/3083103-0-default/emps/listaxios({method: 'GET',url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/list'}).then((result)=>{ //成功回调函数console.log(result.data); console.log(result.data.data); }).catch((err)=>{ //失败回调函数alert(err);})})document.querySelector("#btnPost").addEventListener('click', function(){// 调用axios发送post请求 https://mock.apifox.cn/m1/3083103-0-default/emps/updateaxios({method: 'POST',url: 'https://mock.apifox.cn/m1/3083103-0-default/emps/update',data: 'id=1' //封装请求参数}).then((result)=>{ //成功回调函数console.log(result.data); }).catch((err)=>{ //失败回调函数alert(err);})})</script>
axios请求方式别名
axios案例
<!-- 1.引入js文件 --><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data() {return {name: '',gender: '',job: '',userList: []}},methods: {// 输出搜索框中数据query() {console.log(this.name + " " + this.gender + " " + this.job);// https://web-server.itheima.net/emps/listaxios.get('https://web-server.itheima.net/emps/list', {params: {name: this.name,gender: this.gender,job: this.job}}).then((result)=>{ //成功回调函数console.log(result.data); this.userList = result.data.data; })}}}).mount("#app");</script>
问题：没有自动加载——生命周期
四、生命周期
生命周期
<div id="app"><p v-for="(name, index) in names">{{index + 1}} : {{name}}</p></div><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({// 数据模型data(){return {names: ['张无忌', '张三丰', '韦一笑', '殷天正']}},// 定义函数methods: {},// 钩子函数(生命周期方法)created() {console.log("对象创建完成....");},mounted() {console.log("页面挂载完成...");},}).mount('#app')</script>
案例改造
// 钩子函数(生命周期方法)mounted() {// 页面加载完成即可查询this.query();},
总结
五、案例
省市县
async&await
