Vue1.0 的技术栈
vuejs概述
Vue.js是用于构建交互式的Web界面的库。它提供了MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。
结合node.js 可以实现前后端开发从物理上的分离。使前端负责View和Controller层，后端负责数据接口，数据存储。
感兴趣可以看淘宝ued 《前后端分离的思考与实践》
vuejs有以下几个特点
1.使用简单, 如：
<body>
<div id="app">
<p>{{ note }}</p>
<input type="text" v-model="note">
</div>
</body>
var vm = new Vue({
el: '#app',
data: {
note: ''
}
})
2.外观优雅
<a @click="doSomething"></a>
<a :href="url"></a>
<a @click.stop="doSomething"></a> //阻止单击事件冒泡
<input @keyup.enter="submit"> //只在按下回车键的时候触发事件
<input v-model="msg" lazy> //lazy: 在'change'而不是'input'事件中更新数据
3.小巧灵活
gzip压缩后只有25.11kb。
松耦合，和路由模块, 网络请求模块，数据模块 等相分离，可单独使用。
4.功能强大
- 模块化，可以直接使用ES6的模块化功能，再结合Webpack进行相应打包是目前最热门的方案。
- 组件化， 通过将页面上某一组件的html、CSS、js代码放入一个.vue的文件中进行管理可以大大提高代码的维护性。如：
<template>
<div class="box" v-text="note"></div>
</template>
<script>
export default {
data () {
return {
note: '这是一个组件的html模板！'
}
}
}
</script>
<style scoped>
.box {
color: #000;
}
</style>
- 路由，结合 vue-router 可以实现各个组件的按需加载，轻松构建单页应用。如：
export default (router) => {
router.map({
'*': {component: require('./components/not-found')}, //not found handler
'/': {component: require('./components/index')},
'/login': {component: require('./components/login')},
'/field': {component (resolve) { require(['./components/defconfig/field'], resolve) }},
'/stat': {component (resolve) { require(['./components/defconfig/stat'], resolve) }}
})
}
使用
- 装 node 版本: v6.3.0
- 装 npm 版本: 3.10.3
- 运行命令: npm install 安装插件 、npm run dev 运行项目
相关工具
- FQ工具： lantern
- Sublime Text3 安装 Package Control 安装插件：EditorConfig、Vue Syntax Highlight
- chrome插件 安装 Vue.js devtools(调试vue) Google翻译插件
- 抓包工具 fiddler
