《vue之模板渲染》

xiaoxiao2021-02-28  31

前言:

   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.效果图

结语:

   未来会感谢现在拼命的自己。

   

转载请注明原文地址: https://www.6miu.com/read-2099977.html

最新回复(0)