使命
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。