vue 入門級(jí)

• vue目錄結(jié)構(gòu)
• • vue模板組件

vue目錄結(jié)構(gòu)

node_modules文件夾： 這個(gè)文件夾里面全部都是node的一些基礎(chǔ)的依賴包，當(dāng)我們拓展的安裝一些別的插件時(shí) 也會(huì)裝在這個(gè)文件夾里。

public文件夾： phpstudy 的 www 目錄 服務(wù)器的靜態(tài)資源目錄。

src 文件夾：用來開發(fā)的文件夾。

assets 文件夾：里面主要放置一些資源文件。比如js 、css 之類的文件。

components 文件夾：她可以說是vue 的 靈魂了 ， 組件文件全部都可以放到這里面。一個(gè)vue項(xiàng)目就是由一個(gè)個(gè)的組件拼裝起來的。

router 文件夾 及 子目錄：這個(gè)文件夾里的是整個(gè)vue項(xiàng)目的路由，vue 是單頁面應(yīng)用的代表，這里面就是設(shè)置一個(gè)一個(gè)組件的地址的文件。

app.vue 文件 ：這個(gè)文件是整個(gè)項(xiàng)目的入口文件，相當(dāng)于包裹整個(gè)頁面的最外層的div。

main.js 文件 ：這個(gè)文件是項(xiàng)目的主js,全局的使用的各種變量、js、插件 都在這里引入 、定義。

packpage.json ：包管理文件。

readme.md ：項(xiàng)目使用說明書

vue模板組件

components文件夾下 .vue文件就是專門編寫模塊化功能（如分頁、輪播、導(dǎo)航等功能分模塊化，實(shí)現(xiàn)重復(fù)利用和解耦，也利于熱更新處理）

//分為三個(gè)部分 <template> //template 模板（組件） //編寫頁面某個(gè)功能 html 表簽 +vue 語法 </template>//第二部分 <script> //處理數(shù)據(jù) 、事件綁定、組件注冊(cè) </script>//第三部分 <style> //樣式處理 </style>

• 列如：創(chuàng)建一個(gè)for.vue做個(gè) 菜單數(shù)據(jù)循環(huán)

<template><ul id="for"><li v-for="(item ,index) in items" ><p>{{process}}-{{index}}-{{ item.typemsg }} - {{item.data.length}}</p> <ol v-for="(items,indexs) in item.data" v-if="items.show"><li>{{indexs}} - {{items.message}}</li></ol></li></ul></template><script> export default {data() {//可以請(qǐng)求后臺(tái)接口獲取數(shù)據(jù)return {process:"for循環(huán)",items: [{typemsg:"蔬菜類",data:[ { message: '白菜' ,show:false}, { message: '青椒' ,show:true},{ message: '南瓜' ,show:false}, { message: '絲瓜' ,show:true},{ message: '黃瓜' ,show:true}, { message: '山藥' ,show:true},{ message: '蒜苗' ,show:true}, { message: '洋蔥' ,show:true}]},{typemsg:"水果類",data:[{ message: '蘋果' ,show:false}, { message: '鳳梨' ,show:true},{ message: '西瓜' ,show:false}, { message: '荔枝' ,show:true},{ message: '枇杷' ,show:true}, { message: '桂圓' ,show:true},{ message: '香蕉' ,show:true}, { message: '檸檬' ,show:true}]},{typemsg:"日常用品",data:[{ message: '洗發(fā)露' ,show:false}, { message: '紙巾' ,show:true},{ message: '沐浴露' ,show:false}, { message: '杯子' ,show:true},{ message: '牙膏' ,show:true}, { message: '餐具' ,show:true},{ message: '毛巾' ,show:true}, { message: '保鮮膜' ,show:true}]},{typemsg:"零食",data:[{ message: '薯片' ,show:true}, { message: '可樂' ,show:true},{ message: '果醋' ,show:true},{ message: '奶酪' ,show:true}]}]}} } </script> <style>#for{color: red;font-size: 20px;} </style>

在app.vue引用 for.vue

效果

與傳統(tǒng)的js 相比 vue 的優(yōu)勢(shì)直接操作頁面 dom
如果用js 實(shí)現(xiàn) 圖上效果大約最少要寫20行左右的 js 、也不利于二次改動(dòng)，簡(jiǎn)潔度靈活度如不vue
vue的實(shí)現(xiàn)只需要一行

v-for="(items,indexs) in item.data" v-if="items.show"

總結(jié)

以上是生活随笔為你收集整理的vue 模板、组件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。