langmanboy的博客

组件插槽与动态异步组件1. 插槽在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 v-slot 指令。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的属性1-1 插槽内容插槽 slot，可以使组件的模版变得多样性，让用户在使用组件时可以自定义传入模版内容，将 <slot> 元素作为承载分发内容的出口当组件的 template 中没有包含 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃

prop与自定义事件1. prop1-1 什么是propprop 是你可以在组件上注册的一些自定义属性。当一个值传递给一个 prop 属性的时候，它就变成了那个组件实例的一个属性组件中 prop 通常用于将父组件的值传递给子组件使用，或者将 Vue 实例里的属性值传递到组件中使用一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop，在组件实例中访问这个值，就像访问 data 中的值一样<!-- prop就是在组件上的属性称为prop prop会传递到组件内部 --

vue组件化1. 了解组件1-1 组件化组件 —— 把重复的代码提取出来合并成为一个个组件，组件最重要的就是重用（复用），位于框架最底层，其他功能都依赖于组件，可供不同功能使用，独立性强，，多个组件可以组合成组件库，方便调用和复用，组件间也可以嵌套，小组件组合成大组件传统 web 应用开发方式都是采用插件化形式开发，一个页面引入多个依赖文件（css 文件、js 文件），依赖关系紊乱不好维护并且代码复用性不高vue 则实现了组件化开发，将页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片

表单输入绑定1. 双向绑定数据的绑定，无论是使用插值表达式 {{}} 还是 v-text 指令，对于数据间的交互都是单向的，只能将 Vue 实例里定义的值传递给页面，页面数据的任何操作无法传递给 model1-1 v-model使用可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素v-model 是语法糖，默认情况下相当于 :value 和 @inp

事件处理1. 事件处理1-1 事件监听可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。v-on: 可以使用 @ 来代替，两者作用都相同v-on 指令不能直接绑定，后面需要指定一个事件类型以及需要调用的方法名称，例如 click、input 事件类型事件需要调用的方法名称定义在 methods 选项中，方法中的 this 指向实例对象，不要使用箭头函数会改变 this 指向在 Vue 中，调用的方法可以直接使用方法名调用，也可以加上 () 形式，在参数时

内置指令与渲染1. 内置指令指令 (Directives) 是带有 v- 前缀的特殊属性，指令属性的值预期是单个 JavaScript 表达式当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM基本指令：v-html、v-text、v-show、v-if、v-else、v-else-if、v-for、v-on、v-bind、v-model、v-slot、v-pre、v-cloak、v-once1-1 v-cloak在使用 Vue 过程中，引入 Vue 文件创建一个实例，当引入的 Vue

页面元素样式绑定1. 绑定HTML中Class在 Vue 中，操作元素的 class 列表和内联样式是数据绑定的一个常见需求由于 class 与内联样式都是 HTML 元素属性，可以通过 v-bind 指令去处理1-1 对象语法可以将一个对象传给 v-bind:class，用于动态切换 class，class是否存在取决于定义的数据属性值是否为真可以在对象中传入更多字段来动态切换多个 classv-bind:class 指令也可以与元素自身定义的 class 属性共存<div id

计算属性、监听器和过滤器1. 计算属性computed1-1 计算属性计算属性 computed 选项在 options 中定义，计算属性会在当其依赖属性的值发生变化时，属性的值会自动更新，与之相关的 DOM 元素也会同步更新依赖属性的值指的是 data 中定义的数据计算属性本质是一个方法，只不过在使用计算属性时，把计算属性的名称直接作为属性来使用，并不会把计算属性作为一个方法去调用{ [key: string]: Function | { get: Function, set: Functio

vue实例与模版语法1. Vue实例1-1 创建实例可以通过使用 Vue 函数 new 关键字实例化创建一个新的 Vue 实例一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例以及可选的、嵌套的、可复用的组件树组成const vm = new Vue({ // options选项})1-2 options选项当创建一个 Vue 实例时，你可以传入一个 options 选项对象el —— 用于指定一个页面中已经存在的 DOM 元素来挂在 Vue 实例，可以是 H

Vue 起步1. Vue简介1-1 什么是Vue?Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动Vue 是一个用于创建用户界面的开源 JavaScript 框架，也是一个创建单页应用的 Web 应用框架Vue 所关注的核