Vue 学习0——API的使用

• render内置方法

前言：在页面上渲染数据，我们可以通过new Vue然后在components声明组件名称，也可以通过render内置方法，效果等同。

demo

App.vue

<template>
	<div id="app">
		{{hello}}
	</div>
</template>

<script>
	export default {
		data() {
			return {
				hello: 'world'
			}
		}
	}
</script>

<style>
	html {
		height: 100%;
	}

	body {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	#app {
		color: #2c3e50;
		margin-top: -100px;
		max-width: 600px;
		font-family: Source Sans Pro, Helvetica, sans-serif;
		text-align: center;
	}
</style>

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
	el: '#app',
	/* es6语法 */
	render: (h) => h(App)
})

v-html

<template>
	<!-- 或者简写成      :title="hello" -->
	<div id="app">
		<p v-html="hello"></p>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				hello: 'world'
			}
		}
	}
</script>

<style>
</style>

v-text和v-html的区别？