vue学习笔记

引入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 官方提供的一套 路由插件，能够帮助我们实现单页面应用

单页面应用

1. 单页面应用（Single Page Application | SPA ）
   整个页面只有一个html文件，页面的跳转不会刷新页面，就是单页面应用
2. 多页面应用
   项目中多个html a标签 location.href 跳转
   页面跳转回刷新页面
3. 为什么会使用单页面应用
   为了使得h5网站向原生app贴近，比如实现页面的转场动画，这时候出现单页面应用

vue 项目使用 vue-router

1. 安装

npm install --save vue-router

yarn add vue-router --save 

2. 在页面的某个位置选择一个坑，用来切换路由

  <router-view></router-view>

3. 在src下面创建 router.js 文件。这个文件去实例化 vue-rouer 的实例 并配置上规则。

Vue.use(VueRouter);

4. 在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 的区别

1. 表现形式不同hash有#号，history没有
2. 实现原理不同，hash的原理是通过onhashchange事件，history原理是基于html5中新增的history相关的api来实现的，history.push() history.replace() window.onpopstate
3. 上线之后的表现不同，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中

1. axios.get(url,config)
2. axios.post(url,data,config)
3. axios(config)

解决方法

<p>评分：{{filmsInfo.actors?filmsInfo.actors[0].name :''}}</p>
<p>评分：{{filmsInfo.actors&&filmsInfo.actors[0].name}}</p>