百度网站优化升上去外贸seo建站
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);}}})