vue項目創建流程和使用

vue項目的創建

npm run dev 讓項目執行起來

#下載vuex
npm install vuex --save
#下載axios
npm install axios --save

 

當我們生成項目的時候我們關系的src文件,

創建一個components文件夾,來放置vue的文件,

可以進行創建更多的文件夾進行分類.

 

每次創建一個組件都需要

<template>

</template>


<script>
    export default{
        name:'VnoteList',
        data(){
            return{

            }
        }
    }

</script>
    

<style scoped></style>

data必須是一個函數,且必須return一個對象,

 

當我們需要引入組件的時候需要有兩個步驟:

1.引入當前文件

2.掛載

<script>
    import VnoteShow from './VnoteShow'
    import Vmark from './Vmark'
    export default{
        name:'Vnote',
        data(){
            return {

            }
        },
        components:{
            VnoteShow,
            Vmark,
        }
    }
</script>

那么在template顯示就可以:

<template>
<VnoteShow></VnoteShow>
顯示組件的內容
</template>

 

index.js下的ruouter 路由的使用:

import Vue from 'vue'
import Router from 'vue-router'
import Vmain from '@/components/Vmain'
import Vnote from '@/components/Vnote'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Vmain',
      component: Vmain
    },
    {
      path: '/note',
      name: 'Vnote',
      component: Vnote
    },
  ]
})

 

如何引用bootstrap?

首先我們需要先下載到我們的項目上,

npm install bootstrap@3 --save

當下在成功的時候我們在package.json里可以看到

 

 

在App.vue里我們執行下面的代碼,就可以引入我們的bootstrap

<script>

import 'bootstrap/dist/css/bootstrap.min.css'
</script>

 

如何讓路由保持狀態?

###########html部分########
<template>
<ul class="nav navbar-nav">
        <li v-for='(item,index) in routes ' :class="{active:currentIndex == index}" @click='ActiveHandler(item)'>
            <router-link :to='item.url'>{{item.title}}</router-link>
        </li>
          </ul>
</template>


#####################js##########
<script>
    export default{
        name:'Vheader',
        data(){
            return{
                routes:[
                    {url:'/',title:'我的首頁'},
                    {url:'/note',title:'我的筆記'},
                ],
                currentIndex:0,

            }
        },
        methods:{
            ActiveHandler(item){
                this.currentIndex = item.index;
            }
        },
        created(){
            for (var i=0;i<this.routes.length;i++){
                if (this.routes[i].url == this.$route.path){
                    this.currentIndex =i;
                    return;
                }
            }
        }
    }
</script>

 

created方法是在加載一開始的時候觸發,

主要解決了刷新保持選中狀態.

***思路***

遍歷對象,並對比用戶訪問的url,如果匹配成功則

this.currentIndex =i;改變當前的索引並跳出循環

this.$route.path會拿到訪問的路由

 

 

構建表單結構:

如何獲取html里的內容,這里我們需要在標簽里面設置屬性,

再根據上面的數據構建就可以獲取html的文本

 

 vuex

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具 devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

以上是官方文檔的介紹:

這個狀態自管理應用包含以下幾個部分：

• state，驅動應用的數據源；
• view，以聲明方式將 state 映射到視圖；
• actions，響應在 view 上的用戶輸入導致的狀態變化。

 

 

以下是一個表示“單向數據流”理念的極簡示意：

那么白話文來說

vuex就是來管理數據,

1.當前端發送請求到后端取數據,通過vuex這個借口,

2.當前端想拿后端傳過來的數據進行渲染,在vuex這個獲取

在我個人看來vuex就是進行數據的統一調度.

 

 

 使用:

 

 先看我們的原理圖:數據先到Aciton然后commit到Mutations再來驅動狀態從而改變視圖

命名規范:mutations里的方法全用大寫,而actions的用駝峰式.

Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
      allList:[]
      note:{
          title:'',
          content:'',
          markdown:''
      }

      //這里面的狀態跟每個組件的數據屬性有關系
  },
  mutations:{
      ADDONENOTE(state,newData){
          state.allList=newData;
      }
  },
  actions:{
      addOneNote(contenxt){
          $.ajax({
              url:'',
              type:'post',
              data:json,
              success:function(data){
              contenxt.commit('ADDONENOTE',data)
              },
              error:function(err){
              }
          })
      },

 

 

我們只要將整理好的數據通過this.$store.dispatch('方法名',數據)就會觸發該流程.上述用的是jquery的ajax技術,但是我們vue一般不用

用到的是axios技術,

axios

初始化的時候獲取數據:

//main.js
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex);
Vue.use(axios);

const store = new Vuex.Store({
  state: {
      allCourseList:[]

      //這里面的狀態跟每個組件的數據屬性有關系
  },
  mutations: {
    GETCOURSELIST(state,newValue){
      state.allCourseList =newValue;
    }

  },

  actions:{
    GetCourseList(context,){
      axios.request({
        url:'http://127.0.0.1:8000/api/v2/course/',
        method:'GET',
      }).then(function(ret){
        context.commit('GETCOURSELIST',ret.data)
      }).catch(function(ret){
      })

    }
  },
});

//需要掛載
new Vue({
  el: '#app',
  //注冊了的需要在這里掛載
  router,
  store,
  axios,
  components: { App },
  template: '<App/>'
});

<script>
  import Vheader from './components/Vheader'
  import 'bootstrap/dist/css/bootstrap.min.css'
export default {
  name: 'App',
  components:{
    Vheader,
  },
  mounted(){
    this.$store.dispatch('GetCourseList');
  }
  
}
</script>

<template>
  <ul>
    <VcourseItem v-for="(item,index) in GetAllList" :data="item"></VcourseItem>
  </ul>
</template>

<script>
  import VcourseItem from './VcourseItem'
    export default {
        name: "VcourseList",
        data() {
            return {}
        },
      components:{
          VcourseItem,
      },
      computed:{
        GetAllList(){
          return this.$store.state.allCourseList
        },
      }
    }
</script>

 

 

Mutations和Actions

如果我們只用到mutations,那么這只能是個同步操作,用戶體驗不好,

this.$store.commit('方法名',數據)

設想一個情景,如果用戶提交數據卡住了,那么用戶將不能再操作該頁面的,只有等待同步結束才能繼續.

使用actions就是異步的操作. 建議使用.

 

mounted 和 created

mounted是在項目加載結束后調用的

一般用於初始化數據庫里的數據

created是在項目剛加載的時候調用,

一般用於Dom的創建

mounted(){
mounted是在項目加載結束后調用的
},

created(){
created是在項目剛加載的時候調用,
}

props:{
#父向子傳值,進行數據驗證
}

components:{
#掛載
}

methods:{
#方法存放
}

computed:{
  GetAllList(){
    return this.$store.state.allCourseList
  },

 

 

官方文檔

vue框架:Element