vue 学习笔记1

1、子组件在父组件的原生的事件
例如一个child子组件的点击事件<child @click="handleClick">点击</child>
这种情况在父组件中是不能触发点击事件，这里click点击事件对子组件是自定义事件，如果想变成
原生的事件必须加navtiv修饰符<child @click.native="handleClick">

2、input、textarea, change事件不能触发，而是采用input事件
<template>
    <div>
      <input type="text" placeholder="请输入..." @input="hanldeChange" v-model="msg">
    </div>
</template>

<script>
     export default {
          name: "OutInput1",
       data () {
         return {
           msg:""
         }
       },
       methods :{
         hanldeChange(){
           console.log(this.msg)
         }
       }
     }
     在这里input事件可以监听到vue中的input用户输入的值，取代了change事件
</script>

3

vue-cli 2.0的static文件夹中组件可以访问其中的静态文件,例如axios,
在static文件夹中有个index.json文件，下面的路径可以访问其中的index.json文件中的内容
在http://localhost:8080/static/index.json也能访问到其中的数据

 mounted(){
  this.get()
  },
  methods:{

   get(){
      axios.get('/static/index.json').then(
        res =>{
          var respose = res.data
          console.log(respose)
        }
      )
    }

  },
  mounted(){
    this.get()
    },
    methods:{

     get(){
        axios.get('/static/index.json').then(
          res =>{
            var respose = res.data
            console.log(respose)
          }
        )
      }

    },

webpack也为我们提供了一个借口，可以访问内部的数据，在vue-cli2.0中的config文件夹中的index.js
中proxyTable空对象可以这样设置：
 proxyTable: {
      "/api":{
        target:"http://localhost:8080",
        pathRewrite:{
          "^/api":"/static"
        }
      }
    }
  这样下面的路径可以这样写了

修改config  index.js文件后路径这样就可以模拟后台数据的接口
 get(){
      axios.get('/api/index.json').then(
        res =>{
          var respose = res.data
          console.log(respose)
        }
      )
    }