Vue 学习笔记 02

Vue 学习笔记 01——iview

Vue 学习笔记 02

Vue 学习笔记 03——组件篇

Vue 学习笔记 04——TabPanel

Vue 学习笔记 05——状态管理Vuex

===================================正文分割线==================================

1.  .sync 修饰符的使用

用于组件之间数据的“双向绑定”；父组件可以监听子组件的事件并根据需要更新一个本地的数据属性

子组件内触发事件的名称应使用 update:myPropName 命名，例：

Vue.component('xqselect',{
    template:`
        <i-select :value="xqvalue" @on-change="change">
            <i-option v-for="item in list" :key="item.value" :value="item.value">{{ item.mc }}</i-option>
        </i-select>
    `,
    ​props:{
        xqvalue:String,
        ...
    },
    methods:{
        change:function(e){
            this.$emit('update:xqvalue', e); 
        }
    }​
})

父组件使用如下：

<xqselect :xqvalue.sync="xqvalue"></xqselect>

2.从后台接值的方法

  从后台接值，只能在html页面中接，在js中接不到，所以当把js拆分成单独的文件时，要在页面定义变量接值

data:{
    mydata:'${p_mydata}'
}

 3.分页方法

this.PostByPage(baseUrl+'Xkkg/queryXkkgList', {'pylx':self.pylx, 'xnxq':self.xnxq},         
function(res){
        	self.data1 = res.list;
            self.page.total=res.total;
            self.page.pageNum=res.pageNum;
            self.page.pageSize=res.pageSize;
        })

4. mixins混入

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

mixins接收一个混入对象数组；

同一个生命周期，混入对象会比组件的先执行。

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
  mixins: [mixin],  //使用混入
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

详细案例解说见官网： https://cn.vuejs.org/v2/guide/mixins.html

5.对象赋值 

把后者赋值给前者，不能使用等号给前者赋值，否则一个值改变另一个也将改变

$.extend(self.formAdd,res);

6.过滤器

案例：书籍购买案例中的价格显示，需要加 ‘￥’,以及数字以小数点后两位显示，如下图：

<!--  item.price  作为  showPrice的参数传入  -->
<td>{{ item.price | showPrice }}</td>

var vm = new Vue({
  el:'#app',
  data:{},

  //过滤器
  filters:{
	showPrice:function(price){
		return '￥'+ price.toFixed(2);
	}
  }

})