vue引入ftp
① vue製作一個簡單的網站(vue搭建網站)
用vue開發網頁效果本地應用：
指令v-text的作用是：設置標簽的內容
默認寫法會替換全部內容，使用插值表達式{{}}可以替換指定內容
部分替換使用兩個大括弧寫法
v-html指令：作用是設置元素的innerHTML
內容中有html結果會被解析為標簽；v-text無論內容是什麼，只會解析為文本
解析文本用v-text，解析html結構用v-html
v-on指令：事件綁定的方法寫成函數調用的形式，可以傳入自定義參數
定義方法時需要定義形參來接受傳入的實參
時間的後面跟上【.修飾符】可以對事件進行限制
.enter可以限制觸發的按鍵為回車
時間修飾符有多種
計數器的步驟：
1.在data中定義數據num；
2.methods中添加兩種方法add和sub
3.使用v-text給num設置span標簽
4.使用v-on將add，sub綁定給+、-按鈕
5.add邏輯小於10繼續累加，否則alert
6.sub邏輯大於0繼續遞減，否則alert
創建Vue示例時，el（掛載點），data（數據），methods（方法）
v-on指令的作用是綁定事件，簡寫為@
方法中通過this，關鍵字獲取data中的數據
v-text設置文本值，簡寫{{}}
v-show指令的作用是：根據真假切換元素的顯示狀態
原理是修改元素的display，實現顯示和隱藏
指令後面的內容，最終都會解析為布爾值
值為true元素顯示，值為false元素隱藏
v-if指令的作用是：根據真假切換元素的顯示狀態
本質是通過操縱dom元素來切換顯示狀態
表達式的值為true，元素存在於dom樹中，為false，從dom樹中移除
v-bind指令的作用是：為元素綁定屬性
完整寫法是v-bind：屬性名
簡寫的話可以直接省略v-bind，只保留【：屬性名】
需要動態的增刪class建議使用對象的方式
v-for指令的作用是：根據數據生成列表結構
數組經常和v-for結合使用
語法是（item，index）in數據
item和index可以結合其他指令一起使用
數組長度的更新會同步到頁面上，是響應式的
v-model指令的作用是便捷的設置和獲取表單元素的值
綁定的數據和表單元素值相關聯
綁定的數據雙向綁定表單元素的值
網路應用
VuePress-Vue驅動的靜態網站生成器入門教程
VuePress由兩部分組成：第一部分是一個極簡靜態網站生成器(opensnewwindow)，它包含由Vue驅動的主題系統和插件API，另一個部分是為書寫技術文檔而優化的默認主題，它的誕生初衷是為了支持Vue及其子項目的文檔需求。
每一個由VuePress生成的頁面都帶有預渲染好的HTML，也因此具有非常好的載入性能和搜索引擎優化（SEO）。同時，一旦頁面被載入，Vue將接管這些靜態內容，並將其轉換成一個完整的單頁應用（SPA），其他的頁面則會只在用戶瀏覽到的時候才按需載入。
事實上，一個VuePress網站是一個由Vue、VueRouter和webpack驅動的單頁應用。如果你以前使用過Vue的話，當你在開發一個自定義主題的時候，你會感受到非常熟悉的開發體驗，你甚至可以使用VueDevTools去調試你的自定義主題。
在構建時，我們會為應用創建一個服務端渲染（SSR）的版本，然後通過虛擬訪問每一條路徑來渲染對應的HTML。這種做法的靈感來源於Nuxt(opensnewwindow)的nuxtgenerate命令，以及其他的一些項目，比如Gatsby
1、創建並進入一個新目錄
2、使用你喜歡的包管理器進行初始化
3、將VuePress安裝為本地依賴
我們已經不再推薦全局安裝VuePress
4、創建你的第一篇文檔
5、在package.json中添加一些scripts
這一步驟是可選的，但我們推薦你完成它。在下文中，我們會默認這些scripts已經被添加。
6、在本地啟動伺服器
VuePress會在(opensnewwindow)啟動一個熱重載的開發伺服器。
現在，你應該已經有了一個簡單可用的VuePress文檔。接下來，了解一下推薦的目錄結構和VuePress中的基本配置。
VuePress遵循「約定優於配置」的原則，推薦的目錄結構如下：
如果沒有任何配置，這個網站將會是非常局限的，用戶也無法在你的網站上自由導航。為了更好地自定義你的網站，讓我們首先在你的文檔目錄下創建一個.vuepress目錄，所有VuePress相關的文件都將會被放在這里。你的項目結構可能是這樣：
一個VuePress網站必要的配置文件是.vuepress/config.js，它應該導出一個JavaScript對象：
對於上述的配置，如果你運行起devserver，你應該能看到一個頁面，它包含一個頁頭，裡麵包含一個標題和一個搜索框。VuePress內置了基於headers的搜索——它會自動為所有頁面的標題、h2和h3構建起一個簡單的搜索索引。
你也可以使用YAML(.vuepress/config.yml)或是TOML(.vuepress/config.toml)格式的配置文件。
一個VuePress主題應該負責整個網站的布局和交互細節。在VuePress中，目前自帶了一個默認的主題（正是你現在所看到的），它是為技術文檔而設計的。同時，默認主題提供了一些選項，讓你可以去自定義導航欄（navbar）、側邊欄（sidebar）和首頁（homepage）等，
由於VuePress是一個標準的Vue應用，你可以通過創建一個.vuepress/enhanceApp.js文件來做一些應用級別的配置，當該文件存在的時候，會被導入到應用內部。enhanceApp.js應該exportdefault一個鉤子函數，並接受一個包含了一些應用級別屬性的對象作為參數。你可以使用這個鉤子來安裝一些附加的Vue插件、注冊全局組件，或者增加額外的路由鉤子等：
覺得效果不錯的請幫忙加個關注點個贊，經常分享前端實用開發技巧
准備用vue寫個小項目，使用axios調用api做一個網站，還需要哪些技術？看你自己的需要咯，
比如前端的跟vue搭配一起的，有vue-router（路由，這個就不解釋了）,vuex（全局變數，也不詳細解釋了）。可能還有框架？比如element-ui，或者vuetify這樣的。
後端的話如果用node的就有express,koa這樣的。而後端的，可能還涉及到一些數據的存儲之類的，又會涉及到一個資料庫的插件，比如ORM，NEDB這樣的。
第二章：用element、flask、vue開發一個數據加密網站在本章中，我們能學到：
公眾號《帥帥的Python》回復《數據加密》獲取源碼
我們在網上搜索md5加密，會出來很多的網站，但是都是關於單個字元的的加密，其中加密演算法有md5和sha加密。但是當我有1萬條數據，如何加密，總不能一條一條的復制粘貼過去加密，這很不現實。
小凡決定先參考這些網站做一個簡單的字元串加密網站，然後再做關於Excel文件的加密網站。
我們看這些網站都是由兩個輸入框，中間加上選項組成的，比如下面這種：
我們可以用element中的組件繪制出這樣的頁面：
繪制輸入字元串的文本框：
同理，我們可以繪制出加密後的文本框：
form表單：
下拉框，選擇加密的方式：
單選框：
按鈕：
後端我們用flask寫一個介面，這個介面就是用來將前端輸入的字元串發送給加密的函數，我們需要開發一個地址，使用POST方法，並且接受傳遞的參數。
啟動後端服務，即可訪問到網站。
小凡不滿足於只能加密字元串，接下來，小凡要思考如何加密Excel文件？
Primary:Vue{三、一個基於Vue的門戶網站(經驗踩坑)}使用框架時必須熟知框架指令特性！很重要；
Bootstrap+jQuery是很好的選擇！
庫：?????1.i18n(雙語言切換)；
?????????2.vue-router(路由）；
?????????3.vuex(狀態管理，需要進行雙語言切換監聽變化)；
?????????4.ElementUI(餓了么以電腦端為主得UI框架)；
?????????5.sass(css預處理)；
?????????6.echarts(需要K線圖，個人推薦不要用echarts,太大)；
?????????7.axios(相對於fetch兼容性好，請求數據)
IE的坑：1.走馬燈之前用的是swiper的，結果兼容性不好，4.0+兼容不好，3.0主要以移動端為主，
????????之後換成了ElementUI的走馬燈又引導出無法覆蓋ElementUI的樣式，因為VUE是默認全局覆蓋局部，再加一個style，不要加scoped,ElementUI是全局引入！?解決問題。
????????2.經驗不足，IE9不支持flex,坑、坑、坑移動端寫習慣了！
????????3.多行文本省略只支持webkit內核瀏覽器，又是坑，用js控制長度搞定！
????????4.低版本兼容引入babel-polyfill，將build?webpack.base.conf.js里entry修改為entry:{'babel-polyfill':'babel-polyfill',app:'./src/main.js'},
??????5.使用axios低版本兼容?es6-promise包，在main.js里引用
????????????????importpromisefrom'es6-promise'
????????????????promise.polyfill()
打包：1.history模式：需要伺服器端配置請看官網；不需要改任何東西，路由里加mode:history即可
??????2.hash模式：將config里index.js里的assetsPublicPath:'/'??改為assetsPublicPath:'./',即可訪問靜態資源；
??????3.打包體積：將config里index.js里的proctionSourceMap:true,改為?proctionSourceMap:false，或者待打包完之後手動刪除Map文件；
??????4.路由懶載入（具體看官網很簡單）；
??????5.第三方包分離將build?webpack.base.conf.js里添加
????????????????????externals:{；
??????????????????????'echarts':"echarts"
?????????????????????},
??????6.打包後css背景圖無法訪問，將build??utils.js里添加?publicPath:'../../',
????7.sass配置（webpack.base.conf.js）
????{test:/.scss$/,loaders:["style","css","sass"]},
如有寫錯的地方歡迎大家評論
web前端開之網站搭建框架之vue詳解網站搭建框架之vue
Vue是web前端快速搭建網站的框架之一。它與jQuery有所不同，是以數據驅動web界面（以操作數據改變頁面，而jQuery是以操作節點來改變頁面），同時，vue還實現了數據的雙向綁定，可及時響應用戶的輸入。最主要的是vue的寫法簡單，容易掌握，組件形式可以大大提高工作效率。
對於vue的使用可以分為兩種使用形式：1.引入vue.js文件，在js中將vue實例化；2.通過node安裝第三方包--vue，搭建腳手架，用腳手架將頁面分成幾個組件編寫，從而利用組件來搭建頁面。
引入vue.js的寫法
Vue分為V層（視圖層）和M層（數據層），一般都是由M層的數據來驅動V層的改變。而vue的常用指令數量不多且寫法簡單。常用的有v-html、v-text、v-show、v-if、v-else、v-for、v-bind:、v-model。v-html和v-text都是將數據寫進標簽內，但它們的不同之處在於v-text會將標簽當做文本內容寫入
，而v-html則會對標簽進行編譯，只顯示標簽內的內容。
至於v-show、v-if、v-else這三個指令都是通過布爾值的判斷來執行的，當布爾值為真時，設置了v-show、v-if指令的標簽會顯示出來，當布爾值為假時，標簽隱藏；而v-else與這兩個指令相反。除此之外，v-show和v-if、v-else之間也有差別，v-show是改變標簽的display屬性來使標簽顯示或隱藏；而v-if、v-else是通過添加或刪除節點，來顯示或隱藏標簽的。
V-for是vue的一種遍歷方法，這個方法極大的簡化了數組或對象的遍歷並顯示到頁面的步驟
而v-bind：是對html屬性或自定義屬性的數據驅動方式，格式為v-bind:href，可簡寫為：href。對於類（class）的操作是通過布爾值來判斷增加或者隱藏類，同時。類和樣式（style）所接受的數據類型為對象。
V-model指令的作用是將數據進行雙向綁定，僅限於輸入類型標簽。當用戶在頁面輸入時，數據層的數據會跟著改變。這是VM模式。由v驅動m。
除了這些普通的指令之外，還有事件指令v-on:，可簡寫為@+事件名，例如：@click，並將執行函數寫到vue的methods中
通過腳手架來寫項目的話，可用通過寫組件，再將組件引入（注冊）到另一個vue文件里拼接在一起，從而構建出一個頁面。
（組件書寫格式）
（組件整合）
（注冊路由）
路由是通過vue-router來實現的，在注冊路由的時候要將router實例化。不同的路由跳轉不同的頁面，這是搭建單頁面應用的優勢。
而父組件與子組件之間的通訊可以通過props將父組件的信息傳遞給子組件，改變子組件的內容，這樣子組件的復用就不會有障礙了，而子組件傳遞信息給父組件或者其他組件的通訊則需vuex。
通過引入vuex並實例化一個Vuex.Store作為一個公共平台，將數據進行傳輸。通過vue的computed方法接收數據，通過methods方法改變數據。而這個公用平台可以實現組件與組件之間的信息傳遞，從而實現組件之間的交互。
通過一個星期的實戰，深深的體會到了vue的優勢，在構建移動端這方面的效率很高。但在搭建的過程中，還是少不了與jQuery結合，畢竟每個工具都有其優點，擇其優而用是明智的選擇。