前端框架之Vue(10)-全家桶簡單使用實例

vue-router官方文檔

vuex官方文檔

安裝

npm install vue-router --save

使用實例

vue-router初使用（webpack-simple模板）

一、切換到指定目錄，執行命令（使用 vue 命令的須要安裝 vue-cli ，點擊查看如何安裝）：

vue init webpack-simple

二、安裝 vue-router ：

npm install vue-router

三、運行：

npm install
npm run dev

四、在 src 下建立名爲 components 的文件夾，並在其下新建以下三個簡單組件：

<template>
    <div>
        <h1>首頁</h1>
    </div>
</template>
<script>
    export default{}
</script>

VMain.vue

<template>
    <div>
        <h1>列表頁</h1>
    </div>
</template>
<script>
    export default{}
</script>

VList.vue

<template>
    <div>
        <h1>詳細頁</h1>
    </div>
</template>
<script>
    export default{}
</script>

VDetail.vue

五、修改 App.vue 文件，使用 router-link 標籤：

<template>
  <div id="app">
   <ul>
      <li>
        <router-link to='/'>主頁</router-link>
      </li>
      <li>
        <router-link to='/list'>列表頁</router-link>
      </li>
      <li>
        <router-link to='/detail'>詳細頁</router-link>
      </li>
    </ul>
    <router-view/>
  </div>
</template>

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

<style>

</style>

App.vue

六、配置路由：

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

import VueRouter from 'vue-router'

import VMain from './components/VMain'
import VList from './components/VList'
import VDetail from './components/VDetail'

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', component: VMain },
    { path: '/list', component: VList },
    { path: '/detail', component: VDetail }
  ]
});

new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

main.js

七、效果：

支持markdown語法筆記小網站實例（webpack模板）

一、初始化目錄。

vue init webpack

二、安裝依賴包 。

"axios": "^0.18.0",
"bootstrap": "^3.3.7",
"marked": "^0.5.2",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"

三、模塊編寫。

<template>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
          <li @click='select(index)' :class="{active:index==currentIndex}" v-for='(item,index) in routes'>
            <router-link :to='item.path'>{{item.title}}</router-link>
          </li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>
</template>
<script>
export default {
  data() {
    return {
      currentIndex: 0,
      routes: [
        { path: '/', title: '首頁' },
        { path: '/note', title: '個人筆記' },
      ]
    }
  },
  methods: {
    select(index) {
      this.currentIndex = index;
    }
  },
  created() {
    // 刷新保持超連接激活的狀態
    for (var i = 0; i < this.routes.length; i++) {
      // this.$route.path 能夠獲取當前地址信息
      if (this.routes[i].path == this.$route.path) {
        this.currentIndex = i;
        break;
      }
    }
  }
}
</script>
<style></style>

/components/Vheader.vue

<template>
  <div class="main">
    <h1>{{msg}}</h1>
   </div>
</template>

<script>
export default {
  name: 'Vmain',
  data () {
    return {
        msg:"這是首頁"
    }
  }
}
</script>

<style scoped>

</style>

/components/Vmain.vue

<template>
  <div class='note'>
    <div class="row">
      <div class="col-md-2">
        <VnoteList></VnoteList>
      </div>
      <div class="col-md-9">
        <div class="row">
          <VnoteTitle></VnoteTitle>
        </div>
        <div class="row">
            <VnoteBody></VnoteBody>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import VnoteList from '@/components/VnoteList'
import VnoteTitle from '@/components/VnoteTitle'
import VnoteBody from '@/components/VnoteBody'
export default {
  data() {
    return {}
  },
  components: {
    VnoteList,
    VnoteTitle,
    VnoteBody
  }
}

</script>
<style>
</style>

/components/Vnote.vue

<template>
  <div class="panel panel-primary">
    <div class="panel-body">
      <div class="row">
        <div class="col-md-4">
          <VnoteEditContent></VnoteEditContent>
        </div>
        <div class="col-md-8">
          <VnoteMarkedContent></VnoteMarkedContent>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import VnoteEditContent from '@/components/VnoteEditContent'
import VnoteMarkedContent from '@/components/VnoteMarkedContent'
export default {
  data() {
    return {}
  },
  components: {
    VnoteEditContent,
    VnoteMarkedContent
  }
}

</script>

/components/Vbody.vue

<template>
  <div class="panel panel-primary">
    <div class="panel-heading">
      編輯內容
    </div>
    <div class="panel-body" style='height: 855px;'>
      <textarea v-model='markedContentHandler' class="form-control" rows="38">
      </textarea>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  computed: {
    markedContentHandler: {
      get() {
        return this.$store.state.note.markedContent;
      },
      set(newVal) {
        this.$store.state.note.markedContent = newVal;
      }
    }
  }
}

</script>

/components/VnoteEditContent.vue

<template>
  <div class="panel panel-info">
    <div class="panel-heading">
      {{title}}
    </div>
    <div class="panel-body" style="height: 1050px;">
      <div class="list-group">
        <a href="javascript:" :class='{active:item.id==activeItem}' @click='selectNote(item.id)' v-for='(item,index) in changedList' class="list-group-item">
        <h4 class="list-group-item-heading">{{item.title}}</h4>
        <p class="list-group-item-text">{{item.content.length>20?item.content.substr(0,20)+'...':item.content}}</p>
      </a>
        <a href="javascript:"class="list-group-item" :class='{active:isNewNote}' @click='newNoteFunc'>
        <h4 class="list-group-item-heading">新筆記</h4>
        <p class="list-group-item-text">建立你的新筆記</p>
      </a>
      </div>
      <button v-if="isShowDeleteBtn" @click='deleteNote' class="btn btn-danger pull-right">刪除選中</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      title: "筆記列表",
      newNote: false
    }
  },
  methods: {
    selectNote(id) {
      this.newNote = false;
      this.$store.state.note.id = id;
      let _this = this;
      this.axios.request({
        url: `http://localhost:8000/notes/${id}/`,
        method: 'get',
      }).then(function(resp) {
        _this.$store.state.note = resp.data;
      })
    },
    newNoteFunc() {
      this.newNote = true;
      this.$store.commit('clearData');
    },
    deleteNote(){
      let _this = this;
      let id = this.$store.state.note.id;
      this.axios.request({
        url: `http://localhost:8000/notes/${id}/`,
        method: 'delete',
      }).then(function(resp) {
        alert('刪除成功');
        _this.$store.commit('showList');
      })
      
    }
  },
  computed: {
    changedList() {
      return this.$store.state.list;
    },
    activeItem() {
      return this.$store.state.note.id;
    },
    isNewNote() {
      return this.newNote;
    },
    isShowDeleteBtn(){
      return this.$store.state.note.id != 0;
    }
  }
}

</script>

/components/VnoteList.vue

<template>
  <div class="panel panel-info">
    <div class="panel-heading">
      顯示區
    </div>
    <div class="panel-body" v-html='markedContent' id='showContent' style='height: 855px;word-wrap:break-word; 
word-break:break-all; 
overflow: hidden;
overflow-y: auto;'>
    </div>
  </div>
</template>
<script>
import marked from 'marked'
export default {
  data() {
    return {}
  },
  computed: {
    markedContent() {
      return marked(this.$store.state.note.markedContent);
    }
  }
}

</script>

/components/VnoteMarkedContent.vue

<template>
  <div class="panel panel-danger">
    <div class="panel-heading">
      {{titleMsg}}
    </div>
    <div class="panel-body">
      <div class="row">
        <div class="col-md-10">
          <div class="form-group">
            <input type="text" class="form-control" v-model='titleHander' placeholder="標題">
          </div>
        </div>
        <div class="col-md-2"><button class="btn btn-primary" @click='submitNote'>{{optionStr}}</button></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      titleMsg: "筆記標題",
    }
  },
  methods:{
    submitNote(){
      this.$store.state.note.content = document.getElementById('showContent').innerText;
      this.$store.commit('submitNote');
    }
  },
  computed:{
    titleHander:{
      get(){
        return this.$store.state.note.title;
      },
      set(newVal){
        this.$store.state.note.title = newVal;
      }
    },
    optionStr(){
      return this.$store.state.note.id == 0?'保存':'更新';
    }
  }
}

</script>

/components/VnoteTitle.vue

四、路由配置。

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({
  mode: 'history',
  routes: [{
    path: '/',
    component: Vmain
  }, {
    path: '/note',
    component: Vnote
  }]
})

/router/index.js

<template>
  <div id="app">
    <Vheader></Vheader>
    <router-view />
  </div>
</template>
<script>
import 'bootstrap/dist/css/bootstrap.min.css'
import Vheader from '@/components/Vheader'

export default {
  name: 'App',
  components: {
    Vheader
  }
}
</script>
<style>
</style>

/App.vue

五、依賴引入。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import axios from 'axios'
import Qs from 'qs'
Vue.config.productionTip = false;
Vue.prototype.axios = axios;
Vue.prototype.qs = Qs
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    note: {
        id: 0,
        title: '',
        content: '',
        markedContent: ''
      },
    list:null
  },
  mutations: {
    submitNote(state) {
      let _this = this;
      let _url = 'http://127.0.0.1:8000/notes/';
      axios.request({
          url: state.note.id == 0 ? _url : `${_url}${state.note.id}/`,
          data: Qs.stringify(state.note),
          method: state.note.id == 0 ? 'post' : 'put'
        })
        .then(function(res) {
          _this.commit('showList');
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        })
      console.info(state.note)
    },
    showList(state) {
      axios.get('http://127.0.0.1:8000/notes/').then(function(res) {
          store.state.list = res.data;
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response)
          }
        })
    },
    clearData(state) {
      state.note = {
        id: 0,
        title: '',
        content: '',
        markedContent: ''
      };
    }
  }
});

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>',
  mounted() {
    store.commit('showList')
  }
})

/main.js

六、效果圖：

七、完整示例點擊下載（提取碼： 7vvk ），包含先後端程序，此處後端使用 django rest framework 框架。

相關連接：vue-cookies使用