Vue基础知识

基础部分
vuejs(/view/)概论
  • 渐进式框架:作为应用的一部分嵌入业务

    • Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层
  • 高级功能

    • 解耦视图和数据
    • 可复用组件
    • 前端路由技术
    • 状态管理
    • 虚拟dom
vuejs安装
  • 直接cdn引入
  • 开发环境: <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  • 生产环境: <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  • 下载和引入
    • 右键链接另存为
  • npm 安装
命令式编程和声明式编程
  • 命令式编程
    • 一步一步的告知应该做什么(jquery)
  • 声明式编程
    • 例如vue
    • 数据发生改变页面也会发生相应的改变
开发流程
  • 创建vue对象
  • 传参:
    • el:决定对象挂在到哪里,
    • data:存储数据,
    • methods:存储方法,
    • computed:计算属性,当做属性使用,会在内存中留下缓存
    • 生命周期钩子
  • 解析流程
    • 在没有解析到相应的实例的时候仍然为相应的内容,然后再是有实例解析页面,替换数据等
vue的mvvm
  • m:Model:数据层
  • v:View:视图层 dom
  • vm:View-Model:通信桥梁,vue实例,
    • 数据绑定:将数据绑定到view,响应式绑定
    • 监听dom:将事件作用到数据上面

分析:

  • view :
<div id="app">

    <h3> 当前数值:{{ count }}</h3>

    <button v-on:click="add"></button>

    <button @click="sub"></button>

  </div>

  • model:
  data:{

        count:0,

      },

  • view-model:

    const app=new Vue({})
    

生命周期
  • 生命周期:事务从诞生到死亡的过程

  • vue 的生命周期:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-19FxdSRP-1587352541142)(E:\codeforhtml\VUE\vuenote\vuejsnote\source\lifecycle.png)]

插值操作
  • 模板语法
    • Mustache(胡须) 语法 {{}},写在标签之间,而不能在标签内
    • 可以进行简单的语句
  • vue指令
    • v-once,只渲染一次,当值发生改变的时候不做相应改变<h2 v-once>{{ message }}</h2>
    • v-html:解析html <div v-html="title"></div>
    • v-text:直接展示text内容,不灵活,会对其后内容进行覆盖 <h2 v-text="message">123</h2>
    • v-pre:不对vue进行解析直接显示其内容 <h2 v-pre>{{ message }}</h2>
    • v-cloak(斗篷):可能延迟显示出现不该显示的内容,在vue解析只爱钱,div中有一个v-cloak
    • 在解析之后没有v-cloak属性,会自动进行属性的删除
v-bind
  • 动态绑定属性 如a的href,img的src
  • 语法糖 :
<img v-bind:src="url" alt="">

   <img :src="url" alt="">
  • 绑定class
  • 绑定style
  • 对象语法
  • 数组语法
计算属性
  • 需要对数据进行转化在现实,或者需要将多个数据结合起来进行显示

  • 每个计算属性都包含一个getter和seeter,通常指使用getter而不是用setter

计算属性和方法的区别
  • 方法使用几次就会执行几次
  • 计算属性只调用一次
    • 只要依赖的值没有发生改变就不会重新调用,在内存中有缓存
事件监听 v-on
  • 绑定事件监听器
  • 语法糖@
  • 函数
  • 参数event
    • 不需要参数可以省略括号 <button @click="sub">减</button>
    • 需要显示传递参数 <button @click="sub(3)">减</button>
    • 在需要传参的函数下省略了括号,会自动传递event参数
    • 在同时需要event 参数和其他参数时,用 e v e n t 传 参 ‘ < b u t t o n @ c l i c k = " p r o p A n d e v e n t ( ′ a b c ′ , event 传参`<button @click="propAndevent('abc', event<button@click="propAndevent(abc,event)">打印其他参数和事件event`
    • 传参需要带上引号否则会出错,除了纯数值类型
  • 修饰符
    • 阻止冒泡 .stop 相当于event.stopPropagation()
    • 阻止默认事件 .prevent 相当于event.preventDefault() <a @click.prevent="pre" href="https://www.baidu.com/">百度首页</a>
    • 键盘监听 .{keycode}当事件是通过特定键触发 <input type="text" v-on:keyup.enter="KeyUp">
    • .native
    • .once 只触发一次回调
条件判断
  • else-if 一般不常用,如果要用一般都是用计算属性就很方便
  <div id="app" >

  <h2 v-if="flag">{{ message}} {{ flag }}</h2>

  <h2 v-else>{{ message2}} {{ flag }}</h2>

  <button @click="change">change</button>

  <div>

    <h2 v-if="score>=90">优秀</h2>

    <h2 v-else-if="score>=80">良好</h2>

    <h2 v-else="score>=70">一般</h2>

  </div>

  </div>

  • vue 在使用之前会使用虚拟dom ,为了尽可能多的复用代码,所以会出现一些小bug
    • 解决:给不希望复用的元素天上唯一的key,如果key相同则vue会为了节省性能直接服用,但是不同的key值会让vue明白其不可复用性
v-show
  • <h1 v-show="flag"> {{message}}</h1>
  • v-show 其实质是改变display为none,一直存在在dom树中
    • 适合切换频率高,性能更高
  • v-if 其实质是改变dom的节点,将其挂载和删除
循环遍历
  • v-for
  • 数组 <li v-for="(item,index) in arr">下标:{{ index }}, 值为:{{ item }}</li>
  • 对象
  • 下标:{{ index }}, 键:{{ key }}, 值为:{{ item }}
组件的key属性
  • 官方推荐使用v-for时,给对应元素添加key属性
  • 和虚拟dom和diff算法有关系
  • 用key 给每个节点做唯一的表示
  • diff算法正确的识别节点,
  • 为了高效的更新虚拟dom
  • 要求内容和key一一对应且唯一 <li v-for="(item,index) in arr" :key="item">{{ item }}</li>
    • 优先对比key,如果key对比相同则不复用,则织田接一个添加项
    • 没有key 则会产生复用,然后后面依次后推
数组响应式方法
  • 并不是所有的修改数组的方法都是响应式的
  • 非响应式
    • 索引改变
    • 挽救方法
      • this.arr.splice(0,1,'bbb')
      • vue.set(要修改的对象,索引值,修改后的值)
  • 响应式
    • push()
    • pop()
    • shift()
    • unshift()
    • splice()
    • sort()
    • reverse()
案例
过滤器

filters:{

      // 过滤器

      showPrice(price){

       return '$'+price.toFixed(2)

      }

        }
  • 使用:<td>{{item.price|showPrice}}</td>
表单双向绑定 v-model
  • 实现表单元素和数据的双向绑定

  • 原理

    • v-bind和事件监听(@input)的集合
  • 修饰符

    • lazy:不是实时更新,在失去交点或者回车的时候更新变量
    • num:保证值为number类型
    • trim : 去除首尾空格
值绑定
  • 先有原始值
  • 遍历生成
  • v-bind 动态绑定

高级部分

组件化
  • 将页面差分成一个个小的功能块,每个功能块完成属于自己这部分的功能,那么维护将变得非常容易
  • vue组件化思想
    • 提供了一种抽象,让我们可以开发一个个独立可复用的小组件来构造我们的应用
    • 任何应用都会被抽象成一颗独立的组件树
注册组件的基本步骤
  • 创建组件构造器 Vue.extend({template})方法
  • 注册组件 Vue.component(‘name’,构造器名称) 方法
  • 使用组件
  • 注意:当组件有多个标签时,必须有一个根标签包含
全局组件和局部组件
  • 全局组件
    • 所有的Vue实例都可使用
    • 使用Vue.component('name',构造器名称)注册
  • 局部组件
    • 只能在挂载的实例上使用
    • 在实例挂在中使用components:{usename,consname}进行注册
  • 语法糖:主要是省去了Vue.extend()方法
    • 全局语法糖:在注册时讲第二个参数直接使用templateVue.component('myapp',{template:< div >

      标题

      内容

      })
    • 局部:在注册时直接注册为一个对象,myapp2: {template:

      标题局部

      内容

      `
父组件和子组件
  • 子组件构造
  • 父组件构造
  • 在父组件中使用components:{}注册组件,并使用子组件
  • 将父组件挂载到根组件中
  • 组件挂在到哪里,哪里才可以使用,比如子组件在父组件中被注册了,但是不饿能在根组件中使用,想要只用必须在根组件中在注册一次
组件模板分离
  • 使用<script type="text/x-template" id="myapp"> 注册的时候就直接使用template:'#myapp'
  • 使用 template标签
为什么组件data必须是函数
  • 组件是单独的功能模块封装,也应该有自己的数据data
  • 组件是不能直接访问实例的data的
  • 组件的数字那个数据是一个函数,函数返回一个对象,对象内部保存数据
  • 组件构造中的mustache就可以使用data
  • 原因
    • 为了让每个组件有独立的数据而不是使用相同的数据
    • 即每次返回的都是一个新的对象{},拥有自己的独立空间
通信
父传子
  • props(properties(属性))
  • 方式
    • 字符串数组,数组中的字符串就是传递的名称 <myapp :arr="arr"></myapp> 通过v-bind传参,子组件通过props接收
    • 对象,对象可以设置传递时的类型,也可以设置默认值
      • 可进行类型限制,
      • 可提供默认值
    • 将每个值都设置为对象
      • 其中:type:类型 default:默认值 required: true/false
  • 驼峰标识
    • v-bind不支持驼峰,只能使用-加小写
子传父
  • 事件($emit Event)
    • 子组件通过发送this.$emit("自定义事件名",参数)发送信号
    • 父组件通过@事件名="处理逻辑方法"收到信号,到实例的methods写处理函数
父子组件传值不该props
  • ​ 一般而言不能直接修改props,因为props是与父子间的data所传递的值是同步的
    • 可以通过data方法对props进行拷贝(this.props),然年后通过v-bind绑定到实例上实现了props到实例上的改变
    • 实现实例上的到props通过函数监听,先修改data中的数据,然后发送this.emit去修改父组件的data,则自动更新了props
  • 总结
    • v-model 的原理使用+父子组件传值
父子组件的访问方式
  • 父访子
    • this.$children(不推荐使用,下标值一旦改变这需要再次修改)
      • 返回的是由子组件组成的数组
    • this.refs
      • 默认是一个空的对象,需要在子组件中用ref="aa"声明<myapp ref="bbb"></myapp>
  • 子访父
    • this.$parent(不推荐使用,会降低耦合度)
  • 访问根组件
    • this.$root
插槽Slot
  • 为什么使用插槽
    • 让封装的组件更加具有扩展性
    • 让使用者决定组建内部的一些内容到底展示什么
  • 怎么封装
    • 抽取共性,保留不同
  • 怎么使用
    • 在模板中使用<slot>默认值</slot>
    • 如果有多个值,同时放到组件中替换式全部一起替换
  • 具名插槽
    • 在模板中使用<slot name="left">默认值</slot>给插槽命名
    • 在使用的时候通过给投标签命名方式使用<span slot="left">返回</span>
编译作用域
  • 自己使用自己的数据,父模板所有的东西都在父级作用域编译,子模板也相同
作用域插槽
  • 父组件替换插槽的标签,但是内容由子组件来提供
  • 父组件拿子组件数据
  • 过程
    • 模板定义slot并绑定传递数据 <slot :data="info"></slot>
    • 实例在使用时中用template接收,<template slot-scope="slot">
    • 使用子组件传递的数据slot.data
模块化开发
  • 历史问题
    • 多个文件可能重名问题,文件引入顺序问题
      • 解决:匿名函数包(function(){})()
        • 出现方法没法重复使用的情况
          • 解决:导出一个所有需要复用的对象let x=(function(){return obj})()x为模块名
  • es6
    • import:
    • export:
  • 常见模块化规范
    • CommonJs:Nodejs:
      • 文件作用域
      • 导出:Module.exports=obj
      • 导入:let y=require('路径') y.add()
  • AMD
  • CMD
  • es6的Modules
webpack
  • webpack 配置vue
    • npm install vue --save
    • 出错 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available.
      • 解决:在webpack的五大模块并列添加下列代码
      resolve:{

    alias:{

      // 别名

      'vue$':'vue/dist/vue.esm.js'

    }
  

  • 版权设置:webpack.BannerPlugin("版权信息")
  • 打包HTML文件,并根据html模板产生
  • js压缩uglify-webpack-plungin
  • 本地服务 我失败了,有空再来完善
el和template的区别
  • 目前开发多是通过路由实现单页面复用的效果,所以对于html的操作变得很少,并且很不希望频繁的修改html
  • 定义template属性,来避免对html文件的频繁操作,在编译的时候就会将template整个替换到div#app(即在实例上template会替换el所挂载的部分)
vue的终极用法
import Vue from 'vue'

const App={

 template:`

  <div>

  <h2>{{message}}</h2>

  <button @click="btnClick">按键</button>

  <span>{{info}}</span>

  </div>

  `,

  data(){

    return {

      message:"你好呀",

      info:"你也好呀"

    }

  },

  methods:{

    btnClick(){

      this.info="按钮被点击了呀!"

    }

  }

}

new Vue({

  el:"#app",

  /* template:`

  // <div>

  // <h2>{{message}}</h2>

  // <button @click="btnClick">按键</button>

  // <span>{{info}}</span>

  // </div>

  // `, */

  template:'<App />',

  components:{

    App

  }

  

})

  • 需要配置webpack
    • 依赖如下
{

  "dependencies": {

    "css-loader": "^3.5.2",

    "style-loader": "^1.1.3",

    "vue": "^2.6.11",

    "vue-loader": "^15.9.1",

    "vue-style-loader": "^4.1.2",

    "vue-template-compiler": "^2.6.11",

    "webpack": "^4.42.1",

    "webpack-cli": "^3.3.11"

  },

  "name": "04_1vue_webpack",

  "version": "1.0.0",

  "main": "index.js",

  "license": "MIT"

}

const {resolve}=require("path")

const VueLoaderPlugin = require('vue-loader/lib/plugin.js')

module.exports={

  entry:"./index.js",

  output:{

    filename:"built.js",

   path:resolve(__dirname,'build')

  },

  module:{

    rules:[

     {

      test: /.vue$/,

     use: ['vue-loader']

  },

 {

    test: /.css$/,

    use: [

      'vue-style-loader',

      'css-loader'

       ]

    }

    ]

  },

  resolve:{

    alias:{

      // 别名

      'vue$':'vue/dist/vue.esm.js'

    }

  },

  plugins: [

    new VueLoaderPlugin()

  ],

   mode: 'production'

}

  • 在上述文件中 App 已经变成一个对象,我们可以将对象单独抽离到一个文件在导出

    export default {
    
     template:`
    
      <div>
    
      <h2>{{message}}</h2>
    
      <button @click="btnClick">按键</button>
    
      <span>{{info}}</span>
    
      </div>
    
      `,
    
      data(){
    
        return {
    
          message:"你好呀",
    
          info:"你也好呀"
    
        }
    
      },
    
      methods:{
    
        btnClick(){
    
          this.info="按钮被点击了呀!"
    
        }
    
      }
    
    }
    
    
  • 使用时

import Vue from 'vue'

import App from './vue/app.js'

new Vue({

  el:"#app",

  template:'<App />',

  components:{

    App

  }

  

})

  • 进一步发现缺点,模板和js代码没有进行分离
    • 创建一个.vue文件单独存放vue代码
<template>

  <div>

  <h1 title>{{message}}</h1>

  <button @click="btnClick">按钮</button>

  <h2>{{info}}</h2>

  </div>

</template>

<script>

export default {

  name:'App',

 data(){

     return{

    message:"你好呀",

    info:"你也好呀"

     }

   

  },

  methods:{

    btnClick(){

      this.info="按钮被点击了呀"

    }

  },

}

</script>

<style scoped>

[title]{

  color:red;

}

</style>

  • 使用
import Vue from 'vue'

import App from './vue/app.vue'

new Vue({

  el:"#app",

  template:'<App />',

  components:{

    App

  }

})

  • 使用 <myapp @itemclick="myappclick"></myapp>

脚手架

脚手架 Vue CLI
  • CLI 是Command-Line Interface
  • 前提 node
  • 安装
npm install -g @vue/cli

# OR

yarn global add @vue/cli

  • 检查vue --version

创建项目

vue create 项目名称

选项

  • `vue create 项目名称·
  • ? Please pick a preset: Manually select features和defaule:选择配置,默认还是手动选择
  • ? Check the features needed for your project: 上一条选择自定义有后选择:Babel, Router, Vuex, CSS Pre-processors,Linter(eslint) 空格确定
  • ? Use history mode for router? (Requires proper server setup for index fallback in production): Yes
  • ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 选择css 预处理 Less
  • ? Pick a linter / formatter config: 选择语法检测工具Airbnb
  • ? Pick additional lint features:选择语法什么时候检查语法 Lint on save
  • ? Where do you prefer placing config for Babel, ESLint, etc.? :在哪里放置配置文件In dedicated config files(独立的文件)
  • ? Save this as a preset for future projects?:要不要将选择保存为配置(入口选择时) Yes
  • ? Save preset as: test 保存文件名
  • ? Pick the package manager to use when installing dependencies: Yarn
  • �🎉 Preset test saved in C:\Users\123\.vue

目录

  • node_modules
  • public
  • src
  • browerslistrc:对浏览器进行控制
  • editorconfig:代码规范条例
  • eslintrc:eslint配置
  • .gitignore:代码管理是需要忽略的部分
  • babel.config.js:babel配置
runtime-compiler和runningtimeonly
  • 区别在main.js上

  • runtime-compiler

    • 使用 App时用的components:{App注册,在`template:’'使用
    • 见下面程序运行过程
    • template - ast -render-virtualdom-truedom
    • 通过vue-tempalte-compilertemplate转换为对象
  • runningtimeonly

    • 使用App时直接使用render:h=>h(app)(箭头函数)渲染
    • render-virtualdom-truedom
      • 性能更高,代码更少
  • render函数详解

 render:function(createElement){

  //h是createElement的别名,应为createElement生成的是dom 是超文本标签

 /* 它来自单词 hyperscript,这个单词通常用在 virtual-dom 的实现中。Hyperscript 本身是指生成HTML 结构的 script 脚本,因为 HTML 是 hyper-text markup language 的缩写(超文本标记语言) */

  //createElement是一个函数

 }

  • createElement 用法详解
    • createElement(‘标签名’,{标签的属性},[‘内容’]),会用标签替换挂载到的元素;如果在内容中继续使用createElement,使用无限套娃模式
    • 传入对象,对象里面使用template语法,就像单独抽离出来的vue对象一样 然后将对象传入createElement(对象)

vue 程序运行过程
  • 在source里面有图
  • 将模板template传递给vue时,vue会将保存在vm.option里面
  • 将保存的模板将会被解析为ast(abstruct syntax tree 抽象语法树)
  • 在便以为render函数
  • 创建虚拟dom树
  • 渲染真实dom树

vue-router

什么是路由
  • 什么是路由
  • 路由的两种机制:路由和转送
    • 路由决定了数据包从来元到目的地的路径
    • 转送键输入端的数据转移到合适的输出端
  • 路由表
  • 前端路由和后端路由
    • 发展阶段
      • 最开始都是后端渲染jsp(java server page),收到请求后服务器会在服务器中就解析完成(包含 html+css+java(从数据库中拿数据,并动态放到页面中))
      • 前后端分离阶段,用ajax请求数据,后端只负责数据,不负责任何额阶段的数据(前端渲染)
        • 后端连接服务器(提供APi接口的服务),静态资源服务器
        • 前端发起请求,到静态服务器中拿到html+css+js拿到html+css就可以直接去执行,遇到js请求时在API服务器中拿到数据,并处理
        • 多个页面
      • 单页面富应用阶段
        • SPA(single page application) 在前后端分离的基础上加了一层前端路由
        • 整个网页只有一个html页面
        • 在静态资源服务器中,在前后端分离的阶段是有好几套html+css+js,一个url对应一套,而在单页面富应用是则只存在一套index.html +css+js
        • 一旦请求将所有资源下载下来,点击对应模块时,将相关代码抽离并显示(在vue里面就是对应一个组件)
  • 后端路由
    • 后端处理url和页面映射关系
    • url会发送到服务器,服务器通过正则对该url进行匹配,最后交由Controller 进行处理
    • Cotroller进行各种出来,最终生成HTML或者数据返回给前端
    • 完成一个IO操作
  • 缺点
    • 后端负担太重
  • 前端路由
    • 单页面富应用阶段
    • 降低服务器压力
url和history
  • 希望改变url而不向服务端请求数据
    • 改变url的hash loaction.hash=xxx(#后面的部分)
  • url的组成:协议://域名(主机地址):端口/路径/:参数/?查询字符串/#哈希
    • html5的部分:history.pushState({},'','路径')在栈结构中用的很多,history是栈结构,可以返回history.replace({},'','路径')不可以返回,直接替换不是压栈history.go(num)弹出num个历史 history.forward()相当于history.go(-1)
认识Vue-router

官网

  • 路由用于设定访问路径将路径和组件映射起来
  • 在单页面富应用中,页面的路径改变就是组件的切换
  • 安装
    • npm install vue-router --save
    • 在创建app的时候就会选择自动创建
  • 使用
    • 导入路由对象,并且调用Vue.use(VueRouter)
    • 创建路由实例。并且配置映射配置
    • 在Vue事例中挂载到创建的路由实例
  • 配置路由步骤
    • 创建路由组件
    • 配置路由映射:组件和路径映射关系
    • 使用路由:通过<router-link>和`
  • `是一个vue-router中的内置组件,会被渲染为 标签
    • 改标签会根据当前的路径,动态渲染出不同的组件,占位组件,决定渲染的位置
    • 在路由切换时,切换挂载的组件,其他内容不会发生改变
  • 默认路由通过重定向实现redirect
    • 默认是hash路由的方式,通过修改注册时的mode:history可以改变
  • 补充
    • tag="button"将 变成一个button
    • replace属性将history 设置为replaceState,默认是history.pushState
  • 当处于激活状态时时,会自动添加router-link-exact-active ,router-link-active 这两个class,当是取件点这两个类将会自动消失
    • 鉴于名字太长 我们可以将router-link-active 可以通过active-class="newname 设置,如果<router-link>很多,可以直接在注册router的时候就直接linkActiveClass: 'active',统一设置
  • 使用代码进行跳转,在需要跳转的标签添加事件
    • 在methods里面接收,并处理
    • 使用this.$router.push('/home')进行路由跳转(连着两次点击会出错)
    • 同理也有this.$router.replace('/home')
动态路由
  • 在某些情况下,一个页面的path路径可能不确定,
    • /user, /user/list ,/user/name 等此类就叫做动态路由
  • 配置
    • 在配置路由是带上参数path: '/user/:id',
    • 跳转是带上参数,动态获取参数<router-link :to="/user/+userId" tag="button" replace>user</router-link>
    • 通过v-bind动态绑定,uerId是定义在data中的数据
  • 获取参数
    • 在加速暗属性中使用 return this.$route.params.id; $route拿到的是当前处于活跃状态的路由,paramas是参数的意思,id是在配置动态路由时所设置的参数
    • 直接在模板中使用 <h1>当前参数是:{{ $route.params.id }}</h1>
打包分析
  • 当打包构建应用时,打包出来的包非常大,让首次加载变得很慢
  • 把不同路由对应的组件分割位不同的代码块,然后被访问的时候才加载对应组件
  • yarn build后会出现dist文件夹
    • index.html
    • js文件包含了除了index.html之外的所有东西,在想静态资源服务器请求路径的时候会很慢很慢
    • app… 是业务代码,手动写的那个
    • vender(提供商) 存放所有第三方的东西
    • 其他的不知道咋记录
懒加载
  • 用到时再加载
  • 使用方式
    • 异步组件
    • AMD 写法
    • es6写法
// 引入

const User = () => import('../views/User.vue');

// 注册

 {

    path: '/home',

    component: Home,

  },

  • 这时候在进行打包时会多出几个文件,有几个组件用了懒加载,就会多出几个文件
路由嵌套
  • 步骤
    • 创建对应的子组件,并且在路由映射中配置对应的子路由children:[]进行子路由配置
    • 在组件内部使用
 {

    path: '/home',

    component: Home,

    children: [

      {

        path: 'news',

        component: HomeNews,

      },

      {

        path: 'message',

        component: HomeMessage,

      },

    ],

  },

路由传递参数
  • params
    • 配置路由(配成动态路由)
    • 传递方式:动态绑定 :to
    • 传递后形成的路径:/router/123
    • route.params.name
  • query
    • 以普通方式配置路由
    • 传递方式 :对象中使用query的key 作为传递方式
    • 传递后形成的路径:/router?id=123
    • 同里也可以通过代码跳转`点击+this.$router.push({path,query})
// 一般路由配置

 <router-link :to="{path:'/profile',query:{'age':18}}" tag="button" replace>profile</router-link>

 <h3>我收到的参数是:{{$route.query}}</h3>

    <h3>我收到的参数的值是:{{$route.query.age}}</h3>

r o u t e r 和 router和 routerroute(讲到原理,可以多看几次)
  • $router是从router文件下的index导出的router实例
  • $route是路由配置里面的routes里面的正在活跃的路由
  • (使用use注册的时候会执行install)
  • Object.defineProperty() 响应式核心,劫持数据
导航守卫
  • 监听路由的跳转
  • 让页面的title随着组件切换而变换
    • 使用document.title
  • 使用导航守卫
router.beforeEach((to, from, next) => {

  document.title = to.meta.title;

  next();

});

  • meta是定义在路由配置的一个配置
    • 全局守卫(上述)
    • 路由独享守卫
    • 组件内的守卫
keep-alive(建议在看一遍)
  • 生命周期函数
  • keep-alive 是Vue内置的一个组件,可以使其被包含的组件保留状态,或避免车重新渲染
  • 也是一个组件,如果直接被包在keep-alive 里面,所有路径匹配到的试图组件都会被缓存
  • 每次切换组件都是将原组件销毁,再次回来重新创建,但是会更新
  • activated(){} deactivated(){} 在keep-alive下有用
keep-alive 属性介绍
  • include

  • exclude :,不要加空格,exclude里面的是组件导出中的name,这个是由正则表达来分隔的<keep-alive exclude="About,profile">

案例时间 TabBar
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值