vue组件用法,简述Vue组件使用的3个步骤?

　　本文主要介绍了Vue的组成，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。

　　身体

　　div id=root

　　h2{{name}}/h2

　　整点

　　学校/学校

　　整点

　　学生/学生

　　整点

　　！- h2学生姓名：{{name}}/h2

　　H2学生年龄：{{age}}/H2-

　　/div

　　div id=root2

　　您好/您好

　　/div

　　脚本

　　vue . config . production tip=false；

　　//创建学校组件

　　//El:“# root”

　　//定义组件的时候不要写el配置项，因为最终所有的组件都会被一个vm管理，vm会决定服务哪个容器。

　　const school=Vue.extend({

　　模板：` 1

　　差异

　　H2学校名称：{ {学校名称}}/h2

　　H2学校地址：{{address}}/h2

　　Button @click=showName 单击我以提示学校名称/button

　　/div

　　`,

　　data() {

　　返回{

　　学校名称：“第二中学”，

　　地址：“北京”，

　　}

　　},

　　方法：{

　　showName() {

　　alert(this.schoolName)

　　}

　　}

　　})

　　//步骤1:创建一个组件

　　//创建一个学生组件

　　const student=Vue.extend({

　　模板：` 1

　　差异

　　H2学生姓名：{{name}}/h2

　　H2学生年龄：{{age}}/h2

　　/div

　　`,

　　data() {

　　返回{

　　姓名：小王，

　　年龄：20，

　　}

　　}

　　})

　　//创建虚拟机

　　新Vue({

　　el: #root ，

　　数据：{

　　名字：“你好，世界！”

　　},

　　//第二步：注册组件(部分注册)

　　组件：{

　　学校，

　　学生

　　}

　　})

　　const hello=Vue.extend({

　　模板：` 1

　　Div，你好，鸭子！王同学/h2/div

　　`

　　})

　　Vue.component(hello ，hello)

　　新Vue({

　　埃尔： #根2

　　})

　　/脚本

　　/body

总结

　　本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。