了解一下vue.js

每个 Vue 应用都需要通过实例化 Vue 来实现。在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id

<div id="app"></div>      new Vue({ el: '#app',data{  }});

data 用于定义属性，实例中有三个属性分别为：site、url、alexa

methods 用于定义的函数，可以通过 return 来返回函数值

{{ }} 用于输出对象属性和函数返回值

除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

Vue.js 为两个最为常用的指令提供了特别的缩写：

<a v-bind:href="url"></a> <!--缩写--><a :href="url"></a>

<a v-on:click="doSomething"></a> <!--缩写--><a @click="doSomething"></a>

过滤器

“|”，过滤器函数接受表达式的值作为第一个参数。

条件判断

<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

v-if，v-else，v-else-if，v-show="ok"

循环语句

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名

计算属性

计算属性关键词: computed，属性：getter，setter， 例如截取字符串，反转字符串

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

监听属性

关键词：watch，用法：vm.$watch('xx', function(xx) { xx});

样式绑定

v-bind:class

v-bind:style

事件修饰符

.stop阻止冒泡，阻止所有冒泡
.prevent阻止默认事件
.capture添加事件侦听器时使用事件捕获模式
.self只当事件在该元素本身（比如不是子元素）触发时触发回调，只能阻止当前元素冒泡
.once事件只触发一次
事件修饰符是可以串联的，.once和其他修饰符连用的时候，不在乎先后顺序

按键修饰符

<input v-on:keyup.enter="submit">

<!-- 缩写语法 --> <input @keyup.enter="submit">

.enter，.tab，.delete，.esc，.space，.up，.down，.left，.right，.ctrl，.alt，.shift，.meta

表单

关键词：v-model，在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定，v-model 指令用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

<!--自动输入值转为 Number 类型--><input v-model.number="age" type="number">

<!--在“change”而不是“input”事件中更新--><input v-model.lazy="msg">

<!--去除空格--><input v-model.trim="msg">