功能需求：点击全选，选中所有复选框，选中之后，如果取消某一个复选框，全选状态自动取消。

1.全选按钮：实现思路，点击全选按钮，遍历所有列表复选框，吧全选按钮的状态（true|false）赋值给每一个列表复选框

代码如下：

<p class="qx">全选<input type="checkbox" @click="selectable" v-model="seall"></p>

<script>
export default {
    data() {
        return {
            seall: false,

        }
    },
}
</script>

点击事件

        selectable() {
            for (let key of this.list) {
                key.sel = !this.seall
            }
        },

2.功能需求二：全选之后如果取消列表某一个子选项全选状态自动取消，思路：给列表的复选框添加监听事件，然后遍历所有复选框，用every 如果都为真就返回true，有一个为假就返回false，在吧这个返回值赋给全选按钮。

代码如下

    watch: {
        list: {
            handler(val) {
                this.seall = val.every(v => v.sel === true);
            },
            deep: true
        }
    },

list是存储数据的数组，，控制复选框的是sel 通过true和false来控制复选框是否启用，结构如下：

list: [{name:"",img:"",price:"",num:"",sel:false}]

代码解释如下：

1. val 是 list 数组当前的值，也就是变化后的值
2. val.every(v => v.sel === true) 表示遍历 val 数组，对于数组中的每一个元素 v，都要判断其 sel 属性是否为 true
3. 如果 val 数组中每一个元素的 sel 属性都为 true，则返回的结果为 true，否则返回的结果为 false
4. 如果 val 中的所有元素的 sel 属性都为 true，则 this.seall 被赋值为 true，否则赋值为 false

1.methods和computed相同点都是可以进行一个计算

2.methods和computed不同点，computed比methods的运行效率高，methods每次被调用都会执行，但是computed只会执行一次，（只有当引用的值发送改变的时候才会执行，有缓存功能，提高了性能）

3.methods和computed用法不同，methods调用的时候需要加（），computed不需要，例如:

<p>总价{{a()}}</p> //methods
<p>总价{{a}}</p> //computed

1.在vue中style行内动态样式通过 :style来开启动态属性，style={样式名:值}控制如下：

<p :style="{ backgroundColor: cor, fontSize: size }">这是一段文本</p>

export default {
  data() {
    return {
      cor: 'yellow',
      size: '30px'
    }
  }
}

2.动态Class样式通过:class="{样式名:true|false}"来开启，通过真假控制是否启用样式，如下

<p :class="{ cors: bol, font: sz }">Class动态样式</p>

export default {
  data() {
    return {,
      bol: true,
      sz: true,
    }
  }
}

.cors {
  background-color: #4ce48e;
  line-height: 2;
}

.font {
  font-size: 2em;
}

进阶用法：例如：通过点击按钮控制样式是否显示，给元素绑定点击事件，点击之前给控制样式的值，取反可控制是否开启和显示，如下

<p @click="as" :class="{ cors: bol, font: sz }">Class动态样式</p>

  methods: {
    as() {
      this.sz = !this.sz
    }
  }

或者

<p @click="sz = !sz" :class="{ cors: bol, font: sz }">Class动态样式</p>

今天写vue项目遇到需要判断所有input框是否都填写了内容，用到了一个every具体如下：

判断每一个input是否都填写了内容

<input :type="v.type" :placeholder="v.ts" v-model="v.md" />

   title: [
                { name: '姓名', ts: '请输入姓名', md: '', type: 'text' },
                { name: '年龄', ts: '请输入年龄', md: '', type: 'number' },
                { name: '性别', ts: '请输入性别', md: '', type: 'text' },
                { name: '手机', ts: '请输入手机号', md: '', type: 'text' },
            ]

  is() {
            return this.title.every(v => v.md !== '');//判断所有input是否都填写完成，都不=空返回true，一个为空返回false
        }

再通过判断的返回值进行一个操作，

        add() {
            if (this.is) {
                this.list.push(this.title.map(v => v.md));
                // 提交之后清空input内容
                this.title.forEach(v => v.md = '');
            } else {
                alert('请填写所有信息');
            }
        },

方法一：

import logo from './assets/logo.png'

方法二：

data(){
    return{
        logo:require("./assets/logo.png")
    }
}

1.引入子组件

import 自定义名字 from '子组件路径'

2.注册子组件

 components:{
            使用名字:引入子组件的自定义名字
        }

3.使用子组件

<name></name>

完整示例

<template>
    <div>
        <h1>当前组件</h1>
        <name></name>
    </div>
</template>

<script>
import HelloWord from './components/HelloWorld.vue'
    export default {
        components:{
            name:HelloWord
        }
    }
</script>

1.全局安装vue-cli

yarn global add @vue/cli

2.创建项目

vue create 名称

3.进入项目目录/启动项目

yarn serve

npm run serve

1.在state定义空数组

  state: {
    goodsList:[],//商品列表
  },

2.在 mutations里面写更新数据方法,payload 是传递过来的值，赋值给state下面的goodsList数组

  mutations: {
    // 存储商品
    addGoods(state,payload){
      state.goodsList=payload
    }
  },

3.吧获取到的数据传递给vuex 用this.$store.commit方法传递数据

// 把获取到的数据传递给vuex
        this.$store.commit('addGoods',res.data.data)

4.在从computed里面读取存vuex储的数据

    computed:{
        // 从vuex里面读取商品数据
        list(){
        return  this.$store.state.goodsList
        }
    }