Vue学习(一)

無花風月

已于 2022-01-22 19:29:20 修改

阅读量874

点赞数

分类专栏： java学习第一天文章标签： java

于 2022-01-19 18:32:11 首次发布

本文链接：https://blog.csdn.net/m0_52510907/article/details/122586589

版权

java学习第一天专栏收录该内容

33 篇文章 0 订阅

订阅专栏

前言

为了做一个自己需求，只好学习Vue，总不能傻乎乎的东拼西凑，搞一个不像样的网站吧，而且我也不喜欢直接复制别人的源码，除非我看得懂，我宁愿抄袭别人的界面，也不去复制现成的源码。Vue的学习对我而言，有点尚早，毕竟ECMA6还没进行学习，但是，我想试试。

安装

实际上Vue官网把安装方法给的很清楚了，各位直接进官网看吧

https://cn.vuejs.org/v2/guide/installation.html

Vue引入

Vue引入十分简单，可以理解为java中的导包，Vue是作为JS脚本引入的.

<script src="./js/vue.js"></script>

MVVM

一般来讲vm对象的创建也十分简单,但在这之前，我们最好先了解一下MVVM。模型图如下,通俗点说ViewModel就是我们new出来的Vue实例对象，对View和Model进行操作。而View就是视图也就是我们在Html写的代码，简称为模板。至于Model就是我们处理的数据了。
在这里插入图片描述

具体还是落实到代码上吧,这里的#dream块就是所谓的模板。

	<body>
		<div id="dream">
			<h1>{{test}}</h1>
		</div>
	</body>

vm变量就是ViewModel,Model就是里面定义的data数据啦

const vm = new Vue({
	el:"#dream",
	data: {
		test:'你好'
	}
});

事件绑定

众所周知,javaScript经常这样定义对象

person = {
	name:"lxy",
	sex:"男",
	age:18
}

但是官方也给我们提供了一个叫Object.defineProperties的方法，可以给指定对象加属性。那么使用这个方法有什么好处呢？除了看上去更加牛逼以外

person = {
	name:"lxy",
	sex:"男"
};
Object.defineProperties(person,"age",{
	value:18
});

实际上这个函数确实牛逼,因为他可以控制属性的属性，属性肯定都离不开删改查，而删改查则需要相应的权限属性。当然，以下3个权限属性通过上代码定义默认为true，如果是通过defineProperties方法定义对象，如果不定义权限属性，那么权限属性肯定就是false啦。至于value，相信大家都知道是什么

Configurable:表示是否能通过delete删除属性，能否修改属性的特性，或能否把属性修改为访问器属性

Enumerable:表示是否能够被迭代读取，比如: for in

Writeable:表示属性的value是否能够被修改

person = {
	name:"lxy",
	sex:"男"
};
Object.defineProperties(person,"age",{
	value:18,
	Writeable:false,
	Enumerable:true,
	Configurable:true;
});
delete person age;
console.log(person.age);

通过上例，我们对defineProperties有了一定了解，其中有两个至关重要的属性，也就是get和set，不定义他们时，默认为undefined，若我们定义了，那么结果就大不一样了。运行下方代码，发现读取age这个属性都会输出字符串，并且读出来的值是在原有基础上加100，利用这个原理我们可以进行很多操作，比如把这个对象的属性绑定在另一个对象上。

person = {
	name:"lxy",
	sex:"男"
};
Object.defineProperties(person,"age",{
	value:18,
	Writeable:true,
	Enumerable:true,
	Configurable:true;
	get:function(){
		console.log("你读取了这个属性");
		return this.age+100;
	}
});
console.log(person.age);

Hello World

Vue的Hello World也十分的简单，如果不了解上面的例子，那么对他的原理也就一团迷雾了。{{}}这个符号没别的意思，在vue中，就是取vm对象的属性或者执行js代码,当然肯定不是简单的vm.test就能取到，而是通过间接操作，等价于:vm._data.test，代码在实例化的时候，会把传入的data赋值给_data属性，方便后续vue的封装操作

const vm = new Vue({
   el:"#dream",
   data: {
   	test:'你好'
   }
});
   <body>
   	<div id="dream">
   		<h1>{{test}}</h1>
   	</div>
   </body>

当然，我们也可以绑定属性,如下方代码

const vm = new Vue({
   el:"#dream",
   data: {
   	test:'www.4399.com'
   }
});
   <body>
   	<div id="dream">
   		<a v-bind:href="test">4399</a>
   	</div>
   </body>