Vue 组件

最新推荐文章于 2022-06-28 21:38:00 发布

隶属感

最新推荐文章于 2022-06-28 21:38:00 发布

阅读量110

点赞数

分类专栏： js+html+css VUE

本文链接：https://blog.csdn.net/qq_36445227/article/details/86508016

版权

js+html+css 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

VUE

5 篇文章 0 订阅

订阅专栏

<!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">
<script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
   hellow 
    </div>
<script>
	new Vue({
		el : "#app",
		template : "<div>{{msg}}</div>",
		data : {
			
				msg : "你好!"
			
		}
	})

</script>
</body>
</html>

template 属性中的字符串标签会替换 id 为 app 的标签 ,在template 中可以使用 {{ }} 的方式调用自己的属性如msg

示例:

template 优缺点 ,写字符串html 没有编辑器的智能提示 ,编写daim效率低

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">
    <script src="https://unpkg.com/vue@2.5.17/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
    <my-component></my-component>
  
    </div>
    <script>
    Vue.component('my-component',{
        template : `<div>
            <button @click= "clickMe">{{count}}</button>
        </div>`,
        data : function(){
            return {
                count : 0 
            }
        },
        methods : {
            clickMe : function(){
               this.count ++;
            }
        }
    })

new Vue({
    el : '#app',

})


    </script>
</body>
</html>

示例:

需要注意在 component 函数中 data 是函数形式的 ,这是为了避免多个地方都调用该组件时, 数据都是同一个

这种情况是可以模拟的 : 如下 :

        
     var data = {
                count : count
            }

    Vue.component('my-component',{
        template : `<div>
            <button @click= "clickMe">{{count}}</button>
        </div>`,
        data : function(){
            return data
        },
        methods : {
            clickMe : function(){
               this.count ++;
            }
        }
    })

new Vue({
    el : '#app',

})

效果:

局部组件的定义 : 这样定义出来的组件只有 #app 可以使用 my-component 组件,

var myConponent = {
        template : `<div>
            <button @click= "clickMe">{{count}}</button>
        </div>`,
        data : function(){
            return data
        },
        methods : {
            clickMe : function(){
               this.count ++;
            }
        }
    }
   // Vue.component('my-component',myConponent)

new Vue({
    el : '#app',
    components : {
        'my-component' : myConponent
    }

})

隶属感

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 组件

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;&lt;met
复制链接

扫一扫

专栏目录