一，Vue是什么

是一套构建用户界面的渐进式框架。Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

二，特点

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM：

<div id="app">
  {{ message }}
<div class="v-if"  v-if="show"> </div>
<div class="v-show"  v-show="show"> </div>
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

现在数据和 DOM 已经被绑定在一起，所有的元素都是响应式的

三，指令

条件与循环
v-if , v-show 条件，区别，v-if是显示和删除dom，v-show只是display:none;

v-for 遍历循环

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>
var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

绑定事件

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('')
    }
  }
})

v-bind 指令用于响应地更新 HTML 特性 形式如：v-bind:href 缩写为 :href;

v-on 指令用于监听DOM事件 形式如：v-on:click 缩写为 @click;

v-html=""

html: "通过<b>v-html</b>方式绑定,html标签在渲染的时候被解析了。",

v-text=""

       text: "通过<b>v-text</b>方式绑定,html标签在渲染的时候被源码输出了。

data()
methods
components
created vue的生命周期 用来触发事件
method用来定义方法的,比如你@click="test",methods就定义test这个方法

路由

v-router
axios

vuex

把同步操作放在mutations
异步操作放在actions

import axios from 'axios'
export default {
  name: 'projects',
  data: function () {
    return {
      projects: []
    }
  },
  methods: {
    loadProjects: function () {
      axios.get('/secured/projects').then((response) => {
        this.projects = response.data
      }, (err) => {
        console.log(err)
      })
    }
  },
  mounted: function () {
    this.loadProjects()
  }
}

根据 Vuex** 文档中的描述，Vuex 是适用于 Vue.js 应用的状态管理库，为应用中的所有组件提供集中式的状态存储与操作，保证了所有状态以可预测的方式进行修改。
Vuex 中 Store 的模板化定义如下：

import Vue from 'vue'import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
 state: { },
 actions: { },
 mutations: { },
 getters: { }, 
modules: { }
})
export default store

上述代码中包含了定义 Vuex Store 时关键的 5 个属性：

state: state 定义了应用状态的数据结构，同样可以在这里设置默认的初始状态。

state: { projects: [], userProfile: {}}

actions:Actions 即是定义提交触发更改信息的描述，常见的例子有从服务端获取数据，在数据获取完成后会调用store.commit()来调用更改 Store 中的状态。可以在组件中使用dispatch来发出 Actions。

actions: { LOAD_PROJECT_LIST: function ({ commit }) { 

axios.get('/secured/projects').then((response) => { commit
('SET_PROJECT_LIST', { list: response.data }) }, (err) => { console.log(err) }) } }

mutations: 调用 mutations 是唯一允许更新应用状态的地方。

mutations: { SET_PROJECT_LIST: (state, { list }) => { state.projects = list } }

getters: Getters 允许组件从 Store 中获取数据，譬如我们可以从 Store 中的 projectList 中筛选出已完成的项目列表：

getters:
{ completedProjects: state => 
{ return state.projects.filter(project => project.completed).length }}

</script>

脚手架