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使用了基于HTML的模板语法,允许开发者声明式地将DOM绑定至底层的Vue.js实例数据。
Vue.js是一个允许开发者采用简洁的模板语法来声明式地将数据渲染进DOM的系统。
结合响应系统,在应用状态改变时,Vue.js能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。
2.1、文本输出
数据绑定最常见的形式就是使用Mustache语法(双大括号)的文本插值,如下:
<span>Message:{{ msg }}</span> <span v-once>这个将不会改变:{{ msg }}</span>
无论何时,绑定的数据对象上msg属性发生改变,插值处的内容都会更新。但是通过v-once
指令,开发者也能进行一次性地插值。
2.2、纯HTML输出
双大括号会将数据解释为普通文本,而非HTML代码。为了输出真正的HTML代码,开发者需要使用v-html指令:
<div v-html="rawHtml"></div>
这个div的内容将会被替换成为属性值rawHtml,直接作为HTML会忽略解析属性值中的数据绑定。开发者不能使用v-html来复合局部模板,因为Vue.js不是基于字符串的模板引擎。反之,对于用户界面(UI),组件更适合作为可重用和可组合的基本单位。
<template> <div> <label>直接输出的模式:</label> <div>{{msg}}</div> <label>解析后输出的模式:</label> <div v-html="msg"></div> </div> </template> <script> export default { data () { return { msg: '<div style="font-size: 30px;color:red">helloWorld</div>' } } } </script>
2.3、JavaScript表达式
Vue.js都提供了JavaScript表达式支持。
{{number + 1}} {{ok?'YES':'NO'}} {{message.split('').reverse().join('')}} <div v-bind:id="'list-'+ id"></div>
完整代码:
<template> <div> <label>数字1:</label> <input v-model="int1"/> <br/> <br/> <label>数字2:</label> <input v-model="int2"/> <br/> <label> 展示JavaScript表达式,您输入的数字加和为</label> {{parseInt(int1)+parseInt(int2)}} </div> </template> <script> export default { data () { return { int1: 0, int2: 0 } } } </script>
注意:每个绑定都只能包含单个表达式,所以下面的例子都不会生效。
<!-- 这是语句,不是表达式 --> {{ var a = 1}} <!-- 流控制也不会生效,请使用三元表达式 --> {{ if(ok) {return message }}}
2.4、指令参数
指令(Directives)是带有v-前缀的特殊属性。指令属性的值预期是单个JavaScript表达式(v-for是个例外情况)。指令的职责是当表达式的值改变是,将其产生的连带影响,响应式地作用于DOM。比如
<p v-if="seen">现在出现啦!</p>
有一些指令能够接收一个参数,在指令名称之后以冒号表示。比如v-bind
:用于响应式地更新html属性:
<a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> <!-- 在这里href是参数,告知v-bind指令将该元素的href属性与表达式URL的值进行绑定 -->
v-on
:它用于监听DOM事件:
<a v-on:click="doSomething"> <!-- 缩写 --> <a @click="doSomething">
修饰符(Modifiers)是以半角句号(.)指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
例如,prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault();
<form v-on:submit.prevent="onSubmit"></form>
为了让模版的内容变得更加干净和整洁,同时不会影响代码和内容的可用性,Vue.js提出了计算属性和观察者。
3.1、计算属性
模板内的表达式非常便利,但这类表达式实际上多用于简单运算。因为在模板中放入太多的逻辑会让模板过重且难以维护。
跟它的区别还有就是有“缓存”效果,多次访问计算属性会立即返回之前的计算结果,而不是再次执行函数。
计算属性默认只有getter方法,但在需要时开发者也可以提供setter方法。
'属性':{ get:function(){}, set:function(newValue){ dosomething } }
3.2、观察属性
watch:{ '属性':function(par){ dosomething } }
相关推荐:《vue.js教程》
以上就是vuejs模板什么用的详细内容,更多请关注php中文网其它相关文章!
已抢47997个
抢已抢3422个
抢已抢1288个
抢已抢1394个
抢已抢1757个
抢已抢2374个
抢