Vue学习记录第一天

今天开始了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

*/

 

哇呀呀，不早了，今天大概就写到这里，突然感觉脑子一片空白，好像今天学的东西一下子都忘光了，最近发现记忆力真的是严重衰退，总是忘东忘西的，不知道是怎么了。我要早点提升，早点找到一份稳定的工作，工资可以不用很高，距离家近就可以了。希望自己可以早点找到想要的工作，加油，我一定可以的。