Vue 框架-09-初識元件的應用

今天的第一個小例項，初步使用元件：

在 app.js 中定義模板元件，在 html 檔案中使用自定義標籤來顯示 js 檔案中定義的 html 程式碼塊

比如說，下面定義一個模板，提示我的 csdn 連線，可以這樣使用：

原始碼 app.js 檔案：

//定義模板，因為在 html 中對應一個自定義標籤模板，所以內容也只能是一對標籤內有多個標籤的格式，而不能是 兩個標籤並列的格式
Vue.component("tocsdn",{
    template:'<h2>大家好，大家可以在百度搜尋：肖朋偉csdn 找到我的部落格</h2><a href="https://blog.csdn.net/qq_40147863">點選跳轉</a>'
})

//例項化 vue 物件
new Vue({
    //注意程式碼格式
    //el：element 需要獲取的元素，一定是 html 中的根容器元素
    el:"#vue-app",
    data:{
    },
    //儲存自己的方法
    methods:{
        welcome: function(){
            alert(" welcome to learn with me!");
        }
    }
});

原始碼 html 檔案：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>VueLearn2-cnblogs/xpwi</title>
        <!--引入自定義的樣式-->
        <link rel="stylesheet" href="css/style.css" />
        <!--引入 vue 核心 js-->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        
    </head>
    <body>
        
        <!--vue-app 是根容器，定義一個 id，然後在 js 裡操作-->
        <div id="vue-app">
            
            <!--在 html 中使用模板的名稱（標籤內容在 js 中定義）就可以應用-->
            <tocsdn></tocsdn>
        </div>
        
        <!--引入自己的 js，注意必須寫在 body 標籤裡最後，因為必須先載入你的整個 HTML DOM，才回去執行 vue 例項-->
        <script type="text/javascript" src="js/app.js" ></script>
    </body>
</html>

在這裡插入圖片描述

第二個小例項：

然後我們也可以加入資料：
在這裡插入圖片描述

原始碼 js 檔案：

Vue.component("tocsdn",{
    template:'<h2>大家可以在百度搜尋：肖朋偉csdn 找到我的部落格:{{csdnUrl}}</h2>',
    data:function(){
        return{
        csdnUrl:"https://blog.csdn.net/qq_40147863"
        }
    }
})

//例項化 vue 物件
new Vue({
    //注意程式碼格式
    //el：element 需要獲取的元素，一定是 html 中的根容器元素
    el:"#vue-app",
    data:{
    },
    //儲存自己的方法
    methods:{
        welcome: function(){
            alert(" welcome to learn with me!");
        }
    }
});

原始碼 html 檔案：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>VueLearn2-cnblogs/xpwi</title>
        <!--引入自定義的樣式-->
        <link rel="stylesheet" href="css/style.css" />
        <!--引入 vue 核心 js-->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        
    </head>
    <body>
        
        <!--vue-app 是根容器，定義一個 id，然後在 js 裡操作-->
        <div id="vue-app">
            
            <!--在 html 中使用模板的名稱（標籤內容在 js 中定義）就可以應用-->
            <tocsdn></tocsdn>
        </div>
        
        <!--引入自己的 js，注意必須寫在 body 標籤裡最後，因為必須先載入你的整個 HTML DOM，才回去執行 vue 例項-->
        <script type="text/javascript" src="js/app.js" ></script>
    </body>
</html>

提示：在 js 檔案中使用的：

data:function(){
        return{
        csdnUrl:"https://blog.csdn.net/qq_40147863"
        }
    }

和

var theUrl = {
csdnUrl:'csdnUrl:https://blog.csdn.net/qq_40147863'
}

兩種方式的區別，
上面一種方式 csdnUrl 是在內部定義，當只需要在單個元件中使用，修改時不會修改其他元件裡面的資料

Vue 框架-09-初識元件的應用

Vue 框架-09-初識元件的應用

更多文章：

相關文章