草庐IT

vue指令

er先森 2023-03-28 原文

1、文本类指令

  {{}}、v-text  都是用于绑定节点的文本; 

    二者区别:{{}}这种绑定值的方式在页面会出现“{{}}”一闪而过的效果

    解决{{}}在页面出现一闪而过的办法:

 // css:
[v-cloak] {
    display: 'none'
}
// html

  v-once 用于指令节点的内容只绑定一次,当前节点中所对应的变量变化,视图不更新。

    通常情况下,v-once只能和{{}}一起用

  v-html 用于绑定动态的html节点,相当于DOM中的innerHTML,这个指令默认已经做了"防注入攻击XSS"的处理。

  v-once和v-cloak都不需要接收表达式来作为值

2、动态属性指令

  v-bind  用于动态绑定节点属性(如:title,value,class,style等);经常简写成":属性名"

  动态class语法1 <div :class="变量1 变量2"></div>
  动态class语法2 <div :class="[表达式1,表达式2,...]"></div>
       动态class语法3 <div :class="{类名1:布尔值1,类名2:布尔值2,...}"></div>
 
  
  动态class语法1 <div :style="`color:red;fontSize:20px`"></div>
       动态class语法2 <div :style="[{k1:v1,k2:v2},{k3:v3},...]"></div>
       动态class语法3 <div :style="{k1:v1,k2:v2,....}"></div>
  这三种语法可以交叉使用,但实际上很少有人交叉使用。
3、事件绑定

  v-on 用于给视图绑定各种js事件,比如:click,mouseenter,blur等,简写成: "@事件名"

  事件修饰符:.stop 阻止冒泡 ,.enter等,可以链式调用。

4、表单绑定

  v-model 用于表单取值(表单双向绑定),比如input/select/textarea等。

  表单三个修饰符:.trim自动去除文本首尾空格

          .number只能输入数字

          .lazy 用于性能,当表单失去焦点时再进行双向绑定

5、列表渲染

  v-for  用于渲染列表、对象等。

6、条件渲染

  v-show 相当于控制节点的display: none/block

  v-if / v-else-if / v-else  这是真正的移除或插入视图节点,比较耗费性能,不建议和v-for一起使用。

  v-for的优先级比v-if更高。

7、其它指令

  v-pre 用于调试,可以阻止vue编译器对指令的编译

  v-slot 指定具名插槽

vue指令strongdivspanVue

有关vue指令的更多相关文章

  1. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  2. (附源码)vue3.0+.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图:一.整体介绍  介绍SignalR一种通讯模型Hub(中心模型,或者叫集线器模型),调用这个模型写好的方法,去发送消息。  内容有:    ①:Hub模型的方法介绍    ②:服务器端代码介绍    ③:前端vue3安装并调用后端方法    ④:聊天室样例整体流程:1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过,signalR内置方法.invoke()  去请求接口3、监听接受方法(渲染消息)通过new signalR.HubConnectionBuilder().on

  3. 【Linux】初识Linux --指令Ⅰ - 2

    Halo,这里是Ppeua。平时主要更新C语言,C++,数据结构算法,Linux…感兴趣就关注我吧!你定不会失望。目录1.ls显示当前目录下的文件内内容2.pwd-显示用户当前所在的目录3.cd-改变工作目录。将当前工作目录改变到指定的目录下1.cd-回到上一次待的工作空间2.cd..返回上一层目录1.相对路径:cd../aurora2.绝对路径:cd/home/aurora/lesson1/aurora3.cd~进入用户家目录4.cd/进入root目录4.mkdir-新建目录5.rmdir/rm-删除1.rmdir删除空文件夹2.rm删除1.rm-f2.rm-i3.rm-r1.ls显示当前目

  4. iOS快捷指令:执行Python脚本(利用iSH Shell) - 2

    文章目录前言核心逻辑配置iSH安装Python创建Python脚本配置启动文件测试效果快捷指令前言iOS快捷指令所能做的操作极为有限。假如快捷指令能运行Python程序,那么可操作空间就瞬间变大了。iSH是一款免费的iOS软件,它模拟了一个类似Linux的命令行解释器。我们将在iSH中运行Python程序,然后在快捷指令中获取Python程序的输出。核心逻辑我们用一个“获取当前日期”的Python程序作为演示(其实快捷指令中本身存在“获取当前日期”的操作,因而此需求可以不用Python,这里仅仅为了演示方便),核心代码如下。>>>importtime>>>time.strftime('%Y-%

  5. vue 实现内容超出两行显示展开更多功能,可依据需求自定义任意行数! - 2

    平时开发中我们经常会遇到这样的需求,在一个不限高度的盒子中会有很多内容,如果全部显示用户体验会非常不好,所以可以先折叠起来,当内容达到一定高度时,显示展开更多按钮,点击即可显示全部内容,先来看看效果图: 这样做用户体验瞬间得到提升,接下来看看具体细节。0">主要操作在内容这里{{item.username}},……展开更多样式大家可依据自己项目需求进行设计,这里就不贴了,主要说几个关键的。1、在data中定义三个属性isShowMore:false, //控制展开更多的显示与隐藏textHeight:null, //框中内容的高度status:false, //内容状态是否打开2.计算内容是否

  6. vue3.0 + vite2.0+如何兼容低版本浏览器 - 2

    这里写自定义目录标题一、问题二、解决三、解决方案四、打包预览一、问题在使用vue3.2和vite2开发一个移动端或者钉钉端H5微服务iosapp内置浏览器打开没问题安卓app内置浏览器打开空白页面vconsole打印出现报错globalthisundefind二、解决内置浏览器版本比较低打印出来是63vue3代码不兼容低版本浏览器三、解决方案步骤一:vite.config.ts里build.target配置项指定构建目标为es2015或者步骤二:安装@vitejs/plugin-legacy安装完报错也还在指定版本可以解决“@vitejs/plugin-legacy”:“1.8.0”,步骤三:

  7. Vue3的新特性 - 2

    Vue3的新特性包括:CompositionAPI:一种新的API风格,可将有关组件功能的代码逻辑封装在单独的函数中,从而更好地管理和重用代码。Teleport:可以让组件在DOM层次结构中的任何位置渲染。Suspense:一种新的异步渲染模式,可以优化应用程序的性能。更快的渲染速度:Vue3使用了新的虚拟DOM算法,并且对渲染过程进行了优化,因此在渲染大型应用时性能更高。更小的包大小:Vue3的打包大小比Vue2更小,因为它不再需要依赖像vue-template-compiler这样的工具。其他改进:Vue3还具有其他一些改进,例如更好的TypeScript支持、更好的错误提示和更好的调试工

  8. ruby-on-rails - 设计 skip_confirmation!未能避免发送确认指令 - 2

    我的应用程序设置为如果用户使用Oauth或Openid登录,他们不必确认他们的电子邮件地址。但是,Devise仍在发送电子邮件确认。当我调用User.skip_confirmation时!我得到一个未定义的方法错误。我的模型:classUserfalsedefself.find_for_facebook_oauth(access_token,signed_in_resource=nil)data=access_token.extra.raw_infoifuser=User.where(:email=>data.email).firstuserelse#User.skip_confirm

  9. ruby-on-rails - Rails 路由中的 "mount"指令是什么意思? - 2

    我在Railsroutingsystem中找不到关键字“mount”的含义.我已经设置了Mercury在我的Rails应用程序中使用。它将这一行添加到我的routes.rb配置文件中:Appname::Application.routes.drawdomountMercury::Engine=>'/'mount关键字是什么意思? 最佳答案 Mount在Rails路由中相当于Unixmount。它实际上告诉应用程序该位置存在另一个应用程序(通常是Rack应用程序)。它主要用于Rails引擎。

  10. APP连接ESP8266——采用AT指令 - 2

    1.主要实验设备及器材1.1一块ESP8266(如图1)图1 ESP8266模块1.2一个USB转TTL模块(如图2)图2 USB转TTL模块2.测试ESP8266模块 2.1连接设备        WIFI模块与USB转TTL模块进行连接,连接实物图如图3所示,硬件连线框图如图4所示。图3 连接实物图图4 硬件连接框图2.2打开串口调试助手        本次实验使用的软件是XCOMV2.3,默认波特率为115200,停止位为1,数据位为8,校验位为None(如图5)。图5 XCOMV2.32.3输入测试指令AT        测试AT启动,返回OK(如图6)图6 AT测试2.4复位指令AT

随机推荐