首页 > 其他分享 >vue学习笔记二

vue学习笔记二

时间：2023-06-17 22:47:26浏览次数：54  
标签：vue default 笔记 学习 state value import store

四，vue中的AJAX

比较了各种AJAX的方式，xhr，jQuery，fetch,综合考虑都不好，直接就G了，xhr学过，fetch了解过，jQuery听说过，结果最后表示要用axios。。。点个海克斯“考前恶补”。

1.配置代理


<template>
  <div>
    <button @click="getstudents">获取学生信息</button>
</div>
</template>
​
<script>
​
​
import axios from 'axios'
​
export default {
    name:'App',
    methods:{
        getstudents(){
        axios.request(' http://localhost:3000/students').then(response=>{
            console.log('请求成功',response.data)
        }),
        error=>{
            console.log('请求失败',error.message)
        }
        }
    }
​
​
​
}
</script>
​

2.github请求案例

MyList.vue


<template>
    <div class="row">
      <div v-show="users.length" class="card" v-for="user in userList" :key="user.id">
        <a :href="user.html_url" target="_blank">
          <img :src="user.avatar_url" style='width: 100px'/>
        </a>
        <p class="card-text">{{user.login}}</p>
      </div>
      <!-- 展示欢迎词 -->
      <h1 v-show="isFirst">欢迎使用</h1>
      <!-- 展示加载中 -->
      <h1 v-show="isLoding">loding......</h1>
      <!-- 展示错误信息 -->
      <h1 v-show="errorMsg">找不到页面啊，出错了{{errorMsg}}</h1>
    </div>
</template>
​
<script>  
export default {
  name: "MyList",
  data(){
    return {
      isFirst:true,
      isLoding:false,
      errorMsg:'',
      userList:[]
      
    }
  },
  mounted(){
    this.$bus.$on('getusers',(users,isFirst,isLoding,errorMsg)=>{
        console.log("我是list组件,收到数据",users)
        this.isFirst = isFirst
        this.isLoding = isLoding
        this.errorMsg = errorMsg
        
        
        this.userList = users
    })
  }
};
</script>
​
<style>
.album {
  min-height: 50rem; /* Can be removed; just added for demo purposes */
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #f7f7f7;
}
​
.card {
  float: left;
  width: 33.333%;
  padding: 0.75rem;
  margin-bottom: 2rem;
  border: 1px solid #efefef;
  text-align: center;
}
​
.card > img {
  margin-bottom: 0.75rem;
  border-radius: 100px;
}
​
.card-text {
  font-size: 85%;
}
</style>

Search.vue


<template>
   <section class="jumbotron">
      <h3 class="jumbotron-heading">Search Github Users</h3>
      <div>
        <input type="text" placeholder="enter the name you search" v-model="keyWord">&nbsp;
        <button @click="SearchUsers">Search</button>
      </div>
    </section>
</template>
​
<script>
​
import axios from 'axios'
export default {
    name:'Search',
    data(){
      return {
        keyWord:""
      }
    },
    methods:{
      SearchUsers(){
        axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
          response =>{
            console.log("请求成功",response.data)
            this.$bus.$emit('getusers',response.data.items)
          },
          error =>{
            console.log("请求失败",error.message)
          })
      }
    }
}
</script>
​
<style>
​
</style>

3,插槽

1.默认插槽

相当于在页面组件挖个坑，在app组件的组件标签里写html标签，由于解析玩app后才会传送到其他页面，可以将html标签的样式写在app组件里。

slot标签

Mylist.vue


<template>
<div>
    <h1>{{title}}</h1>
    <slot></slot>
</div>
</template>
​
<script>
export default {
    name:"MyList",
    props:['title' ]
​
}
</script>
​
<style scoped>
    div{
        width: 200px;
        height: 300px;
        background-image: linear-gradient(#A0F99E,#46ADD5);
    }
    h1{
        text-align: center;
        background-color:orange;
        
    }
    ul{
        list-style: none;
    }
</style>

app.vue


<template>
  <div class="container">
    <MyList title="美食" >
      <ul>
        <li v-for="(demo, index) in foods" :key="index">{{ demo }}</li>
      </ul>
    </MyList>
    <MyList title="游戏" >
      <ul>
        <li v-for="(demo, index) in games" :key="index">{{ demo }}</li>
      </ul></MyList>
    <MyList title="爱好" >
      <img src="./assets/logo.png" alt="">
    </MyList>
  </div>
</template>
​
<script>
import MyList from "./components/Mylist.vue";
export default {
  name: "App",
  components: {
    MyList,
  },
  data() {
    return {
      foods: ["apple", "pear", "banana"],
      hobbies: ["抽烟", "喝酒", "烫头"],
      games: ["王者荣耀", "刺激战场", "LOL"],
    };
  },
};
</script>
​
<style>
.container {
  display: flex;
  justify-content: space-around;
}
</style>
​

2.具名插槽

app.vue


<template>
  <div class="container">
    <MyList title="美食" >
      <ul slot="center">
        <li v-for="(demo, index) in foods" :key="index">{{ demo }}</li>
      </ul>
      <a  href="http://www.4399.com">点击获取更多游戏</a>
    </MyList>
    <MyList title="游戏" >
      <ul>
        <li v-for="(demo, index) in games" :key="index">{{ demo }}</li>
      </ul></MyList>x
    <MyList title="爱好" >
      <img src="./assets/logo.png" alt="">
    </MyList>
  </div>
</template>

list.vue


<template>
<div>
    <h1>{{title}}</h1>
    <slot name="center"></slot>
    <slot name="footer"></slot>
</div>
</template>

有一种新的写法，v-slot:demo

但是这种写法只能用在template标签中

3.作用域插槽

mylist.vue


<template>
  <div>
    <slot :games="games"></slot>
  </div>
</template>
​
<script>
export default {
  name: "MyList",
  data() {
    return {
      games: ["王者荣耀", "和平经营", "老铁666"],
    };
  },
};
</script>
​
<style>
</style>

app.vue


<template>
  <div>
    <MyList>
      <template scope="wds">
        <ul>
          <li v-for="(w, index) in wds.games" :key="index">{{ w }}</li>
        </ul>
      </template>
    </MyList>
    <MyList>
      <template scope="wds2">
        <ol>
          <li v-for="(w, index) in wds2.games" :key="index">{{ w }}</li>
        </ol>
      </template>
    </MyList>
    <MyList>
      <template scope="wds3">
          <h4 v-for="(w, index) in wds3.games" :key="index">{{ w }}</h4> 
      </template>
    </MyList>
  </div>
</template>
​
<script>
import MyList from "./components/Mylist.vue";
export default {
  name: "App",
  components: {
    MyList,
  },
};
</script>
​
<style>
</style>
​

作用域插槽怎么说，他是要发送的地方挖个坑，对应使用的地方要根据不同的需求而变换的时候，使用这个作用域插槽，重要但是很少用到

4.总结

五，vuex

1，vuex简介

专门在vue中实现集中式状态（数据）管理的一个vue插件，对vue应用中多个组件的共享状态进行集中的管理（读/写），也是一种中间件通信方式，且适用于组件间的通信。

什么时候使用vuex

​ 1.多个组件依赖于同一状态

​ 2.来自不同组件的行为需要变更同一状态。

2，求和案例


<template>
  <div>
    <h1>当前的数值为：{{ num }}</h1>
    <select v-model="n">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="jia">+</button>
    <button @click="jian">-</button>
    <button @click="jishujia">当前和为奇数再加</button>
    <button @click="dengdengjia">等一等再加</button>
  </div>
</template>
​
<script>
export default {
  name: "MyTest",
  data() {
    return {
      n: 1,
      num: 0,
    };
  },
  methods: {
    jia() {
      this.num += this.n;
    },
    jian() {
      this.num -= this.n;
    },
    jishujia() {
      if (this.num % 2) {
        this.num += this.n;
      }
    },
    dengdengjia() {
      setTimeout(() => {
        this.num += this.n;
      }, 3000);
    },
  },
};
</script>
​
<style  scoped>
div {
  display: flex;
  justify-content: space-between;
}
</style>
​
​

3，vuex的工作原理

直接用人家的图吧Vuex 是什么？ | Vuex (vuejs.org)

自己只能大概理解逻辑但是解释的不是很好，图上少了一个仓库，vuex中的三个组成action，mulation，

states这三兄弟需要受到store的管理。

4，搭建vuex的环境

npm i vuex@3

安装完成之后在src下创建store文件夹创建index文件（这里我不是这样创建的，这是不规范的 ，我们应该按照官方的来）

store.js


import Vue from 'vue'
​
//引入vuex
import Vuex from 'vuex'
​
Vue.use(Vuex)
//创建actions-用于相应组件中的动作
const actions = {}
//创建mutations-用于操作数据（state）
const mutations = {}
//创建state-用于数据存取
const state = {}
​
//创建并且暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})
​
​

main.js


import Vue from 'vue'
import App from './App.vue'
​
​
import store from './vuex/store'
​
Vue.config.productionTip = false
​
​
​
const vm = new Vue({
​
  store,
  render: h => h(App),
}).$mount('#app')
​
console.log(vm)

由于import在脚手架里总是先运行，非常离谱，只能将vuex导入到store.js中。

ps\

在模板里不用写this，能直接看到vc身上的东西。

mytest.vue


<template>
  <div>
    <h1>当前的数值为：{{$store.state.sum}}</h1>
    <select v-model="n">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="jia">+</button>
    <button @click="jian">-</button>
    <button @click="jishujia">当前和为奇数再加</button>
    <button @click="dengdengjia">等一等再加</button>
  </div>
</template>
​
<script>
export default {
  name: "MyTest",
  data() {
    return {
      n: 1,
    };
  },
  methods: {
    jia() {
      this.$store.commit("jia", this.n);
      console.log(this.$store.dispatch)
    },
    jian() {
      this.$store.dispatch('jian',this.n)
    },
    jishujia() {
      if(this.$store.state.sum % 2 ){
      this.$store.dispatch('jishujia',this.n)}
    },
    dengdengjia() {
      setTimeout(() => {
        this.$store.dispatch('deng',this.n)
      }, 3000);
    },
  },
};
</script>
​
​
​

store.js


import Vue from 'vue'
​
//引入vuex
import Vuex from 'vuex'
​
Vue.use(Vuex)
//创建actions-用于相应组件中的动作
const actions = {
    // jia(context,value){
    //     console.log('666 action中的加被调用了',context,value)
    //     context.commit('jia',value)
    // },
    jian(context,value){
        context.commit('jian',value)
    },
    jishujia(context,value){
       context.commit('jia',value)
    },
    deng(a,b){
        a.commit('deng',b)
    }
}
//创建mutations-用于操作数据（state）
const mutations = {
    jia(state,value){
        console.log('mutations的jia被调用',state,value)
        state.sum += value
        console.log(state.sum)
    },
    jian(state,value){
        state.sum -= value
    },
​
    deng(a,b){
        a.sum += b
    }
}
//创建state-用于数据存取
const state = {
    sum:0
}
​
//创建并且暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})
​
​

5，vuex开发者工具

打开vue开发者工具，点击上方从左往右第二个图标进入vuex开发者工具。

6，getters配置对象

为什么不能用计算属性代替呢？因为计算属性不能跨组件执行。

mytest.vue


<template>
  <div>
    <h1>当前的数值为：{{$store.state.sum}}</h1>
     <h1>当前的数值扩大十倍为：{{$store.getters.bigsun}}</h1>
    <select v-model="n">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="jia">+</button>
    <button @click="jian">-</button>
    <button @click="jishujia">当前和为奇数再加</button>
    <button @click="dengdengjia">等一等再加</button>
  </div>
</template>
​
<script>
export default {
  name: "MyTest",
  data() {
    return {
      n: 1,
    };
  },
  methods: {
    jia() {
      this.$store.commit("jia", this.n);
      console.log(this.$store.dispatch)
    },
    jian() {
      this.$store.dispatch('jian',this.n)
    },
    jishujia() {
      if(this.$store.state.sum % 2 ){
      this.$store.dispatch('jishujia',this.n)}
    },
    dengdengjia() {
      setTimeout(() => {
        this.$store.dispatch('deng',this.n)
      }, 3000);
    },
  },
};
</script>
​
​
​

store.js


import Vue from 'vue'
​
//引入vuex
import Vuex from 'vuex'
​
Vue.use(Vuex)
//创建actions-用于相应组件中的动作
const actions = {
    // jia(context,value){
    //     console.log('666 action中的加被调用了',context,value)
    //     context.commit('jia',value)
    // },
    jian(context,value){
        context.commit('jian',value)
    },
    jishujia(context,value){
       context.commit('jia',value)
    },
    deng(a,b){
        a.commit('deng',b)
    }
}
//创建mutations-用于操作数据（state）
const mutations = {
    jia(state,value){
        console.log('mutations的jia被调用',state,value)
        state.sum += value
        console.log(state.sum)
    },
    jian(state,value){
        state.sum -= value
    },
​
    deng(a,b){
        a.sum += b
    }
}
//创建state-用于数据存取
const state = {
    sum:0
}
​
const getters= {
    bigsun(state){
        return state.sum*10
    }
}
​
//创建并且暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})
​
​

7，mapState和mapGetters


<template>
  <div>
    <h1>当前的数值为：{{sum}}</h1>
     <h1>当前的数值扩大十倍为：{{shibei}}</h1>
     <p>学校：{{school}},专业：{{$store.state.subject}}</p>
    <select v-model="n">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="jia">+</button>
    <button @click="jian">-</button>
    <button @click="jishujia">当前和为奇数再加</button>
    <button @click="dengdengjia">等一等再加</button>
  </div>
</template>
​
<script>
import {mapState} from 'vuex' 
import {mapGetters} from 'vuex'
export default {
  name: "MyTest",
  data() {
    return {
      n: 1,
    };
  },
  methods: {
    jia() {
      this.$store.commit("jia", this.n);
    },
    jian() {
      this.$store.dispatch('jian',this.n)
    },
    jishujia() {
      if(this.$store.state.sum % 2 ){
      this.$store.dispatch('jishujia',this.n)}
    },
    dengdengjia() {
      setTimeout(() => {
        this.$store.dispatch('deng',this.n)
      }, 3000);
    },   
  },
  computed:{
    // sum(){
    //   return this.$store.state.sum
    // }
    // school(){
    //   return this.$store.state.school
    // },
    //以下代码代替上面的代码（ES6）
​
    // ...mapState({sum:'sum',school:'school'}),
    //上面的代码可以简写成以下的形式
    ...mapState(['sum','school']),
    ...mapGetters({shibei:'bigsun'})
​
  },
  mounted(){
  }
};
</script>

八，getActions和getMutations

 

六，路由

一，什么是路由

路由就是一组key value的对应。 route

多组路由集合为路由器

vue中使用库 vue-router 专门来实现SPA应用

  1. 单页web应用SPA

  2. 整个应用只有一个完整的页面

  3. 点击页面中的导航链接不会刷新页面，指挥做页面的局部更新

  4. 数据需要通过ajax请求获取

ps:这里说一下我在学习过程中一直以来遇到的问题

Component name "XXXXX" should always be multi-word vue/multi-word-component-names

这个问题让我痛不欲生，解决的方法就是在vue项目里package.js里的rules里写上下面的代码，并且重新启动服务器，真的绝了。

 "vue/multi-word-component-names": "off"

二，路由技术的基本使用

安装vue-router插件npm i vue-router@3

这里因为是使用vue2所以只能使用3版本，否则会报错

main.js


import Vue from 'vue'
import App from './App.vue'
​
import VueRouter from 'vue-router'
import router from './router/index'
​
Vue.use(VueRouter)
​
​
Vue.config.productionTip = false
​
new Vue({
  render: h => h(App),
​
  router:router
}).$mount('#app')
​

index.js


import VueRouter from "vue-router";
import About from '../components/About'
import Home from '../components/Home'
import Test from '../components/Test'
​
​
//创建一个路由器
export default new VueRouter({
​
    routes:[
        {
            path:'/about',
            //家人们我真的无语了，手抽把这个C写成大写了。真的绝了，他也不报错
            component:About
        },
        {
            path:'/home',
            component:Home
        },
        {
            path:'/test',
            component:Test
        }
    ],
    mode:'history'
})

App.vue


<template>
  <div>
    <div>
      <div class="row">
        <div class="col-xs-offset-2 col-xs-8">
          <div class="page-header"><h2>Vue Router Demo</h2></div>
        </div>
      </div>
      <div class="row">
        <div class="col-xs-2 col-xs-offset-2">
          <div class="list-group">
            <!-- <a class="list-group-item active" href="./about.html">About</a>
          <a class="list-group-item" href="./home.html">Home</a> -->
            <!-- 实现路由的切换 -->
            <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
            <router-link class="list-group-item" active-class="active" to="/home">Home</router-link>
             <router-link class="list-group-item" active-class="active" to="/test">Test</router-link>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="panel">
            <div class="panel-body">
              <!-- 指定组件的展示位置 -->
              <router-view></router-view>
​
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
​
<script>
export default {
  name: "App",
  components: {},
};
</script>
​
<style>
</style>
​

About.vue


<template>
  <h2>我是About的内容</h2>
</template>
​
<script>
export default {
    name:'About',
       mounted(){
        console.log('beiyingyong ')
    }
}
</script>
​
<style>
​
</style>

Home.vue


<template>
   <h2>我是Home的内容</h2>
</template>
​
<script>
export default {
    name:'Home',
    mounted(){
        console.log('beiyingyong ')
    }
}
</script>
​
<style>
​
</style>

Test.vue


<template>
  <h2>这里是我自己写的Test页面</h2>
</template>
​
<script>
export default {
    name:'Test'
}
</script>
​
<style>
​
</style>

三，路由使用的注意事项

路由组件一般放在component文件下的pages文件夹里

四，路由的嵌套

home.vue


<template>
  <div>
    <h2>Home组件内容</h2>
    <div>
      <ul class="nav nav-tabs">
        <li>
          <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
        </li>
        <li>
          <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
        </li>
      </ul>
            <router-view></router-view>
    </div>
  </div>
</template>
​
<script>
export default {
  name: "Home",
​
};
</script>
​
<style>
</style>

message.vue


<template>
  <div>
    <ul>
      <li>news001</li>
      <li>news002</li>
      <li>news003</li>
    </ul>
  </div>
</template>
​
<script>
export default {
  name: "News",
};
</script>
​
<style>
</style>

news.vue


<template>
  <div>
    <ul>
      <li>news001</li>
      <li>news002</li>
      <li>news003</li>
    </ul>
  </div>
</template>
​
<script>
export default {
  name: "News",
};
</script>
​
<style>
</style>

index.js


import VueRouter from "vue-router";
import About from '../components/About'
import Home from '../components/Home'
import Test from '../components/Test'
import News from '../components/News'
import Message from '../components/Message'
​
​
//创建一个路由器
export default new VueRouter({
​
    routes:[
        {
            path:'/about',
            //家人们我真的无语了，手抽把这个C写成大写了。真的绝了，他也不报错
            component:About
        },
        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'news',
                    component:News
                },
                {
                    path:'message',
                    component:Message
                }
            ]
        },
        {
            path:'/test',
            component:Test
        }
    ],
    mode:'history'
})
​
​

在配置二级路由时，path里的值不能写斜杠

在组件中引入二级路由时，一定要添加上一级路由例如:/home/news

七，Vue UI组件库

移动端ui组件库，pc端ui组件库

以下代码使用elementUI组件

个人感觉非常好用

main.js


import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
//引入ui的全部样式
import 'element-ui/lib/theme-chalk/index.css';
​
//注册成全局的UI
Vue.use(ElementUI);
Vue.config.productionTip = false
​
new Vue({
  render: h => h(App),
}).$mount('#app')
​

app.vue


<template>
  <div >
   <button>原生的按钮</button>
   <input type="text">
​
   <el-row>
  <el-button>默认按钮</el-button>
  <el-button type="primary">主要按钮</el-button>
  <el-button type="success">成功按钮</el-button>
  <el-button type="info">信息按钮</el-button>
  <el-button type="warning">警告按钮</el-button>
  <el-button type="danger">危险按钮</el-button>
</el-row>
  </div>
</template>
​
<script>
​
export default {
  name: 'App',
​
}
</script>
​
<style>
</style>

真就cv工程师

以上是完整引入elementui组件，但是这个时候由于是引入所有的组件，导致写的文件非常大，为了解决这个问题，往下看，使用按需引入。

但是按需引入这里遇到了问题，这个问题又和webpack有关头大了，但是书写的代码是没有问题的。

main.js


import Vue from 'vue'
import App from './App.vue'
​
​
​
import { Button, Row, } from 'element-ui';
​
Vue.config.productionTip = false
​
Vue.component('wds-button', Button);
Vue.component('wds-row', Row);
​
​
new Vue({
  render: h => h(App),
}).$mount('#app')
​

app.vue


<template>
  <div >
   <button>原生的按钮</button>
   <input type="text">
​
   <wds-row>
  <wds-button>默认按钮</wds-button>
  <wds-button type="primary">主要按钮</wds-button>
  <wds-button type="success">成功按钮</wds-button>
  <wds-button type="info">信息按钮</wds-button>
  <wds-button type="warning">警告按钮</wds-button>
  <wds-button type="danger">危险按钮</wds-button>
</wds-row>
  </div>
</template>
​
<script>
​
export default {
  name: 'App',
​
}
</script>
​
<style>
</style>
​

bable.config.js

module.exports = {
  //预设包
  presets: [
    '@vue/cli-plugin-babel/preset',["@bable/preset-env", { "modules": false }]
​
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
​
​

到这里，vue2粗略的学完了，学习内容还有很多需要精细，例如vue生命周期的相关知识等，日后还是有的忙的，重新 学习了解之后，开始卷vue3

标签：vue,default,笔记,学习,state,value,import,store
From： https://www.cnblogs.com/laonianrenws/p/17488410.html

相关文章

  • Makefile编写模板 & 学习笔记
    一、模板#伪命令.PHONY:cleancompileSocompileExerun:compileExe@./maincompileExe:compileSo@g++main.cpp-Llib-lsoowCapture-lcamapi-lpthread=lImageProc-ljpeg-lhv_static-omaincompileSo:@g++fPIC-sharedsoowCapture.cpp-Iinclu......
  • 使用 Vue.js 的 CDN（内容分发网络）来添加 Vue.js
    在您的HTML文件中添加script标签，并指定Vue.js的CDN地址。通常可以通过在 <head> 标签或 <body> 标签的底部添加该标签来加载Vue.js。下面是一个常用的Vue.jsCDN地址：<scriptsrc="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>一下是一个小小的案......
  • java web模板学习
    经过建民老师几次测验我发现我是真写不完那个web系统项目，然后如果真的打分的话，不会很高。所以接下来时间我要学习一些javaweb模板。这个模板吧主要是基于springboot的系统模板。我学习一下，等下次测验就可以快点。......
  • 学习OpenAI的词向量(word embbeding)的原理
    OpenAI中的词向量（wordembedding）是基于大规模语料库的机器学习模型学习出的，通常使用神经网络来训练。这些向量被训练为能够代表词汇的语义和上下文信息，并能够在进行自然语言处理任务时被较好的应用。传统的词向量通常是将单个单词映射到一个高维空间中的向量，并根据上下......
  • Java_Base4之多态、api使用、字符串方法学习
    一、多态Polymorphism少写代码概念：用父类的类型来接收子类的对象先决条件： 继承/接口实现 父类类型接收子类对象 //实现扩展性优点： 扩展性强，解决了代码复用，降低类型耦合度 可以少定义变量，少些重复代码。 案例：一个方法接受不同的子类类型。缺点： 不能使用子类特有方法 ......
  • 学习地址收藏
    算法https://labuladong.gitee.io/algo/设计模式https://refactoringguru.cn/design-patterns......
  • 在高中OI训练中学习到的一点道理
    心态很重要。也许有人说是策略最重要，但是后者无论是制定还是实行都与前者强相关。要加强获得性心态。退一步海阔天空，可能反而发现与目标更近一步。要有大局观。有可能学了十几年学之后发现每一两年过去就会觉得过去很愚蠢，这时候就说明目前的规划有局限，在可能的情况下可以与前......
  • 计算机底层的秘密读书笔记之三
    计算机底层的秘密读书笔记之三IO部分之一我感觉IO应该是最可能给人说明白的一个部分了.也是我这种菜鸟改善应用性能最可能的部分了.CPU内存和cache很难有优化的空间.除非是开发去改垃圾代码.后者是升级硬件.但是IO部分我感觉是有很大的优化空间的.1.IO多路复用.因为......
  • 【技术学习】网络学习--简单tcp服务器
    这是一个用AI生成的简单的tcp服务器代码，我稍微改动了一下命名啥的。可以看到代码非常简短，不过却没什么问题，人工智能还是很强的。#include<iostream>#include<sys/socket.h>#include<netinet/in.h>#include<cstring>#include<unistd.h>#defineMAXLNE4096intmai......
  • 前端Vue非常简单实用商品分类展示组件 侧边商品分类组件
    前端vue非常简单实用商品分类展示组件侧边商品分类组件 ，下载完整代码请访问uni-app插件市场址:https://ext.dcloud.net.cn/plugin?id=13084效果图如下：使用方法<!--flist:第一级数组slist：第二级数组tlist：第三级数组@click：点击事件注意：下一级pid与上一级id对应关联......

赞助商

阅读排行

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

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

Copyright © 2020-2023 IPS99 版权所有 IPS99