由于公司最近进化持续开展学习会，让开发人员能够学到更多的知识和技能，所以本人写了一篇关于vue.js的教程，虽然网上的教程很多，但本篇教程是本人的个人学习和经验总结，只针对于正在学习中的小伙伴们，主要是面试经常会被问到，以及开发中常用知识点和技能的一些整理，希望正在学习阶段的小伙伴能够少走弯路，能够更明确的学到有用的知识和技能：
此教程主要分为三个阶段入门篇，进阶篇和高级篇，将会不定期发布每一篇内容，当然，后期也会持续更新一些其它方面的学习知识，有问题和需要扩充的地方欢迎大家提出。
一、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 拓展
接下来我们就进入vue.js入门篇的学习：
1.1 vue.js的介绍
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式javascript框架;vue框架为MVVM框架,即数据源与控件双向绑定, 在实际项目中频繁操作DOM节点, 仅仅只需要控制数据源数据即可,不用考虑页面渲染。
vue.js是尤雨溪在2014年2月开始发布。
为什么要使用vue.js？有什么优点或者缺点？
vue.js是目前市场上最主流的前端框架之一，他与angular和react相比开发成本更低，开发体验更好。
vue.js的优点：简洁，数据驱动，组件化，轻量，有大量已成熟的插件和依赖，能够高效便捷的进行开发。
缺点：不适于seo优化，项目报错不明显，只适用于中小型项目，不太适用于大型项目。
1.2 vue.js的环境安装
1.安装环境：
安装node.js 在node.js官网（http://nodejs.cn）下载，npm作为node.js的模块管理并不稳定，此时我们推荐安装淘宝镜像cnpm（npm config set registry https://registry.npm.taobao.org）
安装全局脚手架 npm install --global vue-cli
2.vue.js的安装
独立版本：直接在vue.js的官网下载vue.min.js并用<script>标签引入
使用cdn方法：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
使用命令安装：npm install vue
3.创建项目：vue init webpack 项目名称，然后 cd 项目名称 npm start或npm run dev
在这里插入图片描述
1.3 vue.js的目录结构介绍
-
build webpack项目构建
2.config 配置目录，包括端口号等
3.node_modules 安装包目录
4.src开发目录，基本上要做的事情都在这个项目里面
-----assets 放置图片,图标，字体等静态资源文件
-----components 组件文件
-----app.vue项目入口文件
-----main.js项目核心文件
5.static 静态资源目录
6.语法配置，got配置等文件
7.index.html首页入口文件
8.package.json 项目配置文件
9.README.md 项目的说明文件
image
1.4 vue.js的模板语法和指令
1.模板语法：
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数
①插值表达式：<p>{{ message }}</p>
②v-html 用于输出html
③v-bind
④vue.js支持使用js表达式，例：<p>{{ ok ? "YES" : "NO" }}</p>
2.指令：
①v-if 条件渲染指令
②v-show v-show和v-if区别。v-show不管条件是否成立，都会渲染html,而v-if只有条件成立才会渲染
③v-else指令 v-else指令与v-if或者v-show同时使用，v-if条件不成立则会显示v-else内容
④v-for指令 v-for指令基于一个数组渲染一个列表
⑤v-bind指令 v-bind动态地绑定一个或多个特性，可以在其名称后面带一个参数，中间放一个冒号隔开，
这个参数通常是HTML元素的特性，v-bind可简写为“:”
例如：<p :class=”isLogo?'':'product'”></p> <p :style="{'border':hasBorder?'2px solid red':''}"></p>;
⑥v-on指令 v-on用于监听DOM事件,用法和v-bind类似，例如给button添加点击事件,v-on可简写为:“@”
例如：<button @click="show">
1.5 vue的生命周期
①beforeCreate:在实例初始化之后，数据观测 (Data Observer) 和 event/watcher 事件配置之前被调用
②created:在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)、属性和方法的运算，watch/event 事件回调；然而，挂载阶段还没开始，$el 属性目前不可见
③beforeMount:在挂载开始之前被调用，相关的 render 函数首次被调用
④mounted:页面渲染完成
⑤beforeUpdate:渲染watcher依赖的变量发生变化，准备更新视图
⑥updated:视图和数据全部更新完毕
⑦beforeDestroy:注销watcher，删除DOM节点
⑧destroyed:注销所有监听事件
在这里插入图片描述
1.6 vue.js的路由
Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页Web应用。
Vue.js + vue-router 可以很简单的实现单页应用。
<router-link> 该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。
例：<router-link to="/foo">跳转</router-link>
<router-link :to="{ path: ‘test’, query: { id: 1 }}">带参数跳转</router-link>
<router-link :to="{ path: ‘/test’}" replace></router-link>设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录
<router-link :to="{ path: /test}" append></router-link>设置 append 属性后，则在当前 (相对) 路径前添加 其路径
<router-link to="/foo" tag="li">foo</router-link>将<router-link>设置成某种标签
<router-view></router-view>路由出口，路由匹配到的组件将渲染到这里。
使用模块化机制编程，导入 Vue 和 VueRouter，需要在main.js中导入，并创建和挂载，要通过 router 配置 参数注入路由，从而让整个应用都有路由功能：
import router from './router'
const app = new Vue({
router
}).$mount('#app')
网友评论