Vue

vue开发环境的搭建
npm是node的包管理工具，下载cnpm/ 下载vue-cli/ 创建一个基于webpack的模板/ 安装项目依赖cnpm install/ cnpm run dev每个键对应着一个值，通俗点的意思就是cnpm run什么键，就执行后面的语句
热更新是vue-cli手脚架的一个功能，通俗点讲，它的作用就是当编程人员在修改代码的时候，浏览器不用手动刷新就可以直接看到修改后的效果，大大提高了速度。

debug有过的坑

• partials组件不显示，在

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取，值只须为函数
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // -> 2
vm.aPlus = 3
vm.a       // -> 2
vm.aDouble // -> 4

生命周期钩子

生命周期钩子的一些使用方法：

beforecreate : 可以在这加个loading事件，在加载实例时触发 
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom

在实例中分别在每个生命周期钩子中 console.log(‘钩子名称’,this.number) 我们发现，第一次页面加载时
触发了 beforeCreate, created, beforeMount, mounted 这几个钩子，data 数据在 created 中可获取到。

再去 console.log(‘mounted: ‘, document.getElementsByTagName(‘p’)[0]) ，DOM 渲染在 mounted 中已经
完成。

我们再试着去更改 input 输入框中的内容，可以看到输入框上方的数据同步发生改变，这就是数据绑定的效果，在更
新数据时触发 beforeUpdate 和 updated 钩子，且在 beforeUpdate 触发时，数据已更新完毕。

而 destroy 仅在调用app.$destroy();时触发，对 vue 实例进行销毁。销毁完成后，我们再重新改变 number 的值，vue 不再对此动作
进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。

created: function () {
    this.fetchData()
  },

在 created 钩子中用声明的 fetchData 函数获取ajax异步数据并渲染到页面。

模板语法
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染（render）函数，使用可选的 JSX 语法。

一些指令能接受一个“参数”，在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

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

修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指定应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

过滤器，只能在 mustache 绑定和 v-bind 表达式（从 2.1.0 开始支持）中使用，因为过滤器设计目的就是用于文本转换。为了在其他指令中实现更复杂的数据变换，你应该使用计算属性。

计算属性

Vue 提供一个更通用的方法通过 watch 选项，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或昂贵操作时，这是很有用的。

watcher computed methods

值、键、索引

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }} : {{ value }}
</div>

Vue 允许为 v-on 在监听键盘事件时添加按键修饰，

全部的按键别名：

.enter
.tab
.delete (捕获 “删除” 和 “退格” 键)
.esc
.space
.up
.down
.left
.right
可以通过全局 config.keyCodes 
对象自定义按键修饰符别名：

// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel

语法糖
v-model是v-bind和v-on的语法糖

Vue 组件的 API 来自三部分 - props, events 和 slots ：

Props 允许外部环境传递数据给组件 没有的时候渲染

Events 允许组件触发外部环境的副作用

Slots 允许外部环境将额外的内容组合在组件中。插槽

v-text、v-for、v-bind

<template>
  <div id="app">
    <h1>{{title}}</h1>
    <ul>
      <li v-for="item in items" v-bind:class="[{finished: item.isfinished}]">
        {{item.label}}
      </li>
    </ul>
  </div>
</template>

<script>
export default{
  data () {
    return {
      title: 'this me ',
      items: [
        {
          label: 'coding',
          isfinished: true 
        },
        {
          label: 'walking',
          isfinished: false
        }
      ],
      liclass: 'thisisli'
    }
  }
}
</script>

<style scoepd>

</style>

重点内容
Storage 输入内容之后需要存储，以便刷新页面之后保持页面数据不丢失，可以使用localStorage方法存储