Vue

Vue

Vue：构建用户界面的渐进式js框架，自底向上逐层应用

Vue的功能：

1. 减少开发者在dom操作上的精力（可以不用管dom操作，通过指令将元素和数据关联到一起）
2. 将开发者的精力从dom操作转移到数据操作上
3. 数据变的话页面也会变

Vue的知识点：mvc mvp mvvm
Vue包括指令、组件、过滤器、计算属性、监听、router、axios、vuex、vue-cli
Vue全家桶：vue-cli(脚手架工具) vuex(状态管理) axios(数据请求) router(路由)

filter过滤器

全局过滤器：在任何的Vue实例里都可以使用 除了传递要处理的数据之外，还可以传递其他参数
局部过滤器：注册在实例内部的filters里 进队注册的本实例有效

computed计算属性

计算属性本身有缓存功能 只有与他相关联的数据发生变化才会修改 无关数据发生变化读取缓存的数据，将数据进行处理，并且返回，计算属性值被改变，但是原值不会被改变。

watch数据监听

以配置项的形式出现 监听的数据发生变化就可以触发相应的函数
有两个参数 第一个是更新后的值 第二个是更新前的值

component组件

全局组件：在任何实例都有效 没有特定的父子关系 通过页面的使用来确定父子关系
局部组件：组件应注册到Vue实例内部 局部组件只有在本实例内部有效
组件的内部数据 可以绑定到组件内部的模板上去
组件的data数据格式不是一个对象，而是一个函数，在函数的内部返回对象，目的是让每一个组件都有自己单独的作用域，每个组件都是独立的，不会互相影响，组件中的配置项与实例中的配置项一一对应

组件之间的传参

1. 子父组件传参 ：子到父 通过子组件来操作父组件，通过给子组件创建并绑定一个自定义事件 子组件自定义事件的处理函数就是父组件的函数 子组件可以触发自己的自定义事件，可以通过this.$emit(‘name’,[params])来触发属于自己的自定义事件 在外部创建自定义事件 在内部触发
2. 父子组件传参 ：父到子 通过父组件来操作子组件，通过子组件的props属性抛出自定义标签属性
3. 兄弟组件传参 ：1.相邻兄弟 2.隔得老远的兄弟
   通过一个共有的父元素进行桥接 结合了父子传参和子父自定义事件 这种方法仅仅适用于亲兄弟，隔得老远的兄弟可以通过创建一个中间实例或者是vuex 1.创建实例2.实例上注册事件 事件的处理函数就是要改变数据的处理函数
   总结：通过子组件的props抛出一个组件标签属性
   父组件通过标签属性将参数传给子组件
   子组件内部通过该标签属性获取值

is属性

任意标签的is属性可以指定某一个组件来替换该标签

1. 默认情况下 组件标签内部的内容不会解析 里面的标签根本无效
2. 可以通过插槽将内部的内容传递给组件里边
3. 如果想解析具体某一个内容 需要给该内容起一个名字

组件的嵌套：spa是单页web应用
单页面应用：只有一个HTML
多页面应用：有多个HTML

Vue做的都是单页面应用

一个实例 -> 组件 -> 组件
页面都是由组件组成的，页面里面的header、nav等都是组件，所以页面都是组件与组件之间的嵌套

Vue的生命周期

1.组件实例的生命周期:也是配置项 和data methods同级
2.生命周期对应的钩子函数：当运行到达某一个时间时，会自动执行的函数

Vue组件的阶段 （Vue组件也有生命周期 有生老病死）

1.挂载前：产生虚拟dom 加载数据 （等同发育界面）
2.挂载：存在于html页面 并且运行（等同于出生）
3.销毁：组件的销毁（等同于离世）

虚拟dom

虚拟dom数就是假的dom数
Vue解析生成一个虚拟dom数 就是一个对象
虚拟dom 渲染到真实的dom 渲染挂载

钩子函数

beforeCreate：组件创建之前 没有数据没有元素 只有时间和生命周期 所以数据和元素都获取不到
Created：创建组件结束 有数据但没有元素 可以修改数据操作 ajax 请求数据
beforeMount：挂载之前 有数据但没有元素 可以修改数据操作 ajax 请求数据 挂载之前最后一次修改数据
Mounted：挂载完成 有数据和元素 可以修改数据、获取元素和修改元素操作 ajax 请求数据
beforeUpdate：更新之前（数据修改之前）created和beforeMount的数据修改不会触发update函数 update函数 只会在挂载后触发 如果数据没有使用 那么函数也不会被触发 也不会修改生命周期 还可以监听数据的变化 而且不要在这个阶段修改数据（this.name+=1 会发生死循环）
Updated：更新之后 （数据修改之后）created和beforeMount的数据修改不会触发update函数 update函数 只会在挂载后触发 如果数据没有使用 那么函数也不会被触发 也不会修改生命周期 还可以监听数据的变化 也不要在这个阶段修改数据 并且每次修改数据都会触发beforeUpdate和Update方法。
beforeDestroy：销毁之前 元素 数据 遗留数据都在 但是组件已被销毁 改变数据不能触发更新函数 要在该函数中解决残留下来的事件
Destroyed：销毁结束

总结

Vue的组件和实例都有生命周期 到达固定的生命周期会触发钩子函数 每个钩子函数有特点 是否有数据 是否有元素
created ，beforeMount，mounted 做ajax请求修改数据
update 做数据监听
destroy用来擦屁股

安装配置vue-cli

配置步骤

• npm istall -g vue-cli 全局安装脚手架工具
• vue -V 查看版本
• vue init webpack 项目的名字
• npm run dev 运行项目
• npm run build 编译打包项目

文件目录

• build 和编译打包相关的配置
• config 基本的配置文件
• static 图片文件等静态资源
• src 源码文件
  • assets 图片资源 直接编译成base64 相当于一串js代码 js代码的体积会变大 所以小于20k就用base64
  • main.js 整个项目的入口文件
• index.html 页面的入口页

移动端开发项目

• 移动端的适配
  • viewport 缩放问题
• iPhone6s 分辨率作为设计分辨率
  • 逻辑分辨比率 375*667
  • 物理分辨率 750*1334
  • dpr 像素比：物理像素/逻辑像素 2倍图 3倍图 2.5倍图

安装配置vue-router

1. 下载安装 npm install vue-router

2. 新建一个router文件夹

3.    import VueRouter from 'vue-router'
      import Vue from 'vue'
      Vue.use(VueRouter)
      let router=new VueRouter({
      	routes:[
   		{path:'',name:"",component:'',chidern:[]}
   		{path:'/',redirect:"/home"},//路由的重定向 如果hash 为'/' 指向到 /home
   		{path:'/categray/:hehe',component:Categray},
      	]
      })
      export default router
   

4. 在main.js文件引用

5. 开辟一段空间 存放切换的组件信息

6. 该标签可以控制组件的切换 to 要切换组件的hash 默认将渲染成a标签 tag 可以控制渲染的标签 active-class 激活状态的样式

7. 编程式导航
   A->B->C->D
   this.$ router.push(‘path’)
   //将页面加入到页面队列中 浏览器的返回按钮可以返回
   this.$router.replace(‘path’)
   // 直接将页面进行替换 返回不能返回

8. 动态路由
   {name:‘theme’,path:’/categray/:hehe/:id/:id’,component:Categray},
   {name:‘theme’,path:’/categray/’,component:Categray},
   动态路由需要跳转时添加匹配参数
   this.$ router.push({path:’/theme/123’},params:{hehe:123,age:16}) //不正确
   this.$ router.push({name:‘theme’,params:{hehe:123,age:16}})//正确
   this.$router.push({ path: ‘/theme/123’, query: { plan: ‘private’ }})