vue 入門級

• vue目錄結構
• • vue模板組件

vue目錄結構

node_modules文件夾： 這個文件夾里面全部都是node的一些基礎的依賴包，當我們拓展的安裝一些別的插件時 也會裝在這個文件夾里。

public文件夾： phpstudy 的 www 目錄 服務器的靜態資源目錄。

src 文件夾：用來開發的文件夾。

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

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

router 文件夾 及 子目錄：這個文件夾里的是整個vue項目的路由，vue 是單頁面應用的代表，這里面就是設置一個一個組件的地址的文件。

app.vue 文件 ：這個文件是整個項目的入口文件，相當于包裹整個頁面的最外層的div。

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

packpage.json ：包管理文件。

readme.md ：項目使用說明書

vue模板組件

components文件夾下 .vue文件就是專門編寫模塊化功能（如分頁、輪播、導航等功能分模塊化，實現重復利用和解耦，也利于熱更新處理）

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

• 列如：創建一個for.vue做個 菜單數據循環

<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() {//可以請求后臺接口獲取數據return {process:"for循環",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: '洗發露' ,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

效果

與傳統的js 相比 vue 的優勢直接操作頁面 dom
如果用js 實現 圖上效果大約最少要寫20行左右的 js 、也不利于二次改動，簡潔度靈活度如不vue
vue的實現只需要一行

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。