今天开始了Vue的学习，下面我就记录一下学习了什么。
1.什么是Vue?
vue是一套基于javaScript的渐进式框架，是MVVM框架。View ——ViewModel——Model 其中View就是视图层， Model就是数据层，而中间的监控者就负责监控两侧的数据，并相对应地通知另一侧进行修改。比如，你在数据层改变了某个数据的值，那么视图层的数据也会修改。这个过程就是有ViewModel来操作的，不需要你手动地去写代码去实现（你不用再手动操作DOM了）。
2.Vue的基础知识点：
1）数据绑定，<p>{{name}}</p> 在标签里面绑定数据，通过两个大括号可以取得data里面想要显示的数据
eg:实例话一个对象在app.js里面
new Vue({
el:"#vue-app",
data:{
name:'hello'
}
});
2）vue的属性绑定方式：
<a v-bind:href="website" target="blank">百度首页</a>
<input type="text" v-bind:value="job"/>
<p v-html="websiteTag"></p>
3）vue事件绑定：
<div id="vue-app">
<h1> Events </h1>
<button v-on:click="add(1)">涨一岁</button><!-- 点击添加一岁 -->
<button v-on:click="subtract(1)">减一岁</button><!--点击事件的所写：@click="subtract(1)" -->
<!-- 传入参数10 -->
<button v-on:dblclick="add(10)">涨十岁</button><!-- 双击添加十岁 -->
<button v-on:dblclick="subtract(10)">减十岁</button>
<p>我的年龄是：{{age}}</p>
<!-- 鼠标移动事件 -->
<div id="canvas" v-on:mousemove="updateXY">
{{x}},{{y}}————<span v-on:mousemove.stop ="stop">Stop</span> <!-- 阻止冒泡事件属性 -->
</div>
<!-- 双向数据绑定 -->
<h1>键盘 Events </h1>
<label for="">姓名：</label>
<input ref="aaa" type="text" v-on:keyup="logName" />
<span>{{name}}</span>
<label for="">年龄：</label>
<input ref="bbb" type="text" v-on:keyup="logAge" />
<span>{{age}}</span>
</div>
<script>
// 实例化
new Vue({
el:'#vue-app', //获取根容器
data:{
age:30,
x:0,
y:0
},
methods:{
add:function(inc){ //接收传过来的参数
console.log(inc);
this.age += inc;
},
subtract:function(dec){
this.age -= dec;
},
updateXY:function(event){ //event暂时先理解为所有的默认事件集合自带的
console.log(event);
this.x = event.offsetX; //获取x轴的位置坐标，并赋值给x
this.y = event.offsetY; //获取Y轴的位置坐标，并赋值给y
},
stop:function(event){
event.preventDefault(); //阻止事件冒泡并且阻止默认行为，什么元素有默认行为呢？如链接<a>，提交按钮<input type=”submit”>。
event.stopPropagation();//阻止事件冒泡但是不会阻止默认行为
},
logName:function(){
this.name = this.$refs.aaa.value;
},
logAge:function(){
console.log("你正在输入年龄");
this.age = this.$refs.bbb.value;
}
}
})
</script>
/*
键盘事件：v-on:keyup v-on:keydown
键值修饰符： v-on:keyup.enter 只有按enter键才会执行方法
双向数据绑定： input /select /textrea 一般输入输出的时候会存在双向数据绑定的问题。
实现双向数据绑定的两种方式：
1. 通过事件操作属性的方式。
<input ref="name" type="text" v-on:keyup="logName" />
在input中定义（给input一个ref的标记，通过标记获取input里面的value）一个ref的属性，当键盘事件输入内容后触发这个方法，
方法里面我们需要获取input里面的值，并且赋给vue,在vue里面获取值得方式，就是this.$refs.name.value;
2. v-model指令的方式。
v-model = "name" 把data里面的值赋给v-model
*/
哇呀呀，不早了，今天大概就写到这里，突然感觉脑子一片空白，好像今天学的东西一下子都忘光了，最近发现记忆力真的是严重衰退，总是忘东忘西的，不知道是怎么了。我要早点提升，早点找到一份稳定的工作，工资可以不用很高，距离家近就可以了。希望自己可以早点找到想要的工作，加油，我一定可以的。