vue項目的開發

来源:https://www.cnblogs.com/liuzhou1/archive/2019/11/21/11906008.html

vue項目的開發 我們已經通過命令行創建了一個vue項目,並且打開了這個項目。下麵是這個文件的src文件夾,這個文件夾放了整個項目的核心代碼。 一、vue文件的用處簡介。 1.assets文件夾,用來存放圖片,文件等資源。直接這樣就可以訪問到 src="./assets/logo.png",最好的訪 ...


vue項目的開發

 我們已經通過命令行創建了一個vue項目,並且打開了這個項目。下麵是這個文件的src文件夾,這個文件夾放了整個項目的核心代碼。

一、vue文件的用處簡介。

 1.assets文件夾,用來存放圖片,文件等資源。直接這樣就可以訪問到 src="./assets/logo.png",最好的訪問方式 src="@/assets/logo.png" , @可以自己設置指向的文件夾,

 2.componets文件夾,主要是用來存放我們的vue文件,之要路由能找到,怎麼寫都行。

 3.router文件夾,主要是用來存放路由,vue的頁面入口至於一個就是App.vue, 其他所有的頁面都相當於App.vue的組件,路由的作用就是控制這些組建的替換,從直觀上感覺就是頁面的跳轉,我們也可以這樣理解。下麵會詳細介紹。

 4.App.vue,這個vue是整個項目的入口,在裡面寫的樣式是全局的樣式,路由渲染的組件會渲染到 router-view裡面。預設的 <img src=".assets.logo.png">要去掉,要不然每個頁面都有。

 5.main.js主要用來存放組件,引用組件的配置文件,關於組件後面會詳細的介紹。

 6.處了src文件夾,config中index.js還配置了路徑埠值等。

 

   二、新建vue頁面

 1.新建頁面

 我們在components下麵新建了一個index.vue頁面。點擊事件 @click="countNum"。 頁面賦值{{}} 。

<template>
  <div>
      這是一個首頁<br>
      點了幾次按鈕{{count}}<br>
      <button @click="countNum">點我</button>
  </div>
</template>
<script>
    export default {
        data() {
            return {  
                count: 0
            }
        },
        created(){ //這裡的js執行是在頁面還沒有載入時候

        },
        mounted(){ //這裡的js執行是在頁面載入完成時候

        },
        methods: {
            countNum(){  //這裡是執行事件的方法
              this.count  += 1;
            }
        }
    }
</script>
<style scoped>
/* scoped 屬性是讓css只在這個頁面執行 */

</style>

 如下圖頁面新建完成,我們去寫路由跳轉。

2.路由跳轉

vueRouter 新添加的頁面在路由里註冊才能跳轉。我們找到註冊的時候path 就是我們跳轉的地址。
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

import index from '@/components/index'  //新添加的頁面在路由里註冊才能跳轉
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',             //這是頁面首頁
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/index',        //index頁面就是 我們新建的頁面
      name: 'index',
      component: index
    }
  ],
  mode: "history"  // 預設mode:hash 訪問鏈接http://localhost:8000/#/   我們設置為"history" 訪問鏈接http://localhost:8000/
})

這樣我們就能訪問到這個頁面。路由這一塊應該沒有什麼問題。

 

 三、使用組件開發

  我們會通過組件寫一個頁面的首頁來介紹組件。

  1.組件的安裝和引入。

  常用的組件安裝,安裝組件在命令行打開,複製指令回車,就可以安裝。

移動端常用組件:

Vant Weapp 安裝指令 :

npm i vant -S      //vue安裝
npm i vant-weapp -S --production   //微信小程式安裝

//在 main.js里全局引入

import Vant from 'vant';

import 'vant/lib/index.css';

Vue.use(Vant);

  Vux 安裝指令 :

npm install vux --save  
//在 main.js里全局引入 
import Vue from 'vue'
import { Actionsheet } from 'vux' Vue.component('actionsheet', Actionsheet)

pc端常用組件:

element ui 安裝指令 :

npm i element-ui -S

vue-baidu-map 安裝指令 :

$ npm install vue-baidu-map --save

我們舉個例子,就非常容易理解。

這是vant 官方的輪播組件使用教程。main.js引入。頁面代碼演示,右側結果展示。

我們先在main.js引入。我們是全局引入。如果對vue熟悉後,建議vue組件模塊引入。

然後再在index.vue複製組件代碼,

十幾行代碼就引用成功了一個輪播圖。其他的可以去官網去看使用方法,https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/swipe

 

 

  四、自定義組件開發

    我們自己寫一個vue頁面,把這個頁面當組件。頁面使用組件並且傳遞參數。

    我們新建一個導航欄頁面navigationBar.vue,這個頁面是每一個頁面的頭部,不需要單獨顯示,所有不需要路由註冊。

 

 代碼如下:

<template>
    <div class="head-box">
      <img src="@/assets/return.png" mode="" class="return-icon" v-on:click="navigateBack"/>
      <div class="inline-block">
        首頁
      </div>
    </div>
</template>

<script>
  export default {
          data(){
              return {

              }
          },
          props:['type','id'],   //接收調組件的頁面的傳參
          mounted() {
            console.log(this.type)  //列印參數
            console.log(this.id)
          },
          methods: {
              navigateBack(){
                  this.$router.go(-1);
              }
          }
      }
</script>

<style scoped>
  .head-box {
      line-height: 4rem;
      font-size: 1.1rem;
      text-align: center;
      /* padding-top: 1.6rem; */
      background: linear-gradient(to right, rgba(255, 139, 26, 1), rgba(255, 104, 32, 1));
      color: #FFFFFF;
      position: fixed;
      z-index: 2;
      width: 100%;
      top: 0;
    }

    .head-img {
      width: 1.8rem;
      height: 1.8rem;
      position: relative;
      float: left;
      top: 1.25rem;
      margin: 0 0.9rem;
    }

    .fr {
      float: right;
    }

    .inline-block {
      display: inline-block;
    }

    .return-icon {
      position: absolute;
      left: 0.625rem;
      height: 1.375rem;
      width: 1.375rem;
      margin-top: 1.25rem;
    }
</style>

 組件頁面建好後我們在index.vue使用這個組件並傳遞參數type和id。index.vue中的代碼:

<template>
  <div>
    <!-- 組件的調用傳參 -->
    <navigationBar type="1" :id="id"></navigationBar>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>
  </div>
  </div>
</template>
<script>
  //找到這個組件
  import navigationBar from '../components/navigationBar.vue'

  export default {
    // 註冊這個組件
    components: {
      navigationBar
    },
    data() {
      return {
        id:'123456789',
        images: [
          'https://img.yzcdn.cn/vant/apple-1.jpg',
          'https://img.yzcdn.cn/vant/apple-2.jpg'
        ]
      }
    }
  }
</script>
<style scoped>
  img {
    width: 60%;
  }

  .van-swipe {
    text-align: center;
    margin-top: 5rem;
  }
</style>

在頁面里運行一下。我們看到了組件navigationBar.vue,和控制台列印的index.vue傳的參數。

 

   組件開發就算入門了。如果需要瞭解更多只能自己動手,認認真真去自己做一個項目。

 

 五、Vuex的使用

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。主要作用是在當前頁面給store的數據賦值,其他頁面不刷新store的值就能自動變化。如果用不到不要引入。但是,如果您需要構建一個中大型單頁應用,您很可能會考慮如何更好地在組件外部管理狀態,Vuex 將會成為自然而然的選擇。

  簡單的說如果你需要在頁面的組件里對一個數據賦值,並且需要在這個頁面不刷新就能顯示這個數據,緩存做不到。我們就可以用vuex來實現。vuex組件的使用還是比較麻煩的,一步步來要有耐心。

 1.安裝組件

 命令行安裝組件 vuex 官網。

npm install vuex --save

 已經安裝成功。

 2.新建store文件

 vuex和router是一個級別的模塊。我們在src下新建一個文件夾store,store文件加下加index.js文件。

 index里代碼:

import Vue from 'vue';
import Vuex from 'vuex'
Vue.use(Vuex)


var store = new Vuex.Store({
  state : {
    age: '18',
    name:'liuzhou'
  },
  mutations : {

  }
})
export default store

store下麵有兩個對象state和mutations。state下又有兩個數據:{ age: '18',  name:'liuzhou' } 。我們成功會訪問它。

 3.在main.js里註冊。

  代碼如下:

import Vue from 'vue'
import App from './App'
import router from './router'

//組件引入 vant
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

Vue.config.productionTip = false

import store from './store'   //找到store
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,                     //引入store
  components: { App },
  template: '<App/>'
})

在main.js找到並引入store。這樣我們就完成了vuex的安裝。

 4.在頁面的使用。

 我們在index.vue里訪問一下:

this.$store.state.age

  我們在初始化的時候修改變數值並都列印了,看一下結果。

 

 數據的操作都沒有問題。

 

做到這裡基本上開發一個vue項目都沒問題了,遇到的問題都可以在網上找組件或者自己寫組件就行了。

原文地址:https://www.cnblogs.com/liuzhou1/p/11906008.html 

vue項目的創建文章 鏈接:https://www.cnblogs.com/liuzhou1/p/11905985.html

 

 

 


您的分享是我們最大的動力!

更多相關文章
  • 目的 本文主要介紹以下兩點: 一. 安裝Redis 二. 設置開機啟動項 演示 一. 安裝Redis 打開 "Redis官網" ,右擊複製鏈接。 啟動redis 啟動成功 二. 設置開機啟動項 到/etc/init.d 下可以看到redis_6379的進程pid文件 查看redis是否啟動成功 ...
  • 1. 數據類型 MongoDB支持許多數據類型。 字元串 - 這是用於存儲數據的最常用的數據類型。MongoDB中的字元串必須為UTF-8。 整型 - 此類型用於存儲數值。 整數可以是32位或64位,具體取決於伺服器。 布爾類型 - 此類型用於存儲布爾值(true / false)值。 雙精度浮點數 ...
  • 今天,在自己機器上裝了oracle 12c,發現Oracle的服務Oracle RDBMS Kenel Executable (OracleServiceORCL)占用記憶體高達5G,本人電腦記憶體才16G。如此高的占用率,真讓人心疼。於是就對Oracle的記憶體進行調整。具體辦法如下: 1. 在cmd命 ...
  • 目的 本文主要介紹以下兩點: 一. 如何安裝Mysql8.0 二. Navicat連接Mysql 一. 如何安裝Mysql8.0 安裝Mysql有兩種方式: 直接下載官方的源(比較慢) 用163的源,分開安裝 重啟Mysql 查看Mysql預設密碼 登錄 二. Navicat連接Mysql 連接my ...
  • [toc] 背景 最近在學慣用Spring Aop來實現資料庫讀寫分離的功能。 在編寫代碼之前,首先是要部署好mysql的環境,因為要實現讀寫分離,所以至少需要部署兩個mysql實例,一主一從,並且主從實例之間能夠自動同步,因為我的本機記憶體並不高,所以就打算在windows上直接搭建mysql的主從 ...
  • 前言 開心一刻 某人養了一頭豬,煩了想放生,可是豬認識回家的路,放生幾次它都自己回來了。一日,這個人想了個狠辦法,開車帶著豬轉了好多路進山區放生,放生後又各種打轉,然後掏出電話給家裡人打了個電話,問道:“豬回去了嗎?”,家裡人:“早回來了,你在哪了,怎麼還沒回來?”,他大怒道:“讓它來接我,我特麽迷 ...
  • 7. 隱式動畫 隱式動畫 按照我的意思去做,而不是我說的。 -- 埃德娜,辛普森 我們在第一部分討論了Core Animation除了動畫之外可以做到的任何事情。但是動畫是Core Animation庫一個非常顯著的特性。這一章我們來看看它是怎麼做到的。具體來說,我們先來討論框架自動完成的隱式動畫( ...
  • 1.導出ipa進行解壓後,定位到執行程式archero,ida載入後,發現很多都是sub_xxx開頭的。 2.搜索資料後,原來Unity編寫的程式,可以使用Il2CppDumper進行符號表還原。 下載Il2CppDumper對Payload\archero.app\Data\Managed\Met ...
一周排行
  • 前言 上一篇文章主要介紹了ObjectPool的理論知識,再來介紹一下Microsoft.Extensions.ObjectPool是如何實現的. 核心組件 ObjectPool ObjectPool 是一個泛型抽象介面,他抽象了兩個方法Get和Return Get方法用於從對象池獲取到可用對象,如 ...
  • 國內優秀的WPF開源控制項庫,Panuon.UI的優化版本。一個漂亮的、使用樣式與附加屬性的WPF UI控制項庫,值得向大家推薦使用與學習。 今天站長(Dotnet9,站長網址:https://dotnet9.com, 微信公眾號:dotnet9_com)推薦另一款開源的WPF控制項庫(PanuonUI. ...
  • WGS-84坐標系:全球定位系統使用,GPS、北斗等 GCJ-02坐標系:中國地區使用,由WGS-84偏移而來 BD-09坐標系:百度專用,由GCJ-02偏移而來 (PS:源於項目需求,本來是想讀圖片的經緯度顯示在百度離線地圖上的。後來發現定位偏差太大,仔細一想,原來是圖片和百度使用的坐標系不一樣。 ...
  • .NET Core3.1發佈 我們很高興宣佈.NET Core 3.1的發佈。實際上,這隻是對我們兩個多月前發佈的.NET Core 3.0的一小部分修複和完善。最重要的是.NET Core 3.1是長期支持(LTS)版本,並且將支持三年。和過去一樣,我們希望花一些時間來發佈下一個LTS版本。額外的 ...
  • based on https://stackoverflow.com/questions/659013/accessing-a-shared-file-unc-from-a-remote-non-trusted-domain-with-credentials ...
  • private static void PathCopyFilesWithOriginalFolder() { int sourceFilesNum = 0; try { string sourceDir = @"E:\Source"; string destDir = @"E:\Dest"; st... ...
  • 前言 上一次資料庫災備和性能優化後,資料庫專家建議,在不擴容的情況下,客戶端不能再頻繁的掃描資料庫了!一句驚醒夢中人,因為我也發現資料庫越來越卡了,自從上個項目上線後,就出現了這個情況。後來分析其原因,發現客戶端每3秒中掃描一次資料庫,一共5000+客戶端,可想而知,頻繁掃描嚴重影響到資料庫性能。所 ...
  • 2019.12.4今天開通博客,跌跌撞撞學了3年C#,感覺有了基礎但還不夠深入,有些東西學了又忘,特此開通博客做一個記錄,記錄下以後學習中的每一個知識點,再接再厲,每天進步一點點!!!!!! ...
  • 本人剛接觸.net core 由於公司項目需要部署在Linux上 近些日子學習和網上大面積搜教程 我在這給大家歸攏歸攏借鑒的教程做了套方案(我寫的可以實現 但不一定是最好的 僅供參考) 我只用過core3.0 之前的版本沒接觸過 首先需要使用Nginx反代理的項目那一定是web框架的ASP.NET ...
  • WinFrm應用程式調用WebService服務 關於WebService的創建、發佈與部署等相關操作不再贅述,傳送門如下:C# VS2019 WebService創建與發佈,並部署到Windows Server 2012R 此篇記錄一下客戶端的調用,以便後續學習使用,不足之處請指出。 建立WinF ...
x