weixin_46841213的博客

路由懒加载1、什么是路由懒加载2、懒加载的方法2.1、ES中的import2.2、vue异步组件实现懒加载1、什么是路由懒加载懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。 懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。2、懒加载的方法常用的懒加载方式有两种：即使用ES中的import和vue异步组件。2.1、ES中的import方法如下：component: () => import(/* webpackC

嵌套路由1、什么是嵌套路由2、嵌套路由举例1.引入库3、补充1、什么是嵌套路由嵌套路由是个常见的需求，假设用户能够通过路径/home/news和/home/message访问一些内容，一个路径映射一个组件，访问这两个路径也会分别渲染两个组件。嵌套路由可以使用相同模版，网页框架不变，只改变一小部分内容。实现嵌套路由有两个要点：①、在组件内部使用标签②、在路由器对象中给组件定义子路由2、嵌套路由举例1.引入库说明：我们这些内容是基于动态路由下写的内容。①、在组件中创建两个组件news和ms

动态路由1、什么是动态路由2、举例使用动态路由1、什么是动态路由在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径：/user/aaaa或/user/bbbb除了有前面的/user之外，后面还跟上了用户的ID这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)。如：2、举例使用动态路由①创建基础页面②配置我们的index.js页，这里其实和路由中的内容一样③、在我们的main.js中引用index中的

Vue-router路由1、什么是Vue-router2、安装与使用2.1、安装 vue-router2.2、使用vue-router3、router-link4、改变路由模式1、什么是Vue-router路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传

Vue的生命周期1、什么是Vue的生命周期2、生命周期图示3、举例使用生命周期函数3.1、beforeCreate(创建前)3.2、created(创建后)3.3、beforeMount(载入前)3.4、mounted（载入后）3.5、beforeUpdate（更新前）3.6、updated（更新后）3.7、beforeDestroy（销毁前）3.8、destroyed（销毁后）1、什么是Vue的生命周期每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例

vue-cli脚手架1、什么是vue-cli2、vue-cli 2.x版本介绍2.1、vue-cli 2.x安装2.2、vue 2. X构建项目2.3、目录结构介绍2.3.1、2.x的项目目录结构2.3.2、index.html中的部分内容3、vue脚手架3.X+版本介绍3.1、安装vue-cli 3.x+3.2、创建项目4、vue-cli3与2版本区别1、什么是vue-clivue-cli是vue的脚手架，对项目的搭建，打包等都很方面。注意：以下所有的安装都要英文路径，以免出现问题。我们在开发时，

插槽1、为什么使用插槽2、插槽的概念2.1、匿名插槽2.2、具名插槽2.3、作用域插槽1、为什么使用插槽组件的插槽是为了让我们封装的组件更加具有扩展性。让使用者可以决定组件内部的一些内容到底展示什么。例子：下图移动端的导航栏导航栏我们必然会封装成一个插件，比如nav-bar组件。一旦有了这个组件，我们就可以在多个页面中复用了。如何封装组件合适：抽取共性，保留不同。最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容

ref和$refs的使用1、ref概念2、在元素中使用ref3、在组件中使用ref1、ref概念在JavaScript中需要通过document.querySelector("#demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this.$refs即可调用，这样可以减少获取dom节点的消耗。ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元

propsDatapropsData 不是和属性有关，它用在全局扩展时进行传递数据。类型：{ [key: string]: any }。限制：只用于 new 创建的实例中。详细:创建实例时传递 props。主要作用是方便测试。首先这个使用率并不高，因为后面会有vuex,他的作用就是单页面应用中保持状态和数据的，本机就是在全局扩展里面传递参数propsData。举例：<div id="app"> </div> <template id="eg"&gt

组件通讯1、组件数据关系2、组件之间的通讯3、父传子组件通讯1、组件数据关系组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。如果在子组件中强行使用父组件的数据 ,就会报错,那么子组件如何才能获取父组件的数据呢?2、组件之间的通讯组件之间的通讯又叫做组件的传值，父子组件的通讯和非父子组件的通讯。A与B、A与C ：父子关系B与D、C与E:父子关系A与E、A与D：（祖孙）隔代关系B与C：兄弟关系D与E：堂兄弟关系(非直系亲属)我们知道组件实例的作

Vue组件补充1、组件命名规范2、组件中data为什么是函数3、template分离写法1、组件命名规范当注册组件 (或者 prop) 时，可以使用 kebab-case (短横线分隔命名)、camelCase (驼峰式命名) 或 PascalCase (单词首字母大写命名)。2、组件中data为什么是函数①、vue中组件是用来复用的，为了防止data复用，将其定义为函数。②、vue组件中的data数据都应该是相互隔离，互不影响的，组件每复用一次，data数据就应该被复制一次，之后，当某一处

Vue组件嵌套前言1、Vue组件嵌套前言1、Vue组件嵌套所谓组件嵌套 就是在子组件的父级模板中 用标签的形式调用子组件。嵌套规则，子组件要在父组件上注册，父组件要到Vue实例上去注册。当我们没进行嵌套的时候：<div id="app"> <my-child></my-child> <my-parent></my-parent> </div> <script src=".

Vue组件1、什么是组件2、组件的使用3、创建组件构造器Vue.extend()4、注册组件Vue.component()5、全局注册组件和局部注册组件5.1、全局注册组件5.2、局部注册组件1、什么是组件组件是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：2、组件的使用组件的使用分成三个步骤：①：创建组件构造器②：注册组件③：使用组件3、创建组件

Vue侦听器1、Vue侦听器2、value类型2.1、value为函数类型2.2、value为字符串类型2.3、value为对象类型3、key类型（键类型）3.1、正常键值3.2、字符串类型4、vm.$watch5、vm.$watch返回值1、Vue侦听器vue配置对象中的一个属性，侦听属性，它是响应数据变化，这里的数据指的是data和computed中的数据， 相当于监视数据，当数据发生变化时，会立即执行侦听器里边对应的函数。侦听器 watch 是 Vue 提供的一种用来观察和响应 Vue 实例上的

Vue计算属性1、什么是计算属性2、计算属性3、计算属性的set和get1、什么是计算属性在模板中可以直接通过插值语法显示一些data中的数据。但是在某些情况，我们可能需要对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示。比如我们有num和price两个变量，我们需要得到numprice总价格，那么可以写成{{numprice}}，但是如果多个地方都需要显示完整的名称，我们就需要写多个{{num*price}}。这个时候，我们可能会想到使用方法来定义函数，如下例所示： <di

Vue过滤器1、Vue过滤器介绍2、局部过滤器3、全局过滤器1、Vue过滤器介绍Vue.js允许你自定义过滤器,可被用于一些常见的文本格式化（也就是修饰文本，但是文本内容不会改变）,过滤器可以用在两个地方 : 双花括号插值和v-bind表达式 (后者从 2.1.0+ 开始支持). 过滤器应该被添加在JavaScript表达式的尾部,由管道符 : | 指示,表达式的值将作为形参传入到filter中。过滤器分全局过滤器和局部过滤器。全局过滤器：Vue.filter局部自定义指令：filters2、

Vue自定义指令1、vue指令和自定义指令2、使用自定义指令2.1、全局注册2.2、局部注册3、钩子函数1、vue指令和自定义指令什么是指令？v-model、v-bind、v-on、v-show、v-if 等这些由 v- 开头的都是Vue中的核心内置指令，他们的作用就是在元素的整个生命周期的某个阶段对DOM进行内容或者样式上的操作。自定义指令：当Vue中的核心内置指令不能够满足我们的需求时，我们可以定制自定义的指令用来满足开发的需求。2、使用自定义指令2.1、全局注册注册一个自定义指令有全

Vue指令v-on事件绑定1、v-on的介绍及使用2、v-on事件参数2.1、v-on的使用2.2、手动传递事件对象2.3、使用v-on绑定多个事件3、v-on修饰符1、v-on的介绍及使用v-on用于绑定一个或多个事件，事件函数的参数名代表了在方法对象methods中定义的函数。语法；v-on：事件名=”方法名”简写：@ 事件名=”方法名”<div id="app"> <button v-on:click="method">按钮</button&g

Vue指令v-bind1、v-bind的介绍及使用2、动态绑定class3、动态绑定style1、v-bind的介绍及使用作用：动态地绑定一个或多个属性，或者一个组件prop到表达式。语法：在元素上添加v-bind:属性名=”常量||变量名”。简写格式： :属性名=”变量名”。举例1：<div id="app"> <a v-bind:href="uhref"> <img :src="url"> <

v-for列表渲染1、v-for介绍2、v-for参数index3、of 替代 in 作为分隔符4、v-for遍历对象5、v-for的key属性6、在 v-for 里使用值范围1、v-for介绍v-for：基于一个数据来渲染一个列表。我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。<div id="app"> <ul&

Vue条件渲染指令v-show、v-if、v-else&v-else-if1、v-show2、v-if3、v-else&v-else-if1、v-show作用：通过判断，是否显示该内容。如果值为true，则显示，否则就隐藏。语法：v-show=”判断表达式”特点：元素会始终渲染在DOM中，只是被设置了display:none;<div id="app"> <h1 v-show="isshow">isshow为true时，我才会显示</

Vue指令v-once、v-pre、v-model1、v-once2、v-pre3、v-model3.1、v-model介绍3.2、v-model修饰符3.2.1、.lazy3.2.2、.number3.3.3、.trim1、v-oncev-once：只渲染一次，之后的重新渲染，元素及其所有的子节点将被视为静态内容并跳过。因为它使用缓存中的值，不再使用vm中的值，数据也就不再变化。这可以用于优化跟新性能。<body> <div id="app"> &l

Vue指令v-html、v-text1、初识Vue指令2、v-html3、v-text1、初识Vue指令Vue指令（Directives）通常是指带有v-属性的特殊属性。在Vue给HTML元素增加了自定义属性，它们都是以”v-”开头，并且一些特殊的指令可以带参数和修饰符。指令的职责是：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。2、v-htmlv-html：相当于 innerHTML 。内容按普通 HTML 插入，不会作为 Vue 模板进行编译 。注意：小心XXS攻击，在可信内

Vue插值表达式1、Vue的插值表达式{{}}2、什么是插值表达式1、Vue的插值表达式{{}} 主要作用是进行数据绑定，最常见的形式是使用“Mustache”语法（双大括号）的文本插值。例如：Message:{{msg}}Mustache标签将会被替代为对应数据对象上msg属性（msg定义在data对象中）的值。无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。{{}}对JavaScript表达式支持，例如： {{number + 1}} {{ok ? 'yes' : 'n

初识Vue1、Vue概述1.1、什么是Vue.js1.2、Vue.js特点1.2.1、易用1.2.2、灵活1.2.3、高效2、视图层、MVVM和MVC介绍2.1、视图层2.2、MVVM2.3、MVC3、创建第一个Vue1、Vue概述1.1、什么是Vue.jsVue.js 是用于构建交互式的 Web 界面的库。Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。1.2、Vue.js特点vue是一款友好的、多用途的且高性能的js框架，它可以帮你创建可维护性和可