zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    [转]对Lucene PhraseQuery的slop的理解
    Best jQuery Plugins of 2010
    15 jQuery Plugins To Create A User Friendly Tooltip
    Lucene:基于Java的全文检索引擎简介
    9 Powerful jQuery File Upload Plugins
    Coding Best Practices Using DateTime in the .NET Framework
    Best Image Croppers ready to use for web developers
    28 jQuery Zoom Plugins Creating Stunning Image Effect
    VS2005 + VSS2005 实现团队开发、源代码管理、版本控制(转)
    禁止状态栏显示超链
  • 原文地址:https://www.cnblogs.com/chenxuming/p/9357313.html
Copyright © 2011-2022 走看看