入门专题-VUEJS

使命

vuejs是一个前端js框架
mvvm,数据驱动
可开发单页面应用程序（SPA）
传统多页面开发也可以引用

开发环境

具体安装，百度上导出都是，不在赘述
1.nodejs安装（基础）
2.npm安装（包管理工具）
3.cnpm镜像（淘宝镜像）
4.vue-cli脚手架工具（非必须）
5.IDE（HBuilder,WebStorm,vs…）

涉及主要概念

component

组件，.vue文件，通过模板实现<template>，如App.vue：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
    <input v-model="testinput" />
    <h1 v-text="inputFilter(testinput)"></h1>
  </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      testinput: 'hehe'
    }
  },
  filters: {

  },
  methods: {
    show () {
      this.testinput = 'haha'
    },
    inputFilter: function (input) {
      console.log(input)
      return input + 'q'
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

组件在使用时必须先导入和注册，如App组件：

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

指令

通过指令绑定数据状态，如v-model，详细查看vuejs官方文档

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
    <input v-model="testinput" />
    <h1 v-text="inputFilter(testinput)"></h1>
  </div>
</template>

钩子函数

存在于vue页面生命周期中的各个阶段，详见官方文档。

状态管理（vuex）

组件之间的数据状态传递。

路由（vue-router）

组件之间的跳转，实现单页面中的各个模块的切换。

后台交互（类ajax）

vuejs有自己的交互插件，vue-resource，官方推荐axios。