Vue第一天

Vue介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue安装

1.直接script引入
直接下载并用script标签引入，vue会注册为一个全局变量。如果写代码的话，建议下载开发版本，在开发环境下不要使用压缩版本，不然就会失去了所有常见错误的相关警告

npm i vue

2.在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

命令行工具

Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验，以及生产环境可用的构建版本
##解析Vue文件方法
下载vue-loader，.vue的文件才会解析

Vue的使用

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

输出：

Hello Vue!

el后边是要绑定的标签ID
data是数据

条件指令

v-if

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

现在你看到我了

1.v-if指令 值为真则显示，值未假，则不显示，v-if是惰性的，如果初始条件为假，则什么也不做
2.v-if判断是否加载，可以减轻服务器的压力，在需要时加载,但有更高的切换开销
3.如果在运行时条件很少改变，使用 v-if 较好，但v-if有更高的切换消耗，v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

事件监听器

v-on

简写:@

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

这是一个实现点击功能的代码，点击按钮会将页面上显示的Hello Vue.js!显示为!sj.euV olleH
v-on:click可以简写为@click，后面的值是函数名，函数一定要写在methods里面

数据的双向绑定

v-model

简写方式（:）

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

结果是你在输入框输入什么，然后在p标签输出什么