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