vue-axios，组件，组件化开发，SPA

一、Axios

什么是：基于promise的专门发送ajax请求的函数库。
为什么：在vue中发送ajax请求

1. 自己写ajax四步/五步：代码重复严重。
2. jQuery中ajax()：大材小用，得不偿失。
   jQuery不是专门执行ajax请求的。而是执行所有DOM操作。
   包含大量的DOM操作的函数。而在vue中其实只需要$.ajax()，其余函数根本用不上。
3. Vue框架自带ajax请求的模块：vue-resource:只能在vue中使用。
4. Vue 官方推荐：axios
   可在斜体位置发送ajax请求
   index.html
   new Vue()
   node.js index.js

何时：今后，只要在vue中发送ajax请求，都用axios。

如何：

1. 引入axios.js
2. 发送请求：

axios.get("url",{
	params:{
		请求参数：参数值
	}
}).then(function(返回结果result){
	result:data 才是服务器返回的结果
})

例

<script src="../js/axios.min.js"></script>
<script>
    axios.get("http://localhost:3000", {
        lid: 5
    }).then(function(result) {
        console.log(result);
        console.log(result.data);
    })
</script>

//server.js
const http = require("http");
const url = require("url");
http.createServer((req, res) => {
    var Url = url.parse(req.url, true);
    var lid = Url.query.lid;
    res.writeHead(200, {
        "Access-Control-Allow-Origin": "http://127.0.0.1:5500"
    })
    res.write(JSON.stringify({
        lid: lid,
        title: "macbook",
        subtitle: "金秋大酬宾",
        price: 6800
    }));
    res.end();
}).listen(3000);

二、组件component

什么是：拥有专属的HTML，CSS，JS和数据的可重用的页面独立区域。
为什么：可重用，避免重复代码，提供开发效率。
何时：只要发现页面中一个独立的功能/区域反复被使用，都要封装为组件。

例：

//my_counter.js
Vue.component("my-counter", {
    template: `<div>
        <button @click="sub">-</button>
        <span>{{n}}</span>
        <button @click="add">+</button>
    </div>`,
    data: function() {
        return { n: 1 }
    },
    methods: {
        sub() {
            this.n--;
        },
        add() {
            this.n++;
        }
    }
})

//component.html
<div id="app">
    <my-counter></my-counter>
    <my-counter></my-counter>
    <my-counter></my-counter>
</div>

1、封装组件

Vue.component("组件名",{
	template:`html片断`,	//代替以前的el
		//<button @click="sub">-</button><span>{{n}}</span><button @click="add">+</button>
	data:function(){
		return {//大括号里面的相当于以前的data
			n:1
		}
	},
	//其他成员和new Vue中完全一样
})

2、反复使用组件：组件其实就是一个可重用的自定义HTML标签而已。

<组件名></组件名>
比如：<my-counter></my-counter>

原理：Vue.component()将组件模板添加到Vue大家庭中备用。
new Vue()扫描DOM树时，发现自定义标签，就在Vue家里找到同名组件，用template替换页面的自定义标签。
同时调用组件的data()函数，为此处的一个组件示例下一个专属的蛋（数据data对象{n:1}）
将来，每替换一个自定义标签，说明组件被使用了一次，就会自动调用一次data()函数，返回一个专属的数据对象给当前组件专门使用。

3、组件化开发

什么是：将来所有的网页都是由组件组成的。拿到网页后先划分组件。再分别编写每个组件的HTML，CSS和Vue代码。最后再拼接到一起
为什么: 可多人团队协作开发
调试方便，组件之间互不影响
何时: 今后所有网页必须都用组件化开发。
如何:

1. 拿到页面后，先划分组件
   
2. 创建组件：Vue.component()同上
3. 在主页面中引入组件：同上
4. new Vue()

问题：用Vue.component()创建的组件可以出现在页面的任何位置，不受限制。
解决：子组件必须出现在规定的父组件内才有意义
如何：3种组件：

1. new Vue({el:"#app"}) —— 根组件
   通常只有在项目唯一的首页上才只有一个new Vue()
2. Vue.component()——全局组件
   可出现在页面的任何位置
3. 子组件：被限制在一个固定父组件内使用的组件
   何时：今后只要一个组件，有明确的使用范围，不能乱放时，都要定义成子组件
   如何：2步：
   （1）创建子组件：同创建全局组件，但降级为普通对象定义格式：比如：todo-item必须属于todo-list下才有意义：

var todoItem = {
	template:`<li>
	1 - 吃饭<button></button>
	</li>`
}

强调：子组件名必须用驼峰命名！因为之后会被自动翻译为 - 分隔，比如：todoItem -> Vue -> todo-item
(2) 在父组件中添加components属性，包含子组件对象
比如：

var todoList = {
	template:`<ul>
		<todo-item></todo-item>
		<todo-item></todo-item>
		<todo-item></todo-item>
	</ul>`,
	components:{todoItem}  
	强调：这里必须和上一步定义子组件时的变量名保持一致。
	结果：<todo-item>就只能在<todo-list>下使用
}

3.2 组件间传递数据：

父 -> 子

1. 子：为组件定义自定义属性，将来用于从父对象中绑定获得父对象中的变量。

var 子 = {
	template:`...`,
	data(){	//仅限于子组件自己使用的内部变量
	},
	//定义自定义属性
	prop:["tasks"]
}

2. 父：通过绑定子组件的自定义属性，将自己的变量交给子组件

<子 :tasks="tasks"></子>
 孩子的兜 <-- 给  爹的变量

如若出现这样的警告：v-for should have explicit keys，一定要绑定i，以后在修改单个t的时候，找到i的对应下标，直接修改就行，不加i不会出错，只是会出现警告！

//1. todo.html
<script src="todo_item.js"></script>
<script src="todo_list.js"></script>
<script src="todo_add.js"></script>
<script src="todo.js"></script>

<div id="app">
    <todo></todo>
</div>

//2. todo.js
Vue.component("todo", {
    template: `<div>
        <h1>待办事项列表</h1>
        <todo-add :tasks="tasks"></todo-add>
        <todo-list :tasks="tasks"></todo-list>
    </div>`,
    data() {
        return {
            tasks: ["吃饭", "睡觉", "打亮亮"]
        }
    },
    components: {
        todoAdd,
        todoList
    }
})

//3. todo_add.js
var todoAdd = {
    template: `<div>
        <input v-model="newTask">
        <button @click="add">增加</button>
    </div>`,
    props: ["tasks"],
    data() {
        return {
            newTask: ""
        }
    },
    methods: {
        add() {
            if (this.newTask !== "") {
                this.tasks.push(this.newTask);
                this.newTask = "";
            }
        }
    }
}

//4. todo_list.js
var todoList = {
    template: `<ul>
        <todo-item v-for="(t,i) of tasks" :key="i" :t="t" :i="i" :tasks="tasks"></todo-item>
    </ul>`,
    props: ["tasks"],
    components: { todoItem }
}

//5.todo_item.js
var todoItem = {
    template: `<li>
        {{i+1}} - {{t}}
        <button @click="del">x</button>
    </li>`,
    props: ["t", "i", "tasks"],
    methods: {
        del() {
            if (confirm(`是否删除任务${this.t}吗？`)) {
                this.tasks.splice(this.i, 1);
            }
        }
    }
}