一個JAVA WEB偽全棧的VUE入坑隨筆，從零點零五學起

HmyBmny 發布于2019-08-21 15:33 / 3590人閱讀

摘要：開始時間日接觸，先在官網十目一行學完了基本特性，作為一個的偽全棧，用感受了一把雙向綁定，感覺比的要強悍不少，但這開發環境吧，不能寫個，就總覺得自己不能零距離接觸。

開始時間：3.26日
接觸Vue，先在官網十目一行學完了基本特性：http://cn.vuejs.org/v2/guide/，作為一個JAVA WEB的偽全棧，用Myclipse感受了一把雙向綁定，感覺比JQUERY的JSRENDER要強悍不少，但這開發環境吧，不能寫個.vue，就總覺得自己不能零距離接觸VUE。網上各種百度，逛知乎，起初我是抵觸的，當年筆記本裝了一個VS STUDIO，C盤瞬間變紅的陳年往事還歷歷在目，但為了學的專業一點，還是裝了一個VS CODE，什么vetur，auto close tag插件一裝，簡直炫酷，關于安裝了vs code,你還需添點啥，推薦這一篇：http://www.cnblogs.com/zzsdre...。
后面接觸一周了，感覺VUE最吸引自己的是根據需要定義模塊化HTML，即Vue.component，就像JSRENDER一樣，但VUE組件化更解耦，也更加隨意。HTML頁面引用VUE.JS這種方式感覺顯得不是那么現代化，所以又開始搗騰，接觸NODE.JS,WEBPACK。所以，事又來了，安裝NodeJs,開始接觸純前端的開發。
1、WINDOWS下安裝配置NODEJS推薦：http://blog.csdn.net/xxmeng20...。
重點：
A：系統環境里添加安裝目錄node_modules文件夾地址
B:添加設置prefix和cache文件node_global和node_cache
如果運行遇到：node -v：socket: (10106) 無法加載或初始化請求的服務提供程序；請運行
netsh winsock reset 重啟cmd或者電腦
2、WINDOWS下構建vue+WEBPACK的開發環境
推薦查看：http://www.cnblogs.com/jiajia...，前端小妹的博客，講的都特別實在
重點：A、不要總是npm，在天朝，想干活，還是多用cnpm,不然就是等。。。。。
B、跟著小妹大俠新建第一個VUE項目時，讓你選擇是否配置ESLINT檢查支持時，千萬不要選YES，不然你后面學習VUE，保準用不了一個小時，你就印了那句話“從入門到放棄”，重要的事情說三遍，別選YES，別選YES，別選YES，跟著小妹學，是沒有錯的。
C：小妹誰提到了WEBPACK，但是也就提提，標題扣五分；
3、開始開發吧，別墨跡。開發除了自己的第一個基于VUE的前端單頁面應用（基本實現，還需改進）：https://github.com/closertb/m...
這里講一個學以致用的知識點：
列表選中樣式的切換:
JQUERY中我們通常采用:
?????????$("li[class="active"]").removeClass("active"); //將當前選中的項目解除被選中的樣式
?????????$(selector).addClass("active");//為選中的條目添加被選中的樣式；
VUE中沒有選擇器，但對于CSS屬性支持狀態關聯操作（Class 與 Style 綁定）：
eg：v-bind:class="{ active: isActive }"
解讀：當isActive為真時，active樣式有效，Dom渲染結果是：class=“active”

  當為false時，active樣式無效，Dom渲染結果是：class=“”

因此我們可以利用這個屬性做文章
標簽HTML：

這條語句我們生成了一個列表，并為其綁定了一個選中事件，為class動態綁定了一個判斷事件
同樣我們在選擇這個事件中：
function selected(seclctedName){
this.activeName= seclctedName;
}
數據屬性：
????data(){
????????return{
????????????tagNames:[
????????????????{name:"hello",tabLink:"/Hello"},
????????????????{name:"Login",tabLink:"/Login"},
????????????????{name:"Nav",tabLink:"/Nav"}
????????????],
????????????activeName:"hello" //當activeName初始值為空時，瀏覽器加載時默認沒有選擇的列表項，當為hello時，hello列表默認被選中
????????}
????},
4、感覺差不多了吧，外面的世界還有一項技能，你需要掌握，使用GITHUB管理你自己的代碼
用啥軟件：git
使用方法：http://www.jianshu.com/p/7fa6...，一步一步，講的真的不能更好。
5、下一步，寫LOGIN

GPU云服務器云服務器全棧的棧的java描述 java 棧的應用 java棧的深度

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88224.html

一個JAVA WEB偽全棧的VUE入坑隨筆:從登錄開始（VUEX）

摘要：此文章用于記錄本人學習歷程，有共同愛好者可加好友一起分享。從上周天，由于本周有公司籃球比賽，所以耽誤兩天晚上，耗時三個晚上勉強做了一個登錄功能。這里的用戶信息和登錄狀態都是直接取的中的用戶信息進行屬性值初始化。此文章用于記錄本人VUE學習歷程，有共同愛好者可加好友一起分享。從上周天，由于本周有公司籃球比賽，所以耽誤兩天晚上，耗時三個晚上勉強做了一個登錄功能。中間的曲折只有自己知道，有...

Zack 2019-08-20 15:47 評論0 收藏0
vue2全家桶+koa2+mongodb搭建一個簡單偽全棧博客

摘要：本來不想推的，看到上有個項目很簡單，都有，推推看咯。雖然這個項目很簡單，但是還蠻有趣，用來入門和以及再好不過了。本來不想推的，看到github上有個項目很簡單，都有300 star，推推看咯。雖然這個項目很簡單，但是還蠻有趣，用來入門vue2和nodejs以及mongodb再好不過了。等這幾天把公司手頭的事情忙完，再把vuex的部分強化下。基于vue2/vuex/vue-rout...

bitkylin 2019-08-21 17:19 評論0 收藏0
來，告訴你Node.js究竟是什么？

摘要：當某個執行完畢時，將以事件的形式通知執行操作的線程，線程執行這個事件的回調函數。為了處理異步，線程必須有事件循環，不斷的檢查有沒有未處理的事件，依次予以處理。另外，單線程帶來的好處，操作系統完全不再有線程創建銷毀的時間開銷。前言如果你有一定的前端基礎，比如 HTML、CSS、JavaScript、jQuery；那么，Node.js 能讓你以最低的成本快速過渡成為一個全棧工程師(我稱...

Jonathan Shieber 2019-08-26 10:19 評論0 收藏0
cors跨域之簡單請求與預檢請求（發送請求頭帶令牌token）

摘要：所以跨域請求分兩種簡單請求和預檢請求。但對于第二個錯誤，好像沒法向第一種那樣，將預檢請求轉變為簡單請求，所以，只有尋找方法怎么在后端實現相應的預檢請求，來返回一個狀態碼，告訴瀏覽器此次跨域請求可以繼續。引子自從從JAVA偽全棧轉前端以來，學習的路上就充滿了荊棘（奇葩問題），而涉及前后端分離這個問題，對cors的應用不斷增多，暴露出的問題也接踵而至。這兩天動手實踐基于Token的WE...

zsy888 2019-08-20 17:37 評論0 收藏0
cors跨域之簡單請求與預檢請求（發送請求頭帶令牌token）

摘要：所以跨域請求分兩種簡單請求和預檢請求。但對于第二個錯誤，好像沒法向第一種那樣，將預檢請求轉變為簡單請求，所以，只有尋找方法怎么在后端實現相應的預檢請求，來返回一個狀態碼，告訴瀏覽器此次跨域請求可以繼續。引子自從從JAVA偽全棧轉前端以來，學習的路上就充滿了荊棘（奇葩問題），而涉及前后端分離這個問題，對cors的應用不斷增多，暴露出的問題也接踵而至。這兩天動手實踐基于Token的WE...

RaoMeng 2019-08-15 10:36 評論0 收藏0