Vue模板语法

您所在的位置：网站首页 › 数据插值名词解释 › Vue模板语法

Vue模板语法

2024-07-13 19:52| 来源: 网络整理| 查看: 265

Vue模板语法——文本插值、指令、缩写插值文本（{{}}、v-text）

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本,双大括号会将数据解释为普通文本，或者采用v-text标签

Message: {{ msg }}

js代码：

var vm = new Vue({ el : "#app", data : { msg : "hi vue", })

标签将会被替代为对应数据对象上 msg property 的值

msg变化，插值处的内容会跟随更新

使用v-once指定一次插值，不再更新

这个将不会改变: {{ msg }}

v-text

HTML（v-html）

为了输出真正的 HTML，你需要使用 [v-html]解析对应的html文本，示例如下

v-html

Attribute（v-bind）属性

参照：V-bind详细使用_CaseyWei的博客-CSDN博客_v-bind

Mustache {{}}语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令

v-bind

javascript表达式

，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

js表达式

注意事项：

每个绑定都只能包含单个表达式，所以下面的例子都不会生效。模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。 {{ var a = 1 }} {{ if (ok) { return message } }} 指令

基本介绍：

指令 (Directives) 是带有 v- 前缀的特殊 attribute，声明形式上很像Dom元素的属性一般为单个js表达式，v-for除外当表达式的值改变时，会响应式地作用于Dom元素。

v-if—确定元素是否渲染，用来插入/移除元素

v-show—元素会渲染，但是会通过display控制显示/隐藏

v-show

参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示，比如v-bind、v-on

v-bind 指令可以用于响应式地更新 HTML attribute：

...

v-on 指令，它用于监听 DOM 事件

... 动态参数

2.6.0 新增

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

... attributeName ——作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用比如attributeName值为”href“，等价于 v-bind:href。 ...

动态参数表达式语法约束：

某些字符，如空格和引号，避免在[]内通过+等符号拼接动态参数会被默认为小写点我

v-on参数：

当通过methods中定义方法，以供@click调用时，需要注意参数问题：

情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

v-on参数

修饰符

参照：Vue修饰符 - 一抹嫣红 - 博客园 (cnblogs.com)

Vue提供了修饰符来帮助我们方便的处理一些事件：

.stop - 调用 event.stopPropagation()。 .prevent - 调用 event.preventDefault()。 .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。 .native - 监听组件根元素的原生事件。 .once - 只触发一次回调。 lazy修饰符：默认情况下，v-model默认是在input事件中同步输入框的数据的。也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。 lazy修饰符可以让数据在失去焦点或者回车时才会更新： number修饰符：默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。 number修饰符可以让在输入框中输入的内容自动转成数字类型： trim修饰符：如果输入的内容首尾有很多空格，通常我们希望将其去除 trim修饰符可以过滤内容左右两边的空格

举两个例子stop和once

sssss 嵌套简化写法 [v-bind 缩写] ... ... ... [v-on 缩写] ... ... ...

测试代码：

元素是否渲染

元素是否展示

点击跳转点击事件点我点击事件1 点击事件2 sssss 嵌套 var vm = new Vue({ el:"#app3", data:{ flag:false, flag2:false, url:"www.baidu.com", eventtype:"click", info:" 我在 " }, methods:{ showMessage:function(){ alert(event.type); }, showMessage2:function(num,event){ alert(event.type+num); }, } });

【本文地址】

公司简介

联系我们