Vue 框架-09-初识组件的应用
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 是在内部定义，当只需要在单个组件中使用，修改时不会修改其他组件里面的数据
