Vue.js学习笔记常用模板语法详解

时间：2021-09-04 来源：互联网编辑：宝哥软件园浏览：次

本文介绍了Vue.js的常用模板语法，并与大家分享如下：

首先，文本渲染

Vue支持动态呈现文本，即在修改属性的同时实时呈现文本内容。同时，为了提高渲染效率，它还支持只渲染一次，即第一次渲染文本后，文本内容不再随着属性值的变化而变化。

实时渲染

div class=' row ' H2 text-实时呈现/H2 input type=' text ' v-model=' msg ' class=' col-MD-2 '/span class=' col-MD-' { { msg } }/span/div

v-model指令将输入标记的值动态绑定到属性msg，并通过{{ msg }}表达式将其显示在页面上。当文本框的内容被修改时，后续页面的内容会实时变化，并与文本框的内容保持一致。

一次渲染

div class=' row ' H2 text-render once/H2 input type=' text ' v-model=' msg _ once ' class=' col-MD-2 '/span class=' col-MD-' v-once { { msg _ once } }/span/div在vm对象中添加属性

需要(['jquery '，' bootstrap '，' vue']，函数($，bootstrap，Vue){ var VM=new Vue({ El : ' # app '，data: { msg _ once: ' once . ')} });});

第一次加载页面时，页面会显示一次.并且在span标记添加了v-once指令后，无论文本框的内容如何修改，页面的内容都不会改变。

HTML代码呈现

在某些情况下，页面需要动态插入HTML代码

在vm对象中添加一个属性，属性值是一段HTML代码

require(['jquery '，' bootstrap '，' vue']，function ($，bootstrap，Vue){ var VM=new Vue({ El : ' # app '，data : { html : ' } span这是一个html标记。/span ' } })；});将v-html指令添加到page元素后，属性值中对应的元素将显示在元素的对应位置

div class=' row ' H2 text-html/H2 div v-html=' html '/div/div

第二，表达

上面介绍的{{ msg }}，是一个简单的表达式。此外，还有一些常见的表达方式。

运算表达式

上述简单表达式可以使用运算符，Vue会在页面上呈现操作后的结果

Div h4运算表达式/H4 span v-pre { { number(number)} }:/span输入v-model=' number ' type=' text '/span运算结果：{ { number(number)}/span/div

在文本框中输入数字，Vue通过表达式中的运算符实时计算结果并显示出来。因为文本框的内容是字符串，所以需要将number属性类型转换为表达式中的数字。

三元运算表达式

Vue支持在表达式中使用三元运算符

Div h4三元运算表达式/h4 span v-pre{{ ok？YES' : 'NO' }}:/spanspan{{ ok？是' : '否' }/span/div

Javascript方法

Javascript支持的基本方法也可以用在表达式中，Vue会动态执行方法并显示最终结果

Div h4Javascript方法/h4span v-pre {{msg _ once.split(')。反转()。join(“”)}:/span span { { msg _ once . split(“”)。反转()。join(“”)} }/span

在这个例子中，msg_once属性值的字符被反转，然后重新组合。

第三，过滤器

过滤器通常用于格式化和显示内容。Vue支持自定义过滤器

首先，向vm对象添加一个过滤方法

需要(['jquery '，' bootstrap '，' vue']，函数($，bootstrap，Vue){ var VM=new Vue({ El : ' # app '，data : { filter _ msg 3360 ' base ' }，filter s : { filter : function(value){ if(！值){ return“”；}返回值“_ filter 1”；}，filter2:函数(值){ if(！值){ return“”；}返回值“_ filter 2”；}，filter_arg:函数(值，arg1，arg2) { if(！值){ return“”；}返回值“arg 1”arg 2；} } });});所有筛选方法都应该在filters属性中定义。方法的第一个参数值是需要处理的原始内容，方法的返回值是已经立即处理的新内容。

用户定义的过滤器使用如下

Div h4单个过滤器/H4 span v-pre { { filter _ msg | filter 1 } }:/span span { { filter _ msg | filter 1 } }/span/div

在上面的示例中，过滤器通过管道符号“|”与要处理的内容连接，filter_msg属性值通过filter1过滤器，然后附加并显示内容。

同时，Vue还支持连接多个过滤器

Div h4系列滤波器/H4 span v-pre { { filter _ msg | filter 1 | filter 2 } }:/span span { { filter _ msg | filter 1 | filter 2 } }/span/div

在本例中，可以通过管道符号“|”连接多个过滤器，每个前一个过滤器的输出将用作下一个过滤器的输入，直到显示最终结果。

当过滤器有多个参数时，Vue也支持用参数调用

Div h4筛选器参数/H4 span v-pre { { filter _ msg | filter _ arg(' arg 1 '，' arg 2 ')}:/span span { { filter _ msg | filter _ arg(' arg 1 '，' arg 2 ')} }/span/div

四、常用说明

指令是对页面的DOM元素的特殊属性应用一些特殊的行为。Vue的内置指令是带有v字头的特殊属性。

常用说明如下：

v-bind v-on v-for v-if v-else-if v-else v-showv-bind

此指令用于将一个或多个属性绑定到元素

div HV-bind/h span v-可用按钮(v-bind:disabled='！BTN _ enabled '):/span button v-bind : disabled='！Btn_enabled' type='button '可点击按钮/buttonbr/span v-pre不可用按钮(v-bind : disabled=' BTN _ enabled '):/Span button v-bind : disabled=' BTN _ enabled ' type=' button '不可点击按钮/buttonbr/span v-pre缩写(: disabled='！BTN _ enabled '):/span button : disabled='！Btn_enabled' type='button '可点击的按钮/button/div require (['jquery '，' bootstrap '，' vue']，function ($，bootstrap，vue){ var VM=new vue({ El : ' # app '，data :)})；在上面的示例中，向vm对象添加一个名为btn_enabled的布尔属性，并通过v-bind : disabled=' BTN _ enabled '为按钮中的disabled属性动态赋值

在页面上，您可以看到不能被动态点击的按钮添加了一个禁用的属性。同时，v-bind:disabled='！' Btn_enabled '也可以缩写为：disabled='！' btn_enabled ' .

v-on

此指令绑定事件侦听器。事件类型由参数指定。表达式可以是方法或内联语句的名称。在普通元素上使用时，只能监听原生DOM事件。当侦听本机DOM事件时，该方法将事件作为唯一的参数。如果使用内联语句，该语句可以访问$event属性。

将自定义方法添加到vm对象的methods属性中

需要(['jquery '，' bootstrap '，' vue']，函数($，bootstrap，Vue){ var VM=new Vue({ El : ' # app '，methods : { BTN _ click : function(){ console . log(' button click！');}，btn_clickWithEvent:函数($ event){ console . log($ event)；}，btn_clickWithMsg:函数(msg){ console . log(' Message is : ' msg)；} } });});通过属性on:click=' btn _ click '向按钮添加单击事件

Div h4v-on(事件绑定)/H4 span v-预点击事件(v-: click=' BTN _ click '):/span button v-: click=' BTN _ click ' type=' button '点击我！/button br/span v-带有事件参数的预点击事件(v-: click=' BTN _ clickwithevent($ event)'):/span按钮v-: click=' BTN _ clickwithevent($ event)'类型='按钮'点击我！/button br/span v-带有自定义参数的预点击事件(v-: click=' BTN _ clickwithsg(' hello world！)'):/span button v-: click=' BTN _ clickwithsg(' Hello world！)' type='button '点击我！/buttonbr/span v-pre缩写(@ click=' BTN _ click '):/span button @ click=' BTN _ click ' type=' button '点击我！/button /div页面的效果如下

v-on指令还支持缩写，缩写由@符号代替，例如：@click='btn_click '。

v-for

此指令用于基于源数据多次呈现元素或模板块。

向vm对象添加数组类型属性书

Require (['jquery '，' bootstrap '，' vue']，function ($，bootstrap，vue){ var VM=new vue({ El : ' # app '，data : { books 3360[' simple node '，' C#本质论。});通过v-for指令实现一个简单的列表

Div h4v-for(循环)/h4ul liv-for='图书中的项目' {item}}/li/ul/div页面具有以下效果

v-for属性的值是表达式结构中项的表达式，其中项表示表达式运算结果的每一项。最终的HTML代码如下

v-if，v-else，v-else

条件呈现指令，通过真或假的表达式结果插入和删除元素。虽然v-if可以单独使用，但v-else-if和v-else必须与v-if一起使用。

下面是一个简单用法的例子

Div h4v-if，v-else-if，v-else(分支)/h4 span分支示例：/span输入类型=' text ' v-model=' number '/span v-if=' number 10 '大于10/span span v-else-if=' number==10

当文本框中输入小于10的数字时，右侧仅显示小于10的文本内容。

查看源代码，发现只有“小于10”内容的span标签存在，另外两个标签插入页面。

类似地，当输入大于10的数字时，只有大于10的文本内容显示在右侧。源代码中只存在相应的span标记。

电视节目

这个指令也是一个条件渲染指令，但是和上面提到的v-if不同。这可以用一个例子来说明。

Div h4v-show(条件渲染)/h4 spanv-show示例：/span输入类型=' text ' v-model=' number '/Span v-show=' number 10 '大于10/Span v-show=' number=' 10 '等于10/Span v-show=' number 10 '小于10/spanbr//div。将上述示例中的所有说明替换为v-show，页面如下所示