xinggevip

Vue2.x_2.1初识组件的应用
app.js//调用VUE的组件用vue的component方法 //第一个参数是名字。第二个参数是一个对象 Vu...
扫描右侧二维码阅读全文
19
2019/05

Vue2.x_2.1初识组件的应用

app.js

//调用VUE的组件用vue的component方法
//第一个参数是名字。第二个参数是一个对象
Vue.component("greeting",{
    //template为模板属性
    template:'<p>{{name}}:Hello World<button v-on:click="changeName()">改变name</button></p>',
    data:function () {
        return {
            name:"高公子"
        }
    },
    methods:{
        changeName:function () {
            this.name = "高星";
        }
    }
});

new Vue({
    el:"#vue-app-one",
});

new Vue({
    el:"#vue-app-two",
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <!-- 生产环境版本,优化了尺寸和速度 -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="vue-app-one">
        <greeting></greeting>
    </div>
    <div id="vue-app-two">
        <greeting></greeting>
    </div>
    <script src="app.js"></script>
</body>
</html>

效果演示

http://hao.qiangssvip.com/vuestudy/Lesson21

Last modification:May 21st, 2019 at 09:22 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment