Vue2.5开发去哪儿网App 第二章笔记

【Vue2.5开发去哪儿网App 第二章笔记】的更多相关文章

Vue2.5开发去哪儿网App 第二章笔记

Vue完成 TodoList 1.默认方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>TodoList</title> <script src="../../vue.js"></script> </head> <body> <…

主页划 5 个组件,即 header icon swiper recommend weekend 一. header区域开发 1. 安装 stylus npm install stylus --save cnpm install stylus-loader --save 2. 编写样式 <template> <div class="header"> <div class="header-left">返回</div>…

Vue2.5开发去哪儿网App 城市列表开发之 Vuex实现数据共享及高级使用

一,数据共享 1. 安装: npm install vuex --save 2. 在src目录下新建state文件夹,新建index.js文件 3. 创建一个 store import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { city: '上海' } }) 4.main.js中创建根实例时,传入store import store from '.…

Vue2.5开发去哪儿网App 第五章笔记上

1.css动画原理 .fade-enter{ opacity: 0; } .fade-enter-active{ transition: opacity 2s; } .fade-leave-to{ opacity: 0; } .fade-leave-active{ transition: opacity 2s; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8…

Vue2.5开发去哪儿网App 第三章笔记下

1.样式的绑定我们可以传给 v-bind:class 一个对象,以动态地切换 class 例如: :class="{activated:isactivated}" 上面的语法表示 activated 的更新将取决于数据属性 isActive 是否为真值 . 实现动态切换: <div @click="HandleDivClick" :class="{activated:isactivated}">hello world</…

Vue2.5开发去哪儿网App 第三章笔记上

1. vue 生命周期函数每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer).编译模版.挂载实例到 DOM ,然后在数据变化时更新 DOM .在这个过程中,实例也会调用一些生命周期钩子 ,这就给我们提供了执行自定义逻辑的机会生命周期图示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo…

Vue2.5开发去哪儿网App 从零基础入门到实战项目

第1章课程介绍本章主要介绍课程的知识大纲,学习前提,讲授方式及预期收获. 1-1 课程简介试看第2章 Vue 起步本章将快速讲解部分 Vue 基础语法,通过 TodoList 功能的编写,在熟悉基础语法的基础上,扩展解析 MVVM 模式及前端组件化的概念及优势. 2-1 课程学习方法 2-2 hello world 2-3 开发TodoList(v-model.v-for.v-on) 2-4 MVVM模式试看 2-5 前端组件化 2-6 使用组件改造TodoList 2-7 简单的组件间传…

Vue2.5开发去哪儿网App 搜索功能完成

效果展示: Search.vue: <div class="search-content" ref="search" v-show="keyword">  <ul>  <li class="search-item border-bottom" v-for="(city,index) in cityLi…

Vue2.5开发去哪儿网App 城市列表开发之兄弟组件间联动及列表性能优化

一, 兄弟组件间联动 1. 点击城市字母,左侧对应显示给遍历的字母添加一个点击事件: Alphabet.vue @click="handleLetterClick" handleLetterClick (e) { //获取对应的字母 this.$emit('change', e.target.innerHTML) } 在父组件City.vue 中,监听 <city-alphabet :cities="cities" @change="ha…