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/>'
  })