一、v-model双向绑定

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <!-- 单项绑定 -->
        <input type="text" :value="msg">
        <!-- 双向绑定 -->
        <input type="text" v-model="msg">
        <select v-model="hobby">
            <option value="1">唱歌</option>
            <option value="2">跳舞</option>
            <option value="3">排球</option>
        </select>
        <h2>{{hobby}}</h2>
    </div>
</body>
<script>
    Vue.createApp({
        data(){
            return {
                msg:"hello vue",
                hobby:2,
            }
        }
    }).mount("#app")
</script>

按键修饰符

<body>
    <div id="app">
        <!-- 消息发送案例 -->
        <div class="content">
            <p v-for="item in arr">{{item}}</p>
        </div>
        <input type="text" v-model="msg" @keyup.enter="handleSend1" @keyup.ctrl.enter="handleSend2">
        <select v-model="opt">
            <option value="1">按下enter键发送</option>
            <option value="2">按下ctrl+enter键发送</option>
        </select>
        <h1>{{msg}}</h1>
        <h2>{{opt}}</h2>
    </div>
</body>
<script>
    let app = Vue.createApp({
        data() {
            return {
                msg: "",
                arr: ["1", "2"],
                opt: 1
            }
        },
        methods: {
            handleSend1() {
                if (this.opt == 1) {
                    this.arr.push(this.msg)
                    this.msg = ""
                }
            },
            handleSend2() {
                if (this.opt == 2) {
                    this.arr.push(this.msg)
                    this.msg = ""
                }
            }
        },
    })
    app.mount("#app")
</script>

二、watch监听（侦听器）

<body>
    <div id="app">
        <button @click="handleAdd">新增学员</button>
        <button @click="handleEdit">编辑学员</button>
        <button @click="num++">修改num{{num}}</button>
        <div v-for="(item,index) in stu">
            序号：{{index}}，姓名：{{item.name}}，成绩：{{item.score}}
        </div>
    </div>
</body>
<script>
    Vue.createApp({
        data() {
            return {
                stu: [
                    { name: "张三丰", score: 100 },
                    { name: "张翠山", score: 60 },
                    { name: "张无忌", score: 90 },
                    { name: "张无忌", score: 90 },
                ],
                num:80
            }
        },
        watch:{
            // 浅监听
            /* stu(){
                console.log("检测到了stu的变化");
            }, */
            num(){
                console.log("检测到了num的变化");
            },
            // 深监听
            stu:{
                handler(){
                    console.log("深度监听了stu的变化");
                },
                deep:true,//开启深度监听
            }
        },
        methods:{
            handleAdd(){
                let arr = [...this.stu,{
                    name:"丽丽",score:88
                }];
                this.stu = arr;
            },
            handleEdit(){
                this.stu[0].name="妮妮"
            }
        }
    }).mount("#app")
</script>

三、生命周期钩子函数

创建阶段
渲染阶段
更新阶段
销毁阶段

生命周期钩子函数

3.1 beforeCreate

在组件实例初始化完成之后立即调用

beforeCreate() {
    console.log("vue准备创建了");
}

3.2 created

在组件实例处理完所有与状态相关的选项后调用

created(){
    console.log("vue对象准备完毕");
}

3.3 beforeMount

在组件被挂载之前调用

beforeMount() {
    console.log("准备渲染了");
}

3.4 mounted

在组件被挂载之后调用

mounted() {
    console.log("渲染完毕了");
}

3.5 beforeUpdate

在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用

beforeUpdate() {
    console.log("即将更新");
}

3.6 updated

在组件因为一个响应式状态变更而更新其 DOM 树之后调用

updated() {
    console.log("更新完毕");
}

3.7 beforeUnmount

在一个组件实例被卸载之前调用

beforeUnmount() {
    console.log("准备卸载")
}

3.8 unmounted

在一个组件实例被卸载之后调用

unmounted() {
    console.log("卸载完毕")
}

四、axios异步请求

基于 Promise 对象封装而成的，专门用于发起 http 异步请求的方法库 axios网址

4.1 回调函数的方式【可能会导致回调地狱】

$.ajax({
    url:'',
    success:(res)=>{

    }
})

4.2 promise 写法

axios({
    url:''
    }).then(res=>{
})

4.3 使用 axios 请求在线接口

axios({
  url:'',
  method:'GET',
  headers:{ //给后端携带验证信息的请求头
    'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.0","e":"16350616353589329939070977"}',
    'X-Host': 'mall.film-ticket.film.list'
  }
}).then(res=>{
  console.log(res);
})

<body>
    <div id="app">
        <div v-for="item in movieList">
            <img :src="item.poster" alt="">
            {{item.name}}
        </div>
    </div>
</body>
<script>
    Vue.createApp({
        data(){
            return{
                movieList:[]
            }
        },
        created() {
            axios({
                url:"https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=2000388",
                method:"GET",
                headers:{//携带一些验证信息给后端
                    'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.2.1","e":"16832856734362668865486849","bc":"110100"}',
                    'X-Host': 'mall.film-ticket.film.list'
                }
            }).then(res=>{
                console.log(res);
                this.movieList=res.data.data.films
            })
        },
    }).mount("#app")
</script>

五、class动态绑定几种方式

5.1 三目

<div class="box" :class="isActive?'active':''">三目</div>
isActive:true

5.2 对象

<div class="box" :class="{'active':isActive}">对象</div>
isActive:true

5.3 数组+对象

<div :class="['box',{'active':isActive}]">数组+对象</div>
isActive:true,

5.4 数组+三目

<div :class="['box',isActive?'active':'']">数组+三目</div>

5.5 数组

:class="['box']"

六、内联样式的绑定

<div class="box" :style="{'background-color':bgColor}"></div>
bgColor: "blue"

七、组件化

7.1 单文件组件（SFC-Single File Component）

文件名为xxx.vue

7.2 什么是组件化

组件是一个独立封装，带有功能的一个代码板块
组件三要素：
- 结构 HTML
- 样式 CSS
- 功能 JS、JQuery、Vue

7.3 为什么采用组件化

提高代码的复用性、提升开发效率
项目可维护性较好

7.4 如何实现组件化开发

封装组件
挂载组件
调用组件

7.5 组件的复用性

开放封闭原则
开放组件应该提供一些供使用者可自定义调整的接口【为了使用更灵活】
封闭组件内部的通用功能，应该在内部实现后，方便直接调用【使用更便捷】

7.6 组件的两种注册方式

全局注册

// 全局注册组件
app.component("my-num", {
  template: `<button @click="handleNum">组件按钮{{num}}</button>`,
  data() {
    return {
      num: 110,
    };
  },
  methods: {
    handleNum() {
      this.num++;
    },
  },
});

局部注册

// 局部注册
components: {
    "my-num": {
      template: `<button @click="handleNum">组件按钮{{num}}</button>`,
      data() {
        return {
          num: 110,
        };
      },
      methods: {
        handleNum() {
          this.num++;
        },
      },
    },
    "my-select": {},
},

八、props 组件传参（父传子）

在组件内部开放一个数据接口，供用户向组件内部传递自定义的数据

8.1 在组件内部定义 props

props:['list','holder'],

8.2 在调用组件的时候，传递 props

<my-select :list="food" holder="请选择食物"></my-select>

8.3 命名规范

全小写 listdata
全大写 LISTDATA const 定义的常量才会使用
小驼峰 listData
大驼峰 ListData
烤串命名法 list-data

8.4 props 命名要求

组件外部全小写传递(list)，内部全小写接收(list)
组件外部烤串传递(list-data)，内部使用小驼峰接收(listData)

<body>
    <div id="app">
      <my-select :list-data="skill"></my-select>
      <my-select :list-data="food"></my-select>
    </div>
</body>
<script>
    let app = Vue.createApp({
      //创建vue应用
      data() {
        //数据包
        return {
          skill: ["HTML", "Vue"],
          food: ["火锅", "拱嘴", "冰粉凉虾"],
        };
      },
    });
    app.component("my-select", {
      template: `<div class="my-select">
          <input type="text"/>
          <ul>
            <li v-for="item in listData">{{item}}</li>
          </ul>
        </div>`,
      props: ["listData"], //当前组件调用时可以接收一个list属性参数
    });
    app.mount("#app");
</script>

select组件交互
<body>
    <div id="app">
      <my-select :list-data="skill"></my-select>
      <my-select :list-data="food"></my-select>
    </div>
</body>
<script>
    let app = Vue.createApp({
      //创建vue应用
      data() {
        //数据包
        return {
          skill: ["HTML", "Vue"],
          food: ["火锅", "拱嘴", "冰粉凉虾"],
        };
      },
    });
    app.component("my-select", {
      template: `<div class="my-select">
          <input type="text" @focus="isShow=true" @blur="isShow=false" :value="msg"/>
          <ul v-if="isShow">
            <li v-for="item in listData" @mousedown="handleMsg(item)">{{item}}</li>
          </ul>
        </div>`,
      props: ["listData"], //当前组件调用时可以接收一个list属性参数
      data() {
        return {
          isShow: false,
          msg: "",
        };
      },
      methods: {
        handleMsg(item) {
          this.msg = item;
        },
      },
    });
    app.mount("#app");
</script>

Vue - day02