vuejs模板什么用

vuejs模板从根本上规定了一个系统应当以怎样的交互形式和UI风格面向使用者，而遵循这套模板进行设计和完善功能；其作用为：1、担负XSS的防范；2、支持片段的复用；3、支持数据输出是的处理；4、支持动态数据；5、与异步流程严密结合。

本教程操作环境：windows7系统、vue2.9.6版，DELL G3电脑。

因为Vue.js是建立在视图层的技术，所以Vue.js的模板系统是非常重要的功能之一。对于展现给用户的视图页面，需要提供最佳的用户体验和性能，而Vue.js提供了非常方便和适用的模板系统，使得它受到了广大开发者的追棒和欢迎。

一、什么是模板系统

任何一个用于Web编写或者面向使用者的应用必定有模板的存在。模板从根本上规定了一个系统应当以怎样的交互形式和UI风格面向使用者，而遵循这套模板进行设计和完善功能，也是软件开发的基本模式。

但是，如果对所有的页面都根据模板进行单一页面的编写，则几乎是不可能的。因为一个系统不应该只有几个静态页面，随着内容和用户的增加，其页面应该是无限多的。而为了解决这个问题，便出现了新的技术——模板引擎。通过不同的数据和内容，加上一个统一的模板（格式），就可以得到一个属于一个用户或者一个内容的定制页面，不但减少了大量的编码量，也极大地方便了将来可能对于样式的更新换代。

立即学习“前端免费学习笔记（深入）”；

严格的模板引擎的定义是，输入模板字符+数据，得到渲染过的字符串（页面），实现上，从正则替换的方式到拼写字符串直接输入，再到AST解析，存在各种输出页面内容的方式，但从定义上来说都是差不多的。

如果读者学习过JavaScript或者其它Web开发语言，一定要尝试或在后端渲染出HTML页面内容，并返回至前端页面，通过这样的手段来进行用户页面的更新。但是用渲染出来的字符串替换innerHtml是一个效率很低的更新方式。这样的模板引擎在如今纯前端情境下已经不再是好的选择。

这是为什么呢，因为后端服务器的资源是有限的，并且对数据的处理是随着用户数量的增加而叠加的，用户的每一次操作，页面渲染都是在消耗服务器资源，少量的用户操作或许不会导致服务器卡顿，但是当出现成千上万甚至更多的用户是，可能仅是网络请求就会让服务器无响应甚至宕机（参照春运）。而如果将页面的渲染放在用户端（前端），用户只有一个，几十毫秒的渲染时间跟请求延迟比起来根本算不上瓶颈，所以既可以提高用户的体验，同时也减轻了服务器的压力。

Vue.js作为MVVM类型的框架，Vue.js采用的是数据驱动视图绑定引擎，通过前后端的bind状态，已知后端的数据更新，前端相关的显示也会同时改动。

Vue.js为用户提供了这样的一套强大的模板系统，这也是为什么Vue.js等前端框架如此火爆的原因之一。

为什么要使用模板的原因有以下几点

1、前端模板引擎要担负XSS的防范；

2、前端模板引擎要支持片段的复用；

3、前端模板引擎要支持数据输出是的处理；

4、前端模板引擎要支持动态数据；

5、前端模板引擎要与异步流程严密结合；

二、Vue.js模板语法

Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层的Vue.js实例数据。

Vue.js是一个允许开发者采用简洁的模板语法来声明式地将数据渲染进DOM的系统。

结合响应系统，在应用状态改变时，Vue.js能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。

2.1、文本输出

DaGaoPeng(大高朋网团购程序)

大高朋团购系统是一套Groupon模式的开源团购程序，开发的一套网团购程序，系统采用ASP+ACCESS开发的团购程序，安装超简，功能超全面，在保留大高朋团购系统版权的前提下，允许所有用户免费使用。大高朋团购系统内置多种主流在线支付接口，所有网银用户均可无障碍支付；短信发送团购券和实物团购快递发货等。 二、为什么选择大高朋团购程序系统？ 1.功能强大、细节完善 除了拥有主流团购网站功能，更特别支

下载

数据绑定最常见的形式就是使用Mustache语法（双大括号）的文本插值，如下：

Message:{{ msg }}
这个将不会改变:{{ msg }}

无论何时，绑定的数据对象上msg属性发生改变，插值处的内容都会更新。但是通过v-once指令，开发者也能进行一次性地插值。

2.2、纯HTML输出

双大括号会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML代码，开发者需要使用v-html指令：

这个div的内容将会被替换成为属性值rawHtml，直接作为HTML会忽略解析属性值中的数据绑定。开发者不能使用v-html来复合局部模板，因为Vue.js不是基于字符串的模板引擎。反之，对于用户界面（UI），组件更适合作为可重用和可组合的基本单位。

2.3、JavaScript表达式

Vue.js都提供了JavaScript表达式支持。

{{number + 1}}
{{ok?'YES':'NO'}}
{{message.split('').reverse().join('')}}

完整代码：

注意：每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

{{ var a = 1}}

{{ if(ok) {return message }}}

2.4、指令参数

指令(Directives)是带有v-前缀的特殊属性。指令属性的值预期是单个JavaScript表达式（v-for是个例外情况）。指令的职责是当表达式的值改变是，将其产生的连带影响，响应式地作用于DOM。比如

现在出现啦！

有一些指令能够接收一个参数，在指令名称之后以冒号表示。比如v-bind:用于响应式地更新html属性：

v-on:它用于监听DOM事件：

修饰符（Modifiers）是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault();

三、计算属性和观察者属性

'属性':{
      get:function(){},
      set:function(newValue){
         dosomething
      }
  }

watch:{
   '属性':function(par){
      dosomething
  }
}

相关推荐：《vue.js教程》