07-vue(vue-li入口文件main.js分析,css作用域控制,路由原理,路由vue-router插件的使用,仿网易简单案例用vue-router,element轮播图)

最新推荐文章于 2024-05-01 01:09:13 发布
最新推荐文章于 2024-05-01 01:09:13 发布
阅读量368 收藏 1
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tangoneone/article/details/106089275
版权

01-Vue-cli 入口文件main.js分析

  1. main.js中
    1. 创建了最外层的Vue实例
    2. 把App.vue这个组件，当做Vue实例内部的最顶级组件并渲染出来
    3. 和public/index.html 中的那个id为app的div关联起来
      简单来说,main.js会弄好一些内容,然后把这些内容替换index.html里面的那个id为app的标签
    public/index.html 文件:
 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>我是index.html文件</title>
</head>
<body>
 
  <!-- 不管是不是div都无所谓，最主要是id="app" -->
  <!-- <div id="app"></div> -->
  <span id="app1"></span>
</body>
</html>
App.vue:
<template>
  <div>
    <p>我是父组件</p>
  </div>
</template>

<script>
export default {

}
</script>

<style>
  p {
    width: 200px;
    height: 200px;
    background-color: red;
  }
</style>
main.js文件
// 导入vue.js
import Vue from 'vue'
// 导入主组件App.vue
import App from './App.vue'

// 生产提示. 
 Vue.config.productionTip = false

//创建vue实例
//默认写法
// new Vue({
//   render: h => h(App),
// }).$mount('#app1')


//变形写法
//$mount('#app1')是  el:'#app1' 的另外一种写法
new Vue({
  el:'#app1',
  //渲染一个东西,替换#app1
  //render: h => h(App),

  render: (createElement)=>{
    return createElement(App);

    // return createElement('strong',{
    //   style:{
    //     display:'inline-block',
    //     width:'200px',
    //     height:'200px',
    //     backgroundColor:'green'
    //   }
    // });

  }

  // main.js  入口js文件. 
  // 主要就是将index.html 和 App.vue建立 一个联系. 

})

效果说明
在这里插入图片描述

02-css作用域控制 :

不加scoped是全局样式，引入它的地方都可以用，加了scoped，只管自己和自己子组件最外层
  1. scoped处理css,让它作用域只是相对自己当前组件，不包括自己子组件，但同时可控制子组件最外层的标签样式
  2. 简单理解 就是加了scoped就是只是作用于当前自己这个vue文件，不包括其它任何文件（但当前自己组件的子组件的最外层还是可以控制到），但不加就会造成在使用该组件时，它里面的样式就变成了全局样式，
App.vue(主组件):
<template>
  <!-- 
  css作用域: 
  1. 不管是主组件还是子组件, 在style中不加scoped写样式 都是全局的. 
  2. 如果在style中加了scoped写样式,那就是一个私有样式. 
     但是他会作用他引入的子组件最外层的那个标签. 
  -->
  <div>
    <div class="box">我是父组件</div>
    <br />
    <!-- 使用子组件 -->
    <son></son>
  </div>
</template>

<script>
// 导入子组件
import son from "./components/son";
export default {
  //注册组件
  components: {
    son
  }
};
</script>

<style scoped>
/* 这里写的不就是私有的样式吗 */
.box {
  width: 200px;
  height: 200px;
  background-color: green;
}
</style>

<style >
/* 这里写的不就是全局的样式吗 */
</style>
son.vue(子组件):
<template>
  <div class="box">
    <div class="box box2">我是子组件</div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
 div {
   width: 50px;
   height: 50px;
   background-color: blue;
 }
</style>

效果说明 此时父组件里面.box类是作用于自己的div盒子并且作用于自己的子组件的最外层
子组件的div类本身是作用于最外层的,但是div权重没有.box的大,所以外层就还是.box起作用(绿色),
子组件本身除外层外的里面那层肯定就还是div得css起作用(蓝色)在这里插入图片描述

03-路由

路由是什么:

路由其实就是一个指向，把路径指向相应的组件地址

路由的原理:

根据hash值的不同展示 不同的组件

one.vue(子组件)
<template>
  <div>
    <div>我是a页面</div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
  div {
    width: 100%;
    height: 300px;
    background-color: red;
  }
</style>
two.vue(子组件)
<template>
  <div>
    <div>我是b页面</div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
  div {
    width: 100%;
    height: 300px;
    background-color: green;
  }
</style>
App.vue(主组件)
<template>
  <div>
    <a href="#/one">点我看a页面</a> &nbsp;&nbsp;&nbsp;
    <a href="#/two">点我看b页面</a>
    <br><br>
    <!-- 使用组件 -->
    <one v-if="hashValue === '#/one'"></one>
    <two v-else></two>
  </div>
</template>

<script>
//导入子组件
import one from './components/one'
import two from './components/two'
export default {
  //注册子组件
  components:{
    one,
    two
  },
  data() {
    return {
      hashValue:""
    }
  },
  created() {
    //这个生命周期函数只会执行一次. 
    this.hashValue = window.location.hash;
    //给window注册一个hash值改变事件, 也就是说只要hash值发生了改变, 就会触发这个事件. 
    window.onhashchange = ()=>{
      this.hashValue = window.location.hash;
    }
  },
}
</script>

<style>

</style>

效果说明: 浏览器地址栏的hash值是自己手动输上去的,弄了两个a标签之后,就自动将那个浏览器地址弄成localhost:8082/#/one或者two了,
created函数只执行一次,所以必须加上那个onhashchange事件才可以点不同的a标签跳到不同的页面
点击"点我看a页面",出现红色那个我是a页面,
点击"点我看b页面",出现绿色那个我是b页面
在这里插入图片描述
在这里插入图片描述

04路由的基本使用(vue-router来实现):

1. 安装插件（注意在项目所在目录进行安装）
npm i vue-router
2. 导入插件
在哪里导入插件呢？vue-router是vue的一个插件，也是一个全局的控制 ，所以最终是要挂载到new Vue上的,new Vue是在main文件中执行的，所以vue-router也就得在main文件中导入:
import VueRouter from ‘vue-router’

3. 注册插件, 在vue中，router在vue中要全局使用，是需要注册才行的, Vue.use(VueRouter)

4. 实例化router
let router = new VueRouter({ }) //router实例化

 //配制router使用规则 
  let router = new VueRouter({  
   routes:[ // 路由规则配置，我们说了，路由就是一个地址与组件的一个指向，这个规则就是配制在这里的
       {
       path: 地址路径，    //这里配制一个路径地址
       component: 组件名   //这里对应一个.vue组件 ，也就是import一个组件，在这对应上
       }
       ] 
  })

5. 把实例注入到 new Vue
new Vue({
router //这里的router就是上面所实例化的router
})

6. 路由出口，
app.vue中写上一个标签，router-view标签
router，需要把组件渲染在哪一个位置
router-view标签将来会被匹配到的路径对应的组件替换掉


main.js文件:
import Vue from 'vue'
import App from './App.vue'
// 导入子组件
import one from './components/one.vue'
import two from './components/two.vue'

Vue.config.productionTip = false

//1.安装vue-router插件,在当前项目目录下安装npm i vue-router
//2.导入vue-router插件  import xx from  ''
import VueRouter from 'vue-router';
//3.注册
Vue.use(VueRouter);
//4.实例化和配置
let router = new VueRouter({
  //配置
  routes:[
    {
      path:'/',  //地址
      component:one  //对应的页面组件
    },
    {
      path:'/one',  //地址
      component:one  //对应的页面组件
    },
    {
      path:'/two',  //地址
      component:two  //对应的页面组件
    }
  ]
});
//5.挂载到new Vue中
//6.路由出口

new Vue({
  render: h => h(App),
  router
}).$mount('#app')
App.vue(主组件)
<template>
  <div>
    <a href="/#/one">点我看one页面</a>&nbsp;&nbsp;
    <a href="/#/two">点我看two页面</a>
    <!-- 6.路由出口,路由搬运工 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>
one.vue(子组件)
<template>
  <div>
    <div>我是one页面</div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
div {
  width: 100%;
  height: 300px;
  background-color: red;
}
</style>
two.vue(子组件)
<template>
  <div>
    <div>我是two页面</div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
div {
  width: 100%;
  height: 300px;
  background-color: green;
}
</style>

效果展示: 点击不同的a标签出来不同的页面在这里插入图片描述
在这里插入图片描述

05-仿网易路由

main.js文件:
import Vue from 'vue'
import App from './App.vue'

// 导入子组件
import findmusic from './components/findmusic'
import mymusic from './components/mymusic'
import friend from './components/friend'


Vue.config.productionTip = false

// 1.安装插件vue-router,当前项目目录下安装
// 2.导入插件
import VueRouter from 'vue-router'

// 3.全局注册
Vue.use(VueRouter)
// 4.实例化和配置
const router = new VueRouter({
  routes: [
    {
      path: '/',
      component:findmusic
    },
    {
      path: '/findmusic',
      component:findmusic
    },
    {
      path: '/mymusic',
      component:mymusic
    },
    {
      path: '/friend',
      component:friend
    },
  ]
})
  
//5.挂载到newVue
new Vue({
  render: h => h(App),
  router
}).$mount('#app')
//6.路由出口  <router-view></router-view>

// 路由出口，告诉router，需要把组件渲染在哪一个位置
// app.vue中写上一个标签，<router-view></router-view>
// router-view标签将来会被匹配到的路径对应的组件替换掉
findmusic.vue(子组件):
<template>
  <div>
    <img src="../assets/findmusic.png" alt />
  </div>
</template>

<script>
export default {};
</script>

<style>
img {
  width: 100%;
}
</style>
friend.vue文件(子组件):
<template>
  <div>
    <img src="../assets/ friend.png" alt />
  </div>
</template>

<script>
export default {};
</script>

<style>
img {
  width: 100%;
}
</style>
mymusic.vue文件(子组件):
<template>
  <div>
    <img src="../assets/mymusic.png" alt />
  </div>
</template>

<script>
export default {};
</script>

<style>
img {
  width: 100%;
}
</style>
App.vue(主组件):
<template>
  <div>
    <div class="top">
    <!--三种控制跳转-->
      <!-- router-link的基本使用(a标签的一种vue写法): 其实本质上呢也是一个a标签.  -->
      <router-link to="findmusic" class="link">发现音乐</router-link>

      <!-- 编程式导航 -->
       <!-- <span class="link" @click="goFindMusic">发现音乐</span>-->
      <span class="link" @click="goMyMusic">我的音乐</span>

      <!-- <a class="link" href="/#/findmusic">发现音乐</a>
      <a class="link" href="/#/mymusic">我的音乐</a> -->
      <a class="link" href="/#/friend">朋友</a>
    </div>
    <!-- 路由出口,路由搬运工 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    goFindMusic(){
      this.$router.push('/findmusic');//这里的路径就是前面路由routes所配置的路由地址. 
    },
    goMyMusic(){
      this.$router.push('/mymusic');
    }
  },
};
</script>

<style scoped>
* {
  margin:0px;
  padding:0px;
}
.top {
  height: 70px;
  background-color:#242424;
  text-align: center;
  line-height: 70px;
  border-bottom: 2px solid red;
}
.top .link {
  text-decoration: none;
  color: #fff;
  padding-left: 18px;
  padding-right: 18px;
  display: inline-block;
}
.top .link:hover {
  background-color: #000000;
}
</style>

效果说明: 不同的路由对应的不同的组件,“发现音乐”,“我的音乐”,"“朋友”,在这里插入图片描述

06-element轮播图:

element轮播图的使用方法:

  1. 创建vue-cli vue create 项目名

  2. 安装elementui

  3. 导入elementui

    1. // 导入组件与css

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

// 注册

Vue.use(ElementUI);

  4. 使用组件

    1. 复制粘贴
main.js文件:
import Vue from 'vue'
import App from './App.vue'
/*
  使用elementui来做轮播图
  1.安装这个插件
    npm i element-ui -S
  2.导入这个插件
    a.导入插件本身
    b.导入这个插件相关的css文件
  3.注册
  4.使用这个插件  
*/

// 1.2.安装导入组件与css
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

// 3.注册插件
Vue.use(ElementUI);
// 4.使用这个插件 在App.vue中

new Vue({
  render: h => h(App),
}).$mount('#app')
App.vue(主组件),是复制的elementui插件中的代码:

element网站: link.

<template>
<!-- 4.使用组件 -->
  <el-carousel :interval="5000" arrow="always" height="600px">
    <el-carousel-item v-for="(item, index) in list" :key="index">
      <img :src="item.imageUrl" alt="">
    </el-carousel-item>
  </el-carousel>
</template>

<script>
/**
 * 1.安装axios
 * 2.导入axios
 * 3.使用axios
 */

// 2.导入axios
import axios from "axios";
export default {
  data() {
    return {
      list: []
    };
  },
    //生命周期created钩子函数
  created() {
    axios({
      url: "http://183.237.67.218:3000/banner",
      params: {
        xxx: Math.random() * 999
      }
    }).then(res => {
      //console.log(res);
       //把返回的图片给保存起来. 
      this.list = res.data.banners;
    });
  }
};
</script>
<style>
img{
  width: 100%;
}
</style>

效果说明: 点击按钮可以左右滑动,每隔5秒自动滑动在这里插入图片描述

大力99
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue-Router的使用详解
nanxing的博客
07-07 755
Vue-Router的使用详解认识路由渲染 & 路由URL的hash & HTML5的History使用 vue-router基本使用其他小补充router-link属性路由懒加载 (常用)动态路由基本使用获取动态路由的值匹配多个参数NotFound路由的嵌套代码实现路由跳转query方式的参数发送接收router-link的补充router-link的插槽router-view的补充router-view的插槽动态添加路由路由守卫 认识路由 渲染 & 路由 后端渲染 & 前
精品资源-博客vue项目.zip
04-08
这个“精品资源-博客vue项目.zip”文件很可能包含了使用Vue.js技术实现的一个博客项目的源代码。让我们详细了解一下Vue.js以及它在构建博客项目中的应用。 Vue.js 的核心特性包括： 1. **声明式渲染**：Vue.js ...
【vue】vue中的路由vue-router，vue-cli脚手架详细使用教程
景天科技苑
03-22 4007
vue就是我们前面学习的vue基础，vue + vue-router 主要用来做SPA(Single Page Application)，单页面应用 整个网站都是通过一个html文件搞定的。 我们只需要开发组件，页面中有什么组件，就开发什么组件。这些事情都是前端来做的，跟后端没有一点关系。 vue-cli 能创建vue项目，把目录创建好了，哪个地方放组件，哪个地方放css样式等都划分好目录了。类似于我们通过pycharm创建django项目。 而且能vue-cli把整个项目通过socket跑起来。
26_Vue3路由-VueRouter之动态添加路由和导航守卫的使用
酒客的博客
02-27 3921
Vue3路由-VueRouter之动态添加路由和导航守卫的使用 router-link的v-slot 在vue-router3.x的时候，router-link有一个tag属性，可以决定router-link到底渲染成什么元素： 但是在vue-router4.x开始，该属性被移除了； 而给我们提供了更加具有灵活性的v-slot的方式来定制渲染的内容； v-slot如何使用呢？ 首先，我们需要使用custom表示我们整个元素要自定义 如果不写，那么自定义的内容会被包裹在一个 a 元素中； 其次，我们使
VUE-CLI/VUE-ROUTER
LKS_010620的博客
08-24 3676
官方文档vue-cli是vue官方出品的快速构建单页应用的脚手架，里面集成了webpack，npm，nodejs，babel，vue，vue-router。
【vue】vue中的路由vue-router，vue-cli脚手架详细使用教程_vue-cli 路由(1)
最新发布
2401_84412357的博客
05-01 617
nodejs把浏览器解释js的那一套嵌入到nodejs里面，例如控制台的使用前面学习了普通组件以后，接下来我们继续学习单文件组件则需要提前先安装准备一些组件开发工具。否则无法使用和学习单文件组件。一般情况下，单文件组件，我们运行在 自动化工具vue-CLI中，可以帮我们编译单文件组件。所以我们需要在系统中先搭建vue-CLI工具，官网：https://cli.vuejs.org/zh/Vue CLI 需要8.9 或更高版本 (推荐 8.11.0+)。你可以使用或。
Vue-Router4 学习笔记
zep
03-04 837
一、URL的hash 前端路由是如何做到URL和内容进行映射呢？监听URL的改变。 URL的hash也就是锚点(#), 本质上是改变window.location的href属性； 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新； hash的优势就是兼容性更好，在老版IE中都可以运行，但是缺陷是有一个#，显得不像一个真实的路径。 二、HTML5的History 三、认识vue-router Vue Router 是 Vue.js 的官方路由。它与 Vue.j
VUE ROUTER---路由
l_l_l_l_l_l_l_li的博客
07-06 931
一、认识和安装vue-router vue-router是基于路由和组件的 路由用于设定访问路径, 将路径和组件映射起来. 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换 安装vuerouter: npm install vue-router@4 细节：@4代表的是安装vuerouter4最新的版本 二、路由的使用步骤 三、路由的默认路径 四、router-link 通过.router-link-active这个类名可以给router-link这个内置组件样式
vue3组合式api 路由中的组件的使用keep-alive详解以及router-view原理详解
dxh9231028的博客
06-27 904
当我们想对路由中的一些组件使用keep-alive进行包裹缓存时，有的人会写出下面的代码然后并没有任何作用，于是就会有一种说法是，因为我们都知道keep-alive中只能包裹一个组件，所以有人会理所当然的认为他是因为其中的组件太多了，但其实这种说法并不对。
【Vue】vue-router路由的安装、配置、使用
weixin_44421143的博客
12-30 1712
vue-router
vue-router3.0版本中 router.push 不能刷新页面的问题
11-30
2. **全局挂载`router`到`window`对象**：如果你在非Vue组件的环境中需要使用`router.push`，可以在主入口文件（如`main.js`）中将`router`实例赋值给`window`对象，如`window.router = router`。这样，全局都可以...
解决vue.js this.$router.push无效的问题
12-09
在Vue.js应用中，`this.$router.push`是用于实现页面路由导航的重要方法。当它不起作用时，可能会导致开发者困惑。以下是一些常见的原因和解决策略，针对标题和描述中提到的问题进行深入分析。 首先，我们需要理解...
OMS-CLient-VUE
09-25
总的来说，"OMS-Client-VUE"是一个基于Vue.js的管理系统的前端部分，它利用Vue的特性构建用户界面，结合Vuex管理状态，使用vue-router进行路由控制，并通过HTTP库与后端通信。项目可能还包括了现代化的开发和构建...
vue面试题-vue常见面试题和答案.pdf
02-11
- `main.js`：入口文件，初始化Vue实例。 14. **computed和watch**： - **computed**：用于计算属性，当依赖的其他属性变化时自动更新。 - **watch**：观察者模式，当某个数据变化时执行回调，适合复杂逻辑处理...
10-vue移动端项目(我的my页面与个人信息info页面: vant预览图片组件, formdata管理头像文件上传,fileReander将图片文件转换为路径)
Tangoneone的博客
06-20 7791
我的页面 01 - 静态页面 结构 & 样式 作者信息区域： 收藏区域 消息区域 <template> <div class="my"> <!-- 个人信息区域 --> <div class="top"> <div class="msg"> <img @click="$router.push('/info')" :src="userInfo.photo" alt/>
05-小程序(优购商城项目介绍,HBuilder和HBuilderX,uni-app介绍)
Tangoneone的博客
07-02 3955
07- 优购商城项目介绍 商城的业务类型很ok 商城类的小程序是最多的 优购商城的基本逻辑 分类->按关键字搜索找到商品->商品详情->加入购物车->结算 可以参考京东App, 或者小米ite 项目支持多端 uniapp框架本身就用vue写的, 编译成代码兼容多端, iOS, Android, H5, 微信小程序 接口 接口文档 08-原生小程序与第三方小程序框架们 原生小程序是什么？有原生HTML这种说法吗？ 原生来自于英文raw 原生是指官方语法 原
yarn的命令安装
Tangoneone的博客
07-20 2385
yarn Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 js 包管理工具 ，正如官方文档中写的，Yarn 是为了弥补 npm 的安装速度慢，安装包的版本不一致的缺陷而出现的。 安装yarn 可以使用npm命令来全局安装yarn npm i yarn -g yarn常用命令 以下列出了Yarn和npm的区别，可以对比学习： NPM YARN 说明 npm init yarn init初始化某个项目 npm install yarn install 默认的
01-vuePC端项目(项目搭建,上传到github托管,生成公私钥,项目要在src下创建的文件夹,全局样式的设置,npm下载包-D与-S的区别,简单配置一下基础路由)
Tangoneone的博客
05-17 1854
黑马面面(vuePC端项目) 主要就是后台管理系统 01-项目创建: 01-1、就跟之前一样,安装脚手架(前面也有写也都做过,这里粗略写一下)        a.参考地址:https://cli.vuejs.org/zh/guide/installation.html        b.npm install -g @vue/cli    
5G-VUE面试攻略：关键问题与解答
对于Vue.js部分，面试可能涉及组件设计、响应式数据绑定、虚拟DOM、插槽、生命周期钩子、Vuex状态管理、Vue Router路由管理、异步数据处理、性能优化等方面。面试者应熟悉Vue的核心概念，并能提供实际项目中的应用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值