首页 > 其他 > 详细

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

时间:2018-11-15 20:11:23      阅读:138      评论:0      收藏: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" />
        <!--引入 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-初识组件的应用

原文:https://www.cnblogs.com/xpwi/p/9965746.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!