vue-router

一 . 在组件中使用 axios 获取数据 1. 安装和配置 axios 默认情况下，我们的项目中并没有对 axios 包的支持，所以我们需要下载安装。 在项目根目录中使用 npm 安装包 npm install axios 接着在 main.js 文件中，导入 axios 并把 axios 对象 挂载到 vue 属性中作为一个子对象，这样我们才能在组件中使用 。 // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import axios from 'axios' // 从node_modules目录中导包(这样写就行) Vue.config.productionTip = false; Vue.prototype.$axios = axios; // 把对象挂载到Vue中 /* eslint-disable no-new */ new Vue({ el: '#app', components: { App }, template: ' < App /> ' });

项目分析 首页 导航、登录注册栏、轮播图、地板导航 登录注册 选项卡 免费课 课程分类、筛选、课程列表 免费课详情 课程封面视频、优惠活动倒计时、选项卡 我的购物车 全选、商品价格统计 购买结算 购买成功 我的订单 课时播放页面 项目搭建 创建项目目录 cd 项目目录 vue init webpack luffy # 例如：我要把项目保存在桌面下 ~/Desktop/luffy ，可以如下操作： cd Desktop vue init webpack luffy 根据需要在生成项目时，生成选择对应的选项 根据上面的提示，我们已经把vue项目构建好了，接下来我们可以在pycharm编辑器中把项目打开并根据上面黄色提示，运行测试服务器。 cd luffy npm run dev 初始化项目 清除默认的HelloWorld.vue组件和APP.vue中的默认模板代码和默认样式 < template > < div id ="app" > </ div > </ template > < script > export default { name: ' App ' , components: { } } </ script > < style > </ style > 安装路由 vue-router 下载路由组件 npm i vue-router -S 配置路由 1

1. 2. 3.后台修改 vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息. 这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base ? 1 2 // base: '/history', // mode: 'history', 这个base即为项目路径. 以上两个都解决了,还是会发现,此时只有首页能访问,通过首页点进去其他路由也是可以的,但是如果在其他路由刷新就有错误了,这个懂history模式的也应该知道,history模式是h5 api的 history.pushState,相对于是浏览器模拟了一条历史,而真正服务器上没有这个路径资源,为什么hash模式不存在这个问题呢?hash模式是带#,这个服务器不会解析,相对于还是返回html而已,index.html会根据vue路由去解析,而history模式则会请求服务器上的此地址,服务器上没有相关路径就会报错了,vue-router的官方文档有介绍各种配置,比如ngnix的配置 ? 1 2 3 location /

目录 [toc] 引言：该篇主要讲的是关于vue-router的原理以及使用等问题，以及面试中常被问到的几个点，有部分还未整理后续会继续更新； 1.vue-router 是什么? Vue-router就是WebApp的链接路径管理系统。vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的，适合用于构建单页面应用 在之前常用的是用a标签进行跳转，现在做的是单页面应用，所以必须使用v-router进行管理 2.如何使用v-router? 1. 下载 cnpm i vue-router -S 2.在index.js中引入路由的核心模块 import VueRouter from 'vue-router' 3.注册路由插件 Vue.use(VueRouter) 4.创建路由对象并且配置路径 这里有两种情况， 一级路径 例如 "/film"可以如下写法即可，表示跳转/cinema页面渲染Cinema组件 注意：别忘了引入该组件 const routes = [ { path: '/cinema', component: Cinema } ] 嵌套路由 ： 这种情况下不会把cinema的组件内容覆盖 可以实现单组件切换内容 跟选项卡效果差不多 <img src='https://img2018.cnblogs.com/blog/1918240/202002

二、vue项目的初步搭建 该项目我采用了当下最流行的vue ui框架---element-ui，首先用vue-cli构建一个vue项目: vue create education 然后会出现一系列配置选项，此时一直回车就好： 然后进入项目文件夹，输入: npm run serve 出现以上情况，则说明运行成功，此时，在浏览器打开链接 http://localhost:8080/，会看到如下界面： 然后安装element-ui**（一定要在该项目根目录下安装）**： npm i element-ui -s 将element-ui引入自己的项目： #main.js import Vue from 'vue' import App from './App.vue' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app') 三、vue-router的安装和基本配置 用以下命令安装： npm install vue-router 出现了warning，不用理会 然后将其引入项目中：

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统; 指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性; v-for 指令可以绑定数组的数据来渲染一个项目列表; 为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法; Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。 可以使用 v-bind 指令将待办项传到循环输出的每个组件中; 一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。 除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。 <div v-for="item in items" :key="item.id"> <!-- 内容 --> </div> 建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单

Vue.js面试题整理 一、什么是 MVVM ？ MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象（桥梁）。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。 二、 mvvm 和 mvc 区别？它和其它框架（ jquery ）的区别是什么？哪些场景适合？ mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验

1、vue中 key 值的作用 key 的特殊属性主要用在 Vue的虚拟DOM算法，在新旧nodes对比时辨识VNodes。如果不使用key，Vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key，它会基于key的变化重新排列元素顺序，并且会移除key不存在的元素。 有相同父元素的子元素必须有 独特的key 。重复的key会造成渲染错误。 最常见的用例是结合 v-for: 1 2 3 < ul > < li v-for="item in items" :key="item.id">...</ li > </ ul > 它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用: 完整地触发组件的生命周期钩子 触发过渡 1 2 3 < transition > < span :key="text">{{ text }}</ span > </ transition > 当 text 发生改变时，<span> 会随时被更新，因此会触发过渡。 2、vue中子组件调用父组件的方法 子组件调用父组件的方法可以使用this.$emit() 3、vue等单页面应用及其优缺点 优点： 1、具有桌面应用的即时性、网站的可移植性和可访问性。 2、用户体验好、快，内容的改变不需要重新加载整个页面。 3、基于上面一点，SPA相对对服务器压力小。

序 就在今天凌晨 4 点左右，vue-next v3.0.0-beta.1 版本发布，这意味着 Vue 3.0 全家桶正式登场，发布内容包括： vue: Beta vue-router: Alpha vuex: Alpha vue-class-component: Alpha vue-cli: Experimental support via vue-cli-plugin-vue-next eslint-plugin-vue: Alpha vue-test-utils: Alpha vue-devtools: WIP jsx: WIP 可以看到 Vue 3.0 beta 版本是一个项目系列，包含了我们在开发过程中需要的套件、webpack 插件等等，本文将带大家快速搭建基于 Vue 3.0 的项目框架，这和之前很多 Vue 3.0 的 Demo 不同，是具备商业化项目能力的框架，本文将包括以下内容： 基于 vue-cli 快速搭建 Vue 3.0 项目 Vue 3.0 基本特性体验 集成 vue-router 和 vuex 4.0 说个题外话，今天中午我搭建 Vue 3.0 项目时，发现了 vue-router-next 一个 block 级别的 BUG，想在 vue-router-next 项目 issue 中反馈时，发现已经有人提交了相似问题，随后晚上测试时，bug 已经被

Vue中Vue-router的作用是什么？并简述用法 vue Router 是Vue.js官方的路由管理器 作用是: 1.通过<router-link>完成组件的切换 2. 通过this.$route完成组件的传参 3.通过this.$router.push完成组件的跳转 Vuex怎么实现数据共享的？ 1. vue整合vuex，在main.js文件中，vue以组件的方式导入store.js 2. 将数据存放到 store.js 的 state 区域，任何位置都可以引用。 3. 通过store.js的 mutations可以对state区域的数据进行更新。 通过读写最终达到数据的共享 Vuex的五大核心属性是什么？ Vue有五个核心概念，state, getters, mutations, actions, modules。 state => 基本数据 getters => 从基本数据派生的数据 mutations => 提交更改数据的方法，同步！ actions => 像一个装饰器，包裹mutations，使之可以异步。 modules => 模块化Vuex 来源： oschina 链接： https://my.oschina.net/u/4497278/blog/3275635