vue基础(上篇)

有粉丝在私信中联系博主,希望博主能够系统的出一篇关于vue的基础篇\textcolor{blue}{ 有粉丝在私信中联系博主,希望博主能够系统的出一篇关于 vue的基础篇}vue

✨ 今天他来了,vue基础系列分为三篇

本篇是第一篇:vue基础(上篇)\textcolor{pink}{本篇是第一篇:vue基础(上篇)}vue

本篇文章涵盖对Vue的介绍、指令、修饰符\textcolor{green}{本篇文章涵盖对Vue的介绍、指令、修饰符}Vue

vue.js介绍

在这里插入图片描述
当然这些对vue的介绍在晚上很多,大家很容易找到,所以在这里小编就不为大家一一列举了,不过你要知道的就是下面两点:
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架
Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合

指令

本质就是自定义属性,Vue中指令都是以 v- 开头

内置指令

v-cloak

防止页面加载时出现闪烁问题
在这里插入图片描述

v-text

v-text指令用于将数据填充到标签中,作用于插值表达式类似,但是没有闪动问题
如果数据中有HTML标签会将html标签一并输出
注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值
在这里插入图片描述

v-html

用法和v-text 相似 但是他可以将HTML片段填充到标签中
可能有安全问题, 一般只在可信任内容上使用 v-html,永不用在用户提交的内容上
它与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当html标签解析后输出。
在这里插入图片描述

v-pre

显示原始信息跳过编译过程
跳过这个元素和它的子元素的编译过程。
一些静态的内容不需要编译加这个指令可以加快渲染
在这里插入图片描述

v-once

执行一次性的插值【当数据改变时,插值处的内容不会继续更新】
在这里插入图片描述

v-model

v-model是一个指令,限制在 <input>、<select>、<textarea>、components中使用
在这里插入图片描述
双向数据绑定
当数据发生变化的时候,视图也就发生变化
当视图发生变化的时候,数据也会跟着同步变化

v-on

用来绑定事件的
形式如:v-on:click 缩写为 @click;
在这里插入图片描述

v-bind

v-bind 指令被用来响应地更新 HTML 属性
v-bind:href 可以缩写为 :href;

<img v-bind:src="imageSrc">
可以缩写为下面
<img :src="imageSrc">

v-if

条件判断
使用场景:多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素,进行两个视图之间的切换

v-show 和 v-if的区别:v-show本质就是标签display设置为none,控制隐藏, v-show只编译一次,后面其实就是控制css,而v-if不停的销毁和创建,故v-show性能更好一点。v-if是动态的向DOM树内添加或者删除DOM元素, v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件

v-for

循环结构
用于循环的数组里面的值可以是对象,也可以是普通元素
在这里插入图片描述

key 的作用
key来给每个节点做一个唯一标识,key的作用主要是为了高效的更新虚拟DOM
在这里插入图片描述

自定义指令

介绍

内置指令不能满足我们特殊的需求,Vue允许我们自定义指令

Vue.directive 注册全局指令

在这里插入图片描述

Vue.directive 注册全局指令 带参数

在这里插入图片描述

自定义指令局部指令

局部指令,需要定义在 directives 的选项 用法和全局用法一样
局部指令只能在当前组件里面使用
当全局指令和局部指令同名时以局部指令为准
在这里插入图片描述

修饰符

事件修饰符

在事件处理程序中调用 event.preventDefault()event.stopPropagation() 是非常常见的需求。Vue 不推荐我们操作DOM 为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符-修饰符是由点开头的指令后缀来表示的
在这里插入图片描述

按键修饰符

在做项目中有时会用到键盘事件,在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
在这里插入图片描述

自定义按键修饰符别名

在Vue中可以通过config.keyCodes自定义按键修饰符别名
在这里插入图片描述

表单修饰符

  • .number 转换为数值
    注意点: - 当开始输入非数字的字符串时,因为Vue无法将字符串转换成数值 - 所以属性值将实时更新成相同的字符串。即使后面输入数字,也将被视作字符串。
  • .trim
    自动过滤用户输入的首尾空白字符, 只能去掉首尾的 不能去除中间的空格
  • .lazy
    将input事件切换成change事件, .lazy 修饰符延迟了同步更新属性值的时机。即将原本绑定在 input 事件的同步逻辑转变为绑定在 change 事件上
    在这里插入图片描述
    在失去焦点 或者 按下回车键时才更新

写在最后

原创不易,还希望各位大佬支持一下\textcolor{blue}{原创不易,还希望各位大佬支持一下}

👍 点赞,你的认可是我创作的动力!\textcolor{green}{点赞,你的认可是我创作的动力!}

⭐️ 收藏,你的青睐是我努力的方向!\textcolor{green}{收藏,你的青睐是我努力的方向!}

✏️ 评论,你的意见是我进步的财富!\textcolor{green}{评论,你的意见是我进步的财富!}

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

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

相关文章

depends用于测试程序运行所缺少的文件,可以帮我们很快找到问题

DEPENDS工具和DUMPBIN工具使用阅读目录(Content) 1.Depends2.DUMPBIN2.1 开启CMD2.2 移动目录到C:\Program Files (x86)\Microsoft Visual Studio\VC98\Bin2.3 运行命令:VCVARS32.BAT2.4 下面就可以调用dumpbin.exe命令了在系统部署运行时我们经常发现某个程序在开发机器中可以…

友联

欢迎来到小站友链区&#xff0c;欢迎━(&#xff40;∀)ノ亻!。 ljc20020730学长巨佬_WA自动机珂朵莉最可爱了BLUESKY007雷姆最可爱啦扬子曰他的代码是神奇的lukelin机房最强如果你想要成为chhokmah小站的朋友的话&#xff0c;请你先把小站加入为友链站哟(&#xff3e;&#xf…

vue基础(中篇)

✨有粉丝在私信中联系博主&#xff0c;希望博主能够系统的出一篇关于vue的基础篇\textcolor{blue}{ 有粉丝在私信中联系博主&#xff0c;希望博主能够系统的出一篇关于 vue的基础篇}有粉丝在私信中联系博主&#xff0c;希望博主能够系统的出一篇关于vue的基础篇 ✨ 今天他来了…

DR图像的畸变校正

DR图像容易产生S形、枕形和局部失真的情况&#xff0c;这给医生对图像的判断带来干扰。而且在医学图像的三维重建中&#xff0c;未经校正的图像进行重建&#xff0c;还会带来一定的重影等干扰。因此&#xff0c;畸变校正是DR图像进行后续处理&#xff0c;不得不对待的一个问题。…

【CF global1 D / CF1110D】 Jongmah

题意 你有n个数字&#xff0c;范围[1, m]&#xff0c;你可以选择其中的三个数字构成一个三元组&#xff0c;但是这三个数字必须是连续的或者相同的&#xff0c;每个数字只能用一次&#xff0c;问这n个数字最多构成多少个三元组? 分析 这里想谈一下DP的一个套路&#xff0c;捆绑…

vue基础(下篇)

介绍 对vue组件的介绍网上有很多大家可以自行查询 组件 (Component) 是 Vue.js 最强大的功能之一 组件可以扩展 HTML 元素&#xff0c;封装可重用的代 组件注册 全局注册 Vue.component(‘组件名称’, { }) 第1个参数是标签名称&#xff0c;第2个参数是一个选项对象 全局组…

MS17-010漏洞复现

攻击机&#xff1a;192.168.148.132 kali linux2018.2 x64 靶机&#xff1a;192.168.1.129 win7 x64 首先用msfconsole的smb模块扫描&#xff0c;看看是否有漏洞 use auxiliary/scanner/smb/smb_ms17_010 set rhosts 192.168.1.129 &#xff08;目标主机&#xff09; Ho…

watch 和 computed

<template><div class"hello"><h1>{{ msg }}</h1><h2>Essential Links</h2><!-- watch/computed比较 --><div><input v-model"firstName" type"text"><input v-model"lastName&q…

[BZOJ]3173: [Tjoi2013]最长上升子序列

题解: 考虑按照元素升序加入 所以对位置在其后的元素LIS无影响 然后从前面位置的最大值转移过来就行 ,,,,平衡树无脑模拟 #include <algorithm> #include <iostream> #include <cstring> #include <cstdio> #include <vector> #include <s…

转:HTTP协议简介与在python中的使用详解

1. 使用谷歌/火狐浏览器分析 在Web应用中&#xff0c;服务器把网页传给浏览器&#xff0c;实际上就是把网页的HTML代码发送给浏览器&#xff0c;让浏览器显示出来。而浏览器和服务器之间的传输协议是HTTP&#xff0c;所以&#xff1a; HTML是一种用来定义网页的文本&#xff0c…

深受企业青睐的华为云

作为中国经济活力与韧性的重要保障&#xff0c;无数中小企业也在为夺得各自领域的冠军你追我赶。而席卷全球的数字化转型浪潮&#xff0c;则将这场冠军争夺赛推向了关键节点。企业数字化的第一步就是业务云端化&#xff0c;对企业来说云计算是不可或缺的数字底座。上云&#xf…

一个程序员的水平能差到什么程度?

老板觉得公司里都是男的&#xff0c;缺少一点阴柔之气&#xff0c;想平衡一下&#xff0c;正巧当时互金公司倒了一大批&#xff0c;大批简历投到公司&#xff0c;老板以为自己也是技术出身&#xff0c;就招了一个三年工作经验的女程序员&#xff0c;互金出来的&#xff0c;要价…

vue路由详解版一目了然

概念 路由的本质就是一种对应关系&#xff0c;比如说我们在url地址中输入我们要访问的url地址之后&#xff0c;浏览器要去请求这个url地址对应的资源。 那么url地址和真实的资源之间就有一种对应的关系&#xff0c;就是路由。 路由分为前端路由和后端路由 1).后端路由是由服务…

go语言环境搭建

1、windows环境搭建   1、安装go   2、安装goland开发工具包 2、test.go /* 可执行文件&#xff0c;包名必须是main */ package main /* fmt 字符串格式化的包 */ import "fmt"/*main入口函数*/ func main() { fmt.Printf("Hello, world" )} View Code…

进阶函数

一、函数对象 函数是第一类对象&#xff1a;函数名指向的值可以被当做参数传递 1.函数名可以被传递 def func():print(func)f func # 函数名可以当做变量名 print(f) # f指向的也是函数func指向函数体代码的内存地址 2.函数名可以被当做参数传递给其他参数 def func():print…

vue脚手架基础API全面讲解【内附多个案例】

vscode-插件补充 vue文件代码高亮插件-vscode中安装 代码提示插件-vscode中安装 知识点自测 想学会今天的内容, 先测测这几个会不会 表达式, 变量是什么 new的作用和含义 实例化对象 什么是对象上的, 属性和方法 对象的赋值和取值 this的指向 npm/yarn是什么, package.json干…

mysql 和 sqlserver sql差异比较

mysql:select * from table_name limit 100,200;--取出从100到200的数据 获取时间&#xff1a;mysql:now() mysql tinyint&#xff08;0,1&#xff09; → bit float &#xff08;decimal(19,4)&#xff09;→ moneytext → ntextvarchar →nvarchar 转载于:https://www.cnblo…

Vue 过滤器、计算属性、侦听器 图解版 一目了然

文章目录本篇学习目标1. vue基础1.0_vue基础 v-for更新监测1.1_vue基础_v-for就地更新1.2_vue基础_虚拟dom1.3_vue基础_diff算法情况1: 根元素变了, 删除重建情况2: 根元素没变, 属性改变, 元素复用, 更新属性1.4_vue基础_diff算法-key情况3: 根元素没变, 子元素没变, 元素内容…

linux shell命令行选项与参数用法详解

问题描述&#xff1a;在linux shell中如何处理tail -n 10 access.log这样的命令行选项&#xff1f;在bash中&#xff0c;可以用以下三种方式来处理命令行参数&#xff0c;每种方式都有自己的应用场景。1&#xff0c;直接处理&#xff0c;依次对$1,$2,...,$n进行解析&#xff0c…

Vue自定义指令原来这么简单

本篇学习目标 能够了解组件进阶知识能够掌握自定义指令创建和使用能够完成tabbar案例的开发 1. 组件进阶 1.0 组件进阶 - 动态组件 目标: 多个组件使用同一个挂载点&#xff0c;并动态切换&#xff0c;这就是动态组件 需求: 完成一个注册功能页面, 2个按钮切换, 一个填写注册…