vue项目经验(一)

首先，贴一张vue脚手架的目录

创建组件及引用组件

【创建组件】要在项目目录的components文件夹下(建议新建组件文件命名时，首字母大写)
--------新建User.vue组件--------
<template>   <!-- 当前组件的具体内容 -->
  <div class="Users">
      <ul>
          <li v-for="every in arr" :key="every.id">
            {{every}}
          </li>
      </ul>
  </div>
</template>

<script>
  export default {
    name: "Users",   //当前组件暴露出去的名称
    data(){
      return {
        arr:["亚索","剑姬","卡萨","露露"]
      }
    },
  }
</script>

<style  scoped></style>   //scoped--域，使css样式仅在当前组件生效


【引用组件】引用User.vue组件
***引用组件方法一：在App.vue中直接引用(一般用这种方法)
<template>
  <div id="app">
    <c-users></c-users>   //3、使用组件
  </div>
</template>

<script>
  import Users from './components/Users'   //1、引入组件
  export default {
    name: 'App',
    data(){
      return {

      }
    },
    components:{
      "c-users":Users,    //2、在components中注册当前组件，可以在注册的同时命名，如这里的"c-users":Users，也可以直接注册组件如直接写Users,
    },
  }
</script>

<style></style>

***引用组件方法二：在main.js中将当前组件注册为全局组件再引用(方法二用的少)
import Vue from 'vue'
import App from './App'
import router from './router'
import Users from './components/Users.vue'   //1、引入Users组件

Vue.config.productionTip = false

Vue.component("c-users",Users);  //2、注册为全局组件并命名为c-users，之后在App.vue中调用<c-users></c-users>即可

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

属性传值(父组件向子组件传值。传值：string boolean number 传引用：array object)

当一组数据有多个子组件复用的时候，我们可以在父组件中定义，并在子组件需要的时候传递给子组件，以简化代码
【父组件App.vue】
<template>
  <div id="app">
    <c-users v-bind:transValue="oldValue"></c-users>   <!-- 1、绑定oldValue数据，并将数据命名为transValue，绑定后传递到子组件 -->
  </div>
</template>

<script>
  import Users from './components/Users'
  export default {
    name: 'App',
    data(){
      return {
        oldValue:false ,     
      }
    },
    components:{
      "c-users":Users,
    },
  }
</script>

<style></style>

【子组件User.vue】
<template>   
  <div class="Users">
      <div>{{newValue}}</div>
  </div>
</template>

<script>
  export default {
    name: "Users", 
    props:{   /*2、子组件拿取父组件传递的数据 */
      transValue:{    
        type:Boolean,      /*多种可能的类型[Boolean,String]，type可以是String,Number,Boolean,Array,Object,Date,Function,Symbol*/
        required:true,    /*此传值是否是必需的*/
        default:true,   /*设置传值的默认值(可不写)*/
      }
    },  
    data(){
      return {
        newValue:this.transValue,    /*这里传的是引用，所以赋值给新变量以解决传引用引起的问题*/
      }
    },
  }
</script>

<style></style>


******提个醒儿******：子组件中改变父组件传入的数据后，通过【传引用】方式传入的数据在其他子组件中也会相应改变。而通过【传值】方式传入的数据则各自独立互不干扰。
引用类型：保存在堆中，占用空间不固定，保存和复制的是指向对象的一个指针；值类型：保存在栈中，占用空间固定，保存和复制的是值本身
当数据格式是Number Boolean String时，是传值。当数据格式是Array Object时，是传引用

******如何解决******：将通过传引用获取到的值赋值给一个新的变量，在子组件中使用新的变量即可。

属性传值(子组件向父组件传值)

即子组件改变父组件的值，父组件反过来又影响子组件
【User.vue】子组件
<template>   
  <div class="Users">
      <button v-on:click="dataTrans">子向父传值</button>    <!-- 1、定义子向父传值的dataTrans点击事件 -->
      <p>{{titleInfo}}</p> <!-- 8、将父组件传递过来的数据渲染出来，子向父，父再向子，一个轮回结束了 -->
  </div>
</template>

<script>
  export default {
    name: "Users",  
    props:{
      titleInfo:{   //7、获取父组件传过来的数据
        type:String,
      }
    },
    data(){
      return {
        
      }
    },
    methods:{
      dataTrans:function(){   /* 2、dataTrans子向父传值事件执行，开始去往父组件寻找dataSend事件 */
        this.$emit("dataSend","子组件向父组件传值")
      }
    },
  }
</script>

<style></style>

【App.vue】父组件
<template>
  <div id="app">
    <c-users v-on:dataSend="dataChange($event)" v-bind:titleInfo="title"></c-users>  <!-- 6、通过父向子传值再将title值传到子组件中，实现数据双向互通 -->  
    <!-- 3、寻找到dataSend事件，再往下寻找dataChange事件,dataChange中的$event必须要这么写 -->   
  </div>
</template>

<script>
  import Users from './components/Users'
  import Mans from './components/Mans'
  export default {
    name: 'App',
    data(){
      return {
        title:"我是父组件原本的title"
      }
    },
    components:{
      "c-users":Users,
    },
    methods:{
      dataChange(val){   /* 4、寻找到dataChange事件，将步骤2中的数据"子组件向父组件传值"传递进来(val是形参，命名随意) */
        this.title=val  /* 5、将步骤2中的数值赋值给父组件中的title，此时title就改变了 */
      }
    }
  }
</script>

<style></style>

解决vue跨域请求的问题,以及使用fetch,axios请求数据

当浏览器报类似于这样的错误时：localhost/:1 Failed to load http://www.thenewstep.cn/test/testToken.php: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
1、我们需要找到config/index.js页面，然后搜索proxyTable
2、将proxyTable重设：
proxyTable: {
      '/apis': {
        // 测试环境
        target: 'http://www.thenewstep.cn/',  // 接口域名，改成自己请求的接口域名即可
        changeOrigin: true,  //是否跨域
        pathRewrite: {
            '^/apis': ''   //需要rewrite重写的,
        }              
      }
3、我们去使用fetch写请求：
在如App.vue中请求数据
<script>
    export default{

        created(){
            fetch {"/apis/test/testToken.php",{  /*这里的apis就是proxyTable里定义的代理*/
                method:"post",
                headers:{
                    "Content-type":"application/json",
                    token:"32erqwdf3rtw3rwef313ewet",
                },
                body:JSON.stringify({username:"二狗子",password:"123456"})
            }}.then(result=>{
                return result.json()
            }).then(data=>{
                console.log(data)
            })
        }

    }
</script>
我们也可以使用axios写请求：
安装xios包：npm install axios
在main.js中引入axios， import axios from "axios"
在main.js中重定义axios，Vue.prototype.$axios=axios (这样做是为了能够全局使用)
在main.js中设置axios的请求头和content-type：
        axios.default.headers.common['token']="32ed3wqefd432442f231ewq"
        axios.default.headers.post['Content-type']="application/json"

在如App.vue中请求数据
<script>
    export default{

        created(){
            this.$axios.post("/apis/test/testToken.php",{username:"二狗子",password:"123456"}).then(data=>{
                console.log(data)
            })
        }

    }
</script>

4、一定一定要重新启动项目
    
</script>

vue-cli3.0关于webpack的配置文件config,build已经被删除，若是需要进行配置需要自己手动建立一个vue.config.js

具体参考官方文档：https://cli.vuejs.org/zh/config/#vue-config-js

示例【vue.config.js】
module.export={

    publicPath:'/',    /*根路径*/
    outputDir:  'dist1',    /*构建输出目录*/
    assetsDir: 'assets',  /*静态资源目录(js,css,img,fonts)*/
    lintOnSave:false,   /*是否开启eslint保存检测(严格模式)，有效值：true||false||'error'*/
    devServer:{
        open:true,   /*项目启动时是否自动打开网页*/
        host:'127.0.0.0',  /*域名*/
        port:9000,   /*端口号*/
        https:false,  /*https设置*/
        proxy:{   /*跨域配置*/
            'apis':{
                 target: 'http://www.thenewstep.cn/',  // 接口域名，改成自己请求的接口域名即可
                 changeOrigin: true,  //是否跨域
                 pathRewrite: {
                     '^/apis': ''   //需要rewrite重写的,
            }
        }
    },

}

vue-cli2.0使用less

1、安装less依赖：npm install less less-loader --save
2、修改webpack.base.config.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加：
module:{
    rules:[
        /*添加less配置代码*/
        {    
            test: /\.less$/,
            loader: "style-loader!css-loader!less-loader",
            options: { sourceMap: true }   // 可以在控制台中看到当前标签样式来自于哪个less文件
        },
        {
            test:/\.vue$/,
            loader:'vue-loader',
            options:vueLoaderConfig
        },
        。。。。。。
    ]
}    
3、在style中使用,添加lang="less"
<style scoped lang="less"></style>

除vue定义好的按键修饰符(如enter,space等)之外，自定义按键修饰符

<template>
    <input  type="text" @keyup.f6="add()"  />
</template>

<script>
    Vue.config.keyCodes.f6=117
</script>

转载于:https://www.cnblogs.com/huihuihero/p/11420482.html