一、簡介
什么是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
