手机版

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,页面如下所示

从页面上显示的结果来看,没有区别。但是看源代码会发现,符合表达式结果判断的元素内容会显示,不符合结果判断的元素会隐藏,即display: none不会添加;的风格。

从以上两个例子的对比可以看出

动态插入或删除元素。以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。

版权声明:Vue.js学习笔记常用模板语法详解是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。