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

本文介绍了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>

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..."
     }
   });
 });

页面第一次加载完成时,页面显示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>

二、表达式

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

运算表达式

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

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

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

三元运算表达式

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

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

Javascript方法

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

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

这个例子是将 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>

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

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

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

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

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

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

 四、常用指令

指令就是将一些特殊行为应用到页面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 属性赋值

页面上可以看到“不能点击的按钮”动态增加了一个 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>

页面效果如下

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>

页面效果如下

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

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>

页面显示如下

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

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

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

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

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

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

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

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

时间: 2017-07-22

详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持

本文介绍了详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持,分享给大家,具体如下: 一个小遗憾 能来看这篇文章的想必不用我来介绍vue是什么了.先让我们膜拜大神!vue项目的创建者尤大写了个sublime下语法高亮的插件,有人问他how about webstorm support?他是这么回答的.默哀一分钟. 添加高亮和语法支持 这个我是通过插件来实现的.网上目前有两个插件: 插件1:https://github.com/henjue/vue-for-idea 插件2:htt

Vue.js中数据绑定的语法教程

数据绑定语法 Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue 模板因而从根本上不同于基于字符串的模板,请记住这点. 插值 文本 数据绑定最基础的形式是文本插值,使用 "Mustache" 语法(双大括号): <span>Message: {{ msg }}</span> Mustache 标签会被相应数据对象的 msg 属性的值替换.每当这个属性变化时它也会更新.

Vue.js绑定HTML class数组语法错误的原因分析

Vue.js绑定HTML class数组语法错误,详情如下所示: 昨天在官网教程上发现一个错误是这样的,下面看图 http://cn.vuejs.org/guide/class-and-style.html 当有多个条件class时这样写有些繁琐.在1.0.19+中,可以在数组语法中使用对象语法: 如果这样写是可以执行成功的,但有错误 data: { classA: 'class-a', classB: 'class-b', classC: 'class-c', isB: true, isC:

vue.js语法及常用指令

Vue.js是当下很火的一个JavaScript MVVM(Model-View-ViewModel)库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得我们能够快速地上手并使用Vue.js. 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM.它通过一些特殊的HTML语法,将DOM和数据绑定起来.一旦你创建了绑定,DOM将和数据保持同

vue.js入门教程之基础语法小结

前言 Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容易的和其他库整合.代码压缩后只有24kb. 以下代码是Vue.js最简单的例子, 当 input 中的内容变化时,p 节点的内容会跟着变化. <!-- html --> <div id="demo"> <p>{{message}}</p> <input v-model="message"> </div> new

最细致的vue.js基础语法 值得收藏!

介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍. Vue读音/vju:/,和view类似.是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容易的和其他库整合.代码压缩后只有24kb. 可以去 这里下载 .自己整理了一个Vue.js的demo, https://github.com/chenhao-ch/demo-vue 快速入门 以下代码是Vue.js最简单的例子, 当input中的内容变化时,p节点的内容会跟着变化. <!-- html

巧用Vue.js+Vuex制作专门收藏微信公众号的app

本文一步一步教大家如何利用Vue.js + Vuex制作专门收藏微信公众号的app 项目地址: https://github.com/jrainlau/wechat-subscriptor 下载&运行 git clone git@github.com:jrainlau/wechat-subscriptor.git cd wechat-subscriptor && npm install npm run dev   // run in dev mode cd backend-serv

Vue.js基础指令实例讲解(各种数据绑定、表单渲染大总结)

Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用.他是基于AnjularJs 编写的,所以和前者的语法特别相似,却又使用简洁了很多. 那今天,我就给大家详细的说道说道这个 Vue.js ,以下是我们这次详解的目录,朋友们可以根据自己的情况选择性阅读,所有操作均附有代码实现. 1. Vue.js 如何绑定到页面中,使用他的功能. 2.

JavaScript高级程序设计(第3版)学习笔记2 js基础语法

这一篇复习一下ECMAScript规范中的基础语法,英文好的朋友可以直接阅读官方文档.JavaScript本质上也是一种类C语言,熟悉C语言的朋友,可以非常轻松的阅读这篇文章,甚至都可以跳过,不过建议你最好还是看一看,在介绍的同时,我可能会引用一些自认为不易理解且比较流行的用法. 基础语法 1.标识符:所谓标识符,实际上就是指一个满足一定规范,能够被引擎识别的名字,可以用来表示常量.变量.函数名.函数参数.对象.对象属性等所有可命名对象的名称. (1)区分大小写. (2)以字母.下划线(_)或美

Vue.js基础知识汇总

介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式的ViewModel层,它连接视图和数据绑定模型通过两种方式.实际的DOM操作和输出格式被抽象的方式到指令(Directives)和过滤器(Filters) 在哲学领域内,尽量让MVVM数据绑定API尽可能简单.模块化和可组合性也是重要的设计考虑.vue不是一个全面的框架,它被设计成简单的和灵活的.你可以用它快速原型,或混合和匹配与其他库定义前端堆栈. Vue.js的API是参考了AngularJS

Vue.js基础知识小结

数据绑定 1.单向绑定 <div id="app"> {{massage}} </div> var app = new Vue({ el:"#app", data:{ message:"Hello,vue.js!" } 2.双向绑定 <div id="app"> <p>{{message}}</p> <input v-model="message&qu

Vue.js基础学习之class与样式绑定

打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: <html> <head> <meta charset="utf-8"> <title>Vue test</title> <style type="text/css"> body {font-family: Verdana;} p { fo

JS正则表达式 整合 (值得收藏)

url的正则表达式:包括IP,域名(domain),ftp,二级域名,域名中的文件,域名加上端口!用户名等等信息 function IsURL(str_url) { var strRegex = "^((https|http|ftp|rtsp|mms)?://)" + "?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?" + //ftp的user@ "(([0-9]{1,3}.

Vue.js实现列表清单的操作方法

一.Vue.js简要说明 Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当View视图层发生变化时,会自动更新到ViewModel.反之亦然,View与ViewModel之间通过数据双向绑定(data-binding)建立联系,如下图所示 Vue.js通过MVVM模式将视图与数据分成两部分(或者说视图代码与业务逻辑的解耦),因此我们只需关心数据的操作,DOM的视图的更新等一系列事情,V

Vue.js的模板语法详解

Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. 结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上. 使用"Mustache"语法 (即用双大括号包裹) 的文本插值: <span>Message: {{ msg }}</span>