Vue学习

1、v-show 和 v-if、v-for

v-show 动态隐藏和显示，页面加载时就会创建，只是被隐藏了；

v-if 动态创建和删除，只有触发事件时才会创建

v-for 渲染指令，渲染数组

2、v-html

v-html 将代码片段进行html解析，渲染到页面中；

慎用，因为容易受xss攻击；当是后端给的可信任的HTML片段，则可以用；

防止xss、csrf攻击的方法：前端过滤；后端转义；给cookie加上http属性

3、Vue2 不支持动态拦截，即不能动态添加和删除 class、style 对象（数组可以），Vue3支持动态拦截

解决方案： vm.Vue.set (对象，属性，true)

4、Vu2 不能检测数组更新变动，push（）、pop（）、shift（）、unshift（）、sort（）、reverse（）可以变动是因为重写了方法，filter（）、concat（）、slice（）、map（）不可以，只能用新数组替换旧数组；Vue3 可以检测变动

解决方案：Vue.set（对象，index，newValue）、splice

5、v-model 双向绑定输入框

过滤应用：this.mylist = this.oldlist.filter(item=> item.includes(this.mytext))

表单修饰符：. number：表单修饰符；. trim：去空格；. stop 阻止冒泡

6、计算属性 computed：{ }

首字母大写：

对象.myname.substring(0,1).toUpperCase() + myname.substring(1)

7、method、computed、watch

method：方法属性，事件绑定，可以不用return，没有缓存；

computed（重结果）：计算属性，解决模板过重的问题，只能同步，必须有return，只求结果，有缓存 ；

watch（重过程）：异步监听一个值的改变，不用返回。

8、Vue中 key 的作用

key 是Vue 中虚拟 DOM 的一个标识，列表展示时可以认为 key 是index

9、fetch. get、fetch. post、axios

10、过滤器

引用：：src=“对象 | imgFilter1 | imgFilter2”

方法：Vue. filter（" imgFilter1", (url) =>{ return ……})

11、组件

相当于将dom、css、js 封装在一起，为了方便重用和复用

为什么组件化：扩展HTML标签，封装可重用的代码

全局组件、局部组件

12、组件间的通信

父传子：父设置属性 x ，子组件中用 props 接收 x 的值；

子传父：父设置自定义属性 ：x=“”，x相当于电话号码，当子组件中的@事件发生时，绑定 this. $emit("x", 参数)，实现子传父

兄弟间通信（中间人模式）：子传父，再在根Vue组件定义，最后传给兄弟

中央事件总线：var bus = new Vue（）；订阅者： mounted（）{bus. $on("属性名"，函数)}；发布者：bus. $emit()。

ref组件通信：父 ref="x" ，子组件中定义x的值，可以在根Vue组件中用 this. ref. x 调用

动态组件：

13、solt 插槽

<solt></solt>

父：<div solt="a"></div> 子：<solt name="a"><solt> 会对应

插槽的意义：扩展组件能力，提高组件的复用性。

14、vuex 状态管理模式

plugin 持久化 vue-persisterdata

state 公共状态 （store）

mutation 修改 （conmit ）

15、API 即应用程序编程接口，别人封装好的函数，或者编译好的程序，提供给你使用，就叫做API，你使用了某个 API。

16、axios 对原生 XMLHttpRequest 的封装，基于Promise，具有以下特点：

在浏览器中创造 XMLHttpRequest 请求；

支持 Promise API；

拦截请求和响应；

自动转换Json数据等。

17、请求方式：get 获取数据、post 向指定资源提交数据、put 更新数据，从客户端向服务器传送数据进行更新、patch 更新数据，已知资源局部更新，对put方法的补充、delete 删除