vue.js
王二狗吖
这个作者很懒,什么都没留下…
展开
-
vue(11)----自定义组件,指令,事件
自定义组件案例: 封装一个 Loading 组件Loading是用来做什么的?基于用户体验第三方的ui库/组件库自定义封装过程:创建一个目录文件夹,称之为Loading在loading中创建一个叫做component目录,用来放模板在Loading目录下创建一个index.js~ import Vue from 'vue' import tpl from './com...原创 2019-05-29 21:17:59 · 182 阅读 · 0 评论 -
vue(10)----生命周期
生命周期的概念当前组件在创建到销毁经历的一系列过程,称之为生命周期。生命周期的阶段生命周期分为3个阶段,这三个阶段分别是: 初始化阶段 ,运行中阶段,销毁阶段。初始化阶段:有4个钩子函数beforeCreate:在实例创建之前执行,数据未加载状态。created:在实例创建、数据加载后,能初始化数据,DOM 渲染之前执行。beforeMount:虚拟DOM已创建完成,在数...原创 2019-05-28 22:58:09 · 214 阅读 · 0 评论 -
vue(9)----组件(2)slot插槽 动画过渡 动态组件
slot插槽作用: 可以让我们在组件中书写内容单个slot<body> <div id="app"> <Hello> <header> 头部 </header> <section> 内容 </section> <footer> 底部 </fo...原创 2019-05-28 20:56:44 · 459 阅读 · 0 评论 -
vue(4)-----数据请求
数据请求在前端开发中的使用有两种形式使用原生javascript提供的数据请求ajax( 四部曲,一般需要我们结合Promise去封装,使用不是很便利,但是效率很高 )fetch( 本身结合了Promise,并且已经做好了封装,可以直接使用 )使用别人封装好的第三方库。目前最流行的,使用率最高的是 axios。vue中我们最常使用的vue 1.x 的版本提供了一个...原创 2019-05-28 20:08:12 · 215 阅读 · 0 评论 -
vue(12)----cli
clicli是什么?cli是vue提供的一个快速(自动化) 构建项目的一个脚手架 ,类似于我们之前所学的 express-generatorcli的版本目前最新 3.x老版本是 2.xcli的底层的自动化工具是: webpackcli的安装npm/cnpm/yarn 都可以使用$ yarn add @vue/cli global 这个是cli3的版本...原创 2019-05-30 22:37:00 · 157 阅读 · 0 评论 -
vue(2)-----指令(1)
指令vue分为指令和组件。指令的作用:是用来操作DOM的,指令就是绑定在DOM身上的一个属性,这个属性具备一定的功能。这个功能用来操作DNM。可以直接使用指令来操作DOM。这个指令需要模板语法的支持,采用jsx语法糖。模板语法 mustache语法 双大括号语法模板语法的支持程度还是很高的,数据类型都支持,但是不支持(console.log alert)。<!DOCTYP...原创 2019-05-23 21:47:09 · 165 阅读 · 0 评论 -
vue(8)----组件(1)
组件的概念组件是一个html、css、js、image等外链资源,这些部分组成的一个聚合体。优点:代码重复使用,便于维护。组件化思维:组件化针对的是页面中的整个完整的功能模块划分。Vue中的组件Vue.js通过Vue.extend() 方法来扩展组件的使用。Vue.extend(options)里面的options参数和Vue(options)的options参数几乎是一致的。...原创 2019-05-27 22:22:00 · 149 阅读 · 0 评论 -
Vue(1)-------初识vue
vue的框架既然Vue是一个框架, 那么它使用了什么架构模式?目前我们市面上基本上是以 MVC 这个架构思维 为主Vue使用 MVC 的衍生的模式,这个模式叫做 MVVM。MVCBackbone.jsMVPMVVM名词解释:M Model 表示数据V View 表示视图P/C/VM Presenter/Cont...原创 2019-05-22 20:28:52 · 124 阅读 · 0 评论 -
vue(5)-----computd vs watch vs methods
computedcomputed 计算属性案例: 为什么vue中要使用计算属性?让一个字符反向分析:<p> {{ msg.split('').reverse().join('') }} </p> 上面代码的写法,有些违背关注点分离,而且会让我们的DOM结构看起来不简洁。从上面的案例得出两个结论:我们的使用结果是要想data选项中定义的数据一样直...原创 2019-05-25 16:35:48 · 119 阅读 · 0 评论 -
vue(3)-----指令(2)事件
事件格式:v-on:eventType = “事件处理程序名称”简写@eventType = ‘事件处理程序名称’参数如果我的参数中需要事件对象解决: 在方法调用的时候,使用一个叫做 $event的作为实际参数。 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script><...原创 2019-05-29 21:23:14 · 191 阅读 · 0 评论