vue-day04

最新推荐文章于 2024-06-04 03:20:19 发布

是姐姐的甜崽吗

最新推荐文章于 2024-06-04 03:20:19 发布

阅读量70

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_46690090/article/details/112258352

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

vue-day04

1-组件

组件就是页面中的一些功能模块的封装

1.1-组成部分

结构
样式
行为

1.2-分类

1.2.1-全局组件

在任何地方都可以使用

Vue.component('组件名称',{
    // 组件的模板: 必须有一个唯一的根标签
    template:`
		<div>
			<h1>{{msg}}</h1>
		</div>
	`,
    // 组件的数据
    data:function(){
        return {
            msg:'hello'
        }
    },
    // 组件的方法
    methods:{
        
    }
})

调用: 当做自定义标签调用即可

1.2.2-私有组件

只能在当前vue实例对应的模板中调用

    // 组件的配置对象
    const myHeader={
        template:`
            <div class="header">
                <h1 @click="handle">{{title}}</h1>
            </div>
        `,
        data(){
            return {
                title:'页面头部'
            }
        },
        methods:{
            handle(){
                alert('ok');
            }
        }
    }
    new Vue({
        el:'#app',
        // 注册私有组件: 私有组件只能在当前vue实例的模板中调用
        components:{
            myHeader
        }
    });

调用

<!-- 调用私有组件 -->
<my-header></my-header>

1.3-组件的命名规范

小驼峰=>使用-连接的方式
大驼峰=>使用-连接的方式
全部小写=>原样调用

2-组件嵌套

 <div id="app">
     <!-- 调用私有组件 -->
     <Home></Home>
     <hr>
     <navbar></navbar>
</div>

 // 导航条组件
const navbar={
    template:`
<div>
<button>首页</button>
<button>关于我们</button>
<button>联系我们</button>
<button>加入我们</button>
</div>
`
}

// 首页组件
const Home={
    template:`
<div class="header">
<navbar></navbar>
<h1>{{title}}</h1>
</div>
`,
    data(){
        return {
            title:'首页'
        }
    },
    // 私有组价
    components:{

    }
}
// 注册全局组件
Vue.component('navbar',navbar);

new Vue({
    el:'#app',
    // 注册私有组件: 私有组件只能在当前vue实例的模板中调用
    components:{
        Home
    }
});

3-动态组件component

作用: 帮助我们动态展示组件
调用
- is: 指定需要展示的组件名称, 一般需要使用v-bind动态绑定
```
<component is="组件名称"></component>
```

4-缓存组件keep-alive

作用: 对目标组件进行缓存, 提升性能

使用: 使用keep-alive组件对需要缓存的组件进行包裹

 <!-- 缓存组件 -->
<keep-alive>
    <!-- 动态组件 -->
    <component :is="page"></component>
</keep-alive>

特殊的生命周期钩子: 只有被缓存组件中才存在

activated: 激活组件中调用

deactivated: 失活组件中调用

 // 首页
const Home = {
    template: `
        <div class="container">
        	<h1>{{title}}</h1>   
        </div>
    `,
    data() {
        return {
            title: '首页'
        }
    },
    created(){
        console.log('Home组件被创建了');
    },
    activated(){
        console.log('Home组件被激活');
    },
    deactivated(){
        console.log('Home组件被失活');
    }
}

5-vue-cli脚手架

vue-cli基于webpack的vue开发环境的构建工具
vue-cli基于nodejs平台
vue-cli: command line interface

5.1-安装

必须联网

npm install vue-cli -g
// 或者
npm i vue-cli -g

5.2-检查是否安装成功

// 2.9.6
vue -V

5.3-初始化项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-50yt85rT-1609897831929)(media/项目初始化.jpg)]

必须联网

vue init webpack 项目名称

5.5-启动开发服务器

在项目根目录下运行如下命令, 启动开发服务器
注意: 命令行窗口不能关闭

npm run dev

5.6-项目目录结构介绍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qwhE2OVV-1609897831934)(./media/项目目录结构.jpg)]

5.7-vscode辅助插值

插件名称: vetur
作用: 高亮显示.vue文件, 并且提供一些语法辅助功能
快速生成vue组件结构, 在.vue文件中运行如下命令
```
vue+tab
```

5.8-禁用eslint语法校验功能

找到配置文件/build/webpack.base.conf.js, 注释如下配置项(大概在43行左右)

module: {
    rules: [
        // ...(config.dev.useEslint ? [createLintingRule()] : []),

重启开发服务器
```
npm run dev
```

5.9-路径别名@

vue-cli脚手架搭建的开发环境中提供了一个路径别名@, 方便进行组件导入
路径别名@: 指向src目录
```
import Home from '@/components/Home'
```

6-综合小案例

6.0-根组件

App.vue

<template>
  <!-- 必须有一个唯一的根标签 -->
  <div id="app">
    <!-- 自定义的组件 -->
    <Home/>
  </div>
</template>

<script>
// 路径别名@: 指向src目录
import Home from '@/components/Home'
export default {
  // 组件名字
  name: 'App',
  // 注册私有组件
  components: {
    Home:Home
  }
}
</script>

<style>
*{
  padding: 0;
  margin: 0;
}
</style>

6.1-父组件

components/Home.vue

<template>
  <div class="home-container">
    <!-- 搜索栏 -->
    <div class="search">
      <div class="left">
        <input type="text" placeholder="请输入关键词" />
        <button>搜索</button>
      </div>
      <button @click="add">添加</button>
    </div>
    <!-- 主体区域:列表表格 -->
    <List/>
    <!-- 添加/编辑表单 -->
    <!-- 3-调用组件 -->
    <Modal v-show="isShow"/>
  </div>
</template>

<script>
// 1-导入组件对象
import Modal from './Modal'
import List from './List'

export default {
  // 2-注册组件
  components:{
    Modal,
    List
  },
  data() {
    return {
      pageTitle: "网站首页",
      isShow:false
    };
  },
  methods: {
    add(){
      // 更新isShow
      this.isShow=!this.isShow;
    }
  }
};
</script>

<style>
.home-container {
  width: 800px;
  background: #eee;
  margin: 40px auto;
  padding: 20px;
}
.search {
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
}
</style>

6.2-列表组件

components/List.vue

<template>
  <div class="content">
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>标题</th>
          <th>内容</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in 10" :key="item">
          <td>1</td>
          <td>标题</td>
          <td width="40%">内容</td>
          <td>
            <button>编辑</button>
            <button>删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

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

<style>
.content {
  border: 2px solid blue;
}
table {
  width: 600px;
  margin: 20px auto;
  text-align: center;
}
table,td,th{
    border:1px solid #999;
    border-collapse: collapse;
}
table tr{
    height: 36px;
}
</style>

6.3-增加组件

components/Modal.vue

<template>
   <div class="modal">
      <h3>增加</h3>
      <div class="form">
        <div>
          标题
          <input type="text" placeholder="标题" />
        </div>
        <div>
          内容
          <input type="text" placeholder="内容" />
        </div>
      </div>
      <div class="actions">
        <button>确定</button>
        <button>取消</button>
      </div>
    </div>
</template>

<script>
export default {

}
</script>

<style>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 280px;
  background: #fff;
}
.modal h3{
  height: 40px;
  line-height: 40px;
  padding-left:10px;
  background: blue;
  color:#FFF;
}
.actions{
  text-align: center;
  margin-top: 150px;
}
</style>

7-后台管理系统页面结构搭建

7.1-布局组件

pages/Layout.vue

<template>
  <div class="layout-container">
    <div class="left">
      <ul class="navbar">
        <li :class="page==='Home'?'active':''" @click="change('Home')">管理中心</li>
        <li :class="page==='User'?'active':''" @click="change('User')">会员管理</li>
        <li :class="page==='Goods'?'active':''" @click="change('Goods')">商品管理</li>
        <li :class="page==='Order'?'active':''" @click="change('Order')">订单管理</li>
      </ul>
    </div>
    <div class="right">
      <!-- 头部 -->
      <Header />
      <!-- 主体内容 -->
      <div class="content">
        <component :is="page"></component>
      </div>
      <!-- 底部 -->
      <Footer />
    </div>
  </div>
</template>

<script>
// 导入组件
import Header from "@/components/Header";
import Footer from "@/components/Footer";
// 导入页面组件
import Home from "./Home";
import Goods from "./Goods";
import User from "./User";
import Order from "./Order";

export default {
  // 注册组件
  components: {
    Header,
    Footer,
    Home,
    Goods,
    User,
    Order
  },
  data() {
    return {
      // 存储页面组件名字
      page: "Home"
    };
  },
  methods:{
    change(page){
      // 更新page的值
      this.page=page;
    }
  }
};
</script>

<style>
.layout-container {
  height: 100%;
  display: flex;
}
.left {
  width: 226px;
  height: 100%;
  background: #000;
  color: #fff;
}
/* 导航样式 */
.navbar li {
  height: 50px;
  line-height: 50px;
  text-align: center;
}

.navbar li:hover {
  background: #0078B9;
  cursor: pointer;
}

/* 定义一个导航高亮类名 */
.active{
   background: #0078B9;
   cursor: pointer;
}

.right {
  flex: 1;
  height: 100%;
  background: #eee;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  background: #fff;
  margin: 10px;
  padding:10px;
}
</style>

7.2-管理中心

pages/Home.vue

<template>
  <div class="home-container">
    <!-- 管理中心 -->
    <h1>管理中心</h1>
  </div>
</template>

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

<style>

</style>

7.3-商品管理

pages/Goods.vue

<template>
  <div class="goods-container">
    <h1>商品管理</h1>
  </div>
</template>

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

<style>
</style>

7.4-订单管理

pages/Order.vue

<template>
  <div class="order-container">
    <h1>订单管理</h1>
  </div>
</template>

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

<style>

</style>

7.5-会员管理

pages/User.vue

<template>
  <div class="user-container">
    <h1>会员管理</h1>
  </div>
</template>

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

<style>
</style>




### 7.3-商品管理

> pages/Goods.vue

```html
<template>
  <div class="goods-container">
    <h1>商品管理</h1>
  </div>
</template>

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

<style>
</style>

7.4-订单管理

pages/Order.vue

<template>
  <div class="order-container">
    <h1>订单管理</h1>
  </div>
</template>

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

<style>

</style>

7.5-会员管理

pages/User.vue

<template>
  <div class="user-container">
    <h1>会员管理</h1>
  </div>
</template>

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

<style>
</style>

是姐姐的甜崽吗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-day04

vue-day041-组件组件就是页面中的一些功能模块的封装1.1-组成部分结构样式行为1.2-分类1.2.1-全局组件在任何地方都可以使用注册Vue.component('组件名称',{ // 组件的模板: 必须有一个唯一的根标签 template:` <div> <h1>{{msg}}</h1> </div> `, // 组件的数据 data:function(){
复制链接

扫一扫