Vue组件化编程④

Vue组件化编程④

文章目录

​​单文件组件​​

单文件组件

这也就意味着我们需要把一个个的组件写成​​.vue​​文件。我们知道组件由三个部分组成，部分html代码、css、js。在vue文件中为我们提供了三种标签，去完成每部分的内容：

我们现在尝试把上图中的student组件放入到vue文件中去：

记得要暴露东西，否则引入了之后没有可以用的如果组件没有样式，我们可以不要style标签，上面代码中的样式是我临时加的

还可以更简洁一点，我们知道Vue.extend()是有简便写发的，然后我们再给组件添加一个名字：

接下来我们将以下代码按照单文件组建的方式进行编写：

文件结构：

App.vue:

index.html:

注意这里的引入顺序和位置。不能放在head里面去引入，此时结构还没有被加载！其实我们这里的引入是没有多大意义的，我们后期会借助脚手架来进行编译。

main.js:

import App from './App.vue'new Vue({ template:` `, el:'#root', //注册组件 components:{ App }, })

main.js文件中一般放着vm的代码。并且一般只有App.vue能与他直接对话！

School.vue:

Student.vue:

做完这一切之后，我们直接打开index.html文件是没有用的，我们还需要一个强大的工具–​​脚手架​​.

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。