Vue&Vuex Vuex介绍Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 解决了多个视图依赖于同一状态和来自不同视图的行为需要变更同一状态的问题，将开发者的精力聚焦于数据的更新而不是数据在组件之间的传递上 多个视图依赖于同一状态。 来自不同视图的行为需要变更同一状态。 对于问题一，传参的 2021-05-07 Vue 前端基础 Vue
使用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
