一、过滤器:
1、过滤器基本语法:
2、过滤器的基本使用:实现将msg中的 单纯 变为 邪恶。
3、 可以理解为 “女生用美颜相机处理拍出来的照片” ,女生-----就是原来data中的mag, 美颜相机处理----就是filter方法, 拍出来的照片-----就是在filter中return出的照片。
4、传多个参数:
5、可多次调用过滤器:
全局过滤器就是所有vue都可共享
- 定义私有过滤器(局部)
二、字符串的 padStart(总长度,前面的值), 补0
三、自定义全局指令:
四、生命周期函数:vue实例的不同阶段的函数
- 生命周期钩子 = 生命周期函数 = 生命周期事件
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
预习组件