首页 > 其他分享 >Vue(三)基础继续补充

Vue(三)基础继续补充

时间：2024-01-10 23:31:43浏览次数：21  
标签：el Vue name 补充 基础 color vue import

插件：

新建一个plugins

Vue(三)基础继续补充_ios

index.js

import Vue from 'vue'

export default {
    install(a) {
        console.log(a)

        //自定义一个, 加入混入
        Vue.mixin({
            methods: {
                handleShowName() {
                    alert(this.name)
                }
            }
        })
    }
}

app.vue

<template>
  <div id="app">
    <h1>我是App</h1>
    <button @click="handleShowName">插件内的混入</button>
  </div>
</template>


<script>

export default {
  name: 'App',
  data() {
    return {
      name: 'qwe123'
    }
  },

  methods: {
  },
}
</script>

<style scoped>

h1{
  background-color: aqua;
}
</style>

main.js, 这里你可能遇到报错，因为依赖没装

vue add router
vue add vuex
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

//使用自定义插件
import plugins from "@/plugins";
Vue.use(plugins)

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

Vue(三)基础继续补充_Vue_02

也可以放变量：

        Vue.prototype.xxx = 'zhangsan'
        
        
        
            console.log(this.xxx)
  },

Vue(三)基础继续补充_App_03

放函数：

  Vue.prototype.hello = () => {
            alert('hello')
        }
        
        
        this.hello()

Vue(三)基础继续补充_Vue_04

实现axios

         import axios from "axios";
// 通过插件，把axios对象放到vue实例上
        Vue.prototype.$http = axios

 this.$axios.get('').then(res=>{
      
    })

插槽：

<template>
  <div>
    <slot name="top"></slot>
    <h1>一个child组件</h1>
    <slot name="bottom"></slot>

  </div>
</template>

<script>
export default {
  name: "MyChild"
}
</script>

<style scoped>

</style>

Vue(三)基础继续补充_Vue_05

app.vue

<template>
  <div id="app">
    <h1>一个App</h1>
    <button @click="handleShowName">插件内的混入</button>
    <hr>
    <Child>
      <img slot="top" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.01vrhwwOlUIqGHEpJ8PF7gHaJS?w=182&h=229&c=7&r=0&o=5&dpr=1.3&pid=1.7" alt="" width="200px"
           height="200px">

      <template v-slot:bottom>
        <form action="" >
          <p>用户名：<input type="text"></p>
          <p>密码：<input type="password"></p>
          <button>登录</button>
        </form>
        <p>一个p标签</p>
      </template>

    </Child>
  </div>
</template>


<script>
import Child from './components/Child'

export default {
  name: 'App',
  data() {
    return {
      name: 'qwe123'
    }
  },
  created() {
    // console.log(this.xxx)
    // this.hello()


  },
  methods: {
  },
  // eslint-disable-next-line vue/no-unused-components
  components: {Child},
}
</script>

<style scoped>

h1{
  background-color: aqua;
}
</style>

Vue(三)基础继续补充_App_06

elementui:

https://element-plus.org/zh-CN/component/layout.html

注意版本：

https://blog.csdn.net/weixin_48322274/article/details/118603058

v3
npm install element-plus --save

v2
npm install element-ui -S

main.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

app.vue

<template>
  <div id="app">
    <div>
      <table class="table table-bordered">
        <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
        </tbody>
      </table>
    </div>


    <hr>
    <el-button :plain="true" @click="open2">成功</el-button>
    <div>
      <el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>

      <el-dialog
          title="提示"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
        <span>这是一段信息</span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
      </el-dialog>
    </div>


    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '3']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>导航一</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>导航二</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="2-1">选项1</el-menu-item>
              <el-menu-item index="2-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-setting"></i>导航三</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="3-1">选项1</el-menu-item>
              <el-menu-item index="3-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="3-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="3-4">
              <template slot="title">选项4</template>
              <el-menu-item index="3-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>

        <el-main>
          <el-table :data="tableData">
            <el-table-column prop="date" label="日期" width="140">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>


  </div>
</template>


<script>


export default {
  name: 'App',
  data() {

    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    };
    return {
      tableData: Array(20).fill(item),
      dialogVisible: false

    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
          // eslint-disable-next-line no-unused-vars
          .then(_ => {
            done();
          })
          // eslint-disable-next-line no-unused-vars
          .catch(_ => {
          });
    },
    open2() {
      this.$message({
        message: '恭喜你，这是一条成功消息',
        type: 'success'
      });
    },
  }
}
</script>

<style scoped>

h1 {
  background-color: aqua;
}


:last-child {
  margin-bottom: 0;
}


.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

Vue(三)基础继续补充_App_07

jquer和boostrap

npm install jquery
npm install bootstrap@3

配置：

#在main.js中引入
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

#使用jquery,在vue的配置文件中vue.config.js
const { defineConfig } = require('@vue/cli-service')
const webpack = require("webpack");
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
        "window.$": "jquery",
        Popper: ["popper.js", "default"]
      })
    ]
  }
})


app.vue添加：
<button class="btn btn-danger">boostrap样式</button>

Vue(三)基础继续补充_Vue_08

localStorage和sessionStorage

# 前端存数据的地方
	-cookie中：借助第三方插件，自己用js写
  -sessionStorage：关闭浏览器，它就没了
  -localStorage：永久存在，手动删除，或浏览器存满了、
# 通过这三个东西就可以实现组件间通信

app.vue

<template>
  <div id="app">
    <h3>一个app</h3>
    <hr>
    <el-button type="primary" plain @click="handleSave">点击往sessionStorge中存数据</el-button>

  </div>
</template>


<script>
export default {
  name: 'App',
  data(){
    return{}
  },
  methods:{
    handleSave(){
      sessionStorage.setItem('name', 'qwe123')
    }
  }
}
</script>

Vue(三)基础继续补充_App_09

#获取
 sessionStorage.getItem('name')
# 清空
  sessionStorage.clear()
#  删除
 sessionStorage.removeItem('name'）
 
 
 #localStorage同理,关键词都一样
 localStorage.xxx()

vuex

安装:vue add vuex
插件：vuex，状态管理器，存取数据用的,可以跨组件通信（屏蔽了组件的父子关系）

main.js

import store from './store'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 存数据的地方
  state: {
    sum: 0
  },
  //类似于中央厨房
  mutations: {
    JIA(state, value) {
      state.sum += value
    }
  },
  // 中转站
  actions: {
    jia(context, value) {
      // context 上下文
      // value 组件中调用时，传入的值
      // 判断是否有权限改请求一下后端接口，获取了，有权限，
      context.commit('JIA', value)

    }
  },
})



#在任意组件中，想获取state中的数据
	this.$store.state.变量  即可
  
# 在任意组件中修改数据
this.$store.dispatch("actions中定义的函数",参数)
#它就会触发  actions中定义的函数  的执行，内部执行了 context.commit('JIA', value)
# 它又会触发  mutations中定义的函数执行，内部对sum进行了修改


# 在任意组件中修改数据也可以
this.$store.commit('JIA',2)

Vue(三)基础继续补充_Vue_10

vue_router：

#多组件切换
router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/HomeView'

Vue.use(VueRouter)

const routes = [
  {
    path: '/home',
    name: 'home',
    component: Home,
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

views/HomeView.vue
<template>
  <div>
    <h3>主页</h3>
  </div>

</template>

<script>
export default {
  name: "HomeView"
}
</script>

<style scoped>

</style>


app.vue

<template>
  <div id="app">

    <router-view></router-view>
  </div>
</template>


<script>

export default {
  name: 'App',
  data() {
    return {
    }
  },


}
</script>

<style scoped>


</style>

Vue(三)基础继续补充_App_11

标签：el,Vue,name,补充,基础,color,vue,import
From： https://blog.51cto.com/u_16172166/9187302

相关文章

  • 【Qt之Quick模块】8. Quick基础、布局管理、布局管理器
    1.前言QtQuick编程，提供了多种布局方式。如，静态布局，可以使用组件的x、y属性进行设置，或者进行绑定。还可以使用锚anchors进行布局。此外，还可以使用定位器以及定位管理器为多组件进行布局。但使用布局管理器和锚会占用内存和实例化时间，若使用x、y、width、height等属性能完成需......
  • （五十六）C#编程基础复习——C#多线程
    多线程就是多个线程同时工作的过程，我们可以将线程看作是程序的执行路径，每个线程都定义了一个独特的控制流，用来完成特定的任务。如果你的应用程序涉及到复杂且耗时的操作，那么使用多线程来执行是非常有益的。使用多线程可以节省CPU资源，同时提高应用程序的执行效率，例如现代操作系统对......
  • 基础篇
    数组、切片、映射●数组的定义和使用●切片的定义和使用●切片的增加、删除和修改●映射的定义和使用●映射的增加、删除和修改流程控制语句●条件语句(if、switch)●循环语句(for)●跳转语句(break、continue、goto)函数和方法●函数的定义和使用●函数的参数和返回......
  • MyBatis实战指南（二）：工作原理与基础使用详解
    MyBatis是一个优秀的持久层框架，它支持定制化SQL、存储过程以及高级映射。那么，它是如何工作的呢？又如何进行基础的使用呢？本文将带你了解MyBatis的工作原理及基础使用。一、MyBatis的工作原理1.1MyBatis的工作原理工作原理图示：1、读取MyBatis配置文件mybatis-config.xml为MyBat......
  • MyBatis实战指南（二）：工作原理与基础使用详解
    MyBatis是一个优秀的持久层框架，它支持定制化SQL、存储过程以及高级映射。那么，它是如何工作的呢？又如何进行基础的使用呢？本文将带你了解MyBatis的工作原理及基础使用。一、MyBatis的工作原理1.1MyBatis的工作原理工作原理图示：1、读取MyBatis配置文件mybatis-config.xml为MyBa......
  • 考研408之C语言基础学习记录
    考研408之C语言基础学习记录汇总前言这篇文章是我决定考研后写下的C语言基础学习记录，因为在此之前我有过Java项目开发的相关经验，对基础语言的学习也有一些心得，所以学习C语言时也只是快速过一下语法重点，并进行记录总结。这里只是第一次学习C语言基础进行的知识总结，未涉及到刷题......
  • 创建一个vue项目全过程
    1.安装node环境，cmd检查node是否安装成功命令：node-v2.安装vue.js，命令：npminstall-gvue（默认安装的是vue3）3.安装webpack模块，命令：npminstallwebpack-g4.安装webpack脚手架，命令：npminstall--globalwebpack-cli5.全局安装vue-cli，命令：npminstall-globalvue-cli（安装的是vu......
  • vue入门-？？？？ 05days
    购物车案例回顾：-v-for循环商品-checkbox多选：数组，input--->checkbox--->value 对象  [在input中只能使用v-model]getprice()---->方法------>变量发生变化，这个会重新运算加全选与全不选-chekbox--->单独的------>布尔类型-checkbox的cha......
  • 使用Nginx部署VUE3+VITE项目时无法访问后端接口的一个情况
    在使用VUE3作为前端，ABPVNEXT6.0作为后端框架。使用Nginx部署后无法访问api，接口报错404找错思路很重要，网上找到了很多Nginx配置信息，但是都不起作用，即使更换服务器重新部署也无法生效后来才发现，ABPNEXT对于未找到对应实体的报错就是404，按照正常的程序逻辑，404应该就是notfound，这一......
  • netcore webpi 通过signalr 给vue项目推送消息
     最近项目上需要做个服务给前端推消息，首先就想到了signalr，关于signalr详情可以参考微软官方文档（ASP.NETCoreSignalR概述|MicrosoftLearn），微软现在也有使用教程（ASP.NETCoreSignalR入门|MicrosoftLearn）微软教程是通过使用库管理器(LibMan)从unpkg 获取客户端库，如......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99