星星有所不知

初识vue1. 在线引入Vue2. 声明式渲染3. 指令4. 组件化应用构建4.1 Vue中注册组件：4.2 使用prop从父性作用域将数据传到子组件，子单元通过 prop 接口与父单元进行了良好的解耦5. 响应式数据6. 工具1. 在线引入Vue<!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.ne...

vue的插槽1. 插槽内容2. 具名插槽3. 插槽的默认内容4. 编译作用域1. 插槽内容将 元素作为承载分发内容的出口。它允许你像这样合成组件：<navigation-link url="/profile">Your Profile</navigation-link><navigation-link> 的模板的实现为：<a v-bind:...

webstorm自定义自动补全发现当前的工作中，很多代码都是可以提炼成模板的，要是撸代码的时候，可以直接利用工具一键补全，是不是996很大可能上可以变成966了呀webstorm其实一直有这个功能，只是我一直没将其功能进行最大化使用，懊悔废话不多说，下面就举例说明如何在webstorm上自定义代码补全需求：当新写vue组件时候，新文档中输入template+tab键，即可生成如下组件的代...

vue组件之间通信一、父子组件之间通信a. 父组件 ==》 子组件b. 子组件 ==》 父组件二、兄弟组件之间通信三、祖先与后代之间通信a. 祖先 ==》 后代b. 后代 ==》 祖先四、任意两个组件之间通信一、父子组件之间通信a. 父组件 ==》 子组件1. 通过props属性进行传递//childprops: { info: { type: Stri...

vue组件中的插槽的使用匿名插槽具名插槽作用域插槽Vue 2.6.0之后采用全新v-slot语法取代之前的slot、slot-scope插槽的目的是让组件能后更好的进行扩展，使用起来更灵活匿名插槽故而言之就是插槽指定名称，默认为default//comp<div> <slot><slot></div>//parent&lt...

报错描述：Right-hand side of 'instanceof' is not an object找到报错代码：根据报错代码查看问题代码：修改问题代码即可：

vue的prop1. prop的大小写2. prop的值的验证(名称: 类型)3. 单项数据流1. prop的大小写HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：Vue.component('blog-p...

vue 组件一. 组件基础1. 组件中的data选项必须是一个函数2. 在组件上使用v-model二. 组件注册1. 组件名2. 全局注册（通过Vue.component来创建并注册组件）3. 局部注册（通过components选项来注册,在局部注册之前导入需要使用的组件）三. 动态组件1. component元素 + is2. keep-alive一. 组件基础1. 组件中的data选项...

vue生命周期1. 实例生命周期钩子2. 生命周期详解2.1. 在beforeCreate和created钩子函数之间的生命周期2.2. created钩子函数和beforeMount间的生命周期2.3. beforeMount和mounted 钩子函数间的生命周期2.4. beforeUpdate钩子函数和updated钩子函数间的生命周期3. 生命周期图示1. 实例生命周期钩子每个 Vu...

模板语法1. 数据绑定最常见的形式2. v-once指令3. v-html4. v-bind5 修饰符5.1 事件修饰符5.2 按键修饰符5.3 修饰符5.4 系统修饰键5.5 鼠标按钮修饰符1. 数据绑定最常见的形式数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：&lt;span&gt;Message: {{ msg }}&lt;/span&gt;Mu...

计算属性和侦听器1. 计算属性computed2. 计算属性 vs 方法3. 计算属性的setter4. 侦听器 watch1. 计算属性computed&lt;div id="app"&gt; &lt;p&gt;Original message: "{{ message }}"&lt;/p&gt; &lt;p&gt;Computed reversed message: "{{ reve

class 与 style绑定一. class绑定1. 对象语法1.1 传给v-bind:class 一个对象，以动态的切换class1.2 绑定的数据对象不必内联定义在模板里1.3 绑定一个返回对象的计算属性2. 数组语法2.1 把一个数组传给 v-bind:class，以应用一个 class 列表2.2 在数组语法中也可以使用对象语法：二. style绑定1. 对象语法2. 数组语法一. ...

条件渲染1. v-if2. 使用key管理可复用的元素3. v-show4. v-if vs v-show1. v-ifv-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 &lt;template&gt; 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 &lt;template&gt; 元素。&lt;template v-i...

列表渲染1. v-for对应数组2. v-for 对应对象2.1 迭代一个对象的属性值2.2 迭代一个对象的键名及键值2.3 迭代一个对象的索引、键名及键值3. 数组更新检测3.1 变异方法3.2 替换数组3.3 不能被vue检测到的数组变动方式4. 对象更新检测4.1 对象属性的添加或删除4.2 对象属性的修改5. 显示过滤/排序结果5.1 计算属性方式5.2 method方法1. v-for...

事件处理1. 事件处理方法2. 自定义事件事件名3. 自定义组件的v-model1. 事件处理方法若需要在事件处理方法中访问原始的事件对象event，可以使用特殊变量$event把它传入方法&lt;button @click="warn('Form cannot be submitted yet.', $event)"&gt;Submit&lt;/button&gt;// ...meth...

表单输入绑定前言1. 文本2. 多行文本3. 复选框3.1 单个复选框，可绑定到布尔值checked3.2 多个复选框，需绑定到同一个数组4. 单选按钮5. 选择框5.1 单选，绑定到一个字符串变量5.2 多选，绑定到一个数组后记前言可以用 v-model 指令在表单 &lt;input&gt;、&lt;textarea&gt; 及 &lt;select&gt; 元素上创建双向数据绑定。它会根...