前言:
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.效果图
结语:
未来会感谢现在拼命的自己。