引入Swiper 模块
yarn add swiper --save
// 引入 Swiper 模块
import Swiper from “swiper”;
// 引入 Swiper 的 css
import “swiper/swiper-bundle.css”;
this.$el
指向当前组件的DOM元素,单复用组件的时候,new实例可以使用 this.$el
vue-router
vue-router 是 vue 官方提供的一套 路由插件,能够帮助我们实现单页面应用
单页面应用
- 单页面应用(Single Page Application | SPA )
整个页面只有一个html文件,页面的跳转不会刷新页面,就是单页面应用 - 多页面应用
项目中多个html a标签 location.href 跳转
页面跳转回刷新页面 - 为什么会使用单页面应用
为了使得h5网站向原生app贴近,比如实现页面的转场动画,这时候出现单页面应用
vue 项目使用 vue-router
- 安装
npm install --save vue-router
yarn add vue-router --save
- 在页面的某个位置选择一个坑,用来切换路由
<router-view></router-view>
- 在src下面创建 router.js 文件。这个文件去实例化 vue-rouer 的实例 并配置上规则。
Vue.use(VueRouter);
- 在main.js 中 配置一个选项 配置一个router 选项,选项就是第三步中暴露出的实例
router.js 页面
如何实例化 vue-router
// 1 引入 vue
import Vue from 'vue';
// 2 引入 vue-router
import VueRouter from 'vue-router'
// 3 引入需要用到的路由页面组件
import PageA from './views/PageA.vue'
// 4 vue-router 是 vue 的插件需要使用 Vue.use() 方法去调用
Vue.use(VueRouter);
// 5 定义路由规则 routers
const routers = [
{
path:'/a',
component:PageA
},
{
path:'/b',
component:PageB
}
]
//6 实例化 routers
new router =({
routers:routers
})
// 7 暴露实例化对象
export default router;
// 以上在 router.js 页面 ,下面需要到main.js 调用暴露出来的router
// 1 引入
import router form './router.js'
new Vue =({
router:router,
render: h => h(App)
}).$mount('#app')
备注:用上路由的是路径地址变为 路由哈希显示
http://localhost:8080/#/ ,会多一个/#/
配置好路由 vue-router 不跳转
// 里面的 routes 写成了 routers !!!
const router = new VueRouter({
routes: routers
})
路由两种模式hash 与 history 的区别
- 表现形式不同hash有#号,history没有
- 实现原理不同,hash的原理是通过onhashchange事件,history原理是基于html5中新增的history相关的api来实现的,history.push() history.replace() window.onpopstate
- 上线之后的表现不同,hash不会有问题。而history可能会出现404问题,需要服务器那端做配置
$route
项目中使用 vue-router 。这时,当前项目的每一个vue组件,都会自动获取到一个 $route 数据。这个数据中存放的是匹配当前路由的信息对象
router-link
/**
tag router-link特有的属性
**/
<router-link
to="/需要跳转的路径"
tag="li"
></router-link>
关于页面跳转:可以使用 js来实现,而不使用router-link。
需要用到的是 $router(路由实例对象)。他身上有一些方法
- $router.push() 普通 router-link 的跳转
- $router.replace() 重定向跳转,替换普通跳转的历史记录
- $router.back() 后退
- $router.go() 前进/后退 go(-1) 可以使用数字
- $router.forward()
vue-cli4 引用 jQuery
//先安装 jquery
yarn add jquery --save
//2、项目根目录下新建文件夹 vue.config.js 如下
const webpack = require('webpack');
module.exports = {
configureWebpack: {//引入jquery
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"windows.jQuery": "jquery"
})
]
},
}
// 3 在需要用到 jQuery 的页面 引入
import $ from 'jquery';
页面渲染
数据没有及时渲染,控制栏报错
这种情况:页面是会出现数据的,只是在页面最开始渲染的时候没有出现。
//ajax返回的数组对象,如果定义为null 页面调用的时候 控制栏会提示错误
ajaxInfo:null
// 修改方式
ajaxInfo:{}
axios 与 fetch
在vue 或者后续的react 中,发送ajax请求使用jQuery的话,特别不明智
vue-resource
vue的作者尤大在vue1.x的版本中使用的,但是在vue2.x的时候,作者就不维护换个库了。强烈推荐我们使用axios
axios
是一款基于 Prosmise 封装的 网络请求工作,可以用在前端也可以用在后端 node中
- axios.get(url,config)
- axios.post(url,data,config)
- axios(config)
解决方法
<p>评分:{{filmsInfo.actors?filmsInfo.actors[0].name :''}}</p>
<p>评分:{{filmsInfo.actors&&filmsInfo.actors[0].name}}</p>