使用Vuex的实现数据共享&localStorage&keep-alive 使用Vuex的实现数据共享需求：我们点击城市页时首页的城市也能改变 City.vue和Home.vue是没有一个共用的父级组价的，这样两个页面是没有一个共用的父级组件进行中转。方法一：使用Bus总线(比较麻烦) 方法二：Vuex(数据框架)main.js引入store 12345678import store from './store'new Vue({ 2021-05-07 Vue项目实战 前端基础 Vue
Vue去哪儿项目&搜索功能实现 搜索功能实现 src\pages\city\components\Search.vue部分代码 1234567891011121314151617181920212223242526272829<div class="search-content" ref="search" v-show="keyword"><ul&g 2021-05-06 Vue项目实战 前端基础 Vue
Vue去哪儿项目&兄弟组件间联动&节流 兄弟组件间联动(重要)实现功能：点击城市列表页面右侧的字母，列表选项会滚动到对应的字母区域。 兄弟组件的传值，可以通过 bus 总线的形式来传值。但是因为我们现在这个非父子组件比较简单，可以让 Alphabet.vue 组件将值传递给父组件 City.vue 组件，然后 City.vue 组件再将值转发给 List.vue 组件，这样就实现了兄弟组件的传值。【子组件给父组件，父组件再转给另一个 2021-05-05 Vue项目实战 前端基础 Vue
Vue&v-for循环6种技巧 在最基本的用法中，它们的用法如下。 12345<ul> <li v-for='product in products'> {{ product.name }} </li></ul> 1.始终在v-for循环中使用key首先，我们将讨论大多数Vue开发人员已经知道的常见最佳做法— 2021-05-04 Vue 前端基础 Vue
Vue去哪儿项目&城市选择页面&动态数据渲染 城市选择页面路由配置 页面跳转 src\pages\home\components\Header.vue中 router-link to="/city"实现点击右上角页面跳转 123456<router-link to="/city"> <div class="header-right"> 2021-05-04 Vue项目实战 前端基础 Vue
Vue去哪儿项目&Ajax获取首页数据 Ajax获取首页数据–axios 项目安装axios 1npm install axios --save 分析：首页由5个组件组成，每一个组件都有自己的数据，那么每个组件都发送一个ajax请求。如果这样做首页就会发送5个ajax请求，网站的性能会很低。 解决：Home.vue组件中发送ajax是最好的选择，这个组件获取ajax请求的数据传给每个子组件中，只用请求一次。 引入axios 2021-05-03 Vue项目实战 前端基础 Vue
Vue去哪儿项目首页开发&首页轮播图&推荐组件开发 首页轮播图 第三方轮播插件使用 Github地址vue-awesome-swiper 安装：项目文件夹路径中,这里我们安装的是@2.6.7版本，其他版本可能兼容性等问题 1npm install swiper vue-awesome-swiper@2.6.7 --save 引用(这里我们引用到全局中，因为各个页面可能都会使用) main.js 1234567891011import Vu 2021-05-02 Vue项目实战 前端基础 Vue
Vue去哪儿项目首页开发&首页header区域 首页header区域 安装开发依赖包(项目目录下)stylus：CSS的预处理框架，即将stylus转换为css使用stylus-loader：让webpack理解stylus12npm install stylus --savenpm install stylus-loader --save 参考使用文章：『前端干货篇』：你不知道的Stylus张鑫旭大大的Stylus文章 使用过程 2021-05-02 Vue项目实战 前端基础 Vue
Vue去哪儿项目环境搭建 项目环境准备 安装node Gitee创建一个自己的仓库 git ssh本地免密 git clone 项目到本地电脑 全局安装vue-cli 项目初始化 项目启动 npm run dev 目录结构 123456789101112131415161718192021222324252627readme //项目的说明文件package.j 2021-05-01 Vue项目实战 前端基础 Vue
Vue&插槽 槽，也就是slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。 实际上，一个slot最核心的两个问题在这里就点出来了，是显示不显示和怎样显示。 由于插槽是一块模板，所以，对于任何一个组件，从模板种类的角度来分，其实都可以分为非插槽模板和插槽模板两大类。 非插槽模板指的是html模板，比如‘div、span、ul、table’这些，非插槽模板的显示与隐藏以及怎样显示由 2021-05-01 Vue 前端基础 Vue
