vue 只负责前端界面的显示,没有数据的传输。
所以我们要通过axios来进行数据传输。
首先是导入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
主要是使用了两个方法data()方法来接受返回值,mounted()方法来进行axios数据传输。
div id="vue">
<div>{{info.name}}</div>
<div>{{info.page}}</div>
<a v-bind:href="info.url">点击我</a>
<div>{{info.address.street}}+{{info.address.city}}+{{info.address.country}}</div>
<div v-for="item in info.links">{{item.name}}:{{item.url}}<br></div>
</div>
<script type="text/javascript">
var vm= new Vue({
el: '#vue',
data(){
return{
//请求返回的参数合适,必须和json字符串一样 当然也可不写
info:{
name:null,
}
}
},
mounted(){
//钩子函数链式编程
axios.get("data.json").then(response=>(this.info=response.data))
}
});
</script>
json数据
{
"name":"狂神说java",
"url": "http://baidu.com",
"page": "1",
"isNonProfit":"true",
"address": {
"street": "含光门",
"city":"陕西西安",
"country": "中国"
},
"links": [
{
"name": "B站",
"url": "https://www.bilibili.com/"
},
{
"name": "4399",
"url": "https://www.4399.com/"
},
{
"name": "百度",
"url": "https://www.baidu.com/"
}
]
}
计算属性 computed属性 计算属性主要特性就是为了将不经常变化的计算结果进行缓存,这样可以节约我们的计算成本。
<div id="app">
<p>{{message}}</p>
<p>{{methodsDate()}}</p>
<p>{{computedDate}}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message:"你好"
},
methods:{
methodsDate:function (){
return Date.now();
}
},
computed: {
computedDate: function (){//计算属性: methods,computed 方法名不能重写,重名之后只会methods的方法
this.message;
return Date.now();
}
}
})
</script>
同过事件戳的变化我们可以看的出methods方法是在不断的变化 的,而computed数值不变,他是在当前方法中数据发生变化时才跟随发生变化,有点想mybatis中的一级缓存,在没有发生增删改的情况下不会发生变化。
插槽
插槽我们是使用component组件来完成的,首先是我们创建一个component(组件名,方法体)。我们定义一个属性template模板,我们在模板中定义一些相对应的格式。<slot 标签是一个插槽,它可以定义多个。
我们一下面的例题来说
首先是我们创建了一个vue在他当中设置了属性。然后我们有创建了一个组件todo在他的template中设置了两个插槽slot,然后我们有创建了两个组件todo-title和todo-items,现在我们在div中设置好了他的结构
<div id="app">
<todo>
<todo-title></todo-title>
<todo-items></todo-items>
</todo>
</div>
如果是现在这样运行他就会同时夹在两个插槽,我们需要动态的获取内容所以要对他们进行赋值。
首先是我们需要在todo组件中的插槽添加好相对应的组件名,然后我们在使用的组件中添加slot属性通过名字找到相对应的插槽,最后因为我们需要动态的获取数据,我们就需要在我们的两个子组件中添加接受参数和相对应的template模板,在我们的使用中添加数据绑定。
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
</todo>
</div>
<script>
Vue.component('todo-title',{
props:['title'],
template: '<div>{{title}}</div>'
});
Vue.component('todo-items',{
props: ['item'],
template: '<li>{{item}}</li>'
});
Vue.component('todo',{
template: '<div>\
<slot name="todo-title" ></slot>\
<ul>\
<slot name="todo-items" ></slot>\
</ul>\
</div>'
});
var app = new Vue ({
el:'#app',
data:{
title:'阿威',
todoItems:['java','php','c']
}
});
</script>