成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue練習(xí)小項(xiàng)目

lbool / 1252人閱讀 

項(xiàng)目參考了notepad，非常感謝。
用flex布局頁面，響應(yīng)式，簡化了內(nèi)容，當(dāng)做練手vue項(xiàng)目
項(xiàng)目開發(fā)過程中，遇到的問題及知識點(diǎn)全部記錄在下方 vue2 + vuex + flex + localStorage 本地記事本 
項(xiàng)目使用了vue cli 腳手架，webpack-simple模板,fontawesome圖標(biāo)
在線預(yù)覽及本地安裝

notebook github
點(diǎn)擊預(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

新建一個(gè)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指向bus
methods中的方法相互調(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的事件處理器作方方法，其實(shí)和js事件處理程序是一樣的，以上
①就是HTML事件處理程序，②是DOM0別事件處理程序，③是DOM2級事件處理程序，寫的時(shí)候道理和我們平時(shí)在html在添加事件是一個(gè)道理

事件處理器參考鏈接

外部訪問localhost 
在調(diào)試的時(shí)候，除了chrome的模擬器，還需要在真實(shí)機(jī)器上測試,在手機(jī)上訪問開發(fā)電腦上的localhost

第一步:接入相同的網(wǎng)絡(luò)環(huán)境，獲取ip地址

win: ipconfig
mac: ifconfig

第二步:

在webpack配置中，在devServer中添加host: "0.0.0.0"，在啟動的時(shí)候會打開http://0.0.0.0:8080
DevDocs host - Webpack 2 - DevServer

FAQ及其他vue內(nèi)容

單個(gè).vue組件中的

export default {
    name:""
}

其中的name主要給遞歸組件用

npm run build 執(zhí)行錯(cuò)誤

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://systransis.cn/yun/81603.html

相關(guān)文章

  • 基于 Vue2+Node+mongoDB 的前后端分離全棧練手小項(xiàng)目

    摘要：本文源碼簡介之前剛?cè)腴T并做好了一個(gè)簡而全的純?nèi)彝暗捻?xiàng)目，數(shù)據(jù)都是本地模擬請求的詳情請移步這里為了真正做到數(shù)據(jù)庫的真實(shí)存取，于是又開始入門了并以此來為之前的頁面寫后臺數(shù)據(jù)接口。 本文源碼：Github 簡介： 之前剛?cè)腴Tvue并做好了一個(gè)簡而全的純vue2全家桶的項(xiàng)目，數(shù)據(jù)都是本地 json 模擬請求的；詳情請移步這里：vue-proj-demo 為了真正做到數(shù)據(jù)庫的真實(shí)存取，于是又...

    jay_tian 評論0 收藏0

  • Vue+Koa+Mongodb 小練習(xí)

    摘要：小練習(xí)作者本文首發(fā)博客功能基于進(jìn)行登錄，注冊，留言的簡單網(wǎng)站。所以這個(gè)小練習(xí)，從一個(gè)簡單的方面入手，希望能給踩過同樣多坑的同路人一點(diǎn)啟發(fā)。就意味著要重新登錄。的作用是進(jìn)行進(jìn)程守護(hù)，當(dāng)你的意外的停止的時(shí)候，進(jìn)行重啟。 Vue+Koa+Mongodb 小練習(xí) 作者： Pawn 本文首發(fā)： Pawn博客 功能： 基于vue koa mongodb進(jìn)行登錄，注冊，留言的簡單網(wǎng)站。 體驗(yàn)地址： ...

    趙春朋 評論0 收藏0

  • 一些基于React、Vue、Node.js、MongoDB技術(shù)棧的實(shí)踐項(xiàng)目

    摘要：利用中間件實(shí)現(xiàn)異步請求，實(shí)現(xiàn)兩個(gè)用戶角色實(shí)時(shí)通信。目前還未深入了解的一些概念。往后會寫更多的前后臺聯(lián)通的項(xiàng)目。刪除分組會連同組內(nèi)的所有圖片一起刪除。算是對自己上次用寫后臺的一個(gè)強(qiáng)化，項(xiàng)目文章在這里。后來一直沒動，前些日子才把后續(xù)的完善。 歡迎訪問我的個(gè)人網(wǎng)站：http://www.neroht.com/? 剛學(xué)vue和react時(shí)，利用業(yè)余時(shí)間寫的關(guān)于這兩個(gè)框架的訓(xùn)練，都相對簡單，有的...

    tangr206 評論0 收藏0

  • 初識Vue，寫的一些小練習(xí)

    摘要：嘗鮮演示效果將中的數(shù)據(jù)渲染到頁面上。預(yù)覽示例代碼張三李四王五演示效果實(shí)現(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 ...

    Juven 評論0 收藏0

  • Vue.js仿一個(gè)購買火車票的app

    摘要：項(xiàng)目地址預(yù)覽的時(shí)候如果是用電腦預(yù)覽的話請切換手機(jī)端預(yù)覽地址源碼地址歡迎點(diǎn)贊項(xiàng)目描述主要技術(shù)使用實(shí)現(xiàn)單頁應(yīng)用使用處理路由使用實(shí)現(xiàn)數(shù)據(jù)存儲搜索歷史使用存儲實(shí)現(xiàn)手機(jī)端兼容一波小提示因?yàn)閿?shù)據(jù)是我自己模擬的，存在里面，我只寫了萍鄉(xiāng)到南昌和上海到蘇州的 項(xiàng)目地址 預(yù)覽的時(shí)候如果是用電腦預(yù)覽的話請切換手機(jī)端 預(yù)覽地址 源碼地址（歡迎點(diǎn)贊 ） 項(xiàng)目描述 主要技術(shù) 使用vue.js實(shí)現(xiàn)單頁應(yīng)用 使...

    lufficc 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<