qq_44906900的博客

目录项目介绍项目前的准备及项目构思模块化封装通用组件@语法导入相关文件CSS的变种形式Vue中CSS的deep选择器Vue中CSS类名的表驱动编程使用VueRouter的active-class动态添加类名使用svg-sprite-loader引入icon与封装icon组件JavaSript组件TypeScript组件custom.d.ts怎么用Vue单文件组件的三种写法Layout组件&插槽<slot>使用VueRouter在TS组件里使用mixin

目录基本用法修饰符v-modelVue表单和v-model官方文档一、基本用法你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。1、 input代码示例(textarea也是一样的，只是标签不同而已)<

目录mixin混入extends继承provide提供/inject注入一、mixin混入mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说，如果你的混入包含一个 created 钩子，而创建组件本身也有一个，那么两个函数都会被调用。Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。1、作用混入就是复制减少data

目录指令Directive自定义指令filtercomponents修饰符.sync修饰符一、指令Directive什么是指令？在Vue中，以v-开头的就是指令语法v-指令名:参数=值，如：v-on:click='add'如果值里无特殊符号，可以不加引号有些指令没有参数和值：如：v-pre有些指令没有值，如：v-on:click.prevent作用主要用于DOM操作：Vue实例/组件用于数据绑定、事件监听、DOM更新。Vue主要目的就是原生D

目录eltemplaterender一、el提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。在实例挂载之后，元素可以用 vm.$el 访问。如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。代码演示示例import Vue from "vue/dist/vue.js";new Vue({ el:'#app',})或

目录createdmountedupdateddestroyed一、created在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。import Vue from "vue/dist/vue.js";new Vue({ data:{ n:0 }, template:` <div&gt

目录内存图option里面有什么颜色的表示重要程度一、内存图二、option里面有什么三、颜色的表示重要程度红色属性易学、必学黄色属性高级一点的属性，理解需要费点劲绿色属性自己看文档就会蓝色属性不常用，可学可不学紫色属性特殊属性，需要特别了解灰色属性很不常用，用到时看文档。...

目录数据响应式小实验getter/setterObject.defineProperty代理和监听小结：vue对data做了什么this.$set和Vue.set数组的变异方法小结：数组的变异方法议题：Vue对option的data做了什么？一、数据响应式响应式就是做某种刺激作出反应，而数据响应式就是对数据的改变作出响应。在Vue中，数据的响应就是意味着数据变化，Vue就会进行一次render()渲染。以此来更新UI界面。-- 个人理解Vue的数组响应式我如果修改

目录Vue模板语法template模板模板中的语法Vue模板的特点一、Vue模板语法Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。如果你熟悉虚拟 DOM 并且偏爱

【Vue全解】构造选项之options数据/data目录构造Vue实例options的数据/data一、构造Vue实例代码示例import vue from 'vue'; //假设导入了Vue完整版包const vm=new Vue(options); //创建一个vm为Vue的实例常见的写法new Vue({ data(){ //data有两种写法:对象 | 函数 return { n:100 } }, template:` <div cl

【Vue】深入了解Vue完整版与非完整版目录术语完整版Vue非完整版Vue深入理解两个版本的区别引用出错的结果一、术语编译器：用来将模板字符串编译成为JavaScript渲染函数的代码运行时：用来创建Vue实例、渲染并处理虚拟DOM等的代码。基本就是除去编译器的其他一切。二、完整版完整版体积大（假设它占比100K），功能强，有编译器。vue.js包含注释信息，全部的代码![存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(10)(![在这里插入图片