1.v-model双向绑定

语法: v-model="Vue数据变量"

v-model暂时只能用在表单标签上
v-model的作用:把Vue的数据变量, 和表单的value属性, 双向绑定在一起

<template>
<div>
<input type="text" v-model="uname" />
</div>
</template>
<script>
    export default {
           data() {
       return {
         uname: "zs",
       };
      },
     };
</script>
<style>
</style>  

v-model双向绑定2

 1. 下拉表单v-model写在哪里?
     v-model写在select上, value写在option上, Vue变量关联value属性的值

 2. v-model用在复选框时, 需要注意什么?
    非数组 – 关联的是checked属性     数组 – 关联的是value属性

3. Vue变量初始值会不会影响表单的默认状态?
   会影响, 因为双向绑定, 互相影响
 <template>
 <div>
<select v-model="city">
  <option value="bj">北京</option>
  <option value="sh">上海</option>
  <option value="wh">武汉</option>
  <option value="gz">广州</option>
</select>
<hr />
爱好: <input type="checkbox" value="cy" v-model="hobby" /> 抽烟
<input type="checkbox" value="drink" v-model="hobby" /> 喝洒
<input type="checkbox" value="yellow" v-model="hobby" /> 烫黄毛
<hr />
性别: <input type="radio" value="1" v-model="gander" /> 男
<input type="radio" value="0" v-model="gander" /> 女
<hr />
自我介绍: <textarea v-model="info"></textarea>
 </div>
</template>

 <script>
  export default {
  data() {
     return {
       city: "wh",
       hobby: ["yellow", "drink"],
       gander: "",
       info: "",
     };
   },
 };
</script>
<style>
</style>

2.动态class

      语法 :class="{类名: 布尔值}"
 注意:    :class="{类名: 布尔值}",true使用, false不使用
 

3.动态style

 语法 :style="{css属性名: 值}"
 style赋值和class区别是:
      :class="{类名: 布尔值}",true使用, false不使用
      :style="{css属性名: 值}"  
      
  <template>
 <div>
     <h1 :style="{ color: colorStr }">hello</h1>
</div>
</template>

<script>
    export default {
         data() {
    return {
        colorStr: "yellow",
       };
      },
     };
</script>
<style>
</style>     

4.Vue计算属性_computed

1. 计算属性使用场景?
    当变量的值, 需要通过别的变量计算而得来

 2. 计算属性特点?
    函数内使用的变量改变, 重新计算结果返回

 3. 计算属性注意事项?
    计算属性名和data里名字不能重复

注意:计算属性也是vue数据变量, 所以不要和data里面的Vue变量重名, 用法和Vue变量相同

5.Vue计算属性_缓存

1. 计算属性好处是?
   带缓存
   依赖项不变, 直接从缓存取
   依赖项改变, 函数自动执行并重新缓存值

2. 计算属性使用场景?
   当变量值, 依赖其他变量计算而得来才用

案例说明:

   <template>
  <div>
      <p>{{ num }}</p>
      <p>{{ num }}</p>
      <p>{{ num }}</p>
     <h1>{{ getNum() }}</h1>
     <h1>{{ getNum() }}</h1>
     <h1>{{ getNum() }}</h1>
 </div>
 </template>

<script>
   export default {
          data() {
         return {
           a: 10,
           b: 20,
         };
        },
  computed: {
       num() {
        console.log("我是计算属性");
        return this.a + this.b;
       },
      },
  methods: {
       getNum() {
              console.log("我是函数");
              return this.a + this.b;
            },
          },
         };
  </script>
  <style>
  </style>
  

6.Vue计算属性_完整写法

1.何时用计算属性完整写法?
 给计算属性变量赋值时

2. set函数和get函数什么时候执行?
   set接收要被赋予的值
   get里要返回给这个计算属性具体值使用

 <template>
 <div>
     <input type="text" v-model="uname" />
 </div>
</template>

<script>
 export default {
       computed: {
           uname: {
          set(val) {
        console.log(val);
        },
    get() {
         return "lis";
      },
    },
  },
};
 </script>
 <style>
 </style>

7.全选与反选案例:

   <template>
 <div>
<span>全选:</span>
<input type="checkbox" v-model="isAll" />
<button @click="fn">反选</button>
<ul>
  <li v-for="(item, index) in arr" :key="index">
    <input type="checkbox" v-model="item.c" />
    <span>{{ item.name }}</span>
  </li>
</ul>
</div>
</template>

<script>
 // 1. 小选影响全选
 // 1.1 从 md 笔记里面 copy 对应的结构到 App.vue
 // 1.2 在 li 身上 使用 v-for 循环
 // 1.3 小选框需要双向绑定
 // 1.4 给 全选框 v-model="isAll" isAll 是计算属性
 // 1.5 定义 计算属性 isAll 现在使用的基本用法 使用 every() 方法

 // 2. 全选影响 小选
 // 2.1 将 计算属性 isAll 变成 完整写法
 // 2.2 在 set 函数 可以获取到 全选框的 checked 属性值

// 3. 反选功能
// 3.1 需要给 反选按钮 注册点击事件
// 3.2 在 methods 里面 定义函数 fn
// 3.3 在 fn 函数里面 需要遍历数组 对 c 属性 取反在 赋值为 c 属性即可

 export default {
   data() {
return {
  arr: [
    {
      name: "猪八戒",
      c: false,
    },
    {
      name: "孙悟空",
      c: false,
    },
    {
      name: "唐僧",
      c: false,
    },
    {
      name: "白龙马",
      c: false,
    },
  ],
};
},
 computed: {
// isAll() {
//   // 如果说 arr 数组里面 的 c 属性的值 如果都为 true 则 返回 true
//   // 如果说 arr 数组里面 的 c 属性的值 有一个 不是 true 则 返回 false
//   // every() 方法
//   return this.arr.every(item => item.c)
// }
isAll: {
  set(val) {
    // set 函数 给 计算属性 赋值时 触发 set 函数
    // console.log(val)
    // 将 val 变量的值 赋值给 数组里面 所有的 c 属性
    this.arr.forEach((item) => (item.c = val));
  },
  get() {
    // 使用计算属性时 触发 get 函数
    // 如果说 arr 数组里面 的 c 属性的值 如果都为 true 则 返回 true
    // 如果说 arr 数组里面 的 c 属性的值 有一个 不是 true 则 返回 false
    // every() 方法
    return this.arr.every((item) => item.c);
  },
},
},
 methods: {
fn() {
  // ? 如果 数组里面的 c 数组 值 为 true 就将它取反 变成 false
  // ? 如果 数组里面的 c 数组 值 为 false 就将它取反 变成 true
  this.arr.forEach((item) => (item.c = !item.c));
},
 },
};
</script>

8.Vue侦听器_watch

   如何侦听到某个变量值改变呢?
   使用watch配置, key要侦听的data/计算属性名
   

 <template>
  <div>
     <input type="text" v-model="uname" />
  </div>
 </template>

 <script>
       export default {
       data() {
        return {
         uname: "张三",
        };
      },
 watch: {
     uname(newVal, oldVal) {
       console.log(newVal, oldVal);
    },
  },
};
 </script>

 <style>
 </style>
 

9. Vue侦听器_深度侦听

  如何侦听一个对象/数组呢?
  把侦听器写成对象形式, 给handler方法和deep:true
  

<template>
  <div>
      <input type="text" v-model="obj.uname" />
 </div>
</template>

<script>
      export default {
       data() {
         return {
            obj: {
            uname: "张三",
           },
         };
       },
 watch: {
      obj: {
        deep: true, //开启深度侦听
       //handler不能更改
        handler(newVal) {
        console.log(newVal.uname);
      },
     },
   },
 };
</script>

<style>
</style>

10.for更新检测

 <template>
  <div>
   <ul>
        <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
   </ul>
       <button @click="fn1">添加</button>
       <button @click="fn2">翻转</button>
       <button @click="fn3">截取</button>
       <button @click="fn4">更新值</button>
  </div>
</template>

<script>
      export default {
       data() {
         return {
            arr: ["老大", "老二", "老三"],
         };
       },
  methods: {
       fn1() {
               this.arr.splice(1, 0, "新来的");
            },
       fn2() {
              this.arr.reverse();
            },
      fn3() {
             this.arr = this.arr.slice(1, 3);
            },
      fn4() {
              this.$set(this.arr, 0, "张三");
             },
           },
         };
     </script>

     <style>
     </style>
     

注: 数组中如果通过下标不会更新页面,就拿返回的新数组,直接替换旧数组,

或者用this.$set()方法更新某个值

11. v-model修饰符

 <template>
 <div>
       <!-- v-model 修饰符  -->
       <!-- v-model.number="Vue的变量"转成数字类型 -->
<input type="text" v-model.number="num" /> <br />
        <!-- v-model.trim 去除字符串左右的空格 -->
<input type="text" v-model.trim="user" /> <br />
<input type="text" v-model.lazy="str" />
</div>
</template>

 <script>
   export default {
     data() {
     return {
     num: 10,
     user: "ab",
     str: "",
   };
  },
 };
</script>

 <style>
 </style>
 

12.品牌管理数据铺设案例

格式化时间

计算总价和平均价

数据缓存,当删除表格里面的数据后,刷新页面表格不会出现,添加数据刷新页面会一直存在表格里面