vue学习笔记（二）

每个目录下都会有一段总结

一、el和data的两种写法

• data与el的2种写法
  1. el有2种写法
     (1). new Vue时候配置el属性。
     (2). 先创建Vue实例，随后再通过vm.$mount(’#root’)指定el的值。
  2. data有2种写法
     (1). 对象式
     (2). 函数式
     如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
  3. 一个重要的原则：
     由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

### 1.el的两种写法

```html
<div id="root">
	<h1>你好，{{name}}</h1>
</div>
<script>
	const vm = new Vue({
		el: "#root",	//第一种写法
		data:{
			name: 'xiaolang'
		}
	})
	//vm.$mount("#root") //第二种写法
</script>

2.data的两种写法

<div id="root">
	<h1>你好，{{name}}</h1>
</div>
<script>
	const vm = new Vue({
		el: "#root",
		//第一种写法	: 对象法
		data:{	
			name: 'xiaolang'
		}
		//第二种写法 ： 函数法
		data(){
			return{
				name: "xiaolang"	
			}
		}
	})

</script>

二、Vue中的MVVM

• MVVM模型
  1. M：模型(Model) ：data中的数据
  2. V：视图(View) ：模板代码
  3. VM：视图模型(ViewModel)：Vue实例
• 观察发现：
  1.data中所有的属性，最后都出现在了vm身上。(数据代理)
  2.vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。
  
  

三、数据代理

总结：

1. Vue中的数据代理：
   通过vm对象来代理data对象中属性的操作（读/写）
2. Vue中数据代理的好处：
   更加方便的操作data中的数据
3. 基本原理：
   通过Object.defineProperty()把data对象中所有属性添加到vm上。
   为每一个添加到vm上的属性，都指定一个getter/setter。
   在getter/setter内部去操作（读/写）data中对应的属性。

1.Object.defineproperty方法

数据劫持、数据代理、计算属性都用到了这个方法。
Object.defineproperty主要是为对象监视或添加属性，比直接在对象中添加更高级，添加的属性不可以被枚举，例如遍历。
Object.defineproperty方法有三个参数，第一个参数为需要添加的对象，第二个参数为添加的属性，第三个为配置项。

			let number = 18
			let person = {
				name:'张三',
				sex:'男',
			}
			Object.defineProperty(person,'age',{
				// value:18,
				// enumerable:true, //控制属性是否可以枚举，默认值是false
				// writable:true, //控制属性是否可以被修改，默认值是false
				// configurable:true //控制属性是否可以被删除，默认值是false
				
				//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
				get(){	//get(){} == get:function(){}
					console.log('有人读取age属性了')
					return number
				},
				//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
				set(value){
					console.log('有人修改了age属性，且值是',value)
					number = value
				}
			})

2.数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
下面代码中，通过obj2对obj中x修改

<script type="text/javascript" >
	let obj = {x:100}
	let obj2 = {y:200}
	Object.defineProperty(obj2,'x',{
		get(){
			return obj.x
		},
		set(value){
			obj.x = value
		}
	})
</script>

3.vue中的数据代理

1. Vue中的数据代理：
   通过vm对象来代理data对象中属性的操作（读/写）
2. Vue中数据代理的好处：
   更加方便的操作data中的数据
3. 基本原理：
   通过Object.defineProperty()把data对象中所有属性添加到vm上。
   为每一个添加到vm上的属性，都指定一个getter/setter。
   在getter/setter内部去操作（读/写）data中对应的属性。

Vue中没有data{}，只要_data{},_data{}中使用了数据劫持。
Vue将data赋给_data了。

	<script type="text/javascript">	
		let data= {
				name: 'xiaolang',
					address: '江西'
			}
		const vm = new Vue({
			el:'#root',
			data,
		})
	</script>

四、事件处理

1.事件的基本使用

• 事件的基本使用：
  1. 使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名；
  2. 事件的回调需要配置在methods对象中，最终会在vm上；
  3. methods中配置的函数，不要用箭头函数！否则this就不是vm了；
  4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
  5. @click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参；

div id="root">
	<h2>欢迎来到{{name}}学习</h2>
	<!-- <button v-on:click="showInfo">点我提示信息</button> -->
	<button @click="showInfo1">点我提示信息1（不传参）</button>
	button @click="showInfo2($event,66)">点我提示信息2（传参）</button>
</div>
	<script type="text/javascript">
		const vm = new Vue({
			el:'#root',
			data:{
				name:'xiaolang',
			},
			methods:{
				showInfo1(event){
					alert('同学你好！')
				},
				showInfo2(event,number){
					console.log(event,number)
					alert('同学你好！！')
				}
			}
		})
	</script>

2.事件修饰符

• Vue中的事件修饰符：
  1. prevent：阻止默认事件（常用）；
  2. stop：阻止事件冒泡（常用）；
  3. once：事件只触发一次（常用）；
  4. capture：使用事件的捕获模式；
  5. self：只有event.target是当前操作的元素时才触发事件；
  6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

<div id="root">
			<h2>欢迎来到{{name}}学习</h2>
			<!-- 阻止默认事件（常用） -->
			<a href="https://www.csdn.net/" @click.prevent="showInfo">点我提示信息</a>
			<!-- 阻止事件冒泡（常用） -->
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo">点我提示信息</button>
				<!-- 修饰符可以连续写 -->
				<!-- <a href="https://www.csdn.net/" @click.prevent.stop="showInfo">点我提示信息</a> -->
			</div>
			<!-- 事件只触发一次（常用） -->
			<button @click.once="showInfo">点我提示信息</button>
			<!-- 使用事件的捕获模式 -->
			<div class="box1" @click.capture="showMsg(1)">
				div1
				<div class="box2" @click="showMsg(2)">
					div2
				</div>
			</div>
			<!-- 只有event.target是当前操作的元素时才触发事件； -->
			<div class="demo1" @click.self="showInfo">
				<button @click="showInfo">点我提示信息</button>
			</div>
			<!-- 事件的默认行为立即执行，无需等待事件回调执行完毕； -->
			<ul @wheel.passive="demo" class="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>
</div>

3.键盘事件

1. Vue中常用的按键别名：
   例子 @keydown.enter=“showInfo”
   回车 => enter
   删除 => delete (捕获“删除”和“退格”键)
   退出 => esc
   空格 => space
   换行 => tab (特殊，必须配合keydown去使用)
   上 => up
   下 => down
   左 => left
   右 => right
2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case（短横线命名）
3. 系统修饰键（用法特殊）：ctrl、alt、shift、meta
   (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
   (2).配合keydown使用：正常触发事件。
4. 也可以使用keyCode去指定具体的按键（不推荐）
5. Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

<div id="root">
	<input type="text" placeholder="按下回车提示输入" @keydown="showInfo">
	<input type="text" placeholder="按下回车提示输入" @keyup="showInfo">
</div>