vue模块化用了段时间,现在以直引vue.js的方式小小总结下
<meta charset="UTF-8">
<!-- 引入样式 -->
<!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<link rel="stylesheet" href="../jsBase/lib/element.css">
<div id="app">
<div style="min-height: 900px;background-color: white">
{{name}}
<button @click="testaxios" class="primary">axios</button>
<button @click="testhttp" class="primary">http</button>
<button @click="dcurcomponent" class="primary">curcomponent</button>
<br><br><br>
<!--//组件动态切换-->
<component v-bind:is="curcomponent"></component>
<br><br><br>
-----------------------------
<br>
{{topppppppppmsg}}
<tdodo :todo-data="groceryList" @child-msg='toPppp'></tdodo>
<br><br><br>
======================================================
<tdottt/>
</div>
</div>
<div id="tdo">
<div style="min-height: 100px;background-color: gray">
{{name}}
<button @click="tdaoM" class="primary">tdaoM</button>
{{pingxing}}
<br><br>
</div>
</div>
<div id="tdottt">
<div style="min-height: 100px;background-color: gray">
{{name}}
<button @click="tdotttM" class="primary">tdotttM</button>
</div>
</div>
<div id="tdodo">
<div style="min-height: 200px;background-color: gray">
{{names}}
<button @click="cMethod" class="primary">cMethod</button>
<br>
-----------------------------------------------------------
<template>
<div v-for="(item,index) in todoData">
{{item}}
</div>
</template>
<br>
=============================================================
<br>
<button @click="toParent" class="primary">toParent</button>
</div>
</div>
<!--<script src="https://unpkg.com/vue/dist/vue.js"></script>-->
<script src="../jsBase/lib/vue.js"></script>
<!-- 引入组件库 -->
<script src="../jsBase/lib/element.js"></script>
<script src="../jsBase/lib/axios.js"></script>
<script src="../jsBase/lib/vueresource.js"></script>
<!-- 引入组件库 -->
<!--<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
<!--<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>-->
<script>
Vue.http.headers.common['authorization'] = 'mrbase64 mrrest:YWRtaW4mYWRtaW4=';
Vue.http.headers.common['Content-Type'] = 'application/json';
//平行组件之间传值
const event = new Vue();
//全局组件1
Vue.component("tdo",{
template:"#tdo",
data: function () {
return {
name:'bbbbbbbbbbbb',
pingxing:''
}
},
mounted:function() {
event.$on ('tdottt-tdo',(val)=>{
this.pingxing = val ;
});
},
methods:{
tdaoM:function(){
alert('pppppppppppppppppp')
},
}
});
//全局组件2
Vue.component("tdottt",{
template:"#tdottt",
data: function () {
return {
name:'tdotttMtdotttM'
}
},
methods:{
tdotttM:function(){
event.$emit('tdottt-tdo','tdottt-tdotdotttMtdotttM');
}
}
});
//私有组件
var tdodo = Vue.extend({
template: '#tdodo',
data: function () {
return {
names:'todooooooooooooooooooo'
}
},
props: {
todoData: {
type: Array,
default: []
}
},
methods:{
cMethod:function(){
alert('llllllllllllllllllllllll')
},
toParent:function(){
this.$emit("child-msg", '子组件向父组件传值')
}
}
});
// 全局组件
new Vue({
el: '#app',
data: function () {
return {
name:'this is a test',
curcomponent:'',
groceryList: [
{ id: 0, text: '父组件通过todo-data向子组件tdodo传值' },
],
topppppppppmsg:''
}
},
components: {
tdodo: tdodo
},
methods: {
testaxios:function () {
axios(
{
method:'post',
url:'http://127.0.0.1:8081/rest/magicbox/serial',
contentType: 'application/json',
data:{
},
headers: {
// 'Content-Type': 'application/json;charset=UTF-8',
'authorization':'mrbase64 mrrest:YWRtaW4mYWRtaW4='
}
}
).then(function (res) {
console.log(res)
}).catch(function (err) {
console.log(err)
});
},
testhttp:function () {
this.$http.post(
'http://127.0.0.1:8081/rest/magicbox/serial',
{}
).then(
function (res) {
console.log(res)
},
function (err) {
console.log(err)
}
)
},
dcurcomponent:function(){
this.curcomponent='tdo'
},
toPppp:function(val){
this.topppppppppmsg = val;
}
}
})
</script>