Vue框架基础

[janeLLLL]

Vue.js框架基础回顾

• 前端路由是实现单页面应用的基础

前端：你要懂的单页面应用和多页面应用

单页面应用：只有一张Web页面的应用，是一种从Web服务器加载的富客户端，单页面跳转仅刷新局部资源 ，公共资源(js、css等)仅需加载一次，常用于PC端官网、购物等网站

Vue基础结构

e.g.1：基础vue实例，传入el和data选项，vue内部会把data数据填充到el指向的模板上，并把模板渲染到浏览器。

e.g.2：使用了render选项和$mount方法，render方法接收一个参数h()，h函数创建了虚拟DOM，而$mount把虚拟DOM转换为真实DOM，渲染到浏览器。

两者运行有区别

Vue的生命周期

Vue.js语法和概念

语法

• 差值表达式：{{data}}中成员显示在模板的任何位置，内容中有html字符串，会把内容解析为普通文本，html的内容会被转义，可以使用v-html指令
• 指令：14个
• 计算属性和侦听器：计算属性会被缓存
• Class和Style绑定：Class样式可以重用
• 条件渲染/列表渲染
• 表单输入绑定（双向绑定）

概念

• 组件：可复用的vue实例，一个组件封装了html、css、JavaScript，可以实现页面上的一个功能区域，可以无限次地被重用
• 插槽：在自定义组件中挖坑，在使用组件时填坑，让组件更灵活
• 插件
• 混入mixin：相同的选项合并，代码可以进行重用
• 深入响应式原理
• 不同构件版本的Vue：（不）带编译器

报告：

1. this.$router

• this.$route是当前的路由信息，没有push、back等方法

• this.$router可以通过currentRoute获取到当前路由对象中信息，e.g：path、parm as、query等

2. router-link组件的exact-active-class用来设置地址精确匹配的元素的样式