当前位置:首页 > 前端技术 > Vue 2.0实用手册

Vue 2.0实用手册

2022年08月04日 23:25:54前端技术6

1. Vue简介      

Vue是国内开发者尤雨溪开发的JavaScript框架,它是实现UI层的渐进式框架, Vue借鉴了Angular的指令、React中组件和props等优点进行设计,从最简单的数据处理,到数据交互,到DOM操作,到路由处理等,Vue都有完整的解决方案。

2. 开发模式

1. 确保电脑上装有Node 4.0以上的版本,在CMD里面运行node –v查看版本;

2. 全局安装 vue-cl;

在命令行输入:$ npm install --global vue-cli,全局安装vue-cli。

默认是从国外服务器下,可以使用阿里巴巴在国内的镜像服务器,通过config命令设置默认下载路径:npm config set registry https://registry.npm.taobao.org。

然后执行 npm install --global vue-cli,这样安装的速度会快一些,完成后,检查是否安装成功:vue -V ( 注意V大写 )。

3. 创建一个基于 webpack 模板的新项目,名为my-project;

在命令行输入:vue init webpack my-project,注意项目名不能有大写。

项目建立过程中,有如下选择,选择NO,该选项为使用ESLint规范你的代码,一个空格错误都将报错,不开启,避免不必要的麻烦,后两项为单元测试,可以选择No。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

项目建立完成后,目录结构如下:

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

4. 安装依赖;

(1). cd my-project 进入项目中;

(2). npm install 安装依赖文件;

完成后,会发现项目目录下多出一个node_modules文件夹,里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目,进入项目目录文件夹my-project中,就可以使用vue进行开发了。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

(3). npm run dev,便可以打开本地服务器实时查看效果,访问地址 localhost:8080;

如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config=>index.js

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

建议将端口号改为不常用的端口,另外还建议将 build 的路径前缀修改为 ' ./ ',是因为打包之后,外部引入 js 和 css 文件时,如果路径以 ' / ' 开头,在本地是无法找到对应文件的,而在服务器上没问题,所以如果需要在本地打开打包后的文件,就得修改文件路径。

npm run dev 后的初始效果如下:

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

退出监听,可以直接Ctrl+C,输入Y回车。

3. Vue常用的属性

1. el  作用域;

2. data  绑定的数据;

3. props 接收父组件传递的参数;

4. methods  方法;

5. components 组件;

6. directives 自定义指令;

7. filters 过滤属性;

8. computed 计算属性;

9. watch  监听属性;

10. 生命周期属性;

(1). beforeCreate 创建前;

(2). created  创建后 (常用于发起数据请求);

(3). beforeMount 挂载前;

(4). mounted挂载后 (常用于发起数据请求);

(5). beforeUpdate 更新前;

(6). updated 更新后;

(7). beforeDestroy 摧毁前;

(8). destroyed 摧毁后;

4. Vue常用的指令

1. 条件判断指令;

(1). v-if   条件成立时挂载并显示;

(2). v-else-if  紧跟 v-if 之后 , v-if 不成立时,判断当前选项是否满足条件与显示;

(3). v-else   紧跟 v-if 或 v-else-if 之后,前面的条件不成立时,挂载并显示;

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

最终解析如下:

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

2. v-for  循环指令 , 循环遍历当前选项所对应的数组或是对象;

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

最终解析如下:

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

3. v-show  显示指令,根据条件判断当前选项在DOM树上显示还是隐藏;

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

最终解析如下:

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

4. v-bind  绑定属性v-bind:src,缩写可以写成 :src;

在vue中 绑定html属性,必须使用v-bind。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

最终解析如下:

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

v-bind的属生可以和标签原有的属性同时存在。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

可以直接绑定一个数组。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

可以在绑定的数组中添加对象。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

5. v-model  双向数据绑定,此命令绑定的变量的值改变时,其它地方渲染这个变量的值也会同步发生改变;

(1). v-model.lazy   延迟确认后更新;

(2). v-model.number   自动将用户的输入值转为 Number 类型;

(3). v-model.trim  自动过滤用户输入的首尾空格;

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

当input输入框在输入时,所对应的p标签里的值也会发生改变,最终解析如下:

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

6. v-on  绑定事件v-on:click,缩写形式可以写成@click;

(1). v-on:click=" "  单击事件;

(2). v-on:click.once=" " 只可点击一次;

(3). v-on:click.top=" " 阻止事件冒泡;

(4). v-on:click.prevent=" " 阻止默认事件;

(5). v-on:dblclick=" " 双击事件;

(6). v-on:keydown.enter=" " 键盘按下事件,只对指定的按键号有效;

(7). v-on:keyup.13=" " 键盘弹起事件,只对指定的按键号有效;

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

7. v-text 将内容按文本解析;

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

最终,页面的内容会按如下方式去渲染。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

8. v-html 将内容按html解析;

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

最终,页面的内容会按如下方式去渲染。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

9. v-cloak  优化加载闪烁;

这个指令在渲染时会自动去掉 ,可以将具有该属性的元素初始状态不显示,等到渲染到该属性后才显示,以实现读到取数据后才加载。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

5. directives 自定义指令

1. bind:只调用一次,指令第一次绑定到元素时调用;

2. update:所在组件的 VNode 更新时调用;

3. unbind: 只调用一次, 指令与元素解绑时调用;

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

6. filters 过滤属性

用于数据的处理,通过 | 管道符号,支持多重过滤,而且支持给过滤器传参,过滤器的本质就是一个函数,自从Vue2.0之后,就已经自带的过滤取消,不再支持,用户要想使用,有两种方法:

1. https://github.com/wy-ei/vue-filter

2. 自定义过滤器;

(1). 创建,在Vue实例的filters属性中指定;

(2). 使用,依然是管道符号,只有传参方式变了:{ { price | currency('¥','@')}};

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

7. computed 计算属性

计算属性其实是一个方法,定义在computed属性中的方法,计算属性的优势:

1. 计算属性的方法和methods中的方法实现的功能是一样的,正常情况,在methods定义方法也是可以的,但是由于方法所依赖的数据,性能开销比较大,就适合用计算属性, 计算属性是有计算缓存的,可以让更新更高效;

2. 让代码更方便进行维护;

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

8. watch  监听属性

记录原数据,当数据更新时,会自动与原有数据进行对比。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

9. components 组件

组件在vue中使用的非常普遍,它可以将一些公共的部分抽离出来,随处调用,通过传入不同的参数从而展现不同的数据,这也是vue所谓渐进式框架的精髓,在结合脚手架的开发模式中,几乎所有的页面都是一个组件,下面来看一下如何定义组件与使用组件。

定义子组件Header

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

在父组件Home中使用子组件Header

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

10. 组件之间的通信

1. 父组件给子组件传值 props;

(1). 在父组件里调用子组件时指定属性,把要传递的值赋给属性;

(2). 在子组件内部声明props,并在props里声明接收参数的属性,这样就可以通过props拿到传递过来的数据;

注意事项:

(1). 在组件中,data属性必须是带有返回值,而且返回值是对象的方法;

(2). 如果在通过属性传值时,值是会变化,通过v-bind指令将变量绑定到属性;

定义子组件Header并规定所接受的参数。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

在父组件Home里调用子组件Header并传参数。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

2. 子组件向父组件传值 $emit();

(1). 在调用子组件时通过v-on与@绑定自定义的事件的名称;

(2). 在子组件中传参给父组件时通过调用$emit,传递两个参数,一个为自定义的事件名称,一个为通过事件传递的数据;

定义子组件Header并声明点击事件传递参数给父组件。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

在父组件Home里接收子组件Header传递过来的参数。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

3. 父组件获取子组件的数据或方法:$refs;

(1). 在父组件件中调用子组件时通过 ref 为子组件指定一个名称;

(2). 在父组件件中通过 $refs 调用子组件数据或方法;

定义子组件Header

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

在父组件Home中调用子组件Header,为它指定ref名称myHeader,在方法里通过this.$refs.myHeader获取Header的数据和方法。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

4. 子组件获取父组件的数据或方法:$parent;

定义子组件Header

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

在父组件Home中定义子组件想要的数据,让子组件获取。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

5. 兄弟组件之间通信,定义事件总线 eventBus;

(1). 定义一个公共事件总线 var eventBus = new Vue(),完成事件的触发和绑定;

(2). 在第一个组件中引入事件总线,传参时eventBus.$emit('事件名','参数');

(3). 在第二个组件中引入事件总线,在生命周期钩子函数中监听eventBus.$on('事件名','function(){…...}');

定义事件总线。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

在第一个组件中引入事件总线,通过事件传参。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

在第二个组件中引入事件总线,通过事件接收参数。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

11. 组件分发内容slot

1. 单个slot;

子组件模板至少包含一个 <slot> 插口,否则调用子组件时,子组件内所分发的内容将会被丢弃。

当子组件模板只有一个没有属性的 slot 时,父组件整个内容片段将插入到 slot 所在的 DOM 位置,并替换掉 slot 标签本身。

最初在 <slot> 标签中的任何内容都被视为备用内容,备用内容在子组件的作用域内编译,并且只有在调用子组件时,组件标签内没有要分发的内容时才显示备用内容。

定义子组件son,在组件内预留插槽slot。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

在父组件里调用子组件,在子组件里分发内容。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

最终显示效果如下:

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

2. 俱名slot;

slot元素可以用一个特殊的属性 name 来配置如何分发内容,多个 slot 可以有不同的名字,具名 slot 将匹配内容片段中有对应 slot 特性的元素。

仍然可以有一个匿名 slot,它是默认 slot,作为找不到匹配的内容片段的备用插槽,如果没有默认的 slot,这些找不到匹配的内容片段将被抛弃。

定义子组件son,在组件内添加slot,为slot指定name属性。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

在父组件里调用子组件,在子组件里分发内容,为内容指定slot属性值。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

最终显示效果如下:

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

12. 动态组件is

通过使用预留的 <component> 元素,动态地绑定到它的 is 属性值,我们让多个组件可以使用同一个挂载点,并动态切换。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

13. 路由配置

1. 引入vue及路由中间件并使用;

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

2. 引入所有页面组件;

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

3. 配置路由词典;

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

4. 导出路由配置;

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

5. 在main.js里导入配置的路由辞典、挂载使用;

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

6. 在app.vue里使用router-view渲染配置的路由组件;

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

14. 路由跳转

1. 第一种方法:指定 router-link 与 router-view,进行跳转;

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

2. 第二种方法:使用JS进行跳转  this.$router.push('/myLogin');

3. 第三种方法:使用a标签进行跳转,a href='#/myLogin';

15. 路由传参

1. 配置接收方(main)的路由;

{  path:'/product/:id',  component:product , meta: ['推广素材'] }

2. 传参方式;

(1). href='#/product/123';

(2). router-link to='/product/123';

(3). router-link to='/product?id=123';

(4). this.$router.push('/product/123')

(5). this.$router.push({ name:'xxx' params:{ id:id } });

(6). this.$router.push({ path:'/xxx' query:{ id:id } });

注意:params传参,push里面只能是 name:'xxxx',不能是path:'/xxx',因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined!

3. 获取参数;

(1). this.$route.query.id;

Get请注传参数获取。

(2). this.$route.params.id 

Post请求传参数获取。

16. 网络请求

1. 安装axios插件,然后在main.js里引入,并将其添加为Vue的原型方法;

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

2. 页面请求,以POST请求为例,注意下面的添加参数方法;

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

关于对axios请求的的封装可以查看本博客中的  Vue中封装axios请求方法 ,此处不再详细介绍。

17. 状态管理Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,如果需要构建是一个中大型单页应用,就需要考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择,下面介绍一下Vuex的用法。

1. 创建store;

(1). 在页面文件中新建一个store.js文件,引入vue和vuex,并声明使明vuex;

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

(2). 在store.js里声明state,用来存放组件之间共享的数据;

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

如果页面的数据较多的时候可以在另外一个文件保存数据,然后在store.js里引入。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

(3). 在store.js里声明getters,有点类似于计算属性,改变state里的数据的时候会触发getters里的方法,获取新数据;

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

有时候,我们需要对state的数据进行筛选或过滤,这些操作都是在组件的计算属性进行的, 如果多个组件需要用到筛选后的数据,那我们就必须到处重复写该计算属性函数;或者将其提取到一个公共的工具函数中,并将公共函数多处导入 ,这两种方法都不太理想,但是如果把数据筛选完在传到计算属性里就不用那么麻烦了,getters就是用来干这个的,getters下的函数接收接收state作为第一个参数。

(4). 在store.js里声明mutations,主要用来存放方法,这些方法用于改变state里的数据;

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

mutations下的函数接收state作为参数,接收payload作为第二个参数,这个参数用来记录开发者使用该函数的传递的信息,以便用这些信息作为参数和依据改变state,需要注意的是:mutations方法必须是同步方法。

(5). 在store.js里声明actions,用于异步改变state里的数据;

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

actions和mutations的区别:

(1). actions 提交的是 mutations,而不是直接变更状态。也就是说,actions会通过commit提交mutations,让mutations帮他提交数据的变更;

(2). action 可以包含任意异步操作,ajax、setTimeout、setInterval均可以操作;
 

2. 引入store;

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

3. 使用store;

如果希望可以简化写法,还可以使用vuex的辅助函数,matState、、mapGetters、mapAcions、mapMutations来映射和操作数据。

Vue 2.0实用手册 _ JavaClub全栈架构师技术笔记

作者:aiguangyuan
来源链接:https://blog.csdn.net/weixin_40629244/article/details/86571517

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/17480.html

标签: vue
分享给朋友:

“Vue 2.0实用手册” 的相关文章

【Vue】详解Vue组件系统

【Vue】详解Vue组件系统

本文提纲:1.Vue渲染的两大基础方式 2.组件的局部注册和全局注册 3. Vue中的props数据流 4.Vue的自定义事件 5. Slot的使用   Vue渲染的两大基础方式 new 一个Vue的实例 这个我们一般会使用在挂载根...

vue全套教程(实操)

vue全套教程(实操)

  Vue (读音 /vjuː/,类似于 View) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具...

【vue】Vue中添加$alert的messageBox消息弹出框,进行换行、空格等html渲染

出现情况: 在Vue中 $alert的messageBox 无法直接通过正则表达式进行来进行换行和缩进解决方式: dangerouslyUseHTMLString 是否将 message 属性作为 HTML 片段处理 boolean — false this.$alert(...

用HBuilderX 打包 vue 项目 为 App 的步骤

用HBuilderX 打包 vue 项目 为 App 的步骤

用HBuilderX 打包 vue 项目 为 App 的步骤 首先打包你的 vue 项目 生成 dist 文件夹,教程请移步  https://www.cnblogs.com/taohuaya/p/...

dotnetcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架

dotnetcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架

Document 框架采用dotnetcore+vue+elementUI 前后端分离,并且支持前端、后台代码业务动态扩展,框架内置了一套有着20多种属性配置的代码生成器,可灵活配置生成的代码,代码生成器界面配置完成即可生成单表/主从表的增、删、改、查、导入、导出、上传、审核基础...

脚手架vue-cli和@vue/cli的搭建及区别

脚手架vue-cli和@vue/cli的搭建及区别

vue-cli与@vue/cli vue脚手架版本目前有2,3,4.不管搭建哪个版本的脚手架,首先都需要安装node. node的安装 node的安装我们可以直接去node官网(http://nodejs.cn/)下载安装,node安装...

Vue中自定义标签及其使用

Vue中自定义标签及其使用

Vue中自定义标签及其使用 问题 需求 自定义 创建组件的vue文件 编辑组件 使用 导入...

vue.js快速搭建图书管理平台

vue.js快速搭建图书管理平台

上一期简单讲解了vue的基本语法,这一次我们做一个小项目,搭建一个简单的图书管理平台,能够让我们更深刻的理解这门语言的妙用。   前  言 上一期简单讲解了vue的基本语法,这一次我们做一个小项目,搭建一个简单的图书管理平台,能够...

vue项目可视化管理之(vue ui)

vue项目可视化管理之(vue ui)

@vue/cli3.0增加一个可视化项目管理工具,全局安装完成cli3.0之后,可以直接在cmd输入命令:vue ui  启动即可,地址默认是localhost:8000 可以通过那牛导入你的vue项目进行管理,也可以通过创建按钮进行可视化创建一个新的vue项目。...

Vue.js——60分钟browserify项目模板快速入门

Vue.js——60分钟browserify项目模板快速入门

概述 在之前的一系列vue.js文章,我们都是用传统模式引用vue.js以及其他的js文件的,这在开发时会产生一些问题。 首先,这限定了我们的开发模式是基于页面的,而不是基于组件的,组件的所有代码都直接写在页面中,这对于一些复杂的页面来说,不是好事情,代码的可读性会较差,也...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。