Vue 框架-09-初识组件的应用

素颜马尾好姑娘i 2022-04-16 01:46 200阅读 0赞

### 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" />
    		
    		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    		
    	</head>
    	<body>
    		
    		
    		<div id="vue-app">
    			
    			
    			<tocsdn></tocsdn>
    		</div>
    		
    		
    		<script type="text/javascript" src="js/app.js" ></script>
    	</body>
    </html>

![在这里插入图片描述][20181115132932802.png]

第二个小实例：

然后我们也可以加入数据：  
![在这里插入图片描述][20181115132905788.png]

源代码 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 文件：

提示：在 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][https_blog.csdn.net_qq_40147863_article_category_8317526]

[20181115132932802.png]: /images/20220416/f084f627e045452f895cc3e18855cf09.png
[20181115132905788.png]: /images/20220416/d7c32a9d805c414a953a11d4992a9051.png
[https_blog.csdn.net_qq_40147863_article_category_8317526]: https://blog.csdn.net/qq_40147863/article/category/8317526