咨询电话:
15628812133
25
2018/08

如何使用Vue.js来渲染前台模版-相当详细版

发布时间:2018-08-25 11:14:13
发布者:pengyifeng
浏览量:
0

很多的web项目,通常在后台框架中都带有模版引擎,从后台来渲染前台页面,又或者是直接在前台模版中,嵌套后端代码(例如html嵌套php代码)来渲染,今天我们在没有框架模板引擎,也没有代码可以嵌套,我们怎么办呢?我们使用现在最流行的前台js框架,Vue.js来完成前台页面的渲染。今天我们就来说说如何使用这个Vue。

首先什么是模版渲染,就是当我们使用ajax来获取到后端返回的数据之后,我们将它按照一定的规则加载到写好的模版中,输出在浏览器中显示的HTML,这个生成内容的过程就是渲染模版,模版渲染可以大致分为,前端渲染和后端渲染,后端渲染之前也说过,就是从服务端获取数据之后服务端生成页面使用后端模版引擎,而前端则是在浏览器中用js和html相结合来渲染,两种方式各有优缺点,需要根据项目的特点来使用。

前端渲染的优点主要在于:

  1. 业务分离,后端只需要提供接口,前端就可以独自完成剩下的开发工作,可以提高工作效率

  2. 计算量转移,原本需要后台服务器渲染的任务交给了前端,减轻了服务器端的压力

后台渲染的有点主要在于:

  1. 对搜索引擎更友好

  2. 页面加载的时间段,后端渲染后直接显示页面,前端需要在打开页面的时候渲染

渲染条件,vue提供很多指令来说明模版和数据间的逻辑关系,基本构成了引擎的主要部分,下面介绍几个常用指令的用法和场景:

v-if/v-else:v-if和v-else的作用是根据数据值来判断是否输出该DOM元素,以及包含的子元素

yes

vue标签.jpg

如果当前vm实例中包含data.yes = true,则模版引擎将会编译这个DOM节点,输出

yes

我们也可以使用v-else来配合v-if使用,例如:

yes
no

需要注意的是,v-else必须紧跟v-if,不然该指令不起作用

标签.jpg

v-if绑定的元素饱汉子元素则不受影响和v-else的使用例如:


    inner
    not inner no     new Vue({     date:{         yes:true,         inner:false      }    });      输出结果为:  
     
not inner
 

v-show,除了v-if,v-show也是可以根据条件展示元素的一种指令。例如:

show

v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。


关键词:
返回列表