一、组件
1.1组件入门、组件复用、注册组件
在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部
导航。
但是如果每个页面都独自开发，这无疑增加了开发的成本。所以会把页面的不同部分拆分成独立的组件，然后在不同
页面就可以共享这些组件，避免重复开发。
组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。 data的定义方式比较特殊，必须是一个函数。
组件的data属性必须是函数！
因此，对于一些并不频繁使用的组件，会采用局部注册。
下面代码演示全局注册和局部注册、组件复用：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue11测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app11">
<!--使用定义好的组件-->
<counter1></counter1>
<counter1></counter1>
<counter1></counter1>
</div>
<script type="text/javascript">
//1.定义组件
const counter2={
template:"<button @click='num++'>你点击了{
{num}}次，我记住了</button>",
data(){
return {
num:0}
}
};
//2.全局注册组件；参数1：组件名称，参数2：组件(con couter定义的)
//Vue.component("counter1",counter2);
var app1=new Vue({
el:"#app11", //el即element，要渲染的页面元素
//2.局部注册组件
components:{
counter1:counter2
}
})
</script>
</body>
</html>
效果：
1.2父组件先子组件通信
上面的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue12测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app12">
<!--使用定义好的全局组件-->
<introduce1 :title="msg"></introduce1>
</div>
<script type="text/javascript">
//定义组件
const introduce2={
//使用props属性title的值渲染模版
template:"<h2>{
{title}}</h2>",
//定义接收来自父组件的属性
props:["title"]
};
//全局注册组件；参数1：组件名称，参数2：组件
Vue.component("introduce1",introduce2);
var app=new Vue({
el:"#app12", //el即element，要渲染的页面元素
data:{
msg:"父组件中的msg属性的内容"
}
})
</script>
</body>
</html>
效果：
复杂点的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue13测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app12">
<h2>传智播客开设的课程有：</h2>
<!-- 接受来自父组件的属性值，使用v-bind指向父组件的属性lessons；注意使用my-list -->
<my-list :items="lessons"></my-list>
</div>
<script type="text/javascript">
//定义组件
const myList={
template: "<ul>\n" +
" <li v-for=\"item in items\" :key=\"item.id\">{
{item.id}}--{
{item.name}}</li>\n" +
" </ul>",
//定义接收来自父组件的属性
props:{
//定义模版中使用的属性
items:{
//必须为数组类型，如果是对象则用Object
type:Array,
//默认为空数组
default:[]
}
}
};
var app=new Vue({
el:"#app12", //el即element，要渲染的页面元素
data:{
msg:"父组件中的msg属性的内容",
lessons:[
{
"id":1,"name":"java"},
{
"id":2,"name":"python"},
{
"id":3,"name":"go"},
]
},
//注册局部组件，你用全局组件也行
components:{
//如果组件key和value一致可以简写如下
myList
}
})
</script>
</body>
</html>
my-list是固定写法的
1.3子组件向父组件通信（￥emit）
上面的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue14测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app14">
<h2>num={
{
num}}</h2>
<!--使用定义好的组件-->
<counter1 @plus="numPlus" @reduce="numReduce" :snum="num"></counter1>
</div>
<script type="text/javascript">
//1.定义组件
const counter2={
//组件只能是一个元素里面包裹其他元素；如下面，一个div包含两个按钮
template:`
<div>
<button @click='incrNum'>+</button>
<button @click='decrNum'>-</button>
</div>
`,
props:["snum"],
methods:{
//点击模板中使用的方法
incrNum(){
return this.$emit('plus')},
decrNum(){
return this.$emit('reduce')}
}
};
//2.全局注册组件；参数1：组件名称，参数2：组件(con couter定义的)
Vue.component("counter1",counter2);
var app1=new Vue({
el:"#app14", //el即element，要渲染的页面元素
data:{
num:0
},
methods:{
//父组件中定义操作num的方法
numPlus(){
this.num++;
},
numReduce(){
this.num--;
}
}
})
</script>
</body>
</html>
效果：
二、axios
axios可以使用的方法有：
axios(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
（1）config请求配置
这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method ，请求将默认使用 get 方法。
2.2axios方法示例
代码演示：
在项目中直接创建个js文件夹放：
为了演示要获取的数据：
创建个data.json文件：
[
{
"name":"喜洋洋","age":13,"gender":"男"},
{
"name":"美洋洋","age":13,"gender":"女"},
{
"name":"沸羊羊","age":4,"gender":"男"}
]
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo15</title>
<script src="node_modules/vue/dist/vue.js"></script>
<script src="js/axios.min.js"></script>
</head>
<body>
<div id="app15">
<!--要角标遍历数组-->
<ul>
<li v-for="(user,index) in users">{
{index}}--{
{user.name}}--{
{user.age}}--{
{user.gender}}</li>
</ul>
</div>
<script type="text/javascript">
var app1=new Vue({
el:"#app15", //el即element，要渲染的页面元素
data:{
users:[]
},
// 钩子函数多为ajax服务
created(){
//初始化加载数据
//3.post方式
axios.post("data.json").then(res=>{
console.log(res);
//将数据赋值到vue实例中的数据属性users；
//不能使用this，在axios回调函数中表示窗口，不是vue实例
app1.users=res.data;
}).catch(err=>alert(err));
/*
//2.get方式
axios.get("data.json").then(res=>{
console.log(res);
//将数据赋值到vue实例中的数据属性users；
//不能使用this，在axios回调函数中表示窗口，不是vue实例
app1.users=res.data;
}).catch(err=>alert(err));
*/
/*
//1.原始方式
axios({
url:"data.json", //代表从哪获取数据
method:"get"
}).then(res=>{
console.log(res);
//将数据赋值到vue实例中的数据属性users；
//不能使用this，在axios回调函数中表示窗口，不是vue实例
app1.users=res.data;
}).catch(err=>alert(err));
*/
}
});
</script>
</body>
</html>
效果：
上面推荐用post或get，这里写data.json是代表从哪里获取的，这里本机有的，也可以从其他网站获取，注意跨域问题就行。
跨域请求：
