Vue2知识点总结及学习心得后续

Vue2后续笔记

插槽

默认插槽

不能直接给插槽写样式,因为会被替换掉,可以包起来,给外面的盒子样式

  1. App.vue

    <template>
      <div id="app">
        <Category title="美食" :listDate="foods">
          <img src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg" alt="" />
        </Category>
        <Category title="游戏">
          <ul>
            <li v-for="(item, index) in games" :key="index">{
         {
          item }}</li>
          </ul>
        </Category>
        <Category title="电影">
          <video
            controls
            src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
          ></video>
        </Category>
      </div>
    </template>
    
    <script>
    import Category from "./components/Category.vue";
    
    export default {
         
      name: "App",
      components: {
         
        Category,
      },
      data() {
         
        return {
         
          foods: ["火锅", "烧烤", "小龙虾", "牛排"],
          games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
          films: ["教父", "拆弹专家", "你好,李焕英", "功夫"],
        };
      },
    
  2. Category.vue

就是在子组件里面定义一个插槽,等着组件的使用者进行填充 ,父组件没填充则它会默认显示标签里面的内容

   <template>
     <div class="category">
       <h3>{
   {
    title }}分类</h3>
        
       <slot>我是默认值,当使用者没有传递具体结构时,我会出现</slot>
     </div>
   </template>

   <script>
   export default {
   
     name: "Category",
     props: ["title"],
   };
   </script>

具名插槽

1.最新写法v-slot:footer,但是只能写在template上; 2.父组件里面是可以追加的,不会覆盖

v-slot:可以简写为#

<template>
  <div id="app">
    <Category title="美食" :listDate="foods">
      <img
        slot="center"
        src="https://s3.ax1x.com/2021/01/16/srJlq0.jpg"
        alt=""
      />
      <a slot="footer" href="http://www.atguigu.com">更多美食</a>
    </Category>
    <Category title="游戏">
      <ul slot="center">
        <li v-for="(item, index) in games" :key="index">{
   {
    item }}</li>
      </ul>
      <div class="foot" slot="footer">
        <a href="http://www.atguigu.com">单机游戏</a>
        <a href="http://www.atguigu.com">网络游戏</a>
      </div>
    </Category>
    <Category title="电影">
      <video
        slot="center"
        controls
        src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
      ></video>
      <!-- 最新写法,但是只能用在template上 -->
      //<template v-slot:footer>
             <template #footer>
        <div class="foot">
          <a href="http://www.atguigu.com">经典</a>
          <a href="http://www.atguigu.com">热门</a>
          <a href="http://www.atguigu.com">推荐</a>
        </div>
        <!-- 是可以追加的,不会覆盖 -->
        <h4>欢迎前来观影</h4>
      </template>
    </Category>
  </div>
</template>

<script>
import Category from "./components/Category.vue";

export default {
   
  name: "App",
  components: {
   
    Category,
  },
  data() {
   
    return {
   
      foods: ["火锅", "烧烤", "小龙虾", "牛排"],
      games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
      films: ["教父", "拆弹专家", "你好,李焕英", "功夫"],
    };
  },
};
</script>

<style>
#app {
   
  display: flex;
  justify-content: space-around;
}
video {
   
  width: 200px;
}
.foot {
   
  display: flex;
  justify-content: space-around;
}
h4 {
   
  text-align: center;
}
</style>

<template>
  <div class="category">
    <h3>{
   {
    title }}分类</h3>
    <!-- 就是定义一个插槽,等着组件的使用者进行填充 -->
    <slot name="center">我是默认值,当使用者没有传递具体结构时,我会出现1</slot>
    <slot name="footer">我是默认值,当使用者没有传递具体结构时,我会出现2</slot>
  </div>
</template>

<script>
export default {
   
  name: "Category",
  props: ["title"],
};

作用域插槽

1.就是以插槽的形式让父组件可以使用子组件的数据,2.父组件必须使用template包裹起来3.且接收过来的值用对象的形式包裹着

v-slot:default=“scoped” 可以简写成#default=“scoped” 或者 v-slot=“scoped”

父组件
<template>
  <div id="app">
    <Category title="游戏">
      <template #Cat="atguigu">
        <ul>
          <li v-for="(g, index) in atguigu.games" :key="index">{
   {
    g }}</li>
        </ul>
      </template>
    </Category>
    <Category title="游戏">
      <!-- 解构赋值 -->
      <template #Cat="{ games }">
        <ol>
          <li style="color: red" v-for="(g, index) in games" :key="index">
            {
   {
    g }}
          </li>
        </ol>
      </template>
    </Category>
    <Category title="游戏">
      <template #Cat="{ games }">
        <h4 v-for="(g, index) in games" :key="index">{
   {
    g }}</h4>
      </template>
    </Category>
  </div>
</template>
------------------------------------------------------------------------------------
子组件
<template>
  <div class="category">
    <h3>{
   {
    title }}分类</h3>
    <slot name="Cat" :games="games"
      >我是默认值,当使用者没有传递具体结构时,我会出现1</slot
    >
  </div>
</template>

<script>
export default {
   
  name: "Category",
  props: ["title"],
  data() {
   
    return {
   
      games: ["红色警戒", "穿越火线", "劲舞团", "超级玛丽"],
    };
  },

Vuex

import store from ‘./store’ ,import优先级>Vue.use

插件是要在main.js中引入

  1. npm i vuex@3.6.2 来安装较低的版本,不然会有一堆奇怪警告和报错,这是因为vuex4.0及以上的版本不兼容Vue2。
  2. 组件中读取vuex中的数据:$store.state.sum
  3. 组件中修改vuex中的数据:$store.dispatch('action中的方法名',数据)$store.commit('mutations中的方法名',数据)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X3a7pC7a-1670567274173)(D:\新的开始md\Vue\image\vuex.png)]

1.如果没啥逻辑,vc也是可以直接到mutations的

2.Vc是顾客,actions是服务员,Mutations是厨师

Vuex基本使用

Vuex管理的数据无法直接v-model数据双向绑定

<template>
  <div class="box">
    <h1>当前求和为:{
   {
    $store.state.sum }}</h1>
    <select name="bd" v-model.number="n">
      <option value="1" selected>1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">当前和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
export default {
   
  name: "Add",
  data() {
   
    return {
   
      n: 1, //用户选择的数字
    };
  },
  methods: {
   
    increment() {
   
      //不需要啥逻辑方法是可以直接commit调用mutations方法的
      // this.$store.dispatch("jia", this.n);
      this.$store.commit("JIA", this.n);
    },
    decrement(
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值