vue学习1

最新推荐文章于 2024-09-30 16:19:08 发布

~insn~

最新推荐文章于 2024-09-30 16:19:08 发布

阅读量581

点赞数

文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/m0_53313913/article/details/130811857

版权

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有关，没有的话，就响应不了