vuejs简介

Vue.js简介译泰前端沙龙一期Vue.js是什么是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计，Vue的核心库只关注视图层。Vue配合其生态系统支持的库（如vue-router、vuex等），也可以为复杂的单页应用提供驱动。安装•html页面通过script直接引入scriptsrc=•Vue.js官方命令行工具vue-cli#全局安装vue-cli$npminstall--globalvue-cli#创建一个基于webpack模板的新项目$vueinitwebpackmy-project#安装依赖$cdmy-project$npminstall$npmrundevvue-cli#2.0项目结构分析•|--build//项目构建(webpack)相关代码•||--build.js//生产环境构建代码•||--check-version.js//检查node、npm等版本•||--dev-client.js//热重载相关•||--dev-server.js//构建本地服务器•||--utils.js//构建工具相关•||--webpack.base.conf.js//webpack基础配置•||--webpack.dev.conf.js//webpack开发环境配置•||--webpack.prod.conf.js//webpack生产环境配置•|--config//项目开发环境配置•||--dev.env.js//开发环境变量•||--index.js//项目一些配置变量•||--prod.env.js//生产环境变量•||--test.env.js//测试环境变量vue-cli#2.0项目结构分析•|--src//源码目录•||--components//vue公共组件•||--store//vuex的状态管理•||--App.vue//页面入口文件•||--main.js//程序入口文件，加载各种公共组件•|--static//静态文件，比如一些图片，json数据等•||--css//css文件•|--.babelrc//ES6语法编译配置•|--.editorconfig//定义代码格式•|--.gitignore//git上传需要忽略的文件格式•|--README.md//项目说明•|--favicon.ico•|--index.html//入口页面•|--package.json//项目基本信息项目实例：•安装引入#安装vue-router$npminstallvue-router#引入vue$importVuefrom'vue'#引入vue-router$importVueRouterfrom'vue-router'#使用vue-router$Vue.use(VueRouter)vue-router•HTMLtemplatedivid=approuter-linkto=/index首页/router-linkrouter-linkto=/homeHOME/router-link!--路由出口--!--路由匹配到的组件将渲染在这里--router-view/router-view/div/templatevue-router•JavaScript（先在js文件中引入vue-router模块）生命周期钩子生命周期钩子怎么用？•beforecreate:可以在这加个loading事件•created：结束loading，做一些初始化，实现函数自执行•mounted：在这发起后端请求，拿回数据模板语法•插值•指令pv-if=seenNowyouseeme/pav-bind:href=url/aav-on:click=doSomethingformv-on:submit.prevent=onSubmit/form修饰符模板语法•过滤器•缩写a:href=url/aa@click=doSomething/aav-bind:href=url/aav-on:click=doSomething/a计算属性PS:method也可以实现相同的效果。区别：计算属性是依赖缓存的，method的是只要发生重新渲染就会执行该函数。class绑定•class绑定对象语法divclass=staticv-bind:class={active:isActive,'text-danger':hasError}/divdivv-bind:class=classObject/div直接绑定对象•class绑定数组语法divv-bind:class=[activeClass,errorClass]data:{activeClass:'active',errorClass:'text-danger'}divv-bind:class=[isActive?activeClass:'',errorClass]列表渲染•数组ulid=example-2liv-for=(item,index)initems:key=”item.id”{{index}}-{{item.message}}/li/ul•对象divv-for=(value,key,index)inobject{{index}}.{{key}}:{{value}}/div表单控件绑定