vuejs简介

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