vue知识

一、初始vue

Vue核心 Vue简介 初识 (yuque.com)

1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象

2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法

3.root容器里的代码被称为【Vue模板】

4.Vue实例和容器是一一对应的

5.真实开发中只有一个Vue实例,并且会配合着组件一起使用

6.{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性

7.一旦data中的数据发生改变,那么模板中用到该数据的地方也会自动更新


注意区分:js表达式 和js代码(语句)
        1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方    

        (1).a

        (2).a+b

        (3).demo(1)

        (4).x === y?'a’:'b'
        2.js代码(语句)

        (1).if(){}

        (2).for(){}

 

二、模板语法(插值语法、指令语法) 

Vue核心 模板语法 数据绑定 (yuque.com)

Vue模板语法有2大类

1.插值语法:

功能:用于解析标签体内容。

写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性

2.指令语法:
功能:用于解析标签(包括:标签属性、标签体内容、绑定事件....)

举例:v-bind:href="xxx"或简写为:href="xxx",xxx同样要写js表达式,且可以直按读取到data中的所有属性。

备注:Vue中有很多的指令,且形式都是:v-????,此处我们只是拿v-bind举个例子

三、数据绑定(单向绑定v-bind、双向绑定v-model)

Vue中有2种数据绑定的方式:

1.单向绑定(v-bind):数据只能从data流向页面。
2.双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。

备注:
1.双向绑定一般都应用在表单类元素上(如:input、select等)
2.v-model:value 可以简写为v-model,因为v-model默认收集的就是value值。

四、el与data的两种写法

Vue核心 el与data的两种写法 (yuque.com)

data与el的2种写法:

        1.el有2种写法

                (1).new Vue时候配置el属性。

                (2).先创建Vue实例,随后再通过vm.$mount('#root')指定el的值。

        2.data有2种写法

                (1).对象式

                (2).函数式

                如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式否则会报错。

        3.一个重要的原则:
                由Vue管理的所数,一定不要写箭头函数,一旦写了头所数,this就不再是vue实例了。

使用箭头函数,this就变成了window实例了

el两种写法:用el'XXX'指定哪个标签

                 或者使用v.$mount'XXX'指定那个标签

Data的两种写法

一种是对象式

另一种为函数式

注意this用法(不能用箭头函数)

五、MVVM模型(VUE参考了MVVM模型)

Vue核心 MVVM模型 数据代理 (yuque.com)

MVVM模型:

1.M:模型(Model):data中的数据

2.V:视图(View):模板代码

3.VM:视图模型(ViewModel):Vue实例

观察发现:

1.data中所有的属性,最后都出现在了vm身上。

2.vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用。

简单理解就是 html页面里的就是view

data中的数据是model

New Vue 就是viewModel(其中包含这data的属性,在vue模板中(html页面的{{}}中)可以直接使用)

六、数据代理(通过一个对象代理对另一个对象中属性的操作(读/写))

1、回顾defineProperty:

Object.defineProperty()是一个JavaScript内置函数,用于在对象上定义或修改属性的访问器。它接受三个参数:对象、属性名和属性描述符。

属性描述符是一个对象,其中包含了有关该属性的各种信息,例如是否可枚举、是否只读、是否可删除等。

读obj2.x可以读到obj.x的值

修改obj2.x可以修改obj.x的值

数据代理的值是隐藏的 下面都有对应的getter和setter

vm中的属性就是data中的属性,就是通过数据代理完成的

vm中的_data.name和vm中的name是一样的

vuedata中数据拷贝了一份到_data属性中,然后将_data中的属性数据通过defineProperty实现数据代理

七、事件处理(methods)

Vue核心 事件处理 (yuque.com)

事件的基本用法:

1、使用v-on:xxx或@xxx绑定事件,其中xxx是事件名

2、事件的回调需要配置在methods对象中,最终会在vm上

3、methods中配置的函数,不要用箭头函数,否在this就不是vm了

4、methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或组件实例对象

5、@click=“demo"和@click=”demo($event)“效果一致,但后者可以传参

事件修饰符:

键盘事件:

八、计算属性

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/584791.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

关于远程桌面与3389端口的深度解析

当我们谈论远程桌面和3389端口时,我们实际上是在探讨Windows操作系统的一个核心功能,该功能允许用户通过网络从任何地点远程控制和管理计算机。而3389端口,正是这一功能所依赖的通信端口。 一、远程桌面的工作原理 远程桌面协议(R…

gateway全局token过滤器

添加gateway依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-gateway</artifactId></dependency>创建一个tokenFilter 实现全局过滤器GlobalFilter,并且实现fitler方法 Value("${…

qt5-入门-2D绘图-基础

参考&#xff1a; QPainter_w3cschool https://www.w3cschool.cn/learnroadqt/k7zd1j4l.html C GUI Programming with Qt 4, Second Edition 本地环境&#xff1a; win10专业版&#xff0c;64位&#xff0c;Qt 5.12 代码已经测试通过。其他例子日后更新。 目录 基础知识penb…

场外期权交易合法吗?参与场外期权交易需要符合哪些规定?

场外期权交易是合法的金融交易方式&#xff0c;且得到了相应监管部门的支持和规范。它是一种新型的期权交易方式&#xff0c;具有灵活性高、可以满足特定投资者需求的特点。 文章来源/&#xff1a;股指研究院 场外期权是私下协商的&#xff0c;交易双方可根据个人预期、风险承…

《QT实用小工具·四十八》趣味开关

1、概述 源码放在文章末尾 该项目实现了各种样式的趣味开关&#xff1a; 1、爱心形状的switch开关&#xff0c;支持手势拖动、按压效果 2、线条样式的3种开关 项目demo演示如下所示&#xff1a; 使用方式&#xff1a; 1、sapid_switch文件夹加入工程&#xff0c;.pro文件中…

二、VLAN原理和配置

vlan不是协议&#xff0c;是一个技术&#xff0c;虚拟局域网技术&#xff0c;基于802.1q协议。 vlan&#xff08;虚拟局域网&#xff09;&#xff0c;将一个物理的局域网在逻辑上划分成多个广播域的技术。 目录 1.冲突域和广播域 概念 范围 2.以太网帧格式 3.以太网帧封装…

【小程序逆向专栏】某润选房小程序逆向分析

声明 本文章中所有内容仅供学习交流使用&#xff0c;不用于其他任何目的&#xff0c;不提供完整代码&#xff0c;抓包内容、敏感网址、数据接口等均已做脱敏处理&#xff0c;严禁用于商业用途和非法用途&#xff0c;否则由此产生的一切后果均与作者无关&#xff01; 本文章未…

【YesPMP】平台最新外包项目,设计、小程序、网站等你来接!

YesPMP平台目前最新项目&#xff0c;有感兴趣的用户&#xff0c;可查看项目参与竞标&#xff0c;免费接单&#xff0c;竞标后由项目方直接与服务商联系&#xff0c;双方直接对接。 1.查看项目&#xff1a;网站网页或pc软件 2.查看项目&#xff1a;数据 …

天冕科技亮相第十七届深圳国际金融博览会!

第十七届深圳国际金融博览会在深圳会展中心正式开幕&#xff0c;天冕科技跟随南山区组团集体亮相&#xff0c;充分展现金融活力。此次金博会&#xff0c;南山区政府共遴选了包括天冕科技在内的三家优秀金融科技企业组团参展&#xff0c;以特色与创新的案例展示了辖区金融业发展…

Ansible-Tower安装破解

主机IP地址版本Ansible192.168.169.2042.9.1Tower192.168.169.2043.6.2 基础环境 systemctl disable firewalld --now && setenforce 0 sed -i s/SELINUXenforcing/SELINUXdisabled/g /etc/selinux/config mv /etc/yum.repos.d/CentOS-* /tmp/ curl -o /etc/yum.repo…

AI时代来临,电子行业暗藏新机遇!新人如何逆袭,成为行业翘楚?

随着人工智能技术的飞速发展&#xff0c;程序员的工作正迎来前所未有的变革。去年9月&#xff0c;《大西洋月刊》上的一篇文章&#xff0c;由Kelli Mara Korducki所著&#xff0c;直言不讳地指出&#xff1a;“在人工智能时代&#xff0c;计算机科学已不再是那个稳妥的专业选择…

速成python

一个只会c的苦手来总结一下py的语法。没有其他语法基础的不建议看 1. 输入输出 print自带换行&#xff0c;可以写print("Hi", end"")取消换行 a input(你好:) # 默认是str print(type(a)) # 输出a的类型 a int(input()) # 或者a int(a) print(type(…

Vue.js 3 应用开发与核心源码解析 阅读笔记

https://www.dedao.cn/ebook/reader?idV5R16yPmaYOMqGRAv82jkX4KDe175w7xRQ0rbx6pNgznl9VZPLJQyEBodb89mqoO 2022年出的书&#xff0c;针对Vue的版本是3.2.28&#xff0c;当前的版本是 3.4.21。 本书的一大特色是对Vue 3.x的核心源码&#xff08;响应式原理、双向绑定实现、虚…

毅四捕Go设计模式笔记——命令模式

命令模式&#xff08;Command Pattern&#xff09; 为了解决什么问题&#xff1f; 命令模式的目的是将请求发起者和请求执行者解耦&#xff0c;使得请求的发起者不需要知道具体的执行者是谁&#xff0c;也不需要知道执行的具体过程&#xff0c;只需要发送请求即可。 通过使用…

Apache Flume

文章目录 关于 Apache Flume数据流模型EventAgentSourceChannelSink 关于 Apache Flume 官网&#xff1a;https://flume.apache.orgFlume User Guide : https://flume.apache.org/releases/content/1.11.0/FlumeUserGuide.htmlFlume Developer Guide : https://flume.apache.o…

pytorch-解决过拟合之regularization

目录 1.解决过拟合的方法2. regularization2. regularization分类3. pytorch L2 regularization4. 自实现L1 regularization5. 完整代码 1.解决过拟合的方法 更多的数据降低模型复杂度 regularizationDropout数据处理早停止 2. regularization 以二分类的cross entropy为例&…

EasyRecovery数据恢复软件2025永久免费电脑版下载

EasyRecovery数据恢复软件是一款业界知名的数据恢复工具&#xff0c;它凭借强大的恢复能力和广泛的数据兼容性&#xff0c;帮助用户从各种存储设备中恢复丢失或删除的数据。以下是关于EasyRecovery数据恢复软件的详细介绍。 EasyRecovery绿色破解下载网盘链接: https://pan.ba…

基于FPGA的数字信号处理(3)--什么是浮点数?

科学计数法 你可能不了解「浮点数」&#xff0c;但你一定了解「科学记数法」。 10进制科学记数法把一个数表示成a与10的n次幂相乘的形式&#xff08;1≤|a|<10&#xff0c;a不为分数形式&#xff0c;n为整数&#xff09;&#xff0c;例如&#xff1a; 19970000000000 1.9…

前端业务开发中使用原生js和elementui两种方式实现头像裁切上传的功能

日常业务开发中&#xff0c;无论是后台管理系统还是前台界面&#xff0c;都会遇到图片裁剪的业务需求&#xff0c;选择合适的尺寸或者图片的关键部分&#xff0c;满足我们的功能需求&#xff01;&#xff01; 效果预览 效果一&#xff1a; 效果二: 实现过程 1.原生js实现方…

在Linux操作系统中的文件系统及挂载介绍

磁盘存储数据的最小单位是数据块。 数据块只是一个概念&#xff0c;而不能查看&#xff0c;默认4kb是一个数据块。 块设备文件存储数据时是随机的数据块&#xff0c;而不是相邻的数据块。 无论一个数据块是否被占满&#xff0c;当一个数据块存储数据时&#xff0c;这个数据块…