Vue 框架-09-初識組件的應用
阿新 • • 發佈：2018-11-15
UNC 文件中 turn npm component 組件 -- htm cnblogs
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 小實例：https://blog.csdn.net/qq_40147863/article/category/8317526
Vue 框架-09-初識組件的應用