第一篇 基础语法

声明式渲染

• 采用Mustache的渲染方法：{{ }}
• vue渲染的时机要比DOMContentLoaded早几到几百毫秒。
• 页面显示并不会等到DOMContentLoaded事件之后，所以有时能看到双大括号闪烁，可通过指令v-cloak和样式[v-cloak]{display:none}来解决

条件渲染

• v-if在条件不满足时不渲染
• v-else-if使用条件：前一兄弟元素必须有 v-if 或 v-else-if
• v-show在条件不满足时通过css将元素隐藏

列表渲染(数组)

• {{index+': '+ item.name+','+item.price}}

• 这里的index作为每条数据的id绑到属性key上，在列表更新时，可通过key决定DOM的复用策略
• 在控制台可以通过app3.items.push({name:'music',price:12})来添加数据，实时显示

列表渲染(对象)

• {{`${index}- ${key}:${value}`}}

• 遍历对象时有三个参数，分别是值、键和下标
• 遍历的对象不能在控制台中通过app4.obj.other='another'来增加属性，而要通过Vue.set(app4.obj,'newKey','newValue')来实现。因为Vue对有的属性变化检测不到
• Vue能检测到的变化：
  • 现有数据字段的变化：item[0].isShow = true;
  • 通过Vue.set(object, key, value)的⽅式添加的属性
  • 通过Vue.delete(object, Key)的⽅式删除的属性
  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()
  • filter()
  • concat()
  • slice()
• Vue检测不到的变化：
  • 利用索引去设置新的数据时：items[indexOfItem] = newItem;
  • 直接修改数组的长度时：items.length = newLength;
  • 直接去添加或删除对象的属性：app.dataSource.newKey = 'newValue';

属性绑定

测试拼接字符串:{{testTitle1Key+'-'+testTitle2Key}}

测试算术运算:{{testTitle4Key-testTitle3Key}}

测试对象(鼠标移到我上面看title值，跟Mustache渲染出来的不同):{{testObj}}

测试的象重写toString(鼠标移到我上面看title值，跟Mustache渲染出来的不同):{{testObj2}}

测试数组:{{testArr}}

测试数组重写toString(鼠标移到我上面看title值，跟Mustache渲染出来的不同):{{testArr2}}

测试方法:{{testMethod()}}

• v-bind支持JavaScript单一表达式，可以绑定数组、对象和函数。其中前两者调用其toString方法，而函数输出其返回值。但要注意到Mustache渲染结果跟toString和valueOf无关

class/样式绑定

v-model绑定

单行文本框的值为：{{testText}}

复选框的绑定值为：{{testCheckbox}}

多选框绑定
• 如果v-model的值为数组，则依次绑定对应checkbox的value值，没有value值的为null且会同时动作；选中CheckBox后则自动添加对应value值到数组中。
• 如果v-model的值为字符串，则会绑定checked的值，这时有一个发生变化，所有的CheckBox都会同时动作，即是全选按钮效果。

单选按钮的绑定值为：{{testRadio}}

单选按钮绑定
• v-model为字符串，值与选中单选按钮的value同步变化。
• 绑定相同的v-model值后不写name属性也会达到编组单选的效果。

下拉框的绑定值为：{{testSelect}}

下拉框的绑定值为：{{testSelectMul}}

下拉框绑定
• 绑定的都是value值，单选下拉框的v-model为字符串，多选下拉框的v-model为数组。

v-model修饰符

.lazy——后面的数据在执行change事件时改变(本例中失焦时可观察到)：{{testLazy}}

.number——后面的数据自动转为Number类型(在控制台通过app7.testNumber查看,数字开头会去除后面的非数字，字母开头就是字符串)：{{testNumber}}

.trim——后面的数据自动去除前后空格(貌似不写也只会保留前面一个空格和去除后面的空格)：{{testTrim}}

事件绑定

直接绑定表达式 counter:{{counter}}

调用vue中自定义方法

方法传参,其中$event是原生事件对象，可在控制台中看到当前元素的路径

绑keyup事件 inputMsg：{{inputMsg}}

• 如果使用原生的onclick则无法获取到vue定义的counter变量
• 直接调用vue中定义的方法，会默认传入当前的DOM原生事件

事件修饰符

没有添加修饰符的情况

.stop——阻止事件冒泡

.prevent——阻止默认事件（光弹出不跳转）

.capture——事件改为捕获模式（默认为冒泡）

.self——只处理元素本身的事件，而不处理冒泡或捕获来的

.once——事件触发一次后就被删除（修饰符绑在外层，包括被冒泡，可测试）

.passive——恢复浏览器事件默认行为，每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作。 我们加上passive就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。一般用在滚动监听，@scoll，@touchmove 。 因为滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核线程查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过，可以大大提升滑动的流畅度。 注意不能和prevent一起用，因为后者会被忽略。

.prevent.self——阻止了传播a的默认行为和事件，可以理解为先阻止默认跳转后再过滤掉传播来的。

.self.prevent——只阻止了a的点击事件，可以理解为把自身（self）的默认行为（prevent）阻止，而通过传播来的事件会触发默认动作跳转。

• 可以这样理解，对于a标签，事件触发有3种行为：浏览器默认(跳转)+自身触发+捕获或冒泡触发；
  .prevent.self相当于先阻止默认行为，再过滤掉捕获冒泡行为；
  .self.prevent相当于先过滤出来自身的行为，再阻止其中默认行为，而对捕获冒泡传播来的默认行为没有阻止。