vscode

vscode的调试，按f5就会出现用什么样的方式进行调试。

进行一个选择

扩展软件：debugger chrome

使用：需要一个服务器的插件。http-server .

f5的时候，需要修改地址。地址是在服务器下边才可以的。

调试页面

vscode使用chrome调试普通的html页面的方法如下：

1，扩展软件的安装：debugger of chrome

2,当前项目下安装http-server

3，在http-server 安装后，在node_modules/http-server/bin，在vscode终端，运行http-server path（指的是把某个目录当成服务器目录），会有一个8080端口的服务器，运行后也是可以访问的。

4，f5 进行调试，选择chrome 的方式。选择html页面，在html页面引入的js文件，会自动跳转到被打断点的js文件里边。

注意：

如果没有安装debugger chrome 则会跳出如下的提示，是否需要安装调试的工具。其中就有chrome的提示。

vscode中管理git

vscode克隆github内容到本地

远程连接的地址是，点击克隆的时候会让我输入一个git的地址。

下异步操作：

克隆成功后，右下角会有提示，是否选择新窗口打开还是当前的窗口。

成功后的截图如下：

内容有变化的时候：

提交内容：

点勾，表示是否需要提交，选择时，输入提交内容，回车就提交了。

提交只是保存到本地仓库而已。这时选择推送，就是保存到了github上。

vscode需要设置Email和name

这个是设置email的方法。

vue扩展插件：

render函数

render()函数是把渲template的模板进行相关的处理后渲染成虚拟dom。

计算属性和监听器

computed 计算属性 与方法的区别：计算属性只要当值发生变化的时候才会重新渲染。计算属性是有缓存的效果的。也就是说，在值发生改变的时候它的值是缓存起来的。

监听器：watch

监听器默认情况下是不会立即执行的，初始化的时候是不会立即执行的。需要设置一个数才会立即执行。

这个监听器的设置是初始化时也会执行，执行的代码是如下。注意：handler是固定写法，并不是被监听的属性。

如下代码：

Vue组件

vue边界组件通信

经常用的组件通信是props vuex等。

但是还有一些边界的组件的通信。

$parent 的通信方式：

就两步：

第一步是在触发组件中定义，如下图：

第二步是，接收组件中监听：

$children的组件通信

在父组件中获取所有的子组件，然后调用子组件中方法，其实是直接执行子组件中的方法。

父类中写这个方法：

在子类中定义：

在子类1中的方法是：

在子类2中的方法是：

结果是：

注意：this.$children的时候是不能够保证子元素的顺序，所以最好是相同的方法，只是不同的执行结果而已。我上述的方法就是不同的，所以是很不好的。

个人总结：我认为是在components中的组件才被成为是子类，才会被放入到children里边。

$attrs 和$listeners

如果父组件给子组件传递属性时，子组件并没有设置props，那么可以通过$attrs进行获取这些父组件传递过来的属性。

如下图：

子组件：

输出的结果：

子组件调用父组件的函数

父类给子类传递的方法，传递的方式@click，但是事实子类无法接收。只能在子类中触发这个方法。

这个方法是写在父类的方法对象里边的，如下：

子类中触发，父类传递过来的方法是：

圈起来的那部分是一个固定的写法。

这个是展开父类给子类传递的所有的方法，并且进行执行。

provid / inject(提供和注入)

如下截图：

父类组件中的声明

子类组件中的使用：

作用域卡槽

就是子类组件在父类中使用时，使用子类传输过来的数据。

如下代码和解析：

作用域卡槽的定义：

作用域卡槽的使用：

卡槽作用域的进一步理解：

其实我们在子类中定义传输数据的时候，会有一个上下文来接收这些所有的数据，然后把所有的数据解构给相对应的变量。上边是解构的代码。

这个是不解构的代码：

卡槽传递两个属性，其实可以更多的。以两个为例。

父类的该组件接收：

我们不用{}解构的方法。会是直接获取上下文。输出上下文会看到所有的数据：

组件实现KInput

组件的标准是：高内聚 低耦合

组件功能单一或者是纯粹

思路：

1，(最里边)纯数据绑定

2，(中间)label和错误信息的显示

3，(最外边)数据的传递和校验规则的传递

嵌套使用的是卡槽slot的规则。

最深层使用最外边的数据是使用的provide 和 inject的方式实现的。

XMInput组件实现

这个组件只是做纯数据的绑定。

v-model具体内容

上述代码是组件中v-model被分解后的结构。

组件里面只要提交input事件，就可以改变外边的value值，外边的value值改变后又传递给了组件里边的value，所以形成了一个循环。

如下代码：

传递过来的属性定义是：

第二种情况：

我们单独使用input组件，使用v-model值 同样是双向绑定的，为什么呢？

其实还是可以用这个代码来解释，因为input框变化时，就会触发@input事件。从而改变value值。

XMFormItem 组件的实现

XMInput组件是他的子组件。

传递属性的展开：

v-bind="$attr"

需要注意的地方是inheriAttrs的设置。

默认是true。我们在子组件中设置过属性，则根组件的$Attrs会有子组件的属性。如果子组件中设置inheriAttrs为false。则根组件就不会有。

例如，有些属性我并没有props进行接收，可以用v-bind="$attr" 进行展开。