尚硅谷《vue》——笔记一

前言

前后端分离人不分离，这就是为什么我在学前端。

---

一、数据绑定

1. 模板语法

<h1>插值语法{
  {name}}h1>
<a :href="url">指令语法a>
1
2
3

2. 数据绑定

<input type="text" v-bind:value="name">单向数据绑定input>
<input type="text" v-model:value="name">双向数据绑定（只能应用在表单类元素上）input>
1
2

3. el与data的两种写法

// 第一种写法（el和data的写法是分离的，可以排列组合得到四种不同写法）
new Vue({
   
	el:'#root',
	data:{
   
		name:'尚硅谷',
	}
})
// 第二种写法
const vm = new Vue({
   
	data:{
   
		return {
   
			name:'尚硅谷',
		}
	}
})
vm.$mount('#root')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

二、MVVM

解释：
M：模型->data数据
V：视图->模板，DOM
VM：视图模型->Vue实例对象
双向绑定：

1. 数据通过Vue绑定到DOM
2. DOM通过DOM监听数据

三、数据代理

利用defineProperty给对象添加属性，并将属性的值与其他数据绑定。

let number = 18
Object.defineProperty(person,'age',{
   
	value:18,
	enumerable:true, // 可枚举forin
	writable:true, // 可修改
	configurable:true, // 可删除
	get:function(){
   
		return number;
	},
	set:function(value){
   
		number=value;
	}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

vm.name是通过defineProperty代理data.name得到的：

/** vm._data===data */
let data = {
   
	name:'尚硅谷',
}
const vm = new Vue({
   
	el:
1
2
3
4
5
6
7