前言:
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。 Vue 只关注视图层, 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
今天小编为大家介绍vue工程中关于模板渲染的问题,请听小编娓娓道来。
正文:
vue之模板渲染
1.编写main.js文件
import Vue from 'vue' import App from './App' new Vue({ el: '#app', render: function (h) { return h(App) } })2.编写app组件
// 模板的渲染 <template> <div> <p v-text="hello"></p> <p v-html="hello"></p> {{ status ? 'success' : 'fail'}} </div> </template> <script> export default { data () { return { hello: '<span><img>world</span>', num: 1, status: true } } } </script> <style> html { height: 100%; } </style>3.index.html文件中会自动导向到APP组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vueDemo2</title> </head> <body> <div id="app"> </div> </body> </html>4.效果图
结语:
未来会感谢现在拼命的自己。