淘宝网网站建设,wordpress pdf浏览器,怎么给网站在百度地图上做爬虫,微信公众号被收费2991.vue组件组成结构
每个.vue组件都由3部分构成#xff0c;分别是:
template -组件的模板结构script -组件的JavaScript行为style -组件的样式
其中#xff0c;每个组件中必须包含template模板结构#xff0c;而script行为和style样式是可选的组成部分。
2.组…1.vue组件组成结构
每个.vue组件都由3部分构成分别是:
template -组件的模板结构script -组件的JavaScript行为style -组件的样式
其中每个组件中必须包含template模板结构而script行为和style样式是可选的组成部分。
2.组件的template节点
vue规定每个组件对应的模板结构需要定义到template节点中 注意: template是 vue提供的容器标签只起到包裹性质的作用它不会被渲染为真正的DOM元素。
2.1在template中使用指令
在组件的template节点中支持使用所学的指令语法来辅助开发者渲染当前组件的DOM结构。
2.2在 template中定义根节点
在vue 2.x的版本中template节点内的DOM结构仅支持单个根节点 但是在vue 3.x的版本中中支持定义多个根节点
3.组件的script节点
vue规定:组件内的script节点是可选的开发者可以在script节点中封装组件的JavaScript 业务逻辑。
3.1 script中的name节点
可以通过name节点为当前组件定义一个名称 在使用vue-devtools进行项目调试的时候自定义的组件名称可以清晰的区分每个组件
3.2 script中的data节点
vue组件渲染期间需要用到的数据可以定义在data节点中 注意 vue规定:组件中的data必须是一个函数不能直接指向一个数据对象。
3.3 script中的methods节点
组件中的事件处理函数必须定义到 methods节点中。
4.组件的style节点
vue规定︰组件内的style节点是可选的开发者可以在style节点中编写样式美化当前组件的UI结构。 其中style标签上的langcss”属性是可选的它表示所使用的样式语言。默认只支持普通的css语法可选值还有less、scss等。
4.1让 style 中支持less语法
如果希望使用less语法编写组件的style 样式可以按照如下两个步骤进行配置:
运行npm install less -D命令安装依赖包从而提供less语法的编译支持在style标签上添加langless属性即可使用less语法编写组件的样式
