条件#
v-if#
  v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
v-show#
  v-show 指令也是用于根据条件展示一块内容。v-show 只是简单地切换元素的 CSS 属性 display。
v-if 与 v-show#
  v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。
v-else#
  v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面,否则它将不会被识别。
v-else-if#
  v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
 
循环#
v-for#
  可以用 v-for 遍历数组中的元素
      两个参数:item - 数组元素 , index - 索引
<ul>
         <li v-for="(item, index) in items">
          {{ parentMessage }} - {{ index }} - {{ item.message }}
         </li>
       </ul>
  遍历对象中的属性
两个参数:value - 值 ,name - 键名      
<div v-for="(value, name) in object">
      {{ name }}: {{ value }}
       </div>
 
   三个参数:value - 值 ,name - 键名 ,index - 索引
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>
  也可以用 of 代替 in作为分隔符
<div v-for="item of items"></div>
  在进行遍历数据的同时需要为每项提供一个唯一key属性,否则Vue会有一个warn提示。
  因为标记唯一的key属性能跟踪每个节点的身份,从而重用和重新排序现有元素,防止渲染错误。
 
事件#
v-on#
  事件绑定监听器,简写符号为@。
  用在普通元素上时,只能监听原生 DOM 事件。用在自定义元素组件上时,也可以监听子组件触发的自定义事件。
  修饰符#
  • .stop - 调用 event.stopPropagation()。 阻止捕获和冒泡阶段中当前事件的进一步传播。
  • .prevent - 调用 event.preventDefault()。 阻止事件默认行为,并不阻止事件传播
  • .capture - 添加事件侦听器时使用 capture 模式。
  • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
  • .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
  • .native - 监听组件根元素的原生事件。
  • .once - 只触发一次回调。
  • .left - 只当点击鼠标左键时触发。
  • .right - 只当点击鼠标右键时触发。
  • .middle - 只当点击鼠标中键时触发。
  • .passive - 以 { passive: true } 模式添加侦听器
v-once#
  只渲染元素和组件一次。如果一个组件中包含了大量静态内容,就可以添加v-once指令来计算一次并进行缓存。
  不要过度使用
 
属性#
v-bind#
  动态地绑定一个或多个特性,或一个组件 prop 到表达式。简写为 :
  修饰符:#
  • .prop - 被用于绑定 DOM 属性 (property)。
  • .camel - 将 kebab-case 特性名转换为 camelCase. 驼峰化
  • .sync 语法糖,会扩展成一个更新父组件绑定值的 v-on 侦听器。
 
双向数据绑定#
v-model#
  在表单控件或者组件上创建双向绑定。
  修饰符:
  • .lazy - 取代 input 监听 change 事件
  • .number - 输入字符串转为有效的数字
  • .trim - 输入首尾空格过滤
 
其他#
v-text #
  更新元素的 textContent。如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值。
v-html #
  更新元素的 innerHTML
  注意:在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击。只在可信内容上使用 v-html,永 不用在用户提交的内容上。
v-pre #
  跳过这个元素和它的子元素的编译过程。内部内容不会被编译,会原样输出。
v-cloak#
  这个指令保持在元素上直到关联实例结束编译。

Vue API 3模板语法 ,指令的更多相关文章

  1. Vue实例与模板语法

    VUE基础使用方法 一.安装 1.NPM 在用 Vue 构建大型应用时推荐使用 NPM 安装[1].NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用.同时 Vue ...

  2. 前端框架VUE——数据绑定及模板语法

    一.数据绑定 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: <div id="app"> {{ msg }} </di ...

  3. Vue介绍以及模板语法-插值

    1.Vue的介绍 Vue是一套用于构建用户界面的渐进式框架. 注意:Vue是一个框架,相对于jq库来说,是由本质的区别的:https://cn.vuejs.org/ Vue不支持IE8及一下版本,因为 ...

  4. Vue笔记之模板语法

    插值 比较常用的就是插值,插值就是{{ foobar }}用两个大括号包起来的一个变量,显示的时候会将双大括号标签替换为这个变量的值. 基本的用法就是: <p>{{ message }}& ...

  5. vue学习笔记 模板语法(三)

    <div id="kk"> <div>直接输出文本:{{msg}}</div> <div>自定义过滤器输出文本:{{msg|capi ...

  6. Vue详细介绍模板语法和过滤器的使用!

    表达式 {{ XXX }}使用过滤器 {{ XXX | yyy}}使用多个过滤器 {{ XXX | yyy | yyy1}}过滤器带参数 {{ XXX | yyy(123,"zhuiszhu ...

  7. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  8. vue基础---模板语法

    Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解 ...

  9. Vue.js模板语法介绍

    Vue.js模板.指令 模板语法概述 1.如何理解前端渲染? ​ 把数据填充到HTML标签中,一般我们使用Ajax将数据从后台查询出,结合模板() 2.前端渲染方式 2.1.原生js拼接字符串 ​ 使 ...

随机推荐

  1. 关于Arrays类的静态方法asList()

    Array.asList():是数组转成集合的方法 List<String> list = Arrays.asList(new String[]{"AA", " ...

  2. Linux文件与目录管理 cp od chattr lsattr

    1:在shell脚本中,一定要使用绝对路径. 2:在根目录下,.和..是完全相同的两个目录. 3:cd - 就相当于撤销,表示回到前面状态所在的目录. 4:mkdir -m 700 test 加&qu ...

  3. pyinstaller打包:AttributeError: module ‘win32ctypes.pywin32.win32api’ has no attribute ‘error’

    pyinstaller打包:AttributeError: module 'win32ctypes.pywin32.win32api' has no attribute 'error' 是因为pyin ...

  4. 关于React采坑(憨批)系列---类组件(class MyCom extends React.Component--VM47:9 Uncaught TypeError: Super expression must either be null or a function, not undefined)

    今天在学习React中的类组件时,突然给我报错VM47:9 Uncaught TypeError: Super expression must either be null or a function ...

  5. Exploring Matrix

    import java.util.Scanner; public class J714 { /** * @taking input from user */ public static void ma ...

  6. [Comet1173]最简单的题

    称区间$[l,r]$的"信息"为其的答案和第一个.最后一个大于$x$的位置,显然通过$[l,mid]$和$[mid+1,r]$的信息可以$o(1)$合并得到$[l,r]$的信息 考 ...

  7. COS 音视频实践 | 多种姿势让你的视频“跑”起来

    导语 随着4G/5G时代的到来,短视频/直播行业开始流行,音视频逐渐成为信息传播中流量占比最大的部分.腾讯云对象存储(COS)作为可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务, ...

  8. 【JavaSE】JDK配置

    Java开发环境配置 2020-09-10  08:32:20  by冲冲 1. Windows7安装JDK 1.1 下载JDK ① 下载地址:http://www.oracle.com/techne ...

  9. Hi3516开发笔记(四):Hi3516虚拟机编译uboot、kernel、roofts和userdata以及分区表

    若该文为原创文章,转载请注明原文出处本文章博客地址:https://hpzwl.blog.csdn.net/article/details/121572767红胖子(红模仿)的博文大全:开发技术集合( ...

  10. 洛谷 P7324 - [WC2021] 表达式求值(状压+dp)

    题面传送门 现场人傻系列-- 首先建出 \(E\) 的表达式树,具体来说表达式的每一个叶子节点表示一个数组 \(A_i\),每一个非叶子节点都表示一次运算,它的值表示左右儿子进行该运算后得到的结果.这 ...