![](https://img-blog.csdnimg.cn/20200821161307256.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue 2.0
一步步学习掌握Vue全家桶。
高新园养鸡场
一个迷茫的逆向工程师。
展开
-
1.Vue概念
文章目录前端开发发展历程前端开发框架变迁MVCMVPMVVM实例相关资料前端开发发展历程原生js(浏览器兼容性差)Jquery等(浏览器兼容性好,频繁操作dom)前端模板引擎(省去频繁dom操作。处理数据死板,数量大时效率低)Angular.js、vue.js(不用频繁操作dom,数据处理灵活)前端开发框架变迁MVCMVC模式最初生根于服务器端的Web开发,后来渐渐能够胜任客户端Web开发,能够满足其复杂性和丰富性。MVC是Model-View-Controller的缩写,它将应用程原创 2020-08-21 16:10:12 · 462 阅读 · 0 评论 -
2.Vue指令:v-cloak
v-cloak 这个指令是防止页面加载时出现 vue.js 的变量名(闪烁)而设计的,但有时候添加了这个指令仍会显示变量,可以使用!important解决。<body> <div id="content"> <p>{{msg}}</p> </div></body><script> var vm = new Vue({ el:"#content", data:{ msg:"这是我要的内容" }原创 2020-08-21 18:14:37 · 309 阅读 · 0 评论 -
3.Vue指令:v-text、v-html
v-textv-text不会有闪烁问题,原因在于其文本内容放置于属性中,而不在标签内容中。v-text不会解释html。<body> <div id="content"> <p v-text="txt"></p> </div></body><script> var vm = new Vue({ el:"#content", data:{ txt:"<h1>这是text内容<原创 2020-08-21 23:33:48 · 275 阅读 · 0 评论 -
4.Vue指令:v-bind
文章目录简介class与style绑定class绑定内联语法对象语法数组语法style绑定内联语法对象语法数组语法简介v-bind提供属性绑定,即M层数据–>V层。<body> <div id="content"> <input type="text" value="" /> </div></body><script> var vm = new Vue({ el:"#content", data:{原创 2020-08-21 23:49:17 · 364 阅读 · 0 评论 -
5.Vue指令:v-on
用法提供事件绑定为按钮绑定点击事件的写法://js<input type="button" value="请点击"/>document.getElementById("btn").onclick = function(){ alert("点击成功");}//jquery<input type="button" value="请点击"/>$("#btn").on("click",function(){ alert("点击成功");});//vu原创 2020-08-22 00:03:47 · 117 阅读 · 0 评论 -
6.Vue事件修饰符
目录事件修饰符实例基础程序stop修饰符capture修饰符self修饰符once修饰符prevent修饰符事件修饰符stop 阻止冒泡(从里到外)。 capture 事件监听器由冒泡模式变为捕获模式(从外到里)。 self 只有点击当前元素才触发。 once 事件只触发一次。 prevent 阻止默认事件。实例基础程序<html> <head> <meta charset="utf-8"> <t原创 2020-08-22 18:12:39 · 173 阅读 · 0 评论 -
7.Vue指令:v-model
v-model特点是vue.js中唯一一个能实现数据双向绑定的指令。 限制运用在input(radio,text,checkbox..)、select、textarea元素中。 会忽略所有表单元素的value、checked、selected特性的初始值而总是将 Vue 实例的数据作为数据来源,应通过 JavaScript 在组件的data选项中声明初始值。v-bind单向绑定<html> <head> <meta charset="utf-8"&...原创 2020-08-22 18:32:42 · 225 阅读 · 0 评论 -
8.Vue指令:v-for
简介v-for更新已渲染过得元素列表时,默认采用“就地复用策略”。如果数据项顺序改变,vue不是移动dom而是简单复用此处每个元素,并确保它在特定索引下显示已被渲染的元素。<li v-for="user in list" :key="user.id"> 演示迭代简单数组<body> <div id="content"> <ul> <li v-for="(item,i) in list原创 2020-08-23 22:03:07 · 242 阅读 · 0 评论 -
9.Vue指令:v-if、v-show、v-else
v-if每次使用都会删除/创建dom,切换消耗性能高,加载时低,推荐在一次性加载时使用。 v-show每次使用仅切换display:none样式,切换消耗性能低,加载时高,推荐频繁切换时使用。 v-if与v-show演示//html<div id="content"> <button v-on:click="flag=!flag">切换隐藏/显示</button> <div v-if="flag">原创 2020-08-23 22:10:51 · 184 阅读 · 0 评论 -
10.Vue过滤器:filter
特点过滤器不能替代methods、computed或者watch。过滤器不改变真正的data,而只是改变渲染的结果,并返回过滤后的版本。在很多不同的情况下,过滤器都是有用的,比如尽可能保持API响应的干净,并在前端处理数据的格式。在希望避免重复和连接的情况下,它们也可以有效地封装成可重用代码块背后的所有逻辑。 基本使用全局过滤器全局过滤器是创建一个 Vue.filter(‘过滤器的名称’,该过滤器的具体实现函数function) 。它的特点是作用于全部组件。 <body原创 2020-08-24 21:58:29 · 272 阅读 · 0 评论 -
11.Vue按键修饰符
按键修饰符在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。Vue 提供的按键码的别名:.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right局部按键修饰符 <body> <div id="content"> <input type="text" v-on:keyup.enter="cEnter"/> <原创 2020-08-24 22:03:23 · 101 阅读 · 0 评论 -
12.Vue自定义指令:directive
简介Vue自带的指令很多,v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-html/v-text…但是这些指令都是比较偏向于工具化,有些时候在实现具体的业务逻辑的时候,发现不够用,所以Vue也允许注册自定义指令,自定义指令提供一种机制将数据的变化映射为 DOM 行为。注册自定义指令的方法:用 Vue.directive(id, definition) 方法注册一个全局自定义指令,它接收两个参数指令 ID 与定义对象。用组件的 dir原创 2020-08-27 01:19:03 · 196 阅读 · 0 评论 -
13.Vue生命周期方法
vue生命周期方法创建期间:beforeCreate:实例刚在内存中创建,还没有初始化好data和methods属性。created:实例已经在内存中创建完成,data和methods已经创建完毕。beforeMount:模板编译完成,还没有挂载到页面。mounted:模板已经挂载到页面中。运行期间:beforeUpdate:实例状态更新前执行,此时data的值已经更新,但页面内容还没有更新。-updated:实例状态更新完毕后执行,此时data和页面内容都已经更新完毕。销毁期间:原创 2020-08-30 22:20:05 · 109 阅读 · 0 评论 -
14.Vue网络请求:axios
简介Vue.js 2.0 版本推荐使用 axios 来完成 ajax 请求。Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。 请求方法的别名为方便使用,官方为所有支持的请求方法提供了别名,可以直接使用别名来发起请求:axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios.post(u原创 2020-09-04 09:20:31 · 424 阅读 · 0 评论 -
15.Vue组件:component
简介组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。 全局注册extend + component使用Vue.extend配合Vue.compon原创 2020-09-05 04:00:44 · 717 阅读 · 0 评论 -
16.Vue组件插槽:v-slot
简介开发中页面里经常看到【结构相似】的组件,在vue中定义组件时就可以通过其插槽特性,替换组件中的组成部分达到灵活配置的目的。 后备内容 <body> <div id="content"> <my-com></my-com> </div> </body> <script> Vue.component('my-com', { template: ` <div&原创 2020-09-06 02:47:17 · 237 阅读 · 0 评论 -
17.Vue获取Dom或子组件:ref
简介ref作用:可用于引用DOM对象。可用于引用Vue组件(访问子组件data,调用子组件方法)。演示引用DOM对象 <body> <div id="content"> <h1 ref="content1">11111111111111</h1> <div ref="content2">{{msg}}</div> <button @click="dayin()">打印看看vue的ref中有啥原创 2020-09-07 09:09:05 · 333 阅读 · 0 评论 -
18.Vue过渡&动画:transition
简介Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡:条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点 过渡类名在进入的过渡中,会有 3 个 class 切换。v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以原创 2020-09-08 09:41:53 · 949 阅读 · 0 评论 -
19.Vue计算属性:computed
简介模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example"> {{ message.split('').reverse().join('') }}</div>虽然可以通过函数、事件等解决上面问题,但vue提供了更便捷的计算属性computed。 <body> <div id="app"> <input type="text" v-mode原创 2020-09-09 09:16:37 · 199 阅读 · 0 评论 -
20.Vue侦听器:watch
简介watch可以监控一个值的变换,并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。data:{ a:1, b:{ c:1 } }, watch:{ a(val, oldVal){//普通的watch监听 console.log("a: "+val, oldVal); }, b:{//深度监听,可监听到对象、数组的变化 handler(val, oldVal){原创 2020-09-09 16:47:51 · 205 阅读 · 0 评论 -
21.Vue开发环境搭建:Node.js
简介简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。配置下载地址:http://nodejs.cn/download/ 二进制安装包解压完成后配置环境,主要配置npm安装的全局模块所在的路径,以及缓存cache的路径,否则npm insta原创 2020-09-10 02:50:46 · 250 阅读 · 0 评论 -
22.Vue脚手架工具:Vue CLI
简介vue-cli是脚手架工具,运行在node.js环境下,使用npm作为依赖包管理工具,其作用就是用配置好的模板迅速搭建起一个项目工程来,省去自己配置webpack配置文件的基本内容。 配置安装命令:npm install -g @vue/cli管理项目命令,可以用下方命令打开图形化界面管理项目,或者用 vue create my-project 命令行创建项目:vue ui 使用创建项目打开图形化管理界面后。创建新项目。推荐使用手动模式创建项目。原创 2020-09-10 09:47:56 · 465 阅读 · 0 评论 -
23.Vue路由管理器:Router(基础篇)
简介Vue Router 是 Vue.js 官方的路由管理器。时下流行单页面应用,需要用到路由在模块之间切换。路由本身不发请求。Vue Router 包含的功能有:嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的链接HTML5 历史模式或 hash 模式,在 IE9 中自动降级自定义的滚动条行为 配置Vue Router配置文件如下。//src/rou原创 2020-09-11 15:04:46 · 266 阅读 · 0 评论 -
24.Vue路由管理器:Router(进阶篇)
导航守卫vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。其实,导航守卫就是路由跳转过程中的一些钩子函数,再直白点路由跳转是一个大的过程,这个大的过程分为跳转前中后等等细小的过程,在每一个过程中都有一函数,这个函数能让你操作一些其他的事儿的时机,这就是导航守卫。研究导航守卫,先做一个demo看看各种守卫的触发时机://main.js//全局导航守卫router.beforeEach((to, from,原创 2020-09-12 11:51:36 · 211 阅读 · 0 评论 -
25.Vue状态管理模式:Vuex
简介Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。拥有五个核心概念:StateGetterMutationActionModule状态管理模式对于一个简单的计数器:new Vue({ // state data () { return { count: 0 } }, // view template: `<div>{{原创 2020-09-14 09:40:28 · 377 阅读 · 0 评论 -
26.Vue插件
简介插件是为应用添加全局功能的一种强大而且简单的方式。以下是一些知名插件案例:添加全局方法或者 property。如:vue-custom-element。添加全局资源:指令/过滤器/过渡等。如 vue-touch。通过全局混入来添加一些组件选项。如 vue-router。添加 Vue 实例方法,通过把它们添加到 Vue.prototype 上实现。一个库,提供自己的 API,同时提供上面提到的一个或多个功能。如 vue-router。制作插件有一个公开方法install,所有的插件都需原创 2020-09-19 10:35:37 · 663 阅读 · 0 评论