526互联

vue-day05

发布时间 2023-09-20 16:53:27作者: Py玩家

补充

1.图片
    在接口中返回一些数据和图片地址，而不是图片的二进制内容
    {code:100,msg:'成功',img:地址}
2.md5 不是加密，  摘要算法

动态组件

<component :is="who"></component>
 component标签的is属性等于组件名字，这里就会显示这个组件

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">
    <button @click="who='home'">首页</button>
    <button @click="who='good'">商品</button>
    <button @click="who='price'">价格</button>
    <component :is="who"></component>

</div>

</body>
<script>
    let home = {
        template: `    <div>
                       <h1>我是首页</h1>
                       </div>`

    }
     let good = {
        template: `    <div>
                       <h1>我是商品</h1>
                       </div>`

    }
     let price = {
        template: `    <div>
                       <h1>我是价格</h1>
                       </div>`

    }
    var vm = new Vue({
        el: '#box',
        data: {
            who:home
        },
        methods: {},
        components: {
            home,
            good,
            price
        }
    })
</script>
</html>
</html

笨方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">
    <button @click="who='home'">首页</button>
    <button @click="who='good'">商品</button>
    <button @click="who='price'">价格</button>
    <hr>
    <home v-if="who=='home'"></home>
    <good v-else-if="who=='good'"></good>
    <price v-else></price>

</div>

</body>
<script>
    let home = {
        template: `    <div>
                       <h1>我是首页</h1>
                       </div>`

    }
    let good = {
        template: `    <div>
                       <h1>我是商品</h1>
                       </div>`

    }
    let price = {
        template: `    <div>
                       <h1>我是价格</h1>
                       </div>`

    }
    var vm = new Vue({
        el: '#box',
        data: {
            who: home
        },
        methods: {},
        components: {
            home,
            good,
            price
        }
    })
</script>
</html>
</html

keep_alive:作缓存处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">
    <button @click="who='home'">首页</button>
    <button @click="who='good'">商品</button>
    <button @click="who='price'">价格</button>
    <hr>

    <keep-alive>
        <component :is="who"></component>
    </keep-alive>

</div>

</body>
<script>
    let home = {
        template: `    <div>
                       <h1>我是首页</h1>
                       </div>`

    }
    let good = {
        template: `    <div>
                       <h1>我是商品</h1>
                    搜索：<input type="text" v-model="username">
                          <button @click="handlers">提交</button>
                       </div>`,

        methods: {
            handlers() {
                alert(this.username)
            }
        },
        data(){
            return {
                username:''
            }
        }
    }
    let price = {
        template: `    <div>
                       <h1>我是价格</h1>
                       </div>`

    }
    var vm = new Vue({
        el: '#box',
        data: {
            who: home,

        },

        components: {
            home,
            good,
            price
        }
    })
</script>
</html>
</html

插槽

介绍

一般情况下，编写完1个组件之后，组件的内容都是写死的，需要加数据 只能去组件中修改，扩展性很差
然后就出现了插槽这个概念，只需在组件中添加<slot></slot>，就可以在body的组件标签中添加内容

使用步骤

使用步骤：
    1  在组件的html的任意位置，放个标签
        <slot></slot>
    2 后期在父组件使用该组件时
        <lqz>
        放内容
        </lqz>
    3 放的内容，就会被渲染到slot标签中

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
<div id="app">

    <lqz>
        <div>
            我是div
        </div>

    </lqz>
    <hr>
    <lqz>
        <img src="https://scpic.chinaz.net/files/default/imgs/2023-05-12/23659b1edfc0a984.jpg" alt="">

    </lqz>


</div>
</body>
<script>

    var lqz = {
        template: `
        <div>
            <h1>我是一个组件</h1>
            <slot></slot>
            <h2>我是组件内部的h2</h2>
        </div>
        `
    }
    var vm = new Vue({
        el: '#app',
        data: {},
        components: {
            lqz,
        }


    })
</script>
</html>

具名插槽

使用步骤：有多个soft标签时，需要使用名字来区分，不然全部都会使用

1 组件中可以留多个插槽，命名
        <div>
            <h1>我是一个组件</h1>
            <slot name="middle"></slot>
            <h2>我是组件内部的h2</h2>
            <slot name="footer"></slot>
        </div>
2 在父组件中使用时，指定某个标签渲染到某个插槽上
        <lqz>
            <div slot="footer">
                我是div
            </div>

            <img src="https://scpic.chinaz.net/files/default/imgs/2023-05-12/23659b1edfc0a984.jpg" alt="" slot="middle">

        </lqz>

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
<div id="app">

    <lqz>
        <div slot="footer">
            我是div
        </div>

        <img src="https://scpic.chinaz.net/files/default/imgs/2023-05-12/23659b1edfc0a984.jpg" alt="" slot="middle">

    </lqz>
    <hr>

</div>
</body>
<script>

    var lqz = {
        template: `
        <div>
            <h1>我是一个组件</h1>
            <slot name="middle"></slot>
            <h2>我是组件内部的h2</h2>
            <slot name="footer"></slot>
        </div>
        `
    }
    var vm = new Vue({
        el: '#app',
        data: {},
        components: {
            lqz,
        }


    })
</script>
</html>

 

vue-cli创建项目

单页面应用：spa（single-page application）

以后vue项目就只有一个 xx.html 页面
定义很多组件，不可能都写在 xx.html中把

单文件组件（一个组件一个文件）

https://v2.cn.vuejs.org/v2/guide/single-file-components.html#ad

一个组件中有的东西

1 html内容：以后html都放在  template标签中
2 css内容 ：以后都放在 style 标签中
3 js内容:  以后都放在 script标签中

使用vue-cli 创建vue项目，才能使用 单文件组件

vue脚手架：创建出vue的项目，里面带了很多基础代码
类似于django-admim命令，可以创建出django项目

vue-cli脚手架

vue2中使用创建vue项目的软件必须用vue-cli
vue3中可以使用vue-cli，也可也使用vite创建，vite号称新一代的构建工具

使用vue-cli创建vue项目  步骤

    1 vue-cli是个软件，运行在nodejs环境中，安装nodejs
        下载地址：https://nodejs.p2hp.com/download/
        类似于python解释器，一路下一步安装---》选择安装位置---》添加到环境变量(以后再任意位置执行node或npm都会找到)
        查看node版本
            node -v
        安装完，释放两个可执行文件
            node  等同于  python
            npm   等同于    pip
    2 npm 安装第三方模块，速度很慢，淘宝做了个cnpm，以后咱们可以使用cnpm替代npm，会去淘宝镜像站下载，速度快
        npm install -g cnpm --registry=https://registry.npm.taobao.org

　　　3 在node环境中装vue-cli （类似于装django）
　　　　　　npm install -g @vue/cli
　　
　　　4 装完脚手架，会多出一个命令 vue 用来创建vue项目 等同于djagno-admin命令

　　　5 使用脚手架，创建vue项目
　　　　　　vue create 项目名

 

vue-cli创建项目

vue-cli 命令行创建项目

1 vue create 项目名
2 选择入下图
3 选择Babel，Router，vuex
    Babel：语法转换
    Router：页面跳转 路由效果
    vuex：状态管理器，存储数据的
    
4 选vue版本

5选package.json
6之前的设置，保存与不保存都可以
等待即可

使用vue-cli-ui创建：步骤和上面一样

vue ui  启动出一个服务，直接在浏览器中点点击就可以创建

vue项目目录结构

pycharm中运行vue项目

1.按照以前pycharm的方式打开文件vue项目
2.正常使用pycharm编辑vue项目

运行vue项目

方式一：命令运行

npm run serve

方式二：使用pycharm运行

1.在绿色箭头傍边打开Edit Configurations...
2.点击+号找npm
3.在npm中找到scripts，选择server
4.点击应用，再点击ok即可

vue项目的目录结构

node_obj 项目名
node_modules 文件夹，放该项目所有的依赖，很小很多，以后把项目传给别人，这个要删除，别人拿到执行cnpm install 安装之执行
public 文件夹，里面两个文件
favicon.ico 小图表，浏览器上显示，可以替换
index.htm spa（single-page application）,这个html是整个项目的一个html  你不要动
src 以后写代码，就放在这个文件夹里面
assets 文件夹，放一些静态资源，图片，js，css
components 以后小组件写在里面  xx.vue
HelloWorld.vue 提供一个默认组件
router 装了vueRouter就会有这个文件夹，如果不装就没有，现在不用关注
index.js router文件里面的
store 装了vuex就会有，不装就没有 
index.js store文件里面的
views 文件夹，里面放了所有页面组件
AboutView.vue 首页组件组件
HomeView.vue 关于组件
App.vue 根组件
main.js 项目启动的入口文件，核心
.gitignore  git相关，后面学了就会了
README.md 项目介绍
package.json  重要，存放依赖
vue.config.js vue项目的配置文件
package-lock.json 锁定文件
babel.config.js babel的配置，不用管
jsconfig.json  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

vue项目编写规范

修改项目

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

HomeView.vue

<template>
  <div class="home">
  </div>
</template>

<script>
export default {
  name: 'HomeView',
}
</script>

AboutView.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

以后写vue项目，只需要在固定位置写固定代码即可

1 只需要创建页面组件
    IndexView.vue
2 里面有三部分
    # 2.1 template 必须只能有一个标签，以后所有的html都写在这里
    <template>
      <div class="home">
        <h1>我是首页</h1>
        <button @click="handleClick">点我看美女</button>
      </div>
    </template>
    
    #2.2 script 标签写js代码
        <script>
        export default {
          name: 'HomeView',
          data(){return {
              
          }},
          methods: {
            handleClick() {
              alert('美女')
            }
          }
        }
        </script>
        
   # 2.3 所有的样式，写在<style>
    <style>
    h1{
      font-size: 80px;
    }
    </style>

 

es6导入导出语法

导出语法

    1 项目中：创建包，创建要给文件夹  lqz
    2 在包下创建 package.js
    3 在文件中写js代码
        var name = 'lqz'
        function add(a, b) {
            return a + b
        }
   4 默认导出 对象 
        export default {
            add:add,
            name:name
        }
    
   5 命名导出 导出了两个变量
        export const name = '彭于晏'
        export const add = (a, b) => {
            return a * b
        }

 

导入语法

默认导出的导入
    1 在任意的js中
    import 起个名字  from './lqz/package'
    2 使用导入的包
        起个名字.导出的字段
        
命名导出的导入
    1 在任意的js中
    import {name,add}  from './lqz/package'
    2 直接用即可