vue 常用操作笔记

获取路由 url 中的参数 id

this.$route.params.id

按钮点击事件

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
<li><a href="#" @click.prevent="selectedPage ='Foo'">Foo</a></li>
      <li><a href="#" @click.prevent="selectedPage ='Bar'">Bar</a></li>

记得刷新

文本框绑定

<input v-model="message" placeholder="edit me">

axios 表单提交

You can post axios data by using FormData() like :

var bodyFormData = new FormData();

And then add the fields to the form you want to send :

bodyFormData.set('userName', 'Fred');

If you are uploading images, you may want to use .append

bodyFormData.append('image', imageFile); 

And then you can use axios post method (You can amend it accordingly)

axios({
    method: 'post',
    url: 'myurl',
    data: bodyFormData,
    config: { headers: {'Content-Type': 'multipart/form-data' }}
    })
    .then(function (response) {
        //handle success
        console.log(response);
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    });

You can read more Here

路由切换事件(只在app.vue有效)

watch:{
    $route (to, from){
        this.show = false;
    }
} 

created 在路由变化后,页面不变化的解决

vue watch route not working vue 监听路由不触发

解决方法:https://segmentfault.com/a/1190000011882494 5、平级组件通信

计算属性的数据变化后,视图却没更新

     this.$root.$router.go({
        path: '/1',
        force: true
      })        

父子数据绑定

Just add this .sync modifier to the data binding in the parent and then in the child, just emit the update event. The data in the parent will also be modified with the new value.

Now the parent code will look like:

<SampleComponent :inputData.sync="parentData" />

And the input field in child will look like:

<input type="text" v-model="inputData" @keyup="$emit('update:inputData', inputData);"/>

http://jsrun.pro/aXyKp/edit

发表留言

本站启用了垃圾评论检测插件,如果误删请联系我~