vue中註冊全域性函式的方法
阿新 • • 發佈:2019-01-06
import util from './common/js/util'
Vue.prototype.$util = util;
util.js中 var md5 = require('./md5.min') var SIGN_REGEXP = /([yMdhsm])(\1*)/g; var DEFAULT_PATTERN = 'yyyy-MM-dd'; function padding(s, len) { var len = len - (s + '').length; for (var i = 0; i < len; i++) { s = '0' + s ;
}
return s;
}; //這裡寫入元件中要使用的函式
export default {//匯出這個函式
getQueryStringByName: function (name) {
} }; 在自主件中引入 <script> import util from '../../common/js/util'
就可以直接也能用this.$util.getQueryStringByName()來呼叫這個方法了 1:eventhub.js檔案裡的內容
:import Vue from 'vue'
export default new Vue()
eventhub.js裡面寫入這個
import Vue from 'vue'
export default new Vue()
然後在main.js裡引入這個vue的例項
import eventhub from './eventhub'
Vue.prototype.$eventhub = eventhub
然後就可以
eventhub.$emit()//指的是觸發
eventhub.$on()//指的是註冊一個方法
例如在main.js裡寫有
eventhub.$emit('qrcode','wx_qrcode','關注我');
而在qrcode.vue檔案裡寫有
this.$eventhub.$on('qrcode',(text,title)=>{
方法:它就註冊裡這個方法
}
eventhub.$emit('qrcode','wx_qrcode','關注我);這裡就能執行它!!!
var self=event.currentTarget;獲取當前點選事件的元素
意思就是當你給一個vue元件繫結事件時候,要加上native
在data(){
return{
goods:[
{
id:""
name:""
pic_id:""
}
]
}
}
這樣定義資料
而在jison中獲取
goods:[
{id:"",name:"",pic_id:""},
{id:"",name:"",pic_id:""},
{id:"",name:"",pic_id:""}
]
他會把資料全部集合起來
過濾器:
{{total| price}}元
在vue的方法中寫入:
filters:{
price:function(val){//val就是total的值,最後返回的是過濾好的值
var res = 0.00;
if (Math.ceil(val) == val) {
val = val + ".00"
} var res = 0.00;
if (Math.ceil(val) == val) {
val = val + ".00"
}
try {
res = val.toFixed(2)
if (res == '-0.00') {
res = '0.00'
}
} catch (err) {
res = val
}
return res;
}
try {
res = val.toFixed(2)
if (res == '-0.00') {
res = '0.00'
}
} catch (err) {
res = val
}
return res;
}
}
}
<checkbox :val="v.check" @on-change="addAllGoods(v)"></checkbox>
這裡一般我覺得是利用checkbox,如果發生改變時,向data中增加選擇的引數
v.check這裡一般是預設的狀態,在後臺定義,一般是false
關於父子元件傳參:
自元件定義方法
如:
<div class="checkbox">
<input type="checkbox" v-model="flag" @change="change">
<img src="../../assets/checked.png" v-show="flag">
</div>
exropt default{
props:{ //定義共享資料
val:{
type:Boolean
},
index:{
type:String
}
},
data(){
return{
flag:this.val
}
},
computed: {
_index(){
return this.index
}
},
watch: {
val(old, newVal) {
return this.flag = !newVal;
}
}, //監聽
methods:{
change() {
this.$emit('on-change');
} //這是重點這有這個才能觸發這個元件
}
}
最後在父元件中引用:
<checkbox :val="v.check" @on-change="addAllGoods(v)"></checkbox>
import checkbox from './shopping/checkBok'
components: {
checkbox
}
this.total -= Number(price);
methods: {
getTotal(price, type) {//true為增加, false為減少 可以使資料新增或減少
if (type) {
this.total += Number(price);
} else {
this.total -= Number(price);
}
}
var data=this.$route.query;
data.address=this.address.id
data.remark=[]
可以直接這樣從進來的引數物件中寫入這些資料,最後提交給後代
util.js中 var md5 = require('./md5.min') var SIGN_REGEXP = /([yMdhsm])(\1*)/g; var DEFAULT_PATTERN = 'yyyy-MM-dd'; function padding(s, len) { var len = len - (s + '').length; for (var i = 0; i < len; i++) { s = '0' + s
} }; 在自主件中引入 <script> import util from '../../common/js/util'
就可以直接也能用this.$util.getQueryStringByName()來呼叫這個方法了 1:eventhub.js檔案裡的內容
:import Vue from 'vue'
export default new Vue()
eventhub.js裡面寫入這個
然後在main.js裡引入這個vue的例項
import eventhub from './eventhub'
Vue.prototype.$eventhub = eventhub
然後就可以
eventhub.$emit()//指的是觸發
eventhub.$on()//指的是註冊一個方法
例如在main.js裡寫有
eventhub.$emit('qrcode','wx_qrcode','關注我');
而在qrcode.vue檔案裡寫有
this.$eventhub.$on('qrcode',(text,title)=>{
方法:它就註冊裡這個方法
}
eventhub.$emit('qrcode','wx_qrcode','關注我);這裡就能執行它!!!
var self=event.currentTarget;獲取當前點選事件的元素
意思就是當你給一個vue元件繫結事件時候,要加上native
在data(){
return{
goods:[
{
id:""
name:""
pic_id:""
}
]
}
}
這樣定義資料
而在jison中獲取
goods:[
{id:"",name:"",pic_id:""},
{id:"",name:"",pic_id:""},
{id:"",name:"",pic_id:""}
]
他會把資料全部集合起來
過濾器:
{{total| price}}元
在vue的方法中寫入:
filters:{
price:function(val){//val就是total的值,最後返回的是過濾好的值
var res = 0.00;
if (Math.ceil(val) == val) {
val = val + ".00"
} var res = 0.00;
if (Math.ceil(val) == val) {
val = val + ".00"
}
try {
res = val.toFixed(2)
if (res == '-0.00') {
res = '0.00'
}
} catch (err) {
res = val
}
return res;
}
try {
res = val.toFixed(2)
if (res == '-0.00') {
res = '0.00'
}
} catch (err) {
res = val
}
return res;
}
}
}
<checkbox :val="v.check" @on-change="addAllGoods(v)"></checkbox>
這裡一般我覺得是利用checkbox,如果發生改變時,向data中增加選擇的引數
v.check這裡一般是預設的狀態,在後臺定義,一般是false
關於父子元件傳參:
自元件定義方法
如:
<div class="checkbox">
<input type="checkbox" v-model="flag" @change="change">
<img src="../../assets/checked.png" v-show="flag">
</div>
exropt default{
props:{ //定義共享資料
val:{
type:Boolean
},
index:{
type:String
}
},
data(){
return{
flag:this.val
}
},
computed: {
_index(){
return this.index
}
},
watch: {
val(old, newVal) {
return this.flag = !newVal;
}
}, //監聽
methods:{
change() {
this.$emit('on-change');
} //這是重點這有這個才能觸發這個元件
}
}
最後在父元件中引用:
<checkbox :val="v.check" @on-change="addAllGoods(v)"></checkbox>
import checkbox from './shopping/checkBok'
components: {
checkbox
}
this.total -= Number(price);
methods: {
getTotal(price, type) {//true為增加, false為減少 可以使資料新增或減少
if (type) {
this.total += Number(price);
} else {
this.total -= Number(price);
}
}
var data=this.$route.query;
data.address=this.address.id
data.remark=[]
可以直接這樣從進來的引數物件中寫入這些資料,最後提交給後代