本來(lái)想這一周做一個(gè)關(guān)于vuex的總結(jié)的，但是由于朋友反應(yīng)說(shuō)還不知道如何用vue去寫(xiě)一個(gè)組件，所以在此寫(xiě)寫(xiě)一篇文章來(lái)說(shuō)明下如何去寫(xiě)vue頁(yè)面或者組件。vue的核心思想就是組件，什么是組件呢？按照我的理解組件就是裝配頁(yè)面的零件，比如一輛車有大大小小許多零件組成，那么同樣的一個(gè)頁(yè)面，也是有許多組件構(gòu)成的比如說(shuō)頭部組件 按鈕組件等等，vue三大核心組件 路由 狀態(tài)管理，路由控制頁(yè)面的渲染，頁(yè)面由組件組成，數(shù)據(jù)有vuex進(jìn)行管理和改變。下面我會(huì)以一個(gè)簡(jiǎn)單的案例來(lái)說(shuō)
第一步：構(gòu)建一個(gè)簡(jiǎn)單的vue項(xiàng)目，老規(guī)矩直接在命令行輸入
vue init webpack myproject
cd my vue
cnpm/npm install
cnpm/npm run dev
執(zhí)行結(jié)果如下
然后你會(huì)在8080端口看到vue的標(biāo)志頁(yè)面
第二步：分析目錄結(jié)構(gòu) 主要是組件入口app.vue和main.js
第三步：寫(xiě)頁(yè)面
我們?cè)赼pp.vue下這樣寫(xiě)
<template>
<div id="wrapper">
<router-view></router-view>
</div></template><script>
export default {
data () { return {
}
},
components: {
}
}</script>延伸閱讀
- ssh框架 2016-09-30
- 阿里移動(dòng)安全 [無(wú)線安全]玩轉(zhuǎn)無(wú)線電——不安全的藍(lán)牙鎖 2017-07-26
- 消息隊(duì)列NetMQ 原理分析4-Socket、Session、Option和Pipe 2024-03-26
- Selective Search for Object Recognition 論文筆記【圖片目標(biāo)分割】 2017-07-26
- 詞向量-LRWE模型-更好地識(shí)別反義詞同義詞 2017-07-26
- 從棧不平衡問(wèn)題 理解 calling convention 2017-07-26
- php imagemagick 處理 圖片剪切、壓縮、合并、插入文本、背景色透明 2017-07-26
- Swift實(shí)現(xiàn)JSON轉(zhuǎn)Model - HandyJSON使用講解 2017-07-26
- 阿里移動(dòng)安全 Android端惡意鎖屏勒索應(yīng)用分析 2017-07-26
- 集合結(jié)合數(shù)據(jù)結(jié)構(gòu)來(lái)看看(二) 2017-07-26
學(xué)習(xí)是年輕人改變自己的最好方式