Vue.js学习笔记（二）--来自于慕课网的入门实战教程

这是我第二次学习vue.js（第一次在我的第一篇这个系列的笔记里面有），因为还有几天就期末考试了，所以只能学这么点了

16、指令修改器

对v-on:keydown.enter=“func()”进行分析：

其中的v-on是指令，keydown是这个指令的参数，enter是指令修改器（意思是按下键盘上的enter键的时候触发函数），func()是触发的函数。

其中的enter是可以换成其他的指令修改器，例如数字13（v-on:keydown.13=“func()”）等等

如果我们把指令修改器给去掉（v-on:keydown=“func()”），此时，每当我们按下键盘上的任意键，都会去触发func()这个函数

17、自定义事件

我们在子组件a里面定义了一个自定义事件my-event，当my-event事件触发的时候，我们去执行onComaMyEvent函数

//这好似a.vue文件




//这是app.vue文件

18、

vue模板只能有一个根对象

例如以下是错误的写法：

所以你想要出现正常的效果，你得用一个div来或是别的标签来包裹全部的元素：

19、

v-model指令：表单数据模型双向绑定

v-model指令是用来绑定input标签的value属性的，我们知道，input标签的value属性就是input里面输入的值。然后，我们再让它和data里面的属性关联起来，这时候，我们就可以让input里面的值在其他地方使用，并且实现同步更新

注意：我们必须先在data里面声明了myValue之后，才能写v-model="myValue"，否则会报错

v-model指令也有它的修改器，例如：

v-model.lazy="myValue"

使用了lazy这个修改器之后，只有当我们在input输入了值并且按下enter键或者input失去了焦点之后，才会在我上面的p标签里面输出myValue的值

20、属性监听

意思就是我们去监听一个vue.js的变量，每当这个变量被改动的时候，我们就去执行特定的操作

通过watch这个选项来实现的

当下面的例子中的myValue被改变的时候，会执行：

myValue: function(val, old){
      this.newValue = val;
      this.oldValue = old;
    }

其中的val是传进去的myValue的新值，old是传进去的myValue的旧值

代码如下：

以上笔记是我今天看视频看到的位置，后面还会继续更新(❁ᴗ͈ˬᴗ͈)