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


Posted in Javascript onJuly 25, 2017

本文介绍了Vue.js 常用模板语法,分享给大家,具体如下:

一、文本渲染

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

实时渲染

<div class="row">
  <h2>文本 - 实时渲染</h2>
  <input type="text" v-model="msg" class="col-md-2" />
  <span class="col-md-">{{ msg }}</span>
 </div>

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

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

一次渲染

<div class="row">
  <h2>文本 - 一次渲染</h2>
  <input type="text" v-model="msg_once" class="col-md-2" />
  <span class="col-md-" v-once>{{ msg_once }}</span>
 </div>

在 vm 对象里添加属性

require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       msg_once: "once..."
     }
   });
 });

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

页面第一次加载完成时,页面显示once...,当 span 标签加上 v-once 指令后,无论如何修改文本框内容,页面内容都不会变化。

HTML代码渲染

某些情况下,页面需要动态的插入一段HTML代码

在 vm 对象里添加属性,属性值为一段HTML代码

require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       html: "<span>This is a html tag.</span>"
     }
   });
 });

页面元素添加 v-html 指令后,元素对应位置将显示出属性值内的对应元素

<div class="row">
  <h2>文本 - HTML</h2>
  <div v-html="html"></div>
 </div>

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

二、表达式

上文中已经介绍过的 {{ msg }} 就是一个简单的表达式。除此之外,还有一些常用的表达式写法。

运算表达式

在上述简单表达式中可以使用运算符,Vue会将运算后的结果渲染在页面上

<div>
  <h4>运算表达式</h4>
  <span v-pre>{{ Number(number)+ }}:</span>
  <input v-model="number" type="text" />
  <span>运算结果:{{ Number(number)+ }}</span>
 </div>

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

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

三元运算表达式

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

<div>
  <h4>三元运算表达式</h4>
  <span v-pre>{{ ok ? 'YES' : 'NO' }}:</span><span>{{ ok ? 'YES' : 'NO' }}</span>
 </div>

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

Javascript方法

表达式内也可以使用Javascript支持的基础方法,Vue会动态执行方法并显示最终结果

<div>
  <h4>Javascript方法</h4>
  <span v-pre>{{msg_once.split('').reverse().join('')}}:</span><span>{{msg_once.split('').reverse().join('')}}</span>
</div>

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

这个例子是将 msg_once 属性值的字符进行倒序排列后重新组合起来。

三、过滤器

过滤器经常用来进行内容的格式化显示。Vue支持自定义过滤器

首先要在 vm 对象里增加过滤器方法

require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       filter_msg: 'base'
     },
     filters: {
       filter: function (value) {
         if (!value) {
           return '';
         }
 
         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 属性里,方法的第一个参数值就是传递进来需要被处理的原始内容,方法的返回值即时处理过的新内容。

自定义的过滤器使用方法如下

<div>
  <h4>单一过滤器</h4>
  <span v-pre>{{ filter_msg | filter1 }}:</span><span>{{ filter_msg | filter1 }}</span>
 </div>

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

上面的例子中,过滤器通过管道符号“|”与需要处理的内容进行连接,将 filter_msg 属性值经过 filter1 过滤器,在后面追加内容并显示。

同时,Vue也支持连接多个过滤器

<div>
  <h4>串联过滤器</h4>
  <span v-pre>{{ filter_msg | filter1 | filter2 }}:</span><span>{{ filter_msg | filter1 | filter2 }}</span>
 </div>

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

这个例子中,通过管道符号“|”,可以连接多个过滤器,每前一个过滤器的输出将作为后一个过滤器的输入,直到显示最终结果。

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

<div>
  <h4>过滤器参数</h4>
  <span v-pre>{{ filter_msg | filter_arg('arg1', 'arg2') }}:</span><span>{{ filter_msg | filter_arg('arg1', 'arg2') }}</span>
 </div>

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

 四、常用指令

指令就是将一些特殊行为应用到页面DOM元素的特殊属性。Vue的内置指令都是一些带有 v- 前缀的特殊属性。

常用的指令如下:

  • v-bind
  • v-on
  • v-for
  • v-if
  • v-else-if
  • v-else
  • v-show

v-bind

该指令用来给元素绑定一个或多个特性

<div>
  <h>v-bind(属性绑定)</h>
  <span v-pre>可用的按钮(v-bind:disabled="!btn_enabled"):</span><button v-bind:disabled="!btn_enabled" type="button">可以点击的按钮</button><br/>
  <span v-pre>不可用的按钮(v-bind:disabled="btn_enabled"):</span><button v-bind:disabled="btn_enabled" type="button">不可点击的按钮</button><br/>
  <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: {
       btn_enabled: true
     }
   });
 });

在上面的例子里,给 vm 对象增加一个名称为 btn_enabled 的布尔属性,在按钮中通过 v-bind:disabled="btn_enabled" 动态给 disabled 属性赋值

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

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

页面上可以看到“不能点击的按钮”动态增加了一个 disabled 属性。同时 v-bind:disabled="!btn_enabled" 也可以简写成 :disabled="!btn_enabled" 。

v-on

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

vm 对象的 methods 属性里添加自定义方法

require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     methods: {
       btn_click: function () {
         console.log("button click!");
       },
       btn_clickWithEvent: function($event){
         console.log($event);
       },
       btn_clickWithMsg: function (msg) {
         console.log("Message is:" + msg);
       }
     }
   });
 });

通过属性 v-on:click="btn_click" 在按钮上添加 click 事件

<div>
  <h4>v-on(事件绑定)</h4>
  <span v-pre>点击事件(v-on:click="btn_click"):</span><button v-on:click="btn_click" type="button">点我!</button><br/>
  <span v-pre>带事件参数的点击事件(v-on:click="btn_clickWithEvent($event)"):</span><button v-on:click="btn_clickWithEvent($event)" type="button">点我!</button><br/>
  <span v-pre>带自定义参数的点击事件(v-on:click="btn_clickWithMsg('Hello world!')"):</span><button v-on:click="btn_clickWithMsg('Hello world!')" type="button">点我!</button><br/>
  <span v-pre>缩写(@click="btn_click"):</span><button @click="btn_click" type="button">点我!</button>
 </div>

页面效果如下

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

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

v-on指令也支持缩写,用@符号代替,比如: @click="btn_click"

v-for

该指令用来基于源数据多次渲染元素或模板块。

在 vm 对象里添加一个数组类型的属性 books

require(["jquery", "bootstrap", "vue"], function ($, bootstrap, Vue) {
   var vm = new Vue({
     el: "#app",
     data: {
       books: ["深入浅出node", "C#本质论", "编程珠玑"]
     }
   });
 });

通过 v-for 指令实现一个简单列表

<div>
  <h4>v-for(循环)</h4>
  <ul>
    <li v-for="item in books">
     {{ item }}
    </li>
  </ul>
 </div>

页面效果如下

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

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

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

v-if、v-else-if、v-else

条件渲染指令,通过表达式结果的真假来插入和删除元素。 v-if 可以单独使用,而 v-else-if 、 v-else 必须和 v-if 一起使用。

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

<div>
  <h4>v-if、v-else-if、v-else(分支)</h4>
  <span>分支示例:</span>
  <input type="text" v-model="number" />
  <span v-if="number>10">大于10</span>
  <span v-else-if="number==10">等于10</span>
  <span v-else>小于10</span><br/>
 </div>

页面显示如下

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

当文本框里输入小于10的数字时,右侧只显示“小于10”的文本内容。

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

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

同样,在输入大于10的数字时,右侧只显示“大于10”的文本内容。而源码里只有对应的 span 标签存在。

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

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

v-show

该指令也是条件渲染指令,但是与上述的 v-if 有不同。这可以通过一个例子来说明。

<div>
  <h4>v-show(条件渲染)</h4>
  <span>v-show示例:</span>
 <input type="text" v-model="number" />
  <span v-show="number>10">大于10</span>
  <span v-show="number==10">等于10</span>
  <span v-show="number<10">小于10</span><br/>
 </div>

将上面例子里的指令都换成 v-show ,页面显示如下

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

从页面显示的结果上看,没有任何区别。但是查看源码会发现,符合表达式结果判断的元素内容将被显示,不符合结果判断的元素将被隐藏,即被加上 display: none; 的样式。

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

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

  1. v-if:动态插入或删除元素
  2. v-show:动态显示或隐藏元素

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的集合及效率
Jan 08 Javascript
JS模拟自动点击的简单实例
Aug 08 Javascript
js实现select跳转功能代码
Oct 22 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
jQuery EasyUI Pagination实现分页的常用方法
May 21 Javascript
js判断文件格式及大小的简单实例(必看)
Oct 11 Javascript
JS基于正则截取替换特定字符之间字符串操作示例
Feb 03 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
Sep 11 Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
JavaScript中时间格式化新思路toLocaleString()
Nov 07 Javascript
jQuery实现键盘回车搜索功能
Jul 25 #jQuery
简单实现js鼠标跟随效果
Aug 02 #Javascript
BootStrap的双日历时间控件使用
Jul 25 #Javascript
vue事件修饰符和按键修饰符用法总结
Jul 25 #Javascript
Vue.js学习笔记之修饰符详解
Jul 25 #Javascript
ES6正则表达式扩展笔记
Jul 25 #Javascript
简单实现js拖拽效果
Jul 25 #Javascript
You might like
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
PHP Socket 编程
2010/04/09 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
Js+Flash实现访问剪切板操作
2012/11/20 Javascript
开发 Internet Explorer 右键功能表(ContextMenu)
2013/07/03 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
jquery获取tagName再进行判断
2014/05/29 Javascript
面向切面编程(AOP)的理解
2015/05/01 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
2019/04/30 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
Vue+elementUI实现多图片上传与回显功能(含回显后继续上传或删除)
2020/03/23 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
2020/08/31 Javascript
[42:52]IG vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python 域名分析工具实现代码
2009/07/15 Python
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
pygame游戏之旅 添加游戏暂停功能
2018/11/21 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
Schecker荷兰:狗狗用品和配件
2019/06/06 全球购物
本科毕业生求职自荐信
2014/02/03 职场文书
外贸采购员岗位职责
2014/03/08 职场文书
校外活动方案
2014/08/28 职场文书
八项规定整改方案
2014/10/01 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
Redis三种集群模式详解
2021/10/05 Redis
Windows server 2012搭建FTP服务器
2022/04/29 Servers