本文介绍了Vue.js 常用模板语法,分享给大家,具体如下:
一、文本渲染
Vue支持动态渲染文本,即在修改属性的同时,实时渲染文本内容。同时为了提高渲染效率,也支持只渲染一次,即第一次渲染出文本后,文本内容不再跟随属性值的变化而变化。
实时渲染
本文介绍了Vue.js 常用模板语法,分享给大家,具体如下:
Vue支持动态渲染文本,即在修改属性的同时,实时渲染文本内容。同时为了提高渲染效率,也支持只渲染一次,即第一次渲染出文本后,文本内容不再跟随属性值的变化而变化。
实时渲染
v-model 指令将 input 标签的值动态绑定到属性 msg 上,通过 {{ msg }} 表达式显示在页面上。当修改文本框内容时,后面的页面内容将实时变化并与文本框内容保持一致。
页面第一次加载完成时,页面显示once...,当 span 标签加上 v-once 指令后,无论如何修改文本框内容,页面内容都不会变化。
页面元素添加 v-html
指令后,元素对应位置将显示出属性值内的对应元素
上文中已经介绍过的 {{ msg }}
就是一个简单的表达式。除此之外,还有一些常用的表达式写法。
在上述简单表达式中可以使用运算符,Vue会将运算后的结果渲染在页面上
在文本框中输入数字,Vue通过表达式内的运算符实时计算出结果,并显示出来。因为文本框内容为字符串,所以在表达式中需要对 number 属性进行类型转换成数字。
Vue支持在表达式内使用三元运算符
这个例子是将 msg_once 属性值的字符进行倒序排列后重新组合起来。
return value + '_filter1';
},filter2: function (value) {
if (!value) {
return '';
}
return value + '_filter2';
},filter_arg: function (value,arg1,arg2) {
if (!value) {
return '';
}
return value + ' ' + arg1 + ' ' + arg2;
}
}
});
});
所有的过滤器方法都要定义在 filters
属性里,方法的第一个参数值就是传递进来需要被处理的原始内容,方法的返回值即时处理过的新内容。
上面的例子中,过滤器通过管道符号“|”与需要处理的内容进行连接,将 filter_msg
属性值经过 filter1
过滤器,在后面追加内容并显示。
同时,Vue也支持连接多个过滤器
这个例子中,通过管道符号“|”,可以连接多个过滤器,每前一个过滤器的输出将作为后一个过滤器的输入,直到显示最终结果。
指令就是将一些特殊行为应用到页面DOM元素的特殊属性。Vue的内置指令都是一些带有 v- 前缀的特殊属性。
常用的指令如下:
该指令用来给元素绑定一个或多个特性
在上面的例子里,给 vm 对象增加一个名称为 btn_enabled 的布尔属性,在按钮中通过 v-bind:disabled="btn_enabled" 动态给 disabled 属性赋值
页面上可以看到“不能点击的按钮”动态增加了一个 disabled 属性。同时 v-bind:disabled="!btn_enabled" 也可以简写成 :disabled="!btn_enabled" 。
该指令绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句。用在普通元素上时,只能监听原生 DOM 事件。在监听原生 DOM 事件时,方法以事件为唯一的参数。如果使用内联语句,语句可以访问一个 $event
属性。
通过属性 v-on:click="btn_click"
在按钮上添加 click
事件
v-on指令也支持缩写,用@符号代替,比如: @click="btn_click"
。
该指令用来基于源数据多次渲染元素或模板块。
通过 v-for 指令实现一个简单列表
v-for 属性值是一个 item in expression
结构的表达式,其中 item
代表 expression
运算结果的每一项。最终的HTML代码如下
条件渲染指令,通过表达式结果的真假来插入和删除元素。 v-if 可以单独使用,而 v-else-if 、 v-else 必须和 v-if 一起使用。
下面是一个简单用法的例子
当文本框里输入小于10的数字时,右侧只显示“小于10”的文本内容。
查看源码发现,只有“小于10”的内容的 span 标签存在,另外两个标签被插入到页面中。
同样,在输入大于10的数字时,右侧只显示“大于10”的文本内容。而源码里只有对应的 span 标签存在。
该指令也是条件渲染指令,但是与上述的 v-if 有不同。这可以通过一个例子来说明。
从页面显示的结果上看,没有任何区别。但是查看源码会发现,符合表达式结果判断的元素内容将被显示,不符合结果判断的元素将被隐藏,即被加上 display: none; 的样式。
从上面两个例子对比可以看出
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。