vue.js渐进式教程(入门篇)

由于公司最近持续开展学习会&＃xff0c;让开发人员能够学到更多的知识和技能&＃xff0c;所以本人写了一篇关于vue.js的教程&＃xff0c;虽然网上的教程很多&＃xff0c;但本篇教程是本人的个人学习和经验总结&＃xff0c;只针对于正在学习中的小伙伴们&＃xff0c;主要是面试经常会被问到&＃xff0c;以及开发中常用知识点和技能的一些整理&＃xff0c;希望正在学习阶段的小伙伴能够少走弯路&＃xff0c;能够更明确的学到有用的知识和技能&＃xff1a;
此教程主要分为三个阶段入门篇&＃xff0c;进阶篇和高级篇&＃xff0c;将会不定期发布每一篇内容&＃xff0c;当然&＃xff0c;后期也会持续更新一些其它方面的学习知识&＃xff0c;有问题和需要扩充的地方欢迎大家提出。
一、vue.js入门篇
1.1 vue.js的介绍
1.2 vue.js的环境安装
1.3 vue.js的目录结构
1.4 vue.js的模板语法和指令
1.5 vue.js的生命周期
1.6 vue.js的路由
二、vue.js进阶篇
2.1 vue.js的自定义指令和过滤器
2.2 vue.js的计算属性、侦听器和mixins混入
2.3 vue.js的过渡动画
2.4 vue.js的props和父子组件之间的通信
2.5 vue.js异步更新的策略以及nextTick的用途和原理
2.6 vue.js中使用axios
三、vue.js高级篇
3.1 vue.js组件化和插槽
3.2 vuex状态管理模式
3.3 路由守卫
3.4 国际化
3.5 拓展
接下来我们就进入vue.js入门篇的学习&＃xff1a;

1.1 vue.js的介绍

Vue (读音 /vjuː/&＃xff0c;类似于 view) 是一套用于构建用户界面的渐进式Javascript框架;vue框架为MVVM框架,即数据源与控件双向绑定, 在实际项目中频繁操作DOM节点, 仅仅只需要控制数据源数据即可,不用考虑页面渲染。

vue.js是尤雨溪在2014年2月开始发布。为什么要使用vue.js&＃xff1f;有什么优点或者缺点&＃xff1f;
vue.js是目前市场上最主流的前端框架之一&＃xff0c;他与angular和react相比开发成本更低&＃xff0c;开发体验更好。
vue.js的优点&＃xff1a;简洁&＃xff0c;数据驱动&＃xff0c;组件化&＃xff0c;轻量&＃xff0c;有大量已成熟的插件和依赖&＃xff0c;能够高效便捷的进行开发。
缺点&＃xff1a;不适于seo优化&＃xff0c;项目报错不明显&＃xff0c;只适用于中小型项目&＃xff0c;不太适用于大型项目。


1.2 vue.js的环境安装

1.安装环境&＃xff1a;
安装node.js 在node.js官网&＃xff08;http://nodejs.cn&＃xff09;下载&＃xff0c;npm作为node.js的模块管理并不稳定&＃xff0c;此时我们推荐安装淘宝镜像cnpm&＃xff08;npm config set registry https://registry.npm.taobao.org&＃xff09;安装全局脚手架 npm install --global vue-cli2.vue.js的安装
独立版本&＃xff1a;直接在vue.js的官网下载vue.min.js并用
使用命令安装&＃xff1a;npm install vue3.创建项目&＃xff1a;vue init webpack 项目名称&＃xff0c;然后 cd 项目名称 npm start或npm run dev


1.3 vue.js的目录结构介绍

1. build webpack项目构建
   2.config 配置目录&＃xff0c;包括端口号等
   3.node_modules 安装包目录
   4.src开发目录&＃xff0c;基本上要做的事情都在这个项目里面
   -----assets 放置图片,图标&＃xff0c;字体等静态资源文件
   -----components 组件文件
   -----app.vue项目入口文件
   -----main.js项目核心文件
   5.static 静态资源目录
   6.语法配置&＃xff0c;got配置等文件
   7.index.html首页入口文件
   8.package.json 项目配置文件
   9.README.md 项目的说明文件
   

1.4 vue.js的模板语法和指令

1.模板语法&＃xff1a;
Vue.js 使用了基于 HTML 的模板语法&＃xff0c;允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数
①插值表达式&＃xff1a;

{{ message }}

{{ ok ? “YES” : “NO” }}

②v-show v-show和v-if区别。v-show不管条件是否成立&＃xff0c;都会渲染html,而v-if只有条件成立才会渲染③v-else指令 v-else指令与v-if同时使用但不可以与v-show一起使用&＃xff0c;v-if条件不成立则会显示v-else内容④v-for指令 v-for指令基于一个数组渲染一个列表⑤v-bind指令 v-bind动态地绑定一个或多个特性&＃xff0c;可以在其名称后面带一个参数&＃xff0c;中间放一个冒号隔开&＃xff0c;这个参数通常是HTML元素的特性&＃xff0c;v-bind可简写为“:”例如&＃xff1a;