Vuejs 前端开发入门

2020-12-03 0 By admin

一、Vuejs 中 el 和 template 的关系

在之前vuejs学习过程中,编写根组件的代码;我们使用的方式是html页面定义展示的框架,根组件使用el和Dom元素绑定,并提供data数据。
如果我们需要修改根组件绑定元素的展示框架或者组件新增了展示元素,就需要修改html页面的内容。这种修改html页面内容的方式,是我们不想要的。
我们可以使用template属性,来解决上面的问题。
当我们在html页面中创建了一个用于绑定的元素app;我们并不在html页面中设置其他内容。而是通过与此元素绑定Vue实例中设置template属性来定义展示的框架。

原理说明:

我们知道Vue实例中el属性用于绑定要管理的DOM,这样Vue就可以帮助解析DOM中的指令、事件监听等。如果我们在Vue实例中同时设置template元素,那么template模板的内容就会替换掉绑定的DOM中的内容。
通过在Vue实例(组件)中设置template属性方式开发,可以提高开发效率;后面可以将template、script和style 分开编写,使结构更加清晰。

二、.vue文件封装处理

一个组件以一个js对象的形式进行组织和使用的时候是非常不方便的;一方面编写template模块非常的麻烦,另外一方面如果有样式的话,我们写在哪里比较合适呢?
现在,我们以一种全新的方式来组织一个vue的组件,通过.vue文件的方式。
这种特殊的文件以及特殊的格式,必须要安装相应的loader和plugin才能处理。
npm install vue-loader vue-template-compiler --save-dev