温州营销网站制作费用,seo优化系统哪家好,那个网站建设,做个网站多少钱合适组件是vue中最推崇的#xff0c;也是最强大的功能之一#xff0c;就是为了提高重用性#xff0c;减少重复性的开发。
如何使用原生HTML方法实现组件化
在使用原生HTML开发时#xff0c;我们也会遇到一些常见的功能、模块#xff0c;那么如何在原生HTML中使用组件化呢也是最强大的功能之一就是为了提高重用性减少重复性的开发。
如何使用原生HTML方法实现组件化
在使用原生HTML开发时我们也会遇到一些常见的功能、模块那么如何在原生HTML中使用组件化呢其实最典型的代表就是JQuery了。常见的实现方式有两种一种是利用class预定义某些特定的组件另一种是使用JS初始化的方式选择到某个DOM然后生成对应的组件。
下面是一个简单的利用class生成按钮记录点击事件的组件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv classzh-button/divdiv classzh-button/divdiv classzh-button/divscriptwindow.onload function() {const buttons document.querySelectorAll(.zh-button);for (let button of buttons) {const spanDom document.createElement(span);spanDom.innerHTML 点击次数const timeDom document.createElement(span);timeDom.innerHTML 0;const buttonDom document.createElement(button);buttonDom.textContent 按钮;buttonDom.onclick function() {const timeDom button.querySelectorAll(span)[1];timeDom.innerHTML timeDom.innerHTML;}button.appendChild(spanDom);button.appendChild(timeDom);button.appendChild(buttonDom);}}/script
/body
/html如何使用Vue3实现组件化
在vue中代码按照templeate、script、style的模块方式拆分。我们创建一个名为Count的的vue组件看看是怎么使用的。
示例 vue组件代码(Count.vue)
templatediv classcontainer初始值是 {{ props.initCount }}点击的次数 {{ count }}button clickclickBtn按钮/button/div
/templatescript setup
import { toRef, ref } from vue;const props defineProps([initCount]);const count ref(props.initCount || 0);const clickBtn () { count.value; }
/scriptstyle scoped/style调用方式
templateCount/CountCount :initCount1/CountCount :initCount10/Count
/templatescript setup
import Count from ../components/Count.vue;
/scriptstyle scoped/styleVue组件的组成
模板template:模板声明了数据和最终展现给用户的DOM之间的映射关系。样式控制组件内的展示样式记得添加scoped:style scoped初始数据 一个组件的初始数据状态。对于可复用的组件来说通常是私有的状态。在setup中直接使用ref/reactive定义即可。外部参数props: 组件之间通过参数来进行数据的传递和共享默认传递方向是自上而下的但也可以显示声明为双向绑定。方法methods: 一般为组件内部的私有方法。生命周期钩子函数lifecycle hooks: 一个组件会触发多个生命周期钩子函数比如created,destroyed等在这次钩子函数中可以封装一些自定义的逻辑。
。。。。。。
暂且对组件的认识到此为止有了一个简单的了解之后先看看vue提供的一些基础语法数据绑定指令修饰符等。
