Day01-Vue基础

最新推荐文章于 2024-11-02 08:58:20 发布

金霖海

最新推荐文章于 2024-11-02 08:58:20 发布

阅读量159

点赞数

分类专栏：前端3 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_33396183/article/details/132490475

版权

前端3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了Vue2的基础知识，包括框架与库的区别，Vue的特点，如数据驱动和组件化开发。详细讲解了Vue环境的搭建过程，如vue-cli的使用，项目结构，以及如何创建、引入和管理组件，包括样式和组件间的通信。

摘要由CSDN通过智能技术生成

Day01-vue基础

一三阶段知识体系

第一周 vue的基础语法,vue的组件 拼团子系统
第二周 vue全家桶(vue企业级开发技术) 			   完整的后台管理系统
第三周 原生微信小程序开发(蜗牛会议)  大屏可视化
第四周 uniapp移动端开发 (电商项目)
第五周 项目周(家庭医生)

这个阶段主要学习Vue2

二 VUE概念

1 框架和库区别

框架：框架提供的是一套完整的开发方案，包括工程化、工具链、代码检查等等

库：jquery是JS库，将JS的一些核心代码封装起来了。

2 Vue框架的特点

(1) 简介

Vue是一个JavaScript框架，将HTML+CSS+JS进行了封装,让我们可以在框架的基础上快速进行项目开发,vue开发的是单页应用

数据驱动：一旦数据发生变化,页面立即更新; 页面上发生变化,数据也会跟着更新.尽量减少对DOM操作

(2) 版本

2.x：教学版本
3.x（以2为基础，更新了很多内容，也有很多新特性）

(3) 使用

局部：下载vue对应的js文件，引入到页面当中
vue项目：借助vue的插件vue-cli来搭建基于vue全家桶的项目

(4) vue.js 和vue框架的关系

vue.js本身是vue框架的核心文件，本身提供了对于dom操作的支持，通过vue的语法能够包揽所有的dom交互，能让用户更关注于业务和数据。
vue框架是指以vue.js为核心，同时也提供了很多其他插件(路由、状态机、vue-cli)快速构建一个基于vue的web项目

(5) 学习资料：

英文网站：https://vuejs.org

中文网：https://cn.vuejs.org

三 VUE环境搭建

vue框架生态系统提供了一个插件vue-cli 能够快速生成一个基于vue框架搭建的web项目

1 安装脚手架

npm install  -g @vue/cli

卸载vue-cli命令 npm uninstall vue-cli -g

2 检测版本

vue --version

3 基于脚手架工具创建项目

vue create 项目名称

项目名称不能有大写字母,遇到多个单词,建议用 - 或_链接

vue create vue-project

4 选择你要搭建的项目模式

按箭头上下移动

5 选择项目中需要的工具

按空格键选中/取消

6 选择vue版本

7 选中SASS

8 插件的相关配置代码放在哪个文件中

9 是否保存当前配置

10 出现以下内容就是项目创建完毕

输入该两句命令快速启动vue项目

停止项目的命令 ctrl + c

11 启动成功的状态

12 在浏览器中输入以上的地址查看项目启动效果

四 VUE项目结构

main.js中的代码

    import Vue from 'vue'
    import App from './App.vue'
    //设置项目打包，采用生产环境还是开发环境
    Vue.config.productionTip = false
    //创建Vue实例，才能控制数据-页面渲染
    new Vue({
      //Vue创建实例的时候，首先加载App.vue文件
      render: h => h(App),
    }).$mount('#app')

总结：

项目启动首先加载main.js文件。实际上在创建Vue实例
引入App.vue，进入项目第一个看到页面就是App.vue。以后再这个文件中编写代码
$mount(‘#app’)相当于id选择器,选择到index.html中的div

五组件

1 组件概念

组件就是组成页面的配件，就比如说，一个网页包含头部导航，主体内容，底部信息。我们可以把网页头部导航划分为一个组件，剩下的同样对应划分为组件。拿顶部导航这个组件来说，这个组件包含了实现顶部导航的html结构，css样式和js代码。

Vue是SPA(Single Page Application)开发模式，

整个项目只有一个HTML文件，在这个文件中通过引入不同的组件，实现页面显示效果不一样。

以组件为开发单位，页面只有一个，在这个页面显示不同组件，看到不同效果。

2 安装插件

代码高亮以及代码提示：vetur

在编程过程中，vue可能会报错，这插件加了安全检查机制，去掉勾选就好了，我们拉到最下面去掉后如下图所示：

3 组件的创建

所有的组件都是以.vue为后缀,在vue项目中组件默认存放在components目录下

创建一个Header.vue组件

在components目录下新建Header.vue
Header.vue输入vue按照提升回车

<template>
  <div>
    helloworld
  </div>
</template>

<script>
export default {
   
}
</script>

<style>

</style>

template: 组件中编写HTML代码部分

html代码必须包裹在一个div中

script：组件中编写JS代码的部分

style：组件中编写css代码部分

4 组件的引入

在App.vue中引入Header组件

<template>
  <div id="app">
    <!-- 3.把组件当作标签使用 -->
    <Header></Header>
  </div>
</template>

<script>
//1.导入组件
import Header from "./components/Header.vue"

export default {
  name: 'App',
  //2.注册组件
  components: {
    Header
  }
}
</script>

<style lang="scss">

</style>

import导入外部组件

components中,注册导入的组件

将注册的组件，拿到template标签中加载。将整个组件当成一个标签使用

5 组件中样式

用scss来开发样式

<style lang="scss">
    .header{
        width: 100%;
        height: 60px;
        background-color: #cce8eb;
        font-size: 24px;
        display: flex;
        align-items: center;
    }
</style>

前提是创建项目的时候，选中scss作为项目的css预编译语言。

样式穿透

父组件中的css样式，传递给子组件。称为样式穿透

如果你不想css样式穿透，我们可以给style标签设置scoped不允许样式穿透

<style lang="scss" scoped>
//lang="scss" 代表使用scss编写样式, scoped把样式设置成当前组件私有的,防止样式穿透
    .header{
        width: 100%;
        height: 60px;
        background-color: #cce8eb;
        font-size: 24px;
        display: flex;
        align-items: center;
    }
</style>

如果你想执行某个样式能够穿透到子元素

    /deep/.op{
      color:pink
    }

引入外部样式，一般样式会放在assets文件夹里面

在代码style中标签引入

<style lang="scss" >
  @import "./assets/public.scss";
</style>

6 组件设计实战

(1) 创建项目

(2) 创建组件

Header.vue

<template>
  <div class="header">
    <h2>蜗牛学苑</h2>【拼团业务】
  </div>
</template>

<script>
export default {
   
}
</script>


<style lang="scss" scoped>
//lang="scss" 代表使用scss编写样式, scoped把样式设置成当前组件私有的,防止样式穿透
    .header{
        width: 100%;
        height: 60px;
        background-color: #cce8eb;
        font-size: 24px;
        display: flex;
        align-items: center;
    }
</style>

Fooer.vue

<template>
  <div class="footer">
    版权所有&copy;2023
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
    .footer{
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: black;
        color: white;
    }
</style>

TabA.vue

<template>
  <h2>拼团商品页面</h2>
</template>

<script>
export default {

}
</script>

<style>

</style>

TabB.vue

<template>
  <h2>拼团列表</h2>
</template>

<script>
export default {

}
</script>

<style>

</style>

TabC.vue

<template>
  <h2>商品列表</h2>
</template>

<script>
export default {

}
</script>

<style>

</style>

TabD.vue

<template>
  <h2>添加</h2>
</template>

<script>
export default {

}
</script>

<style>

</style>

TabE.vue

TabF.vue

(3)在App.vue中渲染组件

<template>
  <div id="app">
    <!-- 3.把组件当作标签使用 -->
    <!-- 头部 -->
    <Header></Header>
    <!-- 主体 -->
    <div class="mian">
      <ul>
        <li class="active">拼团商品</li>
        <li>拼团列表</li>
        <li>商品列表</li>
        <li>添加拼团商品</li>
        <li>组件通信</li>
        <li>评论信息</li>
      </ul>
      <div class="content">
        <TabA></TabA>
        <TabB></TabB>
        <TabC></TabC>
        <TabD></TabD>
        <TabE></TabE>
        <TabF></TabF>
      </div>
    </div>
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>

<script>
//1.导入组件
import Header from "./components/Header.vue";
import Footer from "@/components/Footer.vue";
import TabA from "./components/TabA.vue" 
import TabB from "./components/TabB.vue" 
import TabC from "./components/TabC.vue" 
import TabD from "./components/TabD.vue" 
import TabE from "./components/TabE.vue" 
import TabF from "./components/TabF.vue" 

export default {
  name: "App",
  //2.注册组件
  components: {
    Header,
    Footer,
    TabA,TabB,TabC,TabD,TabE,TabF
  },
};
</script>

<style lang="scss" >
@import "./assets/public.scss";


.mian {
  width: 100%;
  min-height: 500px;
  background-color: #f5f5f5;
  ul {
    list-style: none;
    height: 60px;
    display: flex;
    li {
      width: 120px;
      background-color: white;
      margin-right: 16px;
      margin-top: 10px;
      display: flex;
      justify-content: center;
      align-items: center;
      &.active {
        border: 1px red solid;
        border-bottom: none;
      }
    }
  }
}
</style>