入门专题-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。