當前位置：首頁 > 前端技术 > vue >内容正文

vue

一篇文章带你了解网页框架——Vue简单入门

發布時間：2023/12/20 vue 27 豆豆

生活随笔收集整理的這篇文章主要介紹了一篇文章带你了解网页框架——Vue简单入门小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

這篇文章將會介紹我們前端入門級別的框架——Vue的簡單使用

如果你以后想從事后端程序員，又想要稍微了解前端框架知識，那么這篇文章或許可以給你帶來幫助

溫馨提醒：在學習該文章前，請先學習HTML，CSS，JavaScript，Ajax等前端知識

Vue基礎

首先，我們從官方文檔中可以得到下述描述：

Vue是一套用于構建用戶界面的漸進式框架。
Vue的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。
另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。

其中我們需要格外注意的是：

Vue只負責前端頁面的設計，并不能完全實現前端的所有功能

Vue主要特點：

采用JavaScript框架
簡化Dom操作
響應式數據驅動

VsCode插件推薦

在正式開始介紹Vue之前，我想向大家安利一個VsCode插件——Live Server

Live Server 插件可以同步代碼和網頁的更新：

當你保存代碼時，你的頁面將會同步進行刷新，省略了手動點擊頁面的步驟，在開發中提供便利

Vue代碼框架

首先我們需要學會Vue的基本使用

導入相關包

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue"></script>

基本框架使用

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Vue基礎</title> </head><body> <div id="app">{{ message }}</div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{message:" 你好小黑! "}})</script> </body></html>

EL掛載點介紹

學習過Vue的基本使用后，我們先對EL掛載點做出最基本的介紹：

EL掛載點負責設置頁面中屬性與Vue屬性的連接
EL掛載點設置后，頁面屬性可以調用Vue中的數據（data）和方法（method）

EL掛載點注意點：

Vue的作用范圍在EL掛載點的本體元素以及后代元素中
Vue的EL掛載點可以依賴于各種選擇器，例如類選擇器等，但推薦使用ID選擇器
Vue的EL掛載點不可以作用在HTML和BODY兩個頁面最大元素上

我們給出簡單示例：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>el:掛載點</title> </head><body id="body"> {{ message }}<h2 id="app" class="app"> {{ message }}<span> {{ message }} </span></h2><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({// 以下均可使用，// el:"#app",// el:".app",// el:"div",// body無法連接el:"#body",data:{message:"秋落"}})</script> </body></html>

Data數據對象介紹

學習過Vue的基本使用后，我們對Data做出最基本的介紹：

Data用于存儲頁面元素中使用的各類屬性
屬性可以包括各種類型，例如文本，數組等復雜類型
渲染復雜類型數據時，遵循JavaScript的語法基本都可以使用

我們給出簡單示例：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>data:數據對象</title> </head><body><div id="app">{{ message }}<h2> {{ school.name }} {{ school.mobile }}</h2><ul><li>{{ campus[0] }}</li><li>{{ campus[3] }}</li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{message:"你好!",school:{name:"河南師范大學",mobile:"0373-3325000"},campus:["東校區","西校區","新鄉校區","平原湖校區"]}})</script> </body></html>

Vue本地應用

在介紹了Vue的基本使用后，我們針對Vue內部的各種屬性方法來做出一一介紹

每條屬性或方法我們都會給出解釋和相關案例

v-text

文本解釋：

v-text：設置標簽的文本值

代碼解釋：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-text指令</title> </head><body><div id="app"><h2 v-text="message+'!'">深圳</h2><h2 v-text="info+'!'">深圳</h2><h2>{{ message +'!'}}深圳</h2></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{message:"河南師范大學",info:"軟件學院"}})</script> </body></html>

v-html

文本解釋：

v-html：以html的格式來設置標簽的文本值

代碼解釋：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-html指令</title> </head><body><div id="app" v-html="context"></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{content:"<strong>河南師范大學</strong>"}})</script> </body></html>

v-on

文本解釋：

v-on：為元素綁定事件，可以采用@代替

代碼解釋：

<!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>v-on</title> </head> <body><div id="app"><input type="button" value="點擊" v-on:click="doIt"><input type="button" value="點擊" @click="doIt"></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",methods:{doIt:function(){alert("河南師范大學");}}})</script> </body> </html>

v-show

文本解釋：

v-show：根據表達值的真假，切換元素的顯示和隱藏（隱藏后源代碼仍存在）

代碼解釋：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>v-show指令</title></head><body><div id="app"><input type="button" value="切換顯示狀態" @click="changeIsShow"><input type="button" value="累加年齡" @click="addAge"><img v-show="isShow" src="./img/monkey.gif" alt=""><img v-show="age>=18" src="./img/monkey.gif" alt=""></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{isShow:false,age:17},methods: {// 進行 isShow 的true或false更改changeIsShow:function(){this.isShow = !this.isShow;},addAge:function(){this.age++;}},})</script></body> </html>

v-if

文本解釋：

v-if：根據表達值的真假，切換元素的顯示和隱藏（隱藏后，源代碼不存在）

代碼解釋：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-if指令</title> </head> <body><div id="app"><input type="button" value="切換顯示" @click="toggleIsShow"><p v-if="isShow">河南師范大學</p><p v-show="isShow">河南師范大學 - v-show修飾</p><h2 v-if="temperature>=35">熱死啦</h2></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{isShow:false,temperature:20},methods: {toggleIsShow:function(){this.isShow = !this.isShow;}},})</script> </body></html>

v-bind

文本解釋：

v-bind：設置元素的屬性（比如：src，title。class）

代碼解釋：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-bind指令</title><style>.active{border: 1px solid red;}</style> </head><body><div id="app"><img v-bind:src="imgSrc" alt=""><br><img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive"><br><img :src="imgSrc" alt="" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive"></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{imgSrc:"http://www.itheima.com/images/logo.png",imgTitle:"黑馬程序員",isActive:false},methods: {toggleActive:function(){this.isActive = !this.isActive;}},})</script> </body></html>

v-for

文本解釋：

v-for：根據數據生成列表結構

代碼解釋：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-for指令</title> </head><body><div id="app"><input type="button" value="添加數據" @click="add"><input type="button" value="移除數據" @click="remove"><ul><li v-for="(it,index) in arr">{{ index+1 }}城市推薦:{{ it }}</li></ul><h2 v-for="item in vegetables" v-bind:title="item.name">{{ item.name }}</h2></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{arr:["北京","上海","廣州","深圳"],vegetables:[{name:"魚"},{name:"雞"}]},methods: {add:function(){this.vegetables.push({ name:"紅燒魚" });},remove:function(){this.vegetables.shift();}},})</script> </body></html>

v-on+

文本解釋：

v-on+：補充v-on的部分知識點

代碼解釋：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-on補充</title> </head><body><div id="app"><input type="button" value="點擊" @click="doIt(666,'老鐵')"><input type="text" @keyup.enter="sayHi"></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",methods: {doIt:function(p1,p2){console.log("做it");console.log(p1);console.log(p2);},sayHi:function(){alert("吃了沒");}},})</script> </body></html>

v-model

文本解釋：

v-model：實現雙向綁定，便捷設置

代碼解釋：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>v-model指令</title> </head><body><div id="app"><input type="button" value="修改message" @click="setM"><input type="text" v-model="message" @keyup.enter="getM"><h2>{{ message }}</h2></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{message:"河南師范大學"},methods: {getM:function(){alert(this.message);},setM:function(){this.message ="軟件學院";}},})</script> </body></html>

案例：計算器

下面我們通過一個案例來鞏固前面所學習的一些知識點

案例要求：

我們希望通過"-"和"+"控制中間數字的大小（最小為0，最大為10）

知識點復習：

EL掛載點，Data數據，Methods方法
v-on，v-text方法

代碼展示：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>計算器</title><style>#app {width: 480px;height: 100px;margin: 200px auto;}.input-num {margin-top: 20px;height: 100%;display: flex;border-radius: 10px;overflow: hidden;box-shadow: 0 0 4px black;}.input-num button {width: 150px;height: 100%;font-size: 40px;color: gray;cursor: pointer;border: none;outline: none;}.input-num span {height: 100%;font-size: 40px;flex: 1;text-align: center;line-height: 100px;}</style></head><body><div id="app"><img src="http://www.itheima.com/images/logo.png" alt="" /><div class="input-num"><button @click="sub"> - </button><span>{{ num }}</span><button @click="add"> + </button></div></div></body></html><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script>/*1. data中定義num屬性,類型是數字,渲染到2個按鈕中間2. 減號綁定點擊事件,對應的方法名叫sub,大于0之前遞減3. 加號綁定點擊事件,對應的方法名叫add,小于0之前累加*/// 創建Vue實例var app = new Vue({el: "#app",data: {// 修改的數字num:1},methods: {// 減sub:function(){// 遞減if(this.num>0){this.num--;}else{alert("數字最小為0");}},// 加add:function(){// 累加if(this.num<10){this.num++;}else{alert("數字最大為10");}}}}); </script>

案例：圖片切換

下面我們通過一個案例來鞏固前面所學習的一些知識點

案例要求：

我們通過點擊左右兩邊的圖片切換符號來切換中間圖片

知識點復習：

EL掛載點，Data數據，Methods方法
v-on，v-show，v-bind方法

代碼展示：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><link rel="stylesheet" href="./css/index.css" /></head><body><div id="mask"><div class="center"><h2 class="title"><img src="./images/logo.png" alt=""> 學校環境 </h2><img :src="imgList[index]" alt="" /><ahref="javascript:void(0)"@click="prev"class="left"v-show="index>0"><img src="./images/prev.png" alt="" /></a><ahref="javascript:void(0)"@click="next"class="right"v-show="index<imgList.length-1"><img src="./images/next.png" alt="" /></a></div></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: "#mask",data: {// 圖片元素imgList: ["./images/00.jpg","./images/01.jpg","./images/02.jpg","./images/03.jpg","./images/04.jpg","./images/05.jpg","./images/06.jpg","./images/07.jpg","./images/08.jpg","./images/09.jpg","./images/10.jpg",],// 圖片序號index: 0},methods: {// 上一張prev() {this.index--;},// 下一張next() {this.index++;}}});</script></body> </html> * {margin: 0;padding: 0; }html, body, #mask {width: 100%;height: 100%; }#mask {background-color: #c9c9c9;position: relative; }#mask .center {position: absolute;background-color: #fff;left: 50%;top: 50%;transform: translate(-50%, -50%);padding: 10px; } #mask .center .title {position: absolute;display: flex;align-items: center;height: 56px;top: -61px;left: 0;padding: 5px;padding-left: 10px;padding-bottom: 0;color: rgba(175, 47, 47, 0.8);font-size: 26px;font-weight: normal;background-color: white;padding-right: 50px;z-index: 2; } #mask .center .title img {height: 40px;margin-right: 10px; }#mask .center .title::before {content: "";position: absolute;width: 0;height: 0;border: 65px solid;border-color: transparent transparent white;top: -65px;right: -65px;z-index: 1; }#mask .center > img {display: block;width: 700px;height: 458px; }#mask .center a {text-decoration: none;width: 45px;height: 100px;position: absolute;top: 179px;vertical-align: middle;opacity: 0.5; } #mask .center a :hover {opacity: 0.8; }#mask .center .left {left: 15px;text-align: left;padding-right: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 10px; }#mask .center .right {right: 15px;text-align: right;padding-left: 10px;border-top-left-radius: 10px;border-bottom-left-radius: 10px; }

案例：記事本

下面我們通過一個案例來鞏固前面所學習的全部知識點

案例要求：

新增：書寫內容，點擊Enter后，便利貼放于頁面
刪除：點擊內容后方的"x"號后，該內容消失
統計：統計內容數量，在左下角顯示
清空：點擊右下角清空鍵，內容全部清空
隱藏：當無內容時，下述記事本部分隱藏

代碼展示：

<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><title>小黑記事本</title><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><meta name="robots" content="noindex, nofollow" /><meta name="googlebot" content="noindex, nofollow" /><meta name="viewport" content="width=device-width, initial-scale=1" /><link rel="stylesheet" type="text/css" href="./css/index.css" /> </head><body><section id="todoapp"><header class="header"><h1>小黑記事本</h1><input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="off" placeholder="請輸入任務"class="new-todo" /></header><section class="main"><ul class="todo-list"><li class="todo" v-for="(item,index) in list"><div class="view"><span class="index">{{ index+1 }}.</span><label>{{ item }}</label><button class="destroy" @click="remove(index)"></button></div></li></ul></section><footer class="footer" v-show="list.length!=0"><span class="todo-count" v-if="list.length!=0"><strong>{{ list.length }}</strong> items left</span><button v-show="list.length!=0" class="clear-completed" @click="clear">Clear</button></footer></section><footer class="info"><p><a href="http://www.itheima.com/"><img src="./img/black.png" alt="" /></a></p></footer><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({// 實現Vue綁定el: "#todoapp",data: {// list表示記事內容list: ["寫代碼", "吃飯飯", "睡覺覺"],// 表示目前輸入內容，雙向綁定inputValue: "好好學習,天天向上"},methods: {// 新添方法，將輸入值填入計時內容中add: function () {this.list.push(this.inputValue);},// 刪除方法，刪除當前下表為index的內容remove: function (index) {this.list.splice(index, 1);},// 清除方法，清除所有方法clear: function () {this.list = [];}},})</script></body></html> html, body {margin: 0;padding: 0; } body {background: #fff; } button {margin: 0;padding: 0;border: 0;background: none;font-size: 100%;vertical-align: baseline;font-family: inherit;font-weight: inherit;color: inherit;-webkit-appearance: none;appearance: none;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }body {font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;line-height: 1.4em;background: #f5f5f5;color: #4d4d4d;min-width: 230px;max-width: 550px;margin: 0 auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-weight: 300; }:focus {outline: 0; }.hidden {display: none; }#todoapp {background: #fff;margin: 180px 0 40px 0;position: relative;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1); }#todoapp input::-webkit-input-placeholder {font-style: italic;font-weight: 300;color: #e6e6e6; }#todoapp input::-moz-placeholder {font-style: italic;font-weight: 300;color: #e6e6e6; }#todoapp input::input-placeholder {font-style: italic;font-weight: 300;color: gray; }#todoapp h1 {position: absolute;top: -160px;width: 100%;font-size: 60px;font-weight: 100;text-align: center;color: rgba(175, 47, 47, .8);-webkit-text-rendering: optimizeLegibility;-moz-text-rendering: optimizeLegibility;text-rendering: optimizeLegibility; }.new-todo, .edit {position: relative;margin: 0;width: 100%;font-size: 24px;font-family: inherit;font-weight: inherit;line-height: 1.4em;border: 0;color: inherit;padding: 6px;border: 1px solid #999;box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);box-sizing: border-box;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }.new-todo {padding: 16px;border: none;background: rgba(0, 0, 0, 0.003);box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03); }.main {position: relative;z-index: 2;border-top: 1px solid #e6e6e6; }.toggle-all {width: 1px;height: 1px;border: none; /* Mobile Safari */opacity: 0;position: absolute;right: 100%;bottom: 100%; }.toggle-all + label {width: 60px;height: 34px;font-size: 0;position: absolute;top: -52px;left: -13px;-webkit-transform: rotate(90deg);transform: rotate(90deg); }.toggle-all + label:before {content: "?";font-size: 22px;color: #e6e6e6;padding: 10px 27px 10px 27px; }.toggle-all:checked + label:before {color: #737373; }.todo-list {margin: 0;padding: 0;list-style: none;max-height: 420px;overflow: auto; }.todo-list li {position: relative;font-size: 24px;border-bottom: 1px solid #ededed;height: 60px;box-sizing: border-box; }.todo-list li:last-child {border-bottom: none; }.todo-list .view .index {position: absolute;color: gray;left: 10px;top: 20px;font-size: 16px; }.todo-list li .toggle {text-align: center;width: 40px;/* auto, since non-WebKit browsers doesn't support input styling */height: auto;position: absolute;top: 0;bottom: 0;margin: auto 0;border: none; /* Mobile Safari */-webkit-appearance: none;appearance: none; }.todo-list li .toggle {opacity: 0; }.todo-list li .toggle + label {/*Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/*/background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E");background-repeat: no-repeat;background-position: center left; }.todo-list li .toggle:checked + label {background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E"); }.todo-list li label {word-break: break-all;padding: 15px 15px 15px 60px;display: block;line-height: 1.2;transition: color 0.4s; }.todo-list li.completed label {color: #d9d9d9;text-decoration: line-through; }.todo-list li .destroy {display: none;position: absolute;top: 0;right: 10px;bottom: 0;width: 40px;height: 40px;margin: auto 0;font-size: 30px;color: #cc9a9a;margin-bottom: 11px;transition: color 0.2s ease-out; }.todo-list li .destroy:hover {color: #af5b5e; }.todo-list li .destroy:after {content: "×"; }.todo-list li:hover .destroy {display: block; }.todo-list li .edit {display: none; }.todo-list li.editing:last-child {margin-bottom: -1px; }.footer {color: #777;padding: 10px 15px;height: 20px;text-align: center;border-top: 1px solid #e6e6e6; }.footer:before {content: "";position: absolute;right: 0;bottom: 0;left: 0;height: 50px;overflow: hidden;box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,0 17px 2px -6px rgba(0, 0, 0, 0.2); }.todo-count {float: left;text-align: left; }.todo-count strong {font-weight: 300; }.filters {margin: 0;padding: 0;list-style: none;position: absolute;right: 0;left: 0; }.filters li {display: inline; }.filters li a {color: inherit;margin: 3px;padding: 3px 7px;text-decoration: none;border: 1px solid transparent;border-radius: 3px; }.filters li a:hover {border-color: rgba(175, 47, 47, 0.1); }.filters li a.selected {border-color: rgba(175, 47, 47, 0.2); }.clear-completed, html .clear-completed:active {float: right;position: relative;line-height: 20px;text-decoration: none;cursor: pointer; }.clear-completed:hover {text-decoration: underline; }.info {margin: 50px auto 0;color: #bfbfbf;font-size: 15px;text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);text-align: center; }.info p {line-height: 1; }.info a {color: inherit;text-decoration: none;font-weight: 400; }.info a:hover {text-decoration: underline; }/*Hack to remove background from Mobile Safari.Can't use it globally since it destroys checkboxes in Firefox */ @media screen and (-webkit-min-device-pixel-ratio: 0) {.toggle-all,.todo-list li .toggle {background: none;}.todo-list li .toggle {height: 40px;} }@media (max-width: 430px) {.footer {height: 50px;}.filters {bottom: 10px;} }

Vue網絡應用

我們在本篇開頭說過Vue的作用僅僅是用來完成靜態頁面

所以如果想要完成項目開發功能，還需要與后臺交互的技術Ajax（主要采用Axios技術）

Axios技術

Axios技術是原生的Ajax進行封裝，簡化書寫

我們在之前的Ajax專題中有完整的介紹過Ajax和Axios技術，在這里我們僅做簡單回憶：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>axios基本使用</title> </head><body><input type="button" value="get請求" class="get"><input type="button" value="post請求" class="post"><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>/*接口1:隨機笑話請求地址:https://autumnfish.cn/api/joke/list請求方法:get請求參數:num(笑話條數,數字)響應內容:隨機笑話*/// 事件綁定document.querySelector(".get").onclick = function () {// axios的get格式：get后跟url，response為返回體，err為錯誤axios.get("https://autumnfish.cn/api/joke/list?num=6").then(function (response) {console.log(response);},function(err){console.log(err);})}/*接口2:用戶注冊請求地址:https://autumnfish.cn/api/user/reg請求方法:post請求參數:username(用戶名,字符串)響應內容:注冊成功或失敗*/// 事件綁定document.querySelector(".post").onclick = function () {// axios的post格式：post后跟url和請求體，response為返回體，err為錯誤axios.post("https://autumnfish.cn/api/user/reg",{username:"鹽焗西蘭花"}).then(function(response){console.log(response);console.log(this.skill);},function (err) {console.log(err);})}</script> </body></html>

Axios+Vue技術

我們常常用Vue作為頁面的設計框架，同時采用Axios作為前后端交互的技術

兩者的結合其實并沒有互相摻雜，大致上還保留原本的形式，最大的改變只有數據來源發生變化

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>axios+vue</title> </head><body><div id="app"><input type="button" value="獲取笑話" @click="getJoke"><p> {{ joke }}</p></div><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>/*接口:隨機獲取一條笑話請求地址:https://autumnfish.cn/api/joke請求方法:get請求參數:無響應內容:隨機笑話*/// 采用Vue開啟框架頁面var app = new Vue({el:"#app",data:{// 頁面數據展示joke:"很好笑的笑話"},methods: {// 獲得笑話的方法，采用axios技術進行數據請求getJoke:function(){var that = this;axios.get("https://autumnfish.cn/api/joke").then(function(response){console.log(response.data);that.joke = response.data;},function (err) { })}},})</script></body></html>

案例：天氣預報

我們同樣采用一個簡單的案例來鞏固Vue網絡應用

案例需求：

我們可以手動查找輸入框內的城市的天氣情況
我們可以點擊頁面內含有的城市的天氣情況

代碼展示：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>天知道</title><link rel="stylesheet" href="css/index.css" /> </head><body><div class="wrap" id="app"><div class="search_form"><div class="logo"><img src="img/logo.png" alt="logo" /></div><div class="form_group"><input type="text" class="input_txt" placeholder="請輸入查詢的天氣" v-model="city" @keyup.enter="queryWeather" /><button class="input_sub" @click="queryWeather">搜索</button></div><div class="hotkey"><a href="javascript:;" v-for="city in hotCitys" @click="clickSearch(city)">{{ city }}</a></div></div><ul class="weather_list"><li v-for="(item,index) in forecastList" :key="item.date" :style="{transitionDelay:index*100+'ms'}"><div class="info_type"><span class="iconfont">{{ item.type }}</span></div><div class="info_temp"><b>{{ item.low}}</b>~<b>{{ item.high}}</b></div><div class="info_date"><span>{{ item.date }}</span></div></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><script>new Vue({el: "#app",data: {// 輸入框城市，雙向綁定city: "武漢",// 天氣情況forecastList: [],// 城市展示hotCitys: ["北京", "上海", "廣州", "深圳"]},methods: {queryWeather() {// 將天氣情況清零this.forecastList = [];// axios獲得天氣狀況axios.get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`).then(res => {console.log(res);this.forecastList = res.data.data.forecast;}).catch(err => {console.log(err);}).finally(() => { });},// 點擊城市觸發queryWeather方法，獲得天氣情況clickSearch(city) {this.city = city;this.queryWeather();}}});</script> </body></html> /* css展示頁面前置css修改 */body,ul,h1,h2,h3,h4,h5,h6{margin: 0;padding: 0; } h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal; } a{text-decoration:none; } ul{list-style:none; } img{border:0px; }/* 清除浮動，解決margin-top塌陷 */ .clearfix:before,.clearfix:after{content:'';display:table; } .clearfix:after{clear:both; } .clearfix{zoom:1; }.fl{float:left; } .fr{float:right; }/* css展示頁面內部css修改 */body{font-family:'Microsoft YaHei'; } .wrap{position: fixed;left:0;top:0;width:100%;height:100%;/* background: radial-gradient(#f3fbfe, #e4f5fd, #8fd5f4); *//* background:#8fd5f4; *//* background: linear-gradient(#6bc6ee, #fff); */background:#fff;} .search_form{width:640px;margin:100px auto 0; } .logo img{display:block;margin:0 auto; } .form_group{width:640px;height:40px;margin-top:45px; } .input_txt{width:538px;height:38px;padding:0px;float:left;border:1px solid #41a1cb;outline:none;text-indent:10px; }.input_sub{width:100px;height:40px;border:0px;float: left;background-color: #41a1cb;color:#fff;font-size:16px;outline:none;cursor: pointer;position: relative; } .input_sub.loading::before{content:'';position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: url('../img/loading.gif'); }.hotkey{margin:3px 0 0 2px; }.hotkey a{font-size:14px;color:#666;padding-right:15px; } .weather_list{height:200px;text-align:center;margin-top:50px;font-size:0px; } .weather_list li{display:inline-block;width:140px;height:200px;padding:0 10px;overflow: hidden;position: relative;background:url('../img/line.png') right center no-repeat;background-size: 1px 130px; }.weather_list li:last-child{background:none; }/* .weather_list .col02{background-color: rgba(65, 165, 158, 0.8); } .weather_list .col03{background-color: rgba(94, 194, 237, 0.8); } .weather_list .col04{background-color: rgba(69, 137, 176, 0.8); } .weather_list .col05{background-color: rgba(118, 113, 223, 0.8); } */.info_date{width:100%;height:40px;line-height:40px;color:#999;font-size:14px;left:0px; bottom:0px; margin-top: 15px; } .info_date b{float: left;margin-left:15px; }.info_type span{color:#fda252;font-size:30px;line-height:80px; } .info_temp{font-size:14px; color:#fda252; } .info_temp b{font-size:13px; } .tem .iconfont {font-size: 50px;}

結束語

好的,關于Vue入門案例的內容就介紹到這里,希望能為你帶來幫助!?

總結

以上是生活随笔為你收集整理的一篇文章带你了解网页框架——Vue简单入门的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。