首先申明這是基礎(chǔ)內(nèi)容為的是帶大家了解vue這個內(nèi)容嘗試學(xué)習(xí)vue基礎(chǔ)知識其實vue是一個很大的知識體系這里我簡單的講述了一下對于前后端數(shù)據(jù)傳輸后的數(shù)據(jù)最基本的處理不涉及生態(tài)只是對交互邏輯和渲染的基礎(chǔ)講解深入學(xué)習(xí)的話請關(guān)注其他博客建議學(xué)習(xí)前先學(xué)習(xí)基礎(chǔ)的語法知識關(guān)于htmlcss和js的基礎(chǔ)語法知道大概的標(biāo)簽內(nèi)容了解每一個標(biāo)簽都有什么屬性不需要全部了解知道基礎(chǔ)即可框架vue學(xué)習(xí)1利用es模塊建立先嘗試很很重要我們先建立一個簡單的項目2常見的v-命令操作html注意**差值表達(dá)式是不能展示在標(biāo)簽內(nèi)部的比如這個例子中的src這樣的話無法直接講內(nèi)容展示而是直接當(dāng)成文本展示{{e.image}}解決方法是利用v-bind這里的src直接就寫可取到的遍歷值不加{{}}至于后面這個alt是當(dāng)圖片找不到時展示的內(nèi)容當(dāng)要根據(jù)傳入的值確定不同的內(nèi)容時我們需要用到以下這個兩個指令具體的使用區(qū)別v-if和v-show的區(qū)別v-if對于每一個數(shù)據(jù)一次判斷即可這個同一個數(shù)據(jù)的同一個判斷在一個頁面中不會多次再次的反復(fù)用到每一個都會渲染只不過是通過css的display隱藏了v-show則是會多次用到的由于對于任何一個v-xxx的操作都需要依附于標(biāo)簽所以我們要這樣寫此時如果我們打開f12工具查看就可以看到不是將這一整個代碼展示出來而是只顯示出來對應(yīng)的班主任或者講師這一條信息如下圖jS源代碼Elements 能看見 script 內(nèi)文本頁面看不見完整源碼去 Sources。JS生成的 HTML 標(biāo)簽運行完立刻出現(xiàn)在 Elements 面板頁面可視化展示。此時我們對比v-show就可以看到區(qū)別接下來說一下v-modelv-module這個首先須要我們在data的return的返回數(shù)據(jù)內(nèi)容中定義然后驚醒綁定這個空的內(nèi)容重點是這個內(nèi)容和數(shù)據(jù)的希納是是綁定的這個searchform的數(shù)據(jù)發(fā)生改變后綁定的項的內(nèi)容也會發(fā)生改變還有最后一個v-on基礎(chǔ)版的vue內(nèi)容就講完了其實通過這個簡單的介紹我們可以看到理解一個基本概念vue其實是對原本js的規(guī)范和格式規(guī)定方便了我們對js代碼的維護(hù)有了一個系統(tǒng)的表示方法同時還對于服務(wù)端的傳輸和用戶看到的內(nèi)容渲染進(jìn)行聯(lián)系對于我們新手接觸這些東西我們了解后嘗試寫一下代碼會有更好的體驗這是我嘗試做javaweb基礎(chǔ)的第一期文章中大量引用了網(wǎng)絡(luò)上其他的視頻截圖和自己的代碼這里為大家做一個知識梳理