项目笔记（一）｜青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 10 天最近在网上学着做项目，这是过程中

这是我参与「第五届青训营」伴学笔记创作活动的第 10 天 最近在网上学着做项目，这是过程中记录的一些笔记。 input（复选框(checkbox)）后面有一个label

input的id属性是和label的for属性绑定的再用v-model获取到label的文字

<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>

Bootstap

Bavbar

vue

v-model

是什么

v-model 是Vue框架的一种内置的API指令，本质是一种语法糖写法。v-model指令可以在表单input、textarea以及select元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素。本质上不过是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理；
什么时候用

表单提交是开发中非常常见的功能，也是和用户交互的重要手段：比如用户在登录、注册时需要提交账号密码；比如用户在检索、创建、更新信息时，需要提交一些数据；这些都要求我们可以在代码逻辑中获取到用户提交的数据，我们通常会使用v-model指令来完成

v-model的原理其实是背后有两个操作：

v-bind绑定value属性的值；
v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定的属性中；

v-model是双向绑定
v-model是单向数据流
...

Props 和 Data

Vue提供了两种不同的存储变量：props和data。

data是每个组件的私有内存，可以在其中存储需要的任何变量。props是将数据从父组件传递到子组件的方式。

在Vue中，props(或properties)是我们将数据从父组件向下传递到其子组件的方式。

暂时的理解是：

props是用来传值的

data是给组件自己用的

setup

setup的实际是为了使用组合式API

setup位于created 和beforeCreated之前,用于代替created 和beforeCreated,但是在setup函数里不能访问到this,另外setup内可以通过以下hook操作整个生命周期

onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured,onRenderTracked,onRenderTriggered

setup可接受的参数

可接受props，context。其中props由于是响应式数据,不能直接解构赋值,context不是响应式数据,可以直接解构赋值;setup必须返回一个对象,一旦return,就可以像vue2.x的方式使用该属性
```
props:['test']
setup(props,context){
//const {test} = props //错
const {test} = toRefs(props) //对
const { attrs, slots, emit }= context //对
  return {
    test
  }
}
```
如何调用子组件setup内的方法
1. 子组件在setup写好方法method,并通过return暴露出去
2. 父组件调用子组件时为其添加ref属性
3. 父组件setup内拿到(2)添加的ref属性property,再通过property.value.method()调用子组件

reactive

定义: 接收一个普通对象然后返回该普通对象的响应式代理。等同于 2.x 的 Vue.observable()

jQuery

blur( )方法

当元素失去焦点时发生 blur 事件。

blur() 函数触发 blur 事件，或者如果设置了 function 参数，该函数也可规定当发生 blur 事件时执行的代码。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").focus(function(){
    $("input").css("background-color","#FFFFCC");
  });
  $("input").blur(function(){
    $("input").css("background-color","#D6D6FF");
  });
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
</body>
</html>

项目笔记（一）｜ 青训营笔记