这篇文章介绍的内容是Vue.js如何在浏览器内实现模版渲染，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
渲染：获取后端的数据，按照一定的规则加载到写好的模板中，输出成在浏览器中显示的html.vue.js是在前端(即浏览器内)进行的模板渲染。
前后端渲染对比
后端：在服务器端进行渲染，服务器进程从数据库获取数据后，利用前端模板引擎，将数据加载生成HTML，然后通过网络传输到用户的浏览器中，然后被浏览器解析成可见的页面。前端：在浏览器里利用JS把数据和HTML模板进行组合。
前段渲染的优点在于：
1.业务分离，后端只需要提供数据接口，前端在开发时也不需要部署对应的后端环境，通过一些代理服务器工具就能远程后去后端数据进行开发，能够提升开发效率。
2.计算量转移，原本需要后端渲染的任务转移给了前端，减轻了服务器的压力。
后端渲染的优点
1.对搜索引擎友好。
2.首页加载时间短，后端渲染加载完后就直接显示HTML，但前端渲染在加载完成后还需要有段js渲染的时间。
条件渲染
立即学习“前端免费学习笔记（深入）”；
1.v-if/v-else
依据数据值来判断是否输出该DOM节点，以及包含的子元素。
yes
//若当前vm实例中包含data.yes = true，则模板引擎将会编译这个DOM节点，输出yes
yes
no
//注：v-else必须紧跟v-if使用。v-if绑定的元素包含子元素则不影响和v-else的使用。
inner
not inner
no
new Vue({ data: { yes: true, inner :false } })
登录后复制
输出结果为：
not inner
登录后复制
2.v-show
show
show
hidden
登录后复制
注：v-show元素，无论绑定值为true或false，均会渲染并保持在DOM中。绑定值的改变只会切换元素的css属性display。v-if元素，页面不会显示该标签。
3.v-if vs v-show
1.v-if切换时，引起了dom操作级别的变化。v-show仅发生了样式的变化。所以，从切换的角度考虑，v-show消耗的性能要比v-if小。
2.v-if切换时，vue.js会有一个局部编译/卸载的过程，因为v-if中的模板也可能包括数据绑定或子组件。v-show则仍会进行正常操作，然后把css样式设置为display：none。
总的来说，v-if有更高的切换消耗而v-show有更高的初始渲染消耗。所以，需要根据实际的使用场景来选择合适的指令。
列表渲染
v-for指令主要用于列表渲染，将根据接收到数组重复渲染v-for绑定到的DOM元素及内部的子元素，并且可以通过设置别名的方式，获取数组内数据渲染到节点中。
v-for遍历数组：
登录后复制
{{ item.title}}
{{item.description}}
var vm = new Vue({ el: ‘#app’, data: { items: [ {_id:1,title:”title-1″,description:”description-1″}, {_id:2,title:”title-2″,description:”description-2″}, {_id:3,title:”title-3″,description:”description-3″}, {_id:4,title:”title-4″,description:”description-4″}, ] } });
//items为data中的属性名，item为别名，可以通过item来获取当前数组遍历的每个元素。
v-for内置了$index变量，可以在v-for指令内调用，输出当前数组元素的索引。
另外，我们也可以自己制定索引的别名：
登录后复制登录后复制登录后复制登录后复制{{ index }} – {{ $index }} – {{ item.title }}
注:vue.js对data中数组的原生方法进行了封装，所以在改变数组时能触发视图更新，但以下两种情况时无法触发视图更新的：
1.通过索引直接修改数组元素，例如：vm.items[0] = {title:’title-changed’};
2.无法直接修改”修改数组”的长度，例如：vm.items.length = 0
对于第一种情况，Vue.js提供了$set方法，在修改数据的同时进行视图更新，可以写成：
vm.items.$set(0,{title:'title-changed'}) 或者 vm.$set('items[0]',{title:'title-also-changed'});
登录后复制
在列表渲染的时候，确定数组中的唯一标识id。通过trace-by给数组设定唯一标识。使Vue.js在渲染过程中会尽量复用原有的对象的作用域及DOM元素。
登录后复制登录后复制登录后复制登录后复制
v-for遍历对象，作用域内可以访问内置变量$key，也可以使用(key,value)形式自定义key变量。
登录后复制登录后复制登录后复制登录后复制 {{ key }} – {{ $key }} : {{ value }} var vm = new Vue({ el:’#app’, data: { objectDemo : { a:’a-value’, b:’b-value’, c:’c-value’ } } })
v-for可以接受单个整数，用作循环次数：
登录后复制登录后复制登录后复制登录后复制{{ n }}
template标签用法
将指令作用到template标签上，但最后的渲染结果里不会有它。
this is first dom
this is second dom
//输出结果this is first dom
this is second dom
template标签也支持使用v-for指令，用来渲染同级的多个兄弟元素。{{ item.name }}
{{ item.desc }}
登录后复制
相关推荐：
前端模板与渲染
jquery jtemplates.js模板渲染引擎的详细用法
模版+数据分离渲染方式的设计与实现
flask使用渲染模板
微信小程序 – 复杂数据结构模版渲染
以上就是Vue.js如何在浏览器内实现模版渲染的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2769648.html
