vue学习(1)——基本指令

Vue指令—通过vue实现常见的网页效果
1、内容绑定,事件绑定
(1)v-text设置标签的文本值/内容(textContent)
默认写法会替换全部内容,使用差值表达式可以替换指定内容,内部支持表达式。可简写为{{}}
(2)v-html设置标签的innerHTML
若是普通文本和v-text没有什么差异,若是html结构,v-html可以被解析为标签去渲染,v-text不行(无论内容是什么,只会被解析为文本)。
(3)v-on为元素绑定事件,v-on:事件名=”方法名” 或者简写为 @事件名=”方法名”
点击click,移入monseenter、双击:dbclick(不需要写on了),绑定的方法写在定义的vue的实例的methods属性中。在方法中拿到dom中的数据需要通过关键字this ,方法内部通过this关键字可以访问定义在data中的数据。

2、显示切换、属性绑定
(1)v-show根据表达值的真假切换元素的显示状态(显示和隐藏)
原理是修改元素的display样式(但标签一直都在),实现显示隐藏。
指令后面的内容,最终都会解析为布尔值
true显示元素,false元素隐藏,同时display值会被修改
(2)v-if根据表达值的真假切换元素的显示和隐藏(改变的不是样式而是直接操纵dom元素,移除或添加)
表达式的值为true,元素存在于dom树中,为false,从dom树中移除
(3)v-bind:设置元素的属性(如:src, title, class),为元素绑定属性
完整语法:v-bind:属性名=表达式,简写:属性名=表达式
需要动态的增删class建议使用对象的方式
案列:图片切换
定义图片数组、添加图片索引、
图片的更改本质是图片的src属性被更改了(v-bind)
图片切换逻辑:改变索引
事件绑定(v-on)
第一张和最后一张需要隐藏某个a标签(v-show),显示状态切换
总结:列表数据使用数组保存
v-bind指定可以设置元素属性,比如src
v-show和v-if都可以切换元素的显示状态,频繁切换用v-show
3、列表循环、表单元素绑定
(1)v-for根据数据生成列表结构(响应式)
数组经常和v-for结合使用
语法是(item,index) in 数据
item代表每一项数据,index代表索引
数组长度的更新会同步到页面上,是响应式的
(2)v-on补充传递自定义参数,事件修饰符
事件修饰符:https://cn.vuejs.org/v2/api/#v-on
事件绑定的方法写成函数调用的形式可以传入自定义参数
定义方法时需要定义形参来接收传入的实参
事件的后面跟上.修饰符可以对事件进行限制
.enter可以限制除法的按键为回车
事件修饰符有多种
(3)v-model
作用是便捷的获取和设置表单元素(如:文本框input)的值(双向数据绑定)
绑定的数据会和表单元素值相关联
绑定的数据和表单元素值是双向绑定的,无论修改谁,另外一个都会同步更新

网络应用
Vue结合网络数据开发应用

(1)axios网络请求库(内部是ajax):

功能强大的网络请求库
Get请求
axios.get(地址?查询字符串).then(function(response){},function(err){})
响应成功调用第一个回调函数,失败第二个
查询字符串格式:key=value&key2=value2
Post请求:
axios.post(地址,参数对象).then(function(response){},function(err){})
数据以对象的形式写在第二个参数内
参数对象格式:{ key:value,key2:value2}
可以访问的请求接口(要保证联网状态):
(2)axios+vue
Axios回调函数中的this已经改变,无法访问到data中的数据
解决办法:把this保存起来,回调函数中直接使用保存的this去获取即可
和本地应该最大的区别就是改变了数据来源

总结:axios必须先导入才可以使用,使用get或post方法即可发送对应的请求,then方法中的回调函数会在请求成功或者失败时触发,通过回调函数的形参可以获取响应内容或错误信息。
Axios官方文档传送门:https://github.com/axios/axios

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

windows下cmd的删除命令

在Windows的命令提示符(Command Prompt)中,删除文件或目录的命令是del(删除文件)和rmdir(删除目录)。以下是这两个命令的使用方式: 删除文件(del): 使用del命…

【Java学习之道】日期与时间处理类

引言 在前面的章节中,我们介绍了Java语言的基础知识和核心技能,现在我们将进一步探讨Java中的常用类库和工具。这些工具和类库将帮助我们更高效地进行Java程序开发。在本节中,我们将一起学习日期与时间处理类的使用。 一、为什么需要日期和…

uniapp中input的disabled属性

uniapp中input的disabled属性&#xff1a; 小程序中兼容性好&#xff1b; 在H5中兼容性差&#xff1b; 在H5中使用uniapp的input的disabled属性&#xff0c;属性值只能是true或false&#xff0c;如果为0&#xff0c; "都会为true&#xff1b; <input class"in…

Java从resources文件下载文档,文档没有后缀名

业务场景&#xff1a;因为公司会对excel文档加密&#xff0c;通过svn或者git上传代码也会对文档进行加密&#xff0c;所以这里将文档后缀去了&#xff0c;这样避免文档加密。 实现思路&#xff1a;将文档去掉后缀&#xff0c;放入resources下&#xff0c;获取输入流&#xff0…

启动Java应用的黑魔法:初始化性能解密@PostConstrut,InitialzingBean,init-method,BeanPostProcessor

我们在项目中经常会遇到启动时做一些逻辑的处理&#xff0c;比如配置信息的预加载&#xff0c;缓存信息的预加载等等&#xff0c;那都有哪些方法了&#xff0c;我们一起来探讨一下&#xff1a; 1. 方式 1. 构造方法初始化&#xff1a; 使用构造方法进行对象的基本属性初始化。…

【Leetcode】207.课程表

一、题目 1、题目描述 你这个学期必须选修 numCourses 门课程,记为 0 到 numCourses - 1 。 在选修某些课程之前需要一些先修课程。 先修课程按数组 prerequisites 给出,其中 p r e r e q u i s i t e s [ i ] = [ a i , b

深度学习验证码项目

项目代码&#xff1a; GitHub - kerlomz/captcha_trainer: [验证码识别-训练] This project is based on CNN/ResNet/DenseNetGRU/LSTMCTC/CrossEntropy to realize verification code identification. This project is only for training the model. GitHub - Python3WebSpi…

OpenCV项目开发实战--详细介绍如何进行图像平移和旋转含原理讲解+实现源码

如今,图像编辑变得越来越流行,因为手机具有这种内置功能,可以让您对图像进行裁剪、旋转和执行更多操作。在这篇博文中,我们将使用 OpenCV 探索图像转换和图像旋转。 基本图像转换操作 图像平移和旋转是图像编辑中最基本的操作之一。两者都属于更广泛的仿射变换类别。因此…

win10搭建gtest测试环境+vs2019

首先是下载gtest&#xff0c;这个我已经放在了博客上方资源绑定处&#xff0c;这个适用于win10vs版本&#xff0c;关于liunx版本的不能用这个。 或者百度网盘链接&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/15m62KAJ29vNe1mrmAcmehA 提取码&#xff1a;vfxz 下…

ATF(TF-A)之UBSAN动态代码分析

安全之安全(security)博客目录导读 目录 一、UBSAN简介 二、TF-A中UBSAN配置选项 一、UBSAN简介 未定义行为消毒器(Undefined Behavior Sanitizer&#xff0c;UBSAN)是Linux内核的未定义行为动态检测器。 详细信息可参考&#xff1a;https://github.com/google/kernel-sanit…

js实现日历 完整版

<template><div id"calendar"><!-- 年份 月份 --><div class"title"><div class"label">活动日历</div><div class"total">当前活动 {{ list.length }} 场</div></div><div…

基于Qt C++的工具箱项目源码,含命令行工具、桌面宠物、文献翻译、文件处理工具、医学图像浏览器、插件市场、设置扩展等工具

一、介绍 1. 基本信息 完整代码下载地址&#xff1a;基于Qt C的工具箱项目源码 TBox是一款基于Qt C的工具箱。用户可以自行选择安装所需的工具&#xff08;以插件的形式&#xff09;&#xff0c;将TBox打造成专属于自己的效率软件。TBox基本界面展示如下&#xff1a; 2. 使用…

小程序首页如何进行装修设置

小程序首页是展示给用户的第一屏&#xff0c;它的装修直接影响到用户对小程序的第一印象。小程序首页的设置在小程序管理员后台->页面设置->首页&#xff0c;下图是小程序首页默认的设置。 下图&#xff0c;是小程序首页的具体表现形式。下面具体解释小程序首页各个设置项…

【PCIE720】基于PCIe总线架构的高性能计算(HPC)硬件加速卡

PCIE720是一款基于PCI Express总线架构的高性能计算&#xff08;HPC&#xff09;硬件加速卡&#xff0c;板卡采用Xilinx的高性能28nm 7系列FPGA作为运算节点&#xff0c;在资源、接口以及时钟的优化&#xff0c;为高性能计算提供卓越的硬件加速性能。板卡一共具有5个FPGA处理节…

用 python popen 后台 启动 appium 之后,出现自动结束进程的情况

appium_port get_free_appium_port() cmd f"appium -p {appium_port} &" print(cmd)subprocess.Popen(cmd,shellTrue,# 这里修改stdoutopen(f"./{appium_port}.log", "a"),stderrsubprocess.STDOUT, )python&#xff08;父进程&#xff09…

树和二叉树 | 一些遇到的小问题

1. TreeNode<T> &a TreeNode<T> &a是一个引用&#xff0c;指向类型为T的TreeNode节点。这个引用可以用来修改或访问该节点的值或属性。 2. *BiTree是什么意思&#xff1a; typedef struct BiTNode{ char data;struct BiTNode* lchild, * rchild; }BiT…

标定板生成网址,可以直接打印,matlab标定工具箱

Camera Calibration Pattern Generator – calib.io matlab 打开标定的成像 cameraCalibrator 点击完成之后 命令行中输入 cameraParams.IntrinsicMatrix

Java多线程-——静态代理以及Lambda表达式(基于狂神说的学习笔记)

静态代理 package demo02;// 静态代理模式总结&#xff1a; // 真实对象和代理对象都要实现同一个接口 // 代理对象要代理真实角色/* 好处&#xff1a; 代理对象可以做很多真实对象做不了的事情 真实对象专注做自己的事情*/ public class StaticProxy {public static void mai…

修改ubuntu服务器fs文件最大打开数

起因 在对项目进行压测的时候&#xff0c;请求异常 java.net.SocketException: socket closed&#xff0c;查看nginx代理服务器的日志。tail -f -n500 /var/log/nginx/error.log 显示 文件打开数太多socket() failed (24: Too many open files) while connecting to upstream …

Kubernetes核心组件Services

1. Kubernetes Service概念 Service是kubernetes最核心的概念&#xff0c;通过创建Service&#xff0c;可以为一组具有相同功能的POD&#xff08;容器&#xff09;应用提供统一的访问入口&#xff0c;并且将请求进行负载分发到后端的各个容器应用上。 在Kubernetes中&#xf…