vue基础知识重点内容笔记

事件绑定 v-on

1. 事件的绑定用v-on指令
2. 如果事件处理逻辑，则可以将代码直接写在指令中，如果复杂则需要写在函数中。
3. 可以在函数中传递参数，如果需要访问原始DOM事件，可以传递$event

<div id="app">
	<div id="example-1">
		<button v-on:click="counter += 1"> 数值 :  {{ counter }} </button><br />
		<button v-on:dblclick="greet('abc', $event)">Greet</button>
	</div>
</div>

<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		counter: 0,
		name : "vue"
	},
	methods:{
		greet : function (str, e) {
			alert(str);
			console.log(e);
		}
	}
});
</script>

表单输入绑定

v-model 创建双向数据绑定

会根据数据类型，自动选择正确的方法来更新元素

组件

组件的本质

组件是可复用的vue实例。因此和new vue 接收相同的选项。
目标是把重复的内容封装为组件

组件的创建方式 – 组件注册

全局注册
vue.component(组件名，组件对象) 组件对象中包含数据和模板
通过props来设置组件的属性
局部注册
需要在注册vue的时候，增加component标签来注册

在组件内触发事件

this.$emit('clicknow', this.count);
参数1：事件名
参数2：传递的参数

组件的插槽

通过标签来生成一个插槽，通过插槽可以在组件的标签内部插入一些html内容

组件被复用后，数据独立

组件被复用之后，数据是封闭在组件内部的，相互之间的数据并不会相互影响。

组件的属性

可以在组件标签中增加属性，例如
title="title1 : "即给title属性赋值

<div id="app">
	<button-counter title="title1 : " @clicknow="clicknow">
		<h2>hi...h2</h2>
	</button-counter>
	<button-counter title="title2 : "></button-counter>
</div>
<script type="text/javascript">
Vue.component('button-counter', {  // 通过Vue.component 全局注册 ，无论是否应该了该组件，前端页面运行时，都会被加载
	props: ['title'],  // 属性
	data: function () {
		return {
		  count: 0
		}
	},
	template: '<div><h1>hi...</h1><button v-on:click="clickfun">{{title}} You clicked me {{ count }} times.</button><slot></slot></div>',
	methods:{
		clickfun : function () {
			this.count ++;
			this.$emit('clicknow', this.count);  // 触发事件 需要一个方法名和一个想该方法传入的参数
		}
	}
})
var vm = new Vue({
	el : "#app",
	data : {
		
	},
	methods:{
		clicknow : function (e) {
			console.log(e);
		}
	}
});
</script>

单文件组件 即.vue文件

.vue的单文件组件可以使用构建工具 webpack等