在main.js里面
声明要渲染哪一个组件?
渲染到哪里?
1、main.js
<!-- 用main.js,渲染与App.vue同级的Test.vue,组件 -->
<!-- Vue2.0 -->
// 1.导入vue这个包,得到Vue构造函数
import Vue from 'vue'
//导入App.vue根组件,将来要把App.vue 中的模板结构,渲染到HTML 页面中
import App from './App.vue'
import Test from './Test.vue'
Vue.config.productionTip = false
//创建Vue的实例对象
new Vue({
// 把render函数指定的组件,渲染到HTML页面中
render: $ => h(Test)
}).$mount('#app')
//Vue实例的 $mount() 方法,作用和el属性完全一样!
2、目录
3、小结
$mount() 方法 和 el 属性的作用一样,
指定main.js 要将模板结构渲染到哪个区域去。
render函数指定main.js渲染哪一个组件。
4、代码
将Vue组件渲染到id为app 的div区域里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<!-- Vue2.0 -->
<!-- 上面的库文件可能不太对 -->
<div id="app">{{username}}</div>
<script>
const vm = new Vue({
data:{
username:'admin'
}
})
vm.$mount('#app')
</script>
</body>
</html>