Vue2.0 vue-cli-组件的基本使用

最新推荐文章于 2024-08-13 16:35:40 发布

WhitePig.

最新推荐文章于 2024-08-13 16:35:40 发布

阅读量119

点赞数

分类专栏： Vue学习笔记文章标签： vue.js

本文链接：https://blog.csdn.net/Czy010506/article/details/127940290

版权

Vue学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在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>