Vue 学习第2天 模板——关晓彤

时间:2019-08-18
本文章向大家介绍Vue 学习第2天 模板——关晓彤,主要包括Vue 学习第2天 模板——关晓彤使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

js

Vue.component("greeting",{
    template:`
    <p>
        {{name}}:大家好,给大家介绍我的女朋友:关晓彤
        <button v-on:click='changeName'>改名</button>
    </p>


    `,
    data:function(){
        return{
            name :"鹿晗"
        }
    },
    methods:{
        changeName:function(){
            this.name = "我";
        }
    }
})

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

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

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>

    <div id="vue-app-one">
        <greeting></greeting>
    

    </div>


    <div id="vue-app-two">
        <greeting></greeting>
    

    </div>
</body>
    <script type="text/javascript" src='app.js'></script>
</html> 

我:大家好,给大家介绍我的女朋友:关晓彤 改名

鹿晗:大家好,给大家介绍我的女朋友:关晓彤 改名

原文地址:https://www.cnblogs.com/polax/p/11371086.html