VUE-Day03组件开发
复习：
①指令
vue自动将内存放入界面，不同位置需要不同指令
数据放到内容中，使用双花括号{{}}，插值语法
- 数据放到属性中动态绑定，用冒号：
反复根据数组中元素生成多个元素v-for
控制一个元素显示隐藏v-show
多个元素选其一显示v-if
绑定事件@
事件处理函数写在methods中
如何获得鼠标位置，第一步绑定的时候使用$event关键字传入事件对象，然后在处理函数中用e接住
阻止默认行为e.preventDefault();
取消冒泡stop
按回车触发@keyup.13
绑定内容特殊情况，内容不是文本是HTML片段，此时双花括号绑定会保持原样，内容不会被编译，要用v-html
v-text效果等同于{{}}
在vue组件加载完之前临时隐藏绑定元素，防止用户看到双花括号语法，v-cloak使用时需要定义属性选择器[ v-cloak ] {display:none}
v-pre保护内容中的双花括号语法不被编译
v-once只在开始时绑定一次，之后不再绑定，即使模型数据改变也不变
12个指令都是单向的，只能将内存model中的数据绑到视图界面view中，收集用户信息需要用表单元素，必须要双向绑定v-model
文本框，文本域都是让用户填写内容的，这种都保存在value中，所以v-model会自动绑定value，当value发生变化会自动更新model中的变量。
但是有一些元素value是写死的，比如说radio，它的绑定原理有两个方向，首先将模型数据绑定到界面时，它是拿被绑定的模型变量和radio上的值作比较，只有相等时才会被选中，当选中某一个radio时，它会反向将当前选中的radio的value自动更新到内存中。
checkbox单独使用时，只能改checked的属性，选中就是checked，使用时只需要把布尔值绑给checked就可以了。
select，value是写在每一个option上的，但是v-model要写到select上，因为切换选中项时改的不是option的value而是改的整个select的value，当绑定时，会拿变量值和每个option比较，那个相等选那个，修改选中项之后，会自动更新回到value中。
这四个表单元素，无固定规律，分别看待。
双向绑定原理，其实是依靠一种监视机制来实现，比如知道vue中写一个死循环(有很多方法制作死循环扫描界面，while，for，setInterval)，当界面发生变化时自动更新内存中的变量，借助此机制，只要变量发生变动(写在watch中，监视谁就写谁)，以此达到只要模型变量变化就能自动完成一件事情。
new Vue({
el:"#***",
data:{...},
watch:{
模型变量(){
this.模型变量名...
}
}
})
class和style，如果批量绑定样式，class更好，有两种方式，第一种把class当做字符串绑定，一个元素中可以写两个class，写死的不会变的放在正常class，:class中放入只发生变化的类名。这个类名就是一个模型变量，在内存的模型变量中存着这些要使用的类名。另一种class方式，就是对象方法。
style用于精细控制元素的位置，或者某一个css属性。style用拼接字符串方式很不直观，所以推荐用对象方式:style中只写一个变量名，在模型中为变量创建一个对象，其中包含所有需要用的css属性和值。
界面上一切东西都可以绑定，属性、内容、样式，必须遵循两步骤，第一找变化(把界面中所有可能变化的地方发掘出来，然后把这些地方换成vue的绑定语法)，第二定义获取模型数据(界面上有多少变化，内存模型中就要有多少数据来支持它)，做vue的套路，找一切变化，改绑定语法，在内存中，想尽办法提供支持数据。
vue从根本上属于遥控页面，只操作数据，页面是不动的，用数据遥控页面的变化。
②计算属性
页面中有一种特殊的属性，数据库中没有保存，但是页面却要显示，这就是computed计算属性，这种属性一般是依靠其他模型变量计算获得的，普通方法也是可以的，但是效率较低，每次使用都需要重新计算，但是computed可以缓存起来这个结果。计算属性绑定方式和普通属性是一样的。
③过滤器
原始的东西不能直接使用，所以需要先加工再使用，接收一个参数返回一个新值，过滤器的本质其实就是一个函数。
filter，之所以用静态方法，是因为过滤器是很大可能需要重复使用的，所以独立于任何实例之外。
Vue.filter('过滤器名'，function(val,参数1,...){
...val 接受当前要处理的模型数据的原始值
return...；
})
根据不同的参数值，返回不同的新值，利用参数控制过滤器的结果。
自定义指令：
如何:
Vue.directive("指令名"，{
inserted(){ //指令所在的元素被加载到DOM树上后自动执行指令
// elem 会自动获得指令所在的当前元素
对elem执行DOM操作！
}
})
使用:<any v-指令名>
示例:<div id="app">
<input v-my-focus><button></button>
</div>
<script>
Vue.directive("my-focus",{
inserted(elem){
elem.focus()
}
})
new Vue({
el:"#app",
data:{}
})
</script>
注:①自定义的指令不支持驼峰式写法,所以指令命名统一变为小写,或者用-或_分割。
②HTML/CSS/JS都是顺序执行的，所以在new Vue之前要准备好所有需要的东西，否则如果directive在下面，new实例检索DOM树的时候v-my-focus指令因为尚未搭建所以会无法识别。
AXIOS：
什么是:专门发送http请求的函数库(所谓http请求就是AJAX)
为什么:
ajax的几种方式:①自己封装(四步)
②jQuery:$.ajax() 引入整个jq函数库而只使用ajax，小题大作
③Vue有一个组件resource，已不推荐使用
④Axios 管方推荐
Vue本身和ajax是没关系的，所以找到Axios处理此类需要。Vue和Axios二者也是没有必然联系的。
如何:①引入axios.min.js //当引入axios文件时，其实就是引入axios对象
②发送两种请求
get请求:
axios.get("url",{
params:{
参数：值
}
}).then(res=>{
获得服务端返回的结果：res.data
})
post请求:
axios.post("url","变量=值&变量=值&...").then(res=>{...})
组件化开发：
什么是组件:拥有独立的HTML，CSS，JS和数据的页面独立区域
什么是组件化:今后所有页面都是由多个页面组成的
每定义一个网页都要先划分组件结构，再分别编写每个组件。
为什么:
(1)重用
(2)便于大项目的分工协作
(3)松散耦合
如何:
①创建组件
每个组件包含三部分:HTML/JS:<script>/CSS:<style>
1.专属的HTML片段
ps：组件的HTML片段必须被一个唯一的父元素包裹，<template>专门保存片段
<template id="选择器">
<div>
<button @click="change(-1)">-</button>
<span>{{count}}</span>
<button @click="change(+1)">+ </button>
</div>
</template>
2.专属的JS和数据
<script>
Vue.component("组件名"，{
template："选择器"，//代替el，每创建一个组件，会自动代替组件标签的位置，组件是创建之后根据需求调用它的副本，template(模板)
data：function(){
//每创建一个组件的副本，就自动调用过一次，为当前新副本创建一个专属的模型数据对象
return{ //原来的data
count:1
}
}
//其余和new Vue()完全一样
methods：{
change(i){
this.count+=i;
if(this.count==0)
this.count=1
}
}
})
new Vue({ //选择器必须在有Vue实例前提下
el:"#app",
data:{}
})
</script>
<div id="app"> <!--主界面-->
<组件名></组件名>
</div>
1.封装template，html结构 2.创建component，组件功能
②使用组件
组件其实就是一个标签名
只要在主内容中，添加一个<组件名></组件名>，运行时Vue就会用组件的template代替<组件名>标签所在位置
③组件分类
1.new Vue({ //根组件
el:"#app"，
data:{}
})
2.Vue.component("组件名"，{ //全局组件:可在任意位置随意使用的组件
template:"#tplxxx"，
data:function(){ return{} }
})
3.子组件:仅限于在某个父组件内才能使用的组件
如何:2步
(1)只要将Vue.component降级为普通对象
强调:变量名用标签名(将来组件名)的驼峰方式
(2)在父组件中添加components属性:{
子组件变量名，子组件变量名， //ES6简写
}
Vue会将驼峰命名的组件名，转为小写，并用-分隔
比如：todoAdd -> todo-add
todoList -> todo-list
