項目開發(fā)過程中,遇到的問題及知識點全部記錄在下方 vue2 + vuex + flex + localStorage 本地記事本項目參考了notepad,非常感謝。
用flex布局頁面,響應(yīng)式,簡化了內(nèi)容,當(dāng)做練手vue項目
在線預(yù)覽及本地安裝項目使用了vue cli 腳手架,webpack-simple模板,fontawesome圖標(biāo)
notebook github
點擊預(yù)覽
npm install npm run dev功能
類似vue官網(wǎng)的TodoMVC
增刪事件
本地化存儲
搜索及編輯功能還未完成,后續(xù)會再用上rouer
安裝 normalize.css模塊css reset的一種方案
配置讀取css和字體文件 npm install style-loader --save-dev npm install css-loader --save-dev npm install file-loader --save-dev 注意: webpack-simple模板中,需要對引入css路徑進(jìn)行配置 在 webpack.config.js 中的 loaders 數(shù)組加入以下配置 { test: /.css$/, loader: "style!css" }, { test: /.(eot|woff|woff2|ttf)([?]?.*)$/, loader: "file" } npm安裝normalize.css npm install normalize.css --save 在main.js中 import "normalize.css"安裝字體庫
vue-awesome
fontawesome
在開始開發(fā)的過程中,沒用使用vuex狀態(tài)管理,遇到了非父子組件通信的問題,可以使用vue2的bus
vue bus
新建一個bus.js import Vue from "vue" export default new Vue() 使用 $emit 監(jiān)聽 $on響應(yīng) Bus.$on("transmit", function(tt) { this.completedClick() }); 注意: 以上的this是function(){} 中的this Bus.$on("transmit", () => this.completedClick()); 使用短語法 this指向busmethods中的方法相互調(diào)用
用綁定this的方法,如:
this.roundNum = this.$options.methods.rnd.bind(this)(10,100);
或
箭頭函數(shù)
事件處理器
① 監(jiān)聽事件,直接觸發(fā) JavaScript代碼 ② 方法事件處理器,觸發(fā)函數(shù),可調(diào)用原生DOM事件 ③ 內(nèi)聯(lián)處理器,綁定方法并給予參數(shù),此方法中,可再添加$event參數(shù),訪問原生DOM事件對象,如target、preventDefault
vue的事件處理器作方方法,其實和js事件處理程序是一樣的,以上
①就是HTML事件處理程序,②是DOM0別事件處理程序,③是DOM2級事件處理程序,寫的時候道理和我們平時在html在添加事件是一個道理
事件處理器參考鏈接
外部訪問localhost在調(diào)試的時候,除了chrome的模擬器,還需要在真實機器上測試,在手機上訪問開發(fā)電腦上的localhost
第一步:接入相同的網(wǎng)絡(luò)環(huán)境,獲取ip地址
win: ipconfig
mac: ifconfig
第二步:
在webpack配置中,在devServer中添加host: "0.0.0.0",在啟動的時候會打開http://0.0.0.0:8080
DevDocs host - Webpack 2 - DevServer
單個.vue組件中的
export default { name:"" }
其中的name主要給遞歸組件用
npm run build 執(zhí)行錯誤
ERROR in build.js from UglifyJs SyntaxError: Unexpected token: name (warn) [./~/vue-awesome/util.js:3,0][build.js:24054,4]
參考配置解決vue-awesome
es6預(yù)覽
基于 Vue 2.0 和 Material Desigin 的 UI 組件庫
Mint UI 基于 Vue.js 的移動端組件庫
音樂視頻等api
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/81603.html
摘要:本文源碼簡介之前剛?cè)腴T并做好了一個簡而全的純?nèi)彝暗捻椖浚瑪?shù)據(jù)都是本地模擬請求的詳情請移步這里為了真正做到數(shù)據(jù)庫的真實存取,于是又開始入門了并以此來為之前的頁面寫后臺數(shù)據(jù)接口。 本文源碼:Github 簡介: 之前剛?cè)腴Tvue并做好了一個簡而全的純vue2全家桶的項目,數(shù)據(jù)都是本地 json 模擬請求的;詳情請移步這里:vue-proj-demo 為了真正做到數(shù)據(jù)庫的真實存取,于是又...
摘要:小練習(xí)作者本文首發(fā)博客功能基于進(jìn)行登錄,注冊,留言的簡單網(wǎng)站。所以這個小練習(xí),從一個簡單的方面入手,希望能給踩過同樣多坑的同路人一點啟發(fā)。就意味著要重新登錄。的作用是進(jìn)行進(jìn)程守護,當(dāng)你的意外的停止的時候,進(jìn)行重啟。 Vue+Koa+Mongodb 小練習(xí) 作者: Pawn 本文首發(fā): Pawn博客 功能: 基于vue koa mongodb進(jìn)行登錄,注冊,留言的簡單網(wǎng)站。 體驗地址: ...
摘要:利用中間件實現(xiàn)異步請求,實現(xiàn)兩個用戶角色實時通信。目前還未深入了解的一些概念。往后會寫更多的前后臺聯(lián)通的項目。刪除分組會連同組內(nèi)的所有圖片一起刪除。算是對自己上次用寫后臺的一個強化,項目文章在這里。后來一直沒動,前些日子才把后續(xù)的完善。 歡迎訪問我的個人網(wǎng)站:http://www.neroht.com/? 剛學(xué)vue和react時,利用業(yè)余時間寫的關(guān)于這兩個框架的訓(xùn)練,都相對簡單,有的...
摘要:嘗鮮演示效果將中的數(shù)據(jù)渲染到頁面上。預(yù)覽示例代碼張三李四王五演示效果實現(xiàn)數(shù)據(jù)雙向綁定。 vue嘗鮮 演示效果1 將 data 中的數(shù)據(jù)渲染到頁面上。 預(yù)覽:https://91jack.github.io/Vue-... showImg(https://segmentfault.com/img/bVOVbO?w=459&h=231); 示例代碼1 ...
摘要:項目地址預(yù)覽的時候如果是用電腦預(yù)覽的話請切換手機端預(yù)覽地址源碼地址歡迎點贊項目描述主要技術(shù)使用實現(xiàn)單頁應(yīng)用使用處理路由使用實現(xiàn)數(shù)據(jù)存儲搜索歷史使用存儲實現(xiàn)手機端兼容一波小提示因為數(shù)據(jù)是我自己模擬的,存在里面,我只寫了萍鄉(xiāng)到南昌和上海到蘇州的 項目地址 預(yù)覽的時候如果是用電腦預(yù)覽的話請切換手機端 預(yù)覽地址 源碼地址(歡迎點贊 ) 項目描述 主要技術(shù) 使用vue.js實現(xiàn)單頁應(yīng)用 使...
閱讀 3686·2021-11-12 10:36
閱讀 3831·2021-09-22 15:48
閱讀 3542·2019-08-30 15:54
閱讀 2592·2019-08-29 16:44
閱讀 2363·2019-08-29 16:08
閱讀 2408·2019-08-29 16:06
閱讀 1280·2019-08-29 15:21
閱讀 3171·2019-08-29 12:39