vue基础操作

Vue

  • node.js!

    保证 node 和 npm 一定要存在

  • npm 下载镜像走的是国外的源 ,把他换成国内的源

    npm install -g cnpm --registry=https://registry.npm.taobao.org

  • 安装最稳定版的 vue

    cnpm install vue

  • 安装全局的 vue-cli

    cnpm install --global vue-cli

  • 创建vue 项目

    vue init webpack 项目名称 选择4个yes 剩下的都是No

  • 切入到项目中

    cd 项目名称

  • 继续安装

    cnpm install

  • 安装axios

    cnpm install axios

  • 找到 src main.js 将axios注册到全局

    import axios from 'axios'
    Vue.prototype.axios = axios;
    
  • src App.vue 中将logo去掉

  • 在 src components 中新建vue文件

    <template>
    	<div>
            ...........
        </div>
    </template>
    <script>
    export default{
        data(){
            return {}
        },
        mounted(){
            
        },
        methods:{
            
        },
        filters:{
            
        },
        watch:{
            
        },
        computed:{
            
        }
    }
    </script>
    <style scpoed>
    
    </style>
    
  • 将vue文件注册到路由里 src router index.js

    import xxx from '@/components/xxx.vue'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'xxx',
          component: xxx
        }
      ]
    })
    
  • 执行启动

    npm run dev

  • v-for

    <!--有5个button-->
    <button v-for="i in page">{{i}}</button>
    
    <script>
    export default{
        data(){
            return {
                page:[1,2,3,4,5]
            }
        }
    }
    </script>
    

    如图:

  • v-if 不但不显示,连位置都不要了

    <template>
      <div>
        <div v-if="seen" class="box"></div>
        <div v-show="seenq" class="box"></div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          seen:false,
          seenq:false
        };
      }
    };
    </script>
    
    <style>
    .box{
       100px;
      height: 100px;
      background: red;
    }
    </style>
    
  • v-show 占着位置 只是不显示而已

    <template>
      <div>
        <div v-if="seen" class="box"></div>
        <div v-show="seenq" class="box"></div>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          seen:false,
          seenq:false
        };
      }
    };
    </script>
    
    <style>
    .box{
       100px;
      height: 100px;
      background: red;
    }
    </style>
    
  • : 或者是 v-bind

    <div  :class="seen?'box':'box1'"></div>
    <div  v-bind:class="seen?'box':'box1'"></div>
    <script>
    export default {
      data() {
        return {
          seen:true,
        };
      }
    };
    </script>
    
    <style>
    .box{
       100px;
      height: 100px;
      background: red;
    }
    .box1{
       100px;
      height: 100px;
      background: green;
    }
    </style>    
    
    
  • @ 或者 v-on

    <template>
      <div>
        <div v-bind:class="seen?'box':'box1'"></div>
        <button @click="change">切换颜色1</button>
        <button v-on:click="change">切换颜色2</button>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          seen: true
        };
      },
      methods: {
        change: function() {
          this.seen = !this.seen;
        }
      }
    };
    </script>
    
    <style>
    .box {
       100px;
      height: 100px;
      background: red;
    }
    .box1 {
       100px;
      height: 100px;
      background: green;
    }
    </style>
    
  • v-model

    <template>
      <div>
        <input type="text" v-model="keyword">
        您输入的为 {{keyword}}
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          keyword: ""
        };
      }
    };
    </script>
    
  • axios

    // 1get传值
    this.axios.get('/api/',{}).then(res=>{})
    // 2.post 
    this.axios.post('/api/xxx/',{}).then(res=>{})
    // 3 综合
    this.axios({
    	url:'',
        method:'',
        数据
    }).then(res=>{
    //
    })
    
    • 在main全局导入axios

      分为两个步骤(其余的不用动)

    // 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 axios from 'axios'   //  第一步
    Vue.config.productionTip = false
    Vue.prototype.axios=axios;  // 第二步 
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })
    
    
原文地址:https://www.cnblogs.com/wangxiaosai/p/14146668.html