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/>'
});
main.js
<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>
App.vue
<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>
vue获取数据

 

 

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

 

posted @ 2018-07-23 22:26  R00M  阅读(2540)  评论(0)  编辑  收藏  举报