一.交互应用
通过axios.get()方式获取存放数据接口url，然后通过button点击将数据遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>连接论坛</title>
<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
<div id="box">
<button v-on:click="seach()">连接论坛</button>
<ul v-for="item in arr">
<li>{{item.commentTxt}}</li>
<li>{{item.createAt|myTime}}</li>
</ul>
</div>
<script>
let vm = new Vue({
el:'#box',
data:{
arr:[],
},
methods:{
seach:function(){
axios.get("http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187").then(
value=>{
console.log(value.data.data.commentList);
this.arr=value.data.data.commentList;
}).catch(
error=>{
console.log(error.status)
})
}
},
filters:{
myTime:function(val){
return val.substr(0,10);
}
}
})
</script>
</body>
</html>二.最简组件
全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
<div id="box">
<!-- 调用必须在某一个vue作用域中调用 -->
<test></test>
</div>
<script>
//全局组件
Vue.component("test",{
template:"<h1>hello,word</h1>"
});
let vm=new Vue({
el:"#box",
data:{
msg:"fg"
}
})
</script>
</body>
</html>
上面那种有很多局限性：
第一写标签的时候没有帮助，速度慢，准确性低
全局组件改良版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
<div id="box">
<!-- 调用必须在某一个vue作用域中调用 -->
<my-component></my-component>
</div>
<template id="tt3">
<div>
<p>hello,word</p>
<h1>zhangsan</h1>
</div>
</template>
<script>
Vue.component("myComponent",{
template:"#tt3",
});
var vm=new Vue({
el:"#box"
})
</script>
</body>
</html>全局组件的命名规则
命名：myCompu
调用：<my-compu></my-compu>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
<div id="box">
{{msg}}
//调用的时候注意格式，前面的小写照写，后面的全改为小写，中间一条“-”
<my-compu></my-compu>
}
</div>
<script>
Vue.component("myCompu",{
template:"<h1>hello,word</h1>"
});
var vm=new Vue({
el:"#box",
data:{
msg:"ghj"
}
})
</script>
</body>
</html>全局组件：带参数和方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
<div id="box">
<my-compu></my-compu>
</div>
<script>
Vue.component("myCompu",{
template:"<h1 v-on:click='fn()'>{{msg}}</h1>",
data:function(){
return{
msg:"第一个版本"
}
},
methods:{
fn:function(){
console.log("syy")
}
}
});
var vm=new Vue({
el:"#box"
})
</script>
</body>
</html>改良版全局组件：带参数和方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
<div id="box">
<my-component></my-component>
</div>
<template id="tt3">
<p><span v-on:click="fn()">{{msg}}</span><span>{{age}}</span></p>
</template>
<script>
Vue.component("myComponent",{
template:"#tt3",
data:function(){
return{
msg:"zhangsan",
age:18
}
},
methods:{
fn:function(){
console.log("success");
}
}
});
var vm=new Vue({
el:"#box"
})
</script>
</body>
</html>局部组件：带参数和方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
<div id="box">
<my-component></my-component>
</div>
<script>
var vm=new Vue({
el:"#box",
data:{},
components:{
"myComponent":{
template:"<p><span v-on:click='fn()'>{{msg}}</span><span>{{age}}</span></p>",
data:function(){
return{
msg:"刘亦菲",
age:19
}
},
methods:{
fn:function(){
console.log(1234)
}
}
}
}
})
</script>
</body>
</html>改良版局部组件：带参数和方法
这个实例应该着重注意他的参数和方法的定义，data的定义是和vue对象的有所差别，需要把data写成一个函数然后返回参数值，methods的使用是一样的，写方法然后在具体的标签上使用，注意不能在template上使用，不然识别不到 ；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.14/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.17.1/axios.min.js"></script>
</head>
<body>
<div id="box">
<my-component></my-component>
</div>
<template id="tt3">
<p>
<span>{{msg}}</span>
<span v-on:click="fn()">{{age}}</span>
</p>
</template>
<script>
var vm=new Vue({
el:"#box",
data:{},
components:{
"myComponent":{
template:"#tt3",
data:function(){
return{
msg:"刘亦菲",
age:19
}
},
methods:{
fn:function(){
console.log(1234)
}
}
}
}
})
</script>
</body>
</html>