持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情
1. Vue组件
组件是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
<div id="app">
<!-- 组件：传递给组件中的值：props-->
<qinjiang v-for="item in items" v-bind:qin="item"></qinjiang>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
//定义一个vue组件component
Vue.component("qinjiang", {
props: ['qin'],
template: '<li>{{qin}}</li>'
});
var vm = new Vue({
el: "#app",
data: {
items: ["java", "linux", "前端"]
},
});
</script>
-
v-for="item in items"：遍历vue 实例中定义的名为items的数组，并创建同等数量的组件 -
v-bind:qin="item"：将遍历的item项绑定到组件中props定义的名为qin属性上；等号左边的qin为props定义的属性名，右边的为"item in items"中遍历item项的值
2. Vue：axios异步通信
Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架， 她的主要作用就是实现AJAX异步通信，其功能特点如下：
-
从浏览器中创建XMLHttpRequests
-
从node.js创建http请求
-
支持Promise API JS中链式编程
-
拦截请求和响应
-
转换请求数据和响应数据
-
取消请求
-
自动转换JSON数据
-
客户端支持防御XSRF(跨站请求伪造)
data.json
{
"name": "kuangshen",
"url": "http://baidu.com",
"page": 1,
"isNonProfit": true,
"address": {
"street": "含光门",
"city":"陕西西安",
"country": "中国"
},
"links": [
{
"name": "bilibili",
"url": "http://cgcd"
},
{
"name": "狂神说",
"url": "http://cgcd"
},
{
"name": "百度",
"url": "http://cgcd"
}
]
}
<div id="vue" >
<div>{{info.name}}</div>
<!-- <div>地名：{{info.name}}</div>-->
<!-- <div>地址：{{info.address.country}}--{{info.address.city}}--{{info.address.street}}</div>-->
<div>链接：<a v-bind:href="info.url">{{info.url}}</a> </div>
</div>
<!--引入js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#vue",
//data:属性:vm,下面这个是data方法
data(){
return{
//请求的返回参数格式，必须跟json一样
info:{
name:null,
address:{
street:null,
city:null,
country:null
},
}
}
},
mouted(){//钩子函数 链式编程 ES6新特性
axios.get('../data.json').then(response=>(console.log(response.data)));
}
});
</script>
3. 计算属性
计算属性：计算出来的结果，保存在属性中 ，内存中运行：虚拟dom
<div id="vue" >
<!-- currentTime1()调用的是currentTime()方法-->
<p>currentTime1 {{currentTime1()}}</p>
<!-- currentTime2()调用的是currentTime计算属性-->
<p>currentTime2 {{currentTime2}}</p>
</div>
<!--引入js文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#vue",
data:{
message:"hello kuangshen"
},
methods: {
currentTime1:function () {
return Date.now();//返回一个时间数
}
},
computed:{//计算属性 是属性，调用不需加（）
currentTime2:function () {//计算属性： methods.computed不能重名，重名后只会调用methons的方法
//缓存在内存中，在控制台vm.currentTime2，不会改变数值，而vm.currentTime1()方法会改变
//控制台中改变message后，currentTime2才会改变
this.message;
return Date.now();//返回一个时间数
}
}
});
在控制台vm.currentTime2()，控制台报错；在控制台vm.currentTime2，不报错，但不会改变数值；在控制台vm.currentTime1，无响应；而在控制台vm.currentTime1()方法，数值才会改变
控制台中改变message后，currentTime2才会改变
调用方法时，每次都需要讲行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这点， 计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销；
