组件
- 组件(Component)是 Vue.js 最强大的功能之一。
- 组件可以扩展 HTML 元素,封装可重用的代码。
- 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!--组件:传递给组件中的值:props-->
<chien v-for="item in items" v-bind:qc="item"></chien>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
/*定义一个Vue组件component*/
Vue.component("chien",{
props:['qc'],
/*prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
父组件的数据需要通过 props 把数据传给子组件,子组件需要显式地用 props 选项声明 "prop":*/
template:'<h2>{{qc}}</h2>'
})
var vm = new Vue({
el:"#app",
data:{
items:["Java","Linux","前端"]
}
})
</script>
</html>
Axios异步通信
有很多时候构建应用时需要访问一个 API 并展示其数据。做这件事的方法有好几种,而使用基于 promise 的 HTTP 客户端 axios 则是其中非常流行的一种。
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{info.name}}</h2>
<h2>{{info.address.country}}</h2>
<a v-bind:href="info.url">chienblog</a>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data(){//date函数
return{
info:{}
}
},
mounted(){//钩子函数,链式编程,ES6新特性
axios.get('data.json').then(response=>(this.info=response.data))
}
})
</script>
</html>
计算属性
计算属性关键词: computed。
这个属性具有计算的能力(这里的计算就是个函数),它就是一个能够将计算结果缓存起来的属性(将行为转换成静态的属性),可以想象为缓存。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<h2>{{currentTime}}</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
data:{
message:"hello vue"
},
computed:{
currentTime:function () {
this.message;
return Date.now();//返回一个时间戳
//当message内容改变时,重新执行方法
}
}
})
</script>
</html>
调用方法时,每次都需要进行计算,既然有计算过程必定产生系统开销,那如果是不经常变化的呢?此时就可以考虑将这个结果缓存起来,采用计算属性可以很方便的做到这一点,计算属性的主要特性就是为了将不常变化的的计算结果进行缓存,以节约系统开销。