fetch与axios请求数据
fetch基本语法：
fetch(url，{parmas}).then(res=>
res.json() //返回promise对象
).then(data=>{
return data //返回真正数据
}).catch(err=>{
throw new Error(err)
})
get请求:
<script type="text/javascript"> fetch("./test.json").then(res=>res.json()).then(res=>{ console.log(res) }) </script>
axios请求
引入axios：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios执行GET
//参数在url中
<script type="text/javascript"> axios.get('/user?ID=12345') .then(res=>{
console.log(res);
}) .catch(error=>{ console.log(error); }) </script>
//带参数形式 <script type="text/javascript"> axios.get('/user', { params: { ID: 12345 } })
.then(res=>{
console.log(res);
})
.catch(error=>{
console.log(error);
})
</script>
axios执行POST
<script type="text/javascript"> axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function(response){ console.log(response); }) .catch(function(error){ console.log(error); }) </script>
计算属性
计算属性定义到 computed 里面，如:
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
myname: "xiaoming"
},
computed:{
getMyname(){
return this.myname.substring(0,1).toUpperCase()+this.myname.substring(1)
} //依赖的状态改变了,计算属性会重新计算一遍
}
})
</script>
这段代码的作用是将myname的第一个字符改成大写，getMyname是一个计算属性方法，需要定义到computed里面，调用的时候直接调用 getMyname，如: {{ getMyname }} 后面不用加小括号，计算属性方法当依赖的状态改变了，计算属性会重新计算一遍。
计算属性跟计算方法的区别
计算属性效率更高，计算属性调用过第一次后会存有缓存，第二次会直接使用缓存中的结果进行返回，当依赖的状态改变时才重新计算。
计算方法每次调用都会重新执行一遍函数，这样效率会降低。
组件化开发
为什么要使用组件？比如我们在一个页面中做好了轮播图效果，现在需要在另一个页面中也使用同样的轮播图，这时就需要复制大量代码
组件就是类似把这些dom结构css样式,逻辑封装成一个盒子或者说模板， 在需要使用重复的地方调用这个组件就能效果。
全局组件
使用 Vue.component定义全局组件，如:
Vue.component("navbar",{
template:`
<div>
<button>返回</button>
navbar
<button>主页</button>
</div>
`
})
Vue.component的第一个参数是组件名，template 的值是html结构的标签
调用组件: <组件名></组件名>,如 <navbar></navbar> 这样就能调用定义好的组件了，在浏览器中 组件标签 会自动被替换成 template中的结构数据
Vue.component的结构跟Vue的结构差不多,也可以定义methods属性 ，
局部组件
说到局部组件，其实当我们创建一个vue实例时，他就是一个root(根)组件，el:命中的元素中就是root组件的模板，根组件可以包含子组件。
局部组件是定义在组件内部的组件，使用components属性，如:
<script type="text/javascript"> Vue.component("navbar",{ template:` <div> <button>返回</button> navbar <button>主页</button> <navbarchild></navbarchild> </div> `, components:{ navbarchild:{ template:`<div>navbarchild</div>` } } }) new Vue({ el:"#box" }) </script>
这段代码在navbar组件中定义了一个局部组件 navbarchild，这个组件只能被 navbar 使用，根(root)组件是使用不了的。
如果需要定义一个组件要能够给所有组件使用，就需要定义成全局组件。
组件编写方式与Vue实例的区别
自定义组件需要有一个root element
一个组件必须有他的根节点，不能有两个根节点，如：
Vue.component("navbar",{
template:`
<div>
<button>返回</button>
navbar
<button>主页</button>
<navbarchild></navbarchild>
</div>
<div>111</div>
`
})
这个navbar组件有两个同级的根节点，根节点只能有一个，所以这段代码会报错。要解决这个需要在最外层添加一个标签，这个标签可以是h1、p、nav.. 等
父节点的data是无法共享的
组件可以有data，methods，computed....，但是data 必须是一个函数
组件中 data必须是以函数形式写，如:
<script type="text/javascript"> Vue.component("navbar",{ template:` <div> <button>返回</button> {{ navbarname }} <button>主页</button> </div> `, data(){ return { navbarname: "nav" } } }) new Vue({ el:"#box" }) </script>
data()函数返回一个对象，这个对象是 data状态。
组件属性传递（父传子）
如果要组件中使用父组件中的属性，就 需要组件之间的属性传递，栗子：
<div id="app">
<navbar myname='home'></navbar>
<navbar myname='list'></navbar>
<navbar myname='shopcar'></navbar>
</div>
<script>
Vue.component("navbar", {
template:`
<div>
<button>返回</button>
navbar ----- {{ myname }}
<button>首页</button>
</div>
`,
props:['myname'] //接收父组件传来的属性
})
const app = new Vue({
el: "#app",
data: {
parentname: 'dict'
}
})
</script>
代码中定义了一个组件 navbar ，同时在 navbar 中设置了 props 属性，该属性值是数组类型，表示需要接收父组件传来的属性，可以接收多个，如: props:['a', 'b', 'c']，这些属性通过父组件传递过来后在自己模板中可以之间使用。
父组件在调用 navbar 时定义了一个属性 myname（这个属性名可以随便起，要跟 navbar 中要接收的属性名一样）,然后把需要传递的值赋给 myname，再通过 myname 属性将值传给子组件。
上面写的属性值传递都是固定的，如果我们需要动态的传递属性值，就需要用到 v-bind ，将myname设置成动态绑定，如：
<div id="app">
<navbar :myname='parentname'></navbar>
</div>
<script>
Vue.component("navbar", {
template:`
<div>
<button>返回</button>
navbar ----- {{ myname }}
<button>首页</button>
</div>`,
props:['myname'] //接收父组件传来的属性
})
const app = new Vue({
el: "#app",
data: {
parentname: 'list'
}
})
</script>
通过 v-bind 为 myname 动态绑定一个属性 parentname
属性验证
有时候在使用组件时，我需要接收一个布尔类型的值，但是调用的时候不小心传了一个字符串类型的值，这样就会造成我们的组件达不到预期的效果
怎么解决这问题呢？我们需要用到属性验证：
前面我们在 navbar 中设置 props的值时数组类型，这样不会存在属性验证，我们需要将 props的值设置成对象类型 如:
props:{
myname: String,
myshow: Boolean
}
props 属性的值是一个对象，对象属性 myname限制的类型是String、myshow是boolen，这样在父组件先子组件传递该属性时，会先验证一下类型是否匹配。
组件属性传递（子传父）
父传子是通过属性，子传父需要通过事件来进行传值，栗子：
<div id="app">
<child @myevent="handleEvent($event)"></child>
</div>
<script type="text/javascript">
Vue.component("child", {
template:`
<div><button @click="childClick()">将值传给父组件</button>
</div>
`,
methods:{
childClick(){
this.$emit("myevent", 1000)
}
}
});
const vm = new Vue({
el: "#app",
methods:{
handleEvent(event){
console.log("父组件", event)
}
}
})
</script>
先来分析 child 组件，在child组件定义了一个childClick()方法，方法中有一行代码 this.$emit("myevent", 1000)，$emit 这个方法用来调用父组件传过来的事件执行方法，第一个参数是事件名 (这个事件名是从父组件传递过来的)，第二个参数是在调用父类事件方法的时候需要传参过去的值（后面还可以跟多个参数）。
父组件在调用 child 组件时设置了一个事件 @myevent(事件名自己可以任意定义) 为这个事件绑定了方法 handleEvent 它接收一个参数，当子组件执行 this.$emit("myevent", 1000) 这行代码时，子组件就会调用父组件传递过来的事件方法执行 handleEvent这个方法，并且会将值1000传参给handleEvent执行，这样就实现了组件子传父。