Vue基础知识_结构和组件

最新推荐文章于 2022-06-04 23:21:48 发布

伟衙内

最新推荐文章于 2022-06-04 23:21:48 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/lw18751836671/article/details/123712545

版权

前端专栏收录该内容

21 篇文章 1 订阅

订阅专栏

vue结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="./js/vue.js"></script>

</head>

<body>
    <div id="app"></div>    

    <script>
        var vm = new Vue({
            el:"#app", //接管区域
            data:{}, //数据仓库
            methods:{}  //方法仓库
        });
    </script>
    
</body>
</html>

如上是一个vue基本的结构。

需要引入vue.js;
创建vue对象;
使用el声明对象接管的区域，此处是 id=app的div;

vue组件

	<div id="app">
        <my-com></my-com>
    </div>    

    <script>
        Vue.component('my-com',{
            template:`<div>{{n}}</div>`,
            data(){
                return {
                    n:1
                }
            },
            methods:{

            }
        });

        var vm = new Vue({
            el:"#app",
            data:{},
            methods:{}
        });
    </script>

生成组件需要使用Vue.component，其中template中元素需要包裹在一个唯一的父元素中。

data这里因为是组件，所以要复用，那么就使用方法data()返回数据对象。

这种生成的组件是全局组件，直接在页面使用即可。

组件名使用 “-” 区别，避免使用驼峰，vue不识别大小写。

子组件

		var myListItem = { //子组件
            template:`<li>{{todo}}</li>`,
            data(){
                return {
                    todo:'吃饭'
                }
            },
            methods:{

            }
        };

        var myList = {  //子组件中使用上面的子组件
            template:`<ul>
                <my-list-item></my-list-item>
                <my-list-item></my-list-item>
            </ul>`,
            data(){
                return {
                   
                }
            },
            components:{
                myListItem
            }
        };

        Vue.component('my-com',{  //使用子组件
            template:`<div>
                <my-list></my-list>
            </div>`,
            data(){
                return {
                   
                }
            },
            methods:{

            },
            components:{
                myList
            }
        });

子组件可以使用 var 声明变量，此处使用var声明的组件，就是一个局部子组件。

局部子组件就不能在页面直接使用，只能被页面可使用的组件引用。

子组件里面可以引用其他子组件。

如果是var 声明变量的子组件，那么需要注意顺序。

引用组件需要使用components声明。

伟衙内

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础知识_结构和组件

vue结构<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title&
复制链接

扫一扫

专栏目录