网站开发一般需要多久,购物网站主页模版,wordpress2017电脑版,小程序代码vue组件使用的步骤 定义组件注册组件使用组件 定义组件
Vue.extend(options) 其中options和new Vue(options)出入的options对象几乎一样#xff0c;但是也有不同。 创建 el不用写—最终所有组件需要经过一个vm的管理#xff0c;由vm的el决定服务哪个容器。 data必须写成函…vue组件使用的步骤 定义组件注册组件使用组件 定义组件
Vue.extend(options) 其中options和new Vue(options)出入的options对象几乎一样但是也有不同。 创建 el不用写—最终所有组件需要经过一个vm的管理由vm的el决定服务哪个容器。 data必须写成函数—因为组件复用数据存在引用关系。
Vue创建组件案例 Vue.extend()创建
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleDocument/titlescript srchttps://cdn.jsdelivr.net/npm/vue2/dist/vue.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/dayjs/1.11.7/dayjs.min.js/script/headbody!-- 准备好一个容器--div idrooth2学习Vue组件/h2/div/bodyscript typetext/javascriptVue.config.productionTip false;//创建一个vue实例new Vue({el: #root,data: {opacity: 1,},});//定义一个vue组件let school Vue.extend({template: div classdemoh2学校名称{{schoolName}}/h2h2学校地址{{address}}/h2button clickshowName点我提示学校名/button /div,data() {return {schoolName: 希望小学,address: 123456qq.com,};},methods: {showName() {alert(this.schoolName);},},});/script/html
注册组件 局部注册在new Vue时传入componnets选项 全局注册:在Vue.component(‘组件名’组件)
局部注册案例
script//创建vmnew Vue({el: #root,data: {msg:你好啊},//第二步注册组件局部注册components: {school: school,student: student// ES6简写形式// school,// student}})
/script全局注册案例 //注册vue组件Vue.component(school,school)使用组件 div idrooth2{msg}/h2school/school/div使用注意点
组件名 一个单词 首字母小写 school 首字母大写 School 多个单词 kebab-case命名 my-name CamelCase命名 MyName(需要脚手架支持)
组件标签 需要使用脚手架否则导致后续标签无法渲染 组件定义简写
const school Vue.extend(options) 可简写为const school options
