2022-2-15
vue模板两大类

  • 插值语法：
    {{xxx}}给标签体赋值xxx需要是表达式，而不是语句（if，else等）
  • 指令语法：
    通过v-bind给标签属性赋值，绑定事件，包括url ，v-bind:href=“url”
    vue有很多指令

数据绑定

  • 单项数据绑定
    v-bind:
  • 双向数据绑定
    v-model:value，可简写v-model 只能用于表单类元素input 单选 select

el绑定属性
可以通过v.$mount(’#xx’)代替
对象式
data:{

}
函数式
data:function(){
return{
}
}

mvvm
m:model
v:视图
vm：vue实例
data上的所有属性，都会在vm上
都可以用值函数获取，vm上的值

给对象添加属性，控制他是否可被修改和枚举（遍历）

let persson{
name='123'
sex='man'
}
Object.defineProperty(person,'age',{
value:18,
enumerable:true,//可枚举
writable:true,//可修改
configurable:true//可删除
})

事件：不写event默认也是传的，只是写了可以传递更多的参数。
v-on:click=“showInfo”
@click=“showInfo($event,66)”
在vm中methods:{
showinfo(event,nulber){
}
}

事件修饰符，事件捕获，事件冒泡
控制事件的处理顺序，里外顺序。

键盘事件
@keyup.enter=‘shwoinfo’
组合键之间的使用两个单词的组合，需要全小写中间用-连接
console.log(e.keu,e.keyCode)

计算属性，无法开启异步任务，所以可以使用监视属性
和data同级，可通过this。访问data中的属性
computed：{
}

监视属性
methods{
watch:{xxx:{
handler(){
}
}}
}
监视多级
‘number.a’:
number:{
deep:true
}

vue管理的函数写成普通函数，不是vue管理的函数写成箭头函数，找不到就去上面找，就找到了上层的vue的实例。

2-16
10绑定样式class
:class=“a”
a:‘normal’
可以通过数组，使用多个样式，可以移除和添加数据元素的方式添加和删除样式。

内联样式
：style =“对象”
对象：{
fontsize:‘40px’
}

11条件渲染
v-show="布尔值"控制是否显示,频繁使用
v-if=

12列表渲染
v-for=“p in persons” :key=“p.id”
key给节点标识，还是得用数据的id唯一标识。虚拟dom之间的关系
修改后的虚拟dom根据key进行对比，所以在唯一标识的情况下不会 出现误差，但是用前段索引有问题。deff算法

模糊查询

watch:{
keyword(val){
this.persons=this.persons.filter((p)=>{
return p.name.indexof(val)!==-1;
})
}
}
watch:{
keyword:{
immediate:ture,
handler(val){
this.persons=this.persons.filter((p)=>{
return p.name.indexof(val)!==-1;
})
}
}
}

列表排序

vue:学习笔记_赋值

computed：{
filperson(){
const arr=this.persons.filter((p)=>{
  return return p.name.indexof(val)!==-1;
})
if(this.sorttype){
arr.sort((p1,p2)=>{

})
}
}
}

vue:学习笔记_数据_02

检测数据改变

更新数组项，vue没有检测到

vue:学习笔记_赋值_03


原理

通过set实现

vue.set(vm._data.student,sex,‘man’)

检测数组改变

不是通过set监视，通过下面的方法监视，不能通过直接操作索引值修改。

vue:学习笔记_数据_04


vue:学习笔记_javascript_05


13收集表单数据

将对象转换为json

JSON.stringify(this._data)14过滤器

和data同级，methods

filters:{

}

vue:学习笔记_赋值_06


插值语法中使用，和v-bind中使用15：内置指令

v-txt

v-html,不安全的

v-cloak

vue:学习笔记_前端_07


vue:学习笔记_前端_08


v-once:显示数据的初始情况

vue:学习笔记_前端_09


2-17

v-pre

对不需要编译，写什么陈显什么

为了高效率，加快编译

16，自定义指令,设置全局指令
配置项
directives：{
big:{
n:1
}
big:function(){

}
big(){

}
}

生命周期

vue完成模板的解析并把真是的dom元素放入页面嗲偶偶那个mounted

mounted(){

}

vue:学习笔记_赋值_10

组件化编程

就是模块的调用
vue基本都是单文件组件格式。

创建组件

注册组件

vue:学习笔记_赋值_11


2-18

vc可以访问到vm上的数据，

vue.prototype.x=99

可以通过vc拿到

19单文件组件

<template></template>
<script></script>
<style></style>

第三章：脚手架

npm config set registry https://registry.npm.taobao.org

nmp install -g @vue/cli

切到项目目录

vue create 项目名

cd xizangmu

npm run serve

vue:学习笔记_数据_12

默认配置：

vue inspect >outpyut.js

在vue.config.js覆盖默认配置。

lintOnSave

vue:学习笔记_赋值_13


分析脚手架

ref:

根据ref拿到dom，组件的实例对象

$refs.title

props:[‘name’,‘age’]接收数据

mixin：两个组件共享一个配置

使用vue。use使用插件

scoped 组件相同样式的解决，scope给style加上作用域

2-21
浏览器的本地存储
localStorage.setItem(‘msg’,‘hello!’)
localStorage.removeItem(‘msg’)
localStorage.clear()

浏览器关了，就没了
sessionStorage

组件的自定义事件
v-on:zidingyi=“getStudentName”
getStudentName(name){

}
子组件
@click=‘StudentName’
sendStudentName(){
this.KaTeX parse error: Expected 'EOF', got '}' at position 29: …i',this.name) }̲ 第二种 ref='stu…refs.student.$on(‘zidingyi’,this.getname)
只触发一次

解绑自定义事件
this.$off(‘zidingyi’)

生命周期中destory会销毁所有的所有的自定义事件

全局事件总线：

任意组件间通信

vue:学习笔记_vue.js_14

2-22
消息订阅与发布
适用于任何组件的通信
pubsub
类似与bus
获取信息的人，订阅
提供信息的人，发布+data

动画
过度
多个元素过度
animate成型的动画库

配置代理
xhr
jquery
axios
fetch

解决跨域：

cors：服务器端配置响应头，

jsonp：get

代理服务器：nginx vue-cli

1.在vue.config中配置代理

vue:学习笔记_赋值_15


2.区别性的转发代理，请求

vue:学习笔记_javascript_16


vue-resource

插槽
在组件中可以加入其他标签
在组件中，挖坑，等插入
默认
具名
作用域

vuex

actions,
mutations,
state,
getters

vue3
vue3组件中不要求根标签
setup，新的配置项，函数
可写，数据，函数，返回值可以是对象{包含数据，方法}

ref（）
修改数据通过属性.value的赋值方法
不同处理数据的方式，对象就不需要最后的。value

reactive
将对象类型的数据监控，深层次监控】

2-3的响应式区别

对象类型，通过object.defineproperty对属性的读取修改进行拦截(数据劫持

数字类型，通过重写更新数据的一系列方法来实现拦截，（对数据的变成方法进行变更）

2使用$set,delete

3使用对象。sex ，使用windows。proxy代理，通过getset，两个参数，对选哪个和参数名。

vue:学习笔记_前端_17


vue:学习笔记_赋值_18


setup的注意点

computed

引入：计算属性，直接在setup中调用compputedwatch：引入，然后再setup中监视

vue:学习笔记_前端_19


watch中value的问题

监控ref的数据不能。value，应为监控的是存储数据的结构，而不是监控的值。

对象的话，可以使用。value监视，或者是deep：true深度监视watchEffect

监视函数，

vue:学习笔记_vue.js_20


vue3生命周期

无所谓，vue2-3都可以用配置项写。

自定义hook，类似java工具类

toref，torefs

响应式数据

vue:学习笔记_前端_21

vue:学习笔记_javascript_22


vue:学习笔记_前端_23


toraw，markrow

vue:学习笔记_赋值_24


customref

相当于自定义，重写

vue:学习笔记_数据_25


provide

祖与后代组件之间的传递数据判断是不是相应类型的数据

vue:学习笔记_前端_26

组合式api
配置shift，组合式

新的组件

teleport，可以跳出该组件，定位到其他地方

suspense（悬念）

不需要等待，谁先出来就先出来

vue:学习笔记_前端_27