Vue------学习笔记（二）过滤器，生命周期函数，vue-resource

一、过滤器：

1、过滤器基本语法：
2、过滤器的基本使用：实现将msg中的 单纯 变为 邪恶。
3、 可以理解为 “女生用美颜相机处理拍出来的照片” ，女生-----就是原来data中的mag， 美颜相机处理----就是filter方法， 拍出来的照片-----就是在filter中return出的照片。

4、传多个参数：
5、可多次调用过滤器：

全局过滤器就是所有vue都可共享

- 定义私有过滤器（局部）

二、字符串的 padStart（总长度，前面的值）， 补0

三、自定义全局指令：

四、生命周期函数：vue实例的不同阶段的函数

1. 生命周期钩子 = 生命周期函数 = 生命周期事件
   
   2.详细图解：
   

五、vue-resource 实现get，post，jsonp （即在vue 中发起ajax， ）

还可以使用 axios 的第三方包实现数据的请求
1.之前我们使用 JQ 发起ajax请求，在vue中不推荐使用，因为JQ 要操作dom。
2.常见的数据请求类型？ get，post，jsonp
3.JSONP 原理：

发起请求

1.get请求：

console.log(result )的结果如下：

data 和 body都可以拿到服务器返回的成功的数据，建议用body来拿数据

2.post 请求：


3. jsonp 请求： 常用些

-----------------------------------------------------------------分割线--------------------------------------------------

一、class与style的绑定

• class的对象语法：class与v-bind的结合
  1.对象语法，key—类名，value—变量
  2.数组语法，里面的值可以是变量，变量的值当做类名添加，字符串 ，字串作为类名
  
  - 以上对象语法综合运用实例 如下：删选热销的产品， hot:“hot”，并标红显示；

2、style

• 对象语法：
  key----标准的style属性，vule-----变量，字符串

• 数组语法：基本不会用到

• 多重值：为了做兼容

二、条件渲染：

• v-if ：
  变量值为true—添加节点，false—删掉节点

• v-else:
  二选一的时候用v-else，注意！要紧挨着v-if，他们之间不能有其他节点。

• v-else-if：
  多选一的时候

• template
  参看 ：vue中template的作用及使用
  作用: 是模板占位符，可帮助我们包裹元素，但在循环过程当中，template不会被渲染到页面上
  类似 react 中 fregment

• key：管理可复用的元素

小实例：实现注册时选择手机/邮箱注册
如果 条件判断的节点 dom结构一样，vue会把该组件复用，数据会被传递污染

图

• v-show：添加display属性
  

---

v-if 与 v-show的使用区别：
show------频繁切换时 比如选项卡。
if-----在初始化时就可以知道该元素，改变的几率较小时。

三、 列表渲染

1、迭代对象

• v-for（vule,key,index）
  图

2、数组更新检测

• js不能检测到数组中增加减少，所以vue通过原型重写了数组方法，即 ‘变异方法
  
• 注意 vue中的数组操作限制：
  ① vue中不能实现 通过数组下标来直接操作数组，无效。
  ②
  图

3、事件处理：

- 事件处理方法：

1、通过 v-on 即 @ 来给节点绑定事件，在new Vue 中 配合 mmethod
2、**简写法：**当回调函数只有一行代码时
3、event对象：默认在回调函数的第一个参数
4、$event :

• 事件修饰符:
  增，图

四、表单输入绑定：

• v-model 实现双向绑定，当input的value 改变同步到data，当data改变时，同时修改input的value
  1.实现普通文本
  2.实现textare
  3.复选框：当v-model绑定的是 checkbox的时候，同步的值 是 checked 属性

• 可实现数据回显
  当多选时，vmodel=数组，数组值与CheckBox
  当单选时，
  4、select 下拉
  select 双向绑定的值为option的 value值
  
  
  5、修饰符

• .lazy

change 失去焦点再执行

• trim
  自动去空格
  -number

-----------------------------------------------疑点

js 中的 父级 操作dom
事件冒泡
event.target
dom 0 1
add eventlistener
预习组件