0
点赞
收藏
分享

微信扫一扫

Vue(三)基础继续补充

爱我中华8898 2024-01-10 阅读 17
VueAppiosVue.js前端开发

插件：

新建一个plugins

Vue(三)基础继续补充_App

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(三)基础继续补充_ios_02

也可以放变量：

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

Vue(三)基础继续补充_Vue_03

放函数：

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

Vue(三)基础继续补充_ios_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(三)基础继续补充_ios_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(三)基础继续补充_Vue_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(三)基础继续补充_Vue_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(三)基础继续补充_ios_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

举报

相关推荐

Vue基础补充

日记本

python基础补充（三）

数据结构

设计模式心得（待继续补充）

设计模式interface架构设计blog制造Python后端开发

vue补充

vue.js前端javascript

Vue学习继续

vue.js学习javascript

补充-vue动画

vue.js动画javascript

[Nodejs]Nodejs基础补充(三)-this上下文对象

node.js

Java基础补充

java开发语言后端

vue3 基础-补充 ref & provide-inject

vue基础provideinjectrefv-once编程语言

Js 基础补充

html全局变量javascript前端开发
0 条评论