vue学习1

news2025/1/9 2:13:50

文章目录

- VUE注意点
- 绑定
- 模板语法
- - 插值语法
  - 指令语法
- vue中的data
- 数据代理
- 事件处理
- - 点击
  - 修饰符
  - 键盘事件keyup
- 计算属性
- 监视
- - 深度监视
  - 监视与计算属性的区别
- 样式绑定
- 条件渲染
- 列表渲染
- - 对key的理解
- 列表过滤
- 监视数据改变的底层原理
- - SET()
  - 数据劫持
- 接收表单数据
- 过滤器
- - 局部过滤器
  - 全局过滤器
- 内置指令
- - v-text
  - v-html
  - - cookie
  - v-cloak
  - v-once
  - v-pre
- 自定义指令
- - 局部
  - 全局
- 生命周期
- - mounted:
  - beforeDestroy
  - $destroy
  - 小知识点
  - 总结
- 组件化编程
- - 非单文件组件
  - 总结
  - 几个注意点
  - 组件的嵌套
  - VueComponent（VC）
  - - 总结
  - VueComponent与Vue的关系
- 单文件组件

VUE注意点

在vue的实例中，methods和computed中不能写箭头函数，否则会指向window。

绑定

Vue与容器的绑定时一一对应

模板语法

插值语法

{{}} 用于标签体

<h1>{{}}</h1>

指令语法

用户标签属性：有
v-bind:简写：单向绑定
v-model:value简写v-model 双向绑定，只能用户表单类型元素

vue中的data

可以嵌套
##MVVM
mv: modelview
v: view
m: model
只要有modelview中有的数据，view才能访问到，modelview是 model与view的中转站。

数据代理

定义：通过一个对象代理操作另一个对象的属性。
data被存在vm的_data中
只有data中的数据才会数据代理

  <script type="text/javascript">
        let num=19;
        let person={
            name:"张三",
            address:"成都",
        }
        Object.defineProperty(person,'age',{
            // value:18,
            enumerable:true ,//可以枚举（遍历）
            // writable:true,
            configurable:true,//控制属性是否被删除,
            //获取age的值时，会调用这个get函数，
            get(){
                return num;
            },
            //set时当修改值时有所改变
            set(value){
                num=value;
            }

        });
        
    </script>

事件处理

点击

v-on:click="函数名"简写@ click
传参在事件那写括号，不传参直接写函数名
click.prevent 阻止默认事件。
click.stop 阻止冒泡（就是里面和外面都有事件，只产生一个事件）
click.once 只触发一次

修饰符

可以连续写
. capture 事件的捕获事件，先捕获后冒泡
. self 点击自己的元素才能触发
.scoll 滚动滚动条才舒服
.wheel 鼠标滚轮滚动就触发
事件.passive 先做默认事件，无需等待事件回调执行完成。

键盘事件keyup

tab 要配合keydown
只能用确定的两个如ctrl+y .ctrl.y
keyup.en
在这里插入图片描述

获取按键的别名（建议）和编码（不建议）（两个单词组成的，将大写换成小写，然后用-连接）
在这里插入图片描述

计算属性

插值，{{}}若获取函数值，那么就要在函数后面加()。
计算属性的过程要配置成一个对象
计算属性有缓存，一样的值只接走缓存
在这里插入图片描述
简写
直接写一个函数即可，不用写get函数

监视

在这里插入图片描述

写法二
在这里插入图片描述

深度监视

在这里插入图片描述

标准写法，访问多级的数据

总结

在这里插入图片描述

监视与计算属性的区别

在这里插入图片描述

必须这样写，因为箭头函数没有指向，就会外找，那么就是找到firstName,那么就是Vue管理的了，就是VUE的this.
如果不写成箭头，那么this就是指向的Window那么代码就会错。
在这里插入图片描述

样式绑定

class也可以绑定，:class=“”,

在这里插入图片描述

在这里插入图片描述

还有其他方式，如绑定对象，对象中加样式。

条件渲染

在这里插入图片描述

是否显示
v-if 没有标签了 v-show 有标签
在这里插入图片描述
template 只能和v-if配合，不能和v-show配合，而且，template不会破坏结构，当渲染后，会消失掉。

列表渲染

在这里插入图片描述

可以将（p,index）换成p,也可以写成:key=“p.id”，只要保证key不一样就可以了。用of和in都可以

在这里插入图片描述

用的少
在这里插入图片描述
用的少

对key的理解

在这里插入图片描述

如果不写key，就要自动补上一个key。
对比的时虚拟DOM，如果虚拟DOM一样，就复用（区别真实DOM）
在这里插入图片描述

列表过滤

空字符串也包含在字符串中
在这里插入图片描述

列表过滤
在这里插入图片描述
过滤加排序

在这里插入图片描述

监视数据改变的底层原理

在这里插入图片描述

按对象改，不奏效，页面不会改变，但是内存数据改变了
在这里插入图片描述
简单的数据检测底层
数据检测就是使用的Object.defineProperty(this,属性,{})

vue中不显示undefined，data中的对象的属性没有时就是undefined不会报错。
操作data中的数组时，要用数组的方法（也可以用set）去操作，才会有反应，不能用赋值vue中的操作数组函数和js中的操作函数不一样，不是一个。vue中的的函数中包含了原生的和重新更新模板
vue中的响应式都是和setter和getter有关，没有的话，就响应不了