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 删除