Vue入门小笔记_Object.defineProperty和v-model和v-bind

1.引入vue(标签引入方式)

2.Vue实现HelloWorld

	
		
		
		
	
	
		
		

			
hello{{name}}
		
		
	

定义一个名字为root的盒子（div）

下面新建一个Vue实例

我们在vue项目中称呼div部分的内容为模板

vue的实例为数据

el；属性挂载到模板的位置

data定义数据

{{xxx}}是vue的差值语句

3.测试

如果我们没有引入vue项目结果如下

引入了vue的项目测试如下

 

4.数据挂载的2种方式

出了上述的方式还有这一种 

添加一个盒子名字为app

		

			
这是{{name}}
		

			const v=new Vue({
				data:{
					name:'加载属性'
				}
			})
			v.$mount("#app")

挂载到app上用 v.$mount的方式

同样有结果并且不会显示{{xxx}} 

5.数据绑定

有2 种方式一种是单向的一种是双向的

单向数据绑定：模板只能获取vue实例的数据

绑定方式——  : 或者 v-bind:

限制：几乎没有特殊限制

双向数据绑定：模板可以获取vue实例的数据并且模板修改的数据可以传输到vue实例中

绑定方式——v-model:

限制：只能在表单便签使用

	
		
		
		
	
	
		
		

			
hello{{name}}
			

			
			点击去{{name2}}链接
			点击{{name2}}链接
			

			点击去{{school.name}}链接
			

			
双向数据绑定
			
			双向数据绑定：
		
		

			
这是{{name}}
		

		
	

6.数据绑定测试

要在浏览器上安装vue的工作台插件

刚刚开始的页面是这样的，点开双向数据的数据

 我们修改模板中的数据

 

 会同时发生改变加入我们在

源码中

双向数据绑定：

替换绑定方式 你们去测试一下是不会改变的

7.Object.defineProperty添加实例的属性

在person对象中我们自定义了name和sex属性，我们通过Object.defineProperty方法添加了age属性，但是如果我们默认添加的属性是不可以被枚举的，简单的来说对象不太接受这个属性但是可以用他。但是我们可以在添加属性的时候enumerable改属性的权限吧，我是这样的理解的。这样我们可以通过遍历person对象并且得到age属性。还有writable是否可以修改。

测试

打印的对象没有age属性

我在控制台修改age后age还是原来的值

 

不同之处可以遍历age，也可以修改