太阳集团tyc5997|官网【中国】有限公司

vue组件基础知识总结
  • 作者:admin
  • 发表时间:2021-01-28 07:52
  • 来源:未知

这篇文章主要介绍了某视频剪辑软件组件基础知识的相关资料,帮助大家更好的理解和使用某视频剪辑软件的组件,感兴趣的朋友可以了解下

组件基础

一组件的复用

组件是可复用的某视频剪辑软件实例。

!声明文档类型

超文本标记语言

meta charset='utf-8 '

风格

/style

脚本src=' https://cdn。静态文件。org/vue/2。4 .2/vue。量滴js '/脚本

/head

身体

div id='app '

按钮计数器

按钮计数器

按钮计数器

/div

剧本

//定义一个名为按钮计数器的新组件

Vue.component('button-counter ',{

data: function () {

返回{

count: 0

}

},

模板: '按钮:click=' count '点击了{{ count }}次“/button”

});

新vue({ El : ' # app ' });

/script

/body

/html

注意当点击按钮时,每个组件都会各自独立维护它的数数。这里自定义组件的数据属性必须是一个函数,每个实例维护一份被返回对象的独立的拷贝。

!声明文档类型

超文本标记语言

meta charset='utf-8 '

风格

/style

脚本src=' https://cdn。静态文件。org/vue/2。4 .2/vue。量滴js '/脚本

/head

身体

div id='app '

按钮计数器

按钮计数器

按钮计数器

/div

剧本

var buttonCounterData={

count: 0

}

//定义一个名为按钮计数器的新组件

Vue.component('button-counter ',{

data: function () {

返回按钮计数器数据

},

模板: '按钮:click=' count '点击了{{ count }}次“/button”

});

新vue({ El : ' # app ' });

/script

/body

/html

2通过支撑物向子组件传递数据

!声明文档类型

超文本标记语言

meta charset='utf-8 '

风格

/style

脚本src=' https://cdn。静态文件。org/vue/2。4 .2/vue。量滴js '/脚本

/head

身体

div id='app '

博文标题='我和某视频剪辑软件的旅程'/博文

博文标题='用某视频剪辑软件写博客'/博文

博文标题='为什么某视频剪辑软件这么有趣'/博文

/div

剧本

Vue.component('blog-post ',{

道具:['标题'],

模板:“H3 { { title } }/H3”

})

新vue({ El : ' # app ' });

Baidu
sogou