Vue学习

最新推荐文章于 2024-12-25 16:36:05 发布

原创最新推荐文章于 2024-12-25 16:36:05 发布 · 346 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue

Vue学习专栏收录该内容

16 篇文章

订阅专栏

本文介绍了Vue.js中组件的基础知识和事件监听的使用，强调了将重复功能封装为组件以提升开发效率和便利性。文中提到了在data选项中定义posts数组，并探讨了组件的事件交互。

Vue学习2019/10/14

（组件基础）
把我们要重复使用的功能封装成组件，可以使开发变得更高效，更方便。

<div id="app">
	<button-counter></button-counter>    
	<button-counter></button-counter>                //组件可复用，互不影响
</div>
<script type="text/javascript">
Vue.component('button-counter', {
	
	data: function () {                    //数据
		return {
		  count: 0
		}
	},
	template: '<button v-on:click="count++"> You clicked me {{ count }} times.</button>    //模板内容，按钮被点击count+1
	
	}
})
var vm = new Vue({
	el : "#app",
	data : {
		
	
	}
});
</script>

<div id="app">
	<button-counter title="title1 : "></button-counter>   //在调用组件时属性，去为这个属性赋值   
	<button-counter title="title2 : "></button-counter>                
</div>
<script type="text/javascript">
Vue.component('button-counter', {
	props: ['title'],                      //使用props为组建定义属性
	data: function () {                    
		return {
		  count: 0
		}
	},
	template: '<button v-on:click="count++">{{title}}You clicked me {{ count }} times.</button>  //在模板内对此属性进行应用和渲染,一个模板需要一个根节点。   
	           //template: '<div><h1>hi</h1><button v-on:click="count++">{{title}} You clicked me {{ count }} times.</button></div>'
	}
})
var vm = new Vue({
	el : "#app",
	data : {
		
	
	}
});
</script>

你可以在 data 里有一个posts的数组：

<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
new Vue({
  el: '#blog-post-demo',
  data: {
    posts: [
      { id: 1, title: 'My journey with Vue' },
      { id: 2, title: 'Blogging with Vue' },
      { id: 3, title: 'Why Vue is so fun' }
    ]
  }
})

(组件的事件监听)

<div id="app">
	<button-counter title="title1 : " @clicknow="clicknow">  //通过事件绑定的方式接受$emit函数触发的事件
		<h2>hi...h2</h2>                                 //在组建内部插入HTML内容
	</button-counter>
	<button-counter title="title2 : "></button-counter>
</div>
<script type="text/javascript">
Vue.component('button-counter', {
	props: ['title'],
	data: function () {
		return {
		  count: 0
		}                                                                                                                   
	},                                                                                                          //通过<slot></slot>声明一个组件的插槽，通过插槽可以插入任意HTML内容及标签
	template: '<div><h1>hi...</h1><button v-on:click="clickfun">{{title}} You clicked me {{ count }} times.</button><slot></slot></div>',//JavaScript脚本count++改成clickfun这样的一个JavaScript可执行的函数
	methods:{                                            //通过methods属性声明clickfun这个函数
		clickfun : function () { 
			this.count ++;                       //使用this对象对count进行+1处理
			this.$emit('clicknow', this.count);  //使用$emit方法触发事件，clicknow是事件名称，this.count是可携带的参数
		}
	}
})
var vm = new Vue({
	el : "#app",
	data : {
		
	},
	methods:{                        //在页面上同样使用methods属性声明clicknow方法
		clicknow : function (e) {
			console.log(e);
		}
	}
});
</script>