hhhhhhhhhhhhhhhc的博客

Xshell 方式 （推荐）官网下载https://www.xshellcn.com/xiazai.htmlhttps://www.netsarang.com/zh/free-for-home-school/网盘下载链接：https://pan.baidu.com/s/1wyWsKsl_g0UD5TOBVoFBuA提取码：love第三方下载https://gitee.com/2xx/mytools/raw/master/xshell_xftp.zip安装环境方式1：脚本安装安装 nod

在首次渲染之前，首先进行初始化，就是初始化vue的实例成员和静态成员。初始化结束之后，调用构造函数new Vue()在构造函数中调用了_init()方法，这个方法相当于整个vue的入口，在这个方法中最终调用了$mount()在entry-runtime-with-compiler.js中的mount，即入口文件的mount，即入口文件的mount，即入口文件的mount，这个文件中的**$mount的核心作用是帮我们把模板编译成render函数**，但他首先会判断我们是否传入了render，如果没.

模板编译：（静态根节点：又有子项 又只有字符）模板字符串—>ast对象（抽象语法树）—>优化ast对象（标记静态根节点）—>转换成字符串形式的代码—>通过newFunction函数转换成匿名函数—>生成render函数compileToFunctions:首先从缓存加载编译好的render渲染函数，如果缓存中没有的话调用compile（template，options）在compile函数中，首先去合并选项options。然后调用baseCompile编译模板。c

自定义指令Vue.directive("指令名称",{ //inserted:function(el) inserted(el){ //el就是使用自定义指令的标签元素 //js操作。。。 }})指令名称不需要添加v-前缀，但是在使用指令的时候需要添加v-前缀inserted 被绑定元素插入父节点时就会调用该函数bind 指定绑定到对应的元素后就会调用该函数示例代码：<div id="app"> <input type="text" v-focus&

一、介绍官网：https://www.tslang.cn/typescript是javascript超集，由微软开发并开源它的语法规范、严谨，适合开发大型项目二、环境搭建1.安装npm i typescript -g验证是否安装成功tsc -v2.编译(1)手动编译创建一个后缀为ts的文件，比如index.ts，并编写js代码tsc index.ts只要执行了编译命令，就会创建一个同名的js出来(2)自动编译①创建一个项目，并用ts初始化初始化好之后就在当前文件夹中存在

插槽在父组件中复用子组件时，子组件中展示内容/结构由父组件来告知。slot(1)匿名插槽第一步：在子组件中添加一个slot标签，用来展示父组件传递的内容（可以是数据也可以是html结构）<template><div> <!-- 插槽 --> <slot></slot> <slot></slot></div></template>只要在子组件中设置了slot标

1.父子组件自定义属性和props第一步：先创建两个组件，一个父组件parent.vue，一个子组件child.vue在App.vue中引入父组件，并使用它<script>import vParent from './components/parent'export default { components: { vParent }}</script><template> <div class="page">

父子组件：1.App.vue中引入父组件并挂载 别忘了在结构中加入父组件标签2.父组件中：①写要传递的data数据②引入子组件并挂载③在父结构里写子组件标签 并且把要传递的数据动态绑定传过去3.子组件中：①用props属性接收传递的数据②将传递的数据渲染子父组件：（子父组件传值需要触发事件）1.App.vue中引入父组件并挂载 别忘了在结构中加入父组件标签2.子组件中：①写要传递的data数据②写触发事件 如按钮中@click=“函数名”③methods方法中写函数 用$emit方

监听器侦听器作用：检测变量值的变化，只要数据变化，就可以触发相应的函数执行一定的操作。作为vue实例的配置选项，watch1.普通监听可以检测标量类型数据的变化：字符串、数字（整数、浮点数）、布尔值当依赖的数据发生变化时，就会触发对应的函数①写法一<script> new Vue({ el:"", data:{ipt:''}, watch:{ ipt([newVal,oldVal]){ .... } } })</script>