vue学习小结

数据源

data:{
 count:0
}

定义事件处理函数

methods:{
  clickhandler(){
  this.count+=1
 }
}

指令：

模板语法，辅助开发者渲染页面的基本结构

差值表达式：

{{变量}} data中的key 内部支持JavaScript语法
v-text=’‘变量’’ data中的key 覆盖元素中的原本内容，只能用于内容，不可以用在属性
v-html=’‘

这是一段文字

’’ 标签字符串渲染为html内容

动态赋值：

v-bind:value=’‘变量’’ 为元素属性动态赋值 简写 :value=’‘变量’’

事件绑定

v-on:click=“clickhandler” 简写@click=“clickhandler”

时间对象

$event

时间修饰符

@click.修饰符 每一种事件都有修饰符

双向数据绑定

v-model ：配合表单使用 专用修饰符 .number(转为数字) .trim .lazy(失去焦点执行)

条件渲染

条件渲染 v-if （删除或添加dom元素） v-show （display:none，频繁使用，性能更佳，dom元素的显示和隐患）

循环  <div v-for=”(item,index) in list“ :key='index'>{{item}}</div>

过滤器 filters

过滤器（ | ）用在插值表达式和v-bind中，本质上是一个函数，{{数据|过滤器}} 前一个数据就是后一个过滤器的参数

filters:{
fn(){

 }
}

全局过滤器

全局过滤器 Vue.filter(‘名字’，（）=>{})

侦听器 watch

watch:{} 侦听器   函数的第一个参数是新值，第二个是旧值

deep:true  深度监听
immediate:true  进入页面就触发

watch:{

this.data(侦听的数据)（new,old）{}

}
侦听的是一个对象中的某个数据的变化
watch:{
‘obj.key’(){

 }
}
侦听一个对象的变化
watch:{
this.data(侦听的数据):{
 handler(new,old){
 },
 deep:true  深度监听
 immediate:true  进入页面就触发
 }
}

计算属性 computed

计算属性本质是一个函数，return结果，调用方式同data中的数据，{{ fn }}

computed:{
   fn(){
     return 结果
   }
}
{{ fn }}

组件

每个组件最外层使用 嵌套。

组件由template、style、script组成。

组件中的data是一个函数 data(){ return {} }

启用less

注册组件

在script中使用import引入，在components中注册，在telemetry中使用

components: {
    HomeView,
  },

全局组件

import HomeView from “@/views/HomeView.vue”;
全局组件，在main.js中注册 Vue.component(“组件名”,HomeView)
在任何组件中直接调用<组件名></组件名>

自定义属性

props:[‘init’] 自定义属性 <子组件 init=‘9’></子组件> {{init}} 调用

props中的属性，可以使用this访问到

可设置默认值，传值就使用传递的值，未传就使用default

props:{
  init:{
   default:0，
   type:Number 指定类型,
   required:true 必填项
  }
}

生命周期

组件创建之前的生命周期 beforeCreate、created、beforeMount、mounted
运行：beforeupdate，update
销毁：beforeDestroy、destroyed

beforeCreate：初始化事件和声明周期，props、data、methods 尚未创建，处于不可用状态
created：props、data、methods 创建完成，处于可用状态，组件模板尚未创建成功，多用于发送请求
beforeMount：将要渲染dom
mount：渲染完成dom，可以操作真实dom
创建组件之前的钩子只执行一次

beforeupdate：数据改变触发，获取的数据是最新的，但是页面中显示的是旧的，页面并未完成重新渲染
update：完成了组件的重新渲染，数据变化之后操作dom
最少执行0次

beforeDestroy：销毁之前，可以访问到dom中的数据
destroyed：组件销毁完成
执行一次

组件通信

父子通信

在父组件中传值，在子组件键中使用props进行接收

父子通讯 父组件中 子组件中 props:[‘num’] {{num}}或者this.num

子父通信

在父组件中创建一个函数，传给子组件，子组件接收，使用this.$emit发送数组，父组件中使用函数的参数接收数据

父组件中 <Children @clickChange=“clickChange”> clickChange(val){val就是子组件传的值} 子组件中 this.$emit(“clickChange”,传的值)

兄弟组件通信 EventBus

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RGobDolD-1647956565547)(C:\Users\86130\Desktop\52C6B96C-4A88-4724-A5AF-C8786D9957AE(1)].png)

ref获取实例

this.$refs.ref调用

渲染完成后再执行

this.$nextTick(()=>{}) dom重新渲染完成后再执行callback

动态组件

动态组件

<keep-alive></keep-alive>  防止动态创建的组件被销毁
<keep-alive>
    <component is='组件名称'></component>
</keep-alive>

keep-alive 对应的生命周期
deactivated 组件被缓存的时候触发的生命周期
activated 组件被激活的时候触发的生命周期

动态组件缓存数据

<keep-alive include="被缓存的组件名称，被缓存的组件名称"></keep-alive>
include 可填写多个，用逗号分隔
exclude  指定不可被缓存的组件，其它的都会被缓存

插槽

声明一个插槽（占位符）      <slot></slot>
<Children>
  <slot name='content'></slot> 占位
</Children>

<父组件>
  <Children>
    <div #content>这是一段内容</div>
 </Children>
</父组件>

div自动替换slot
v-slot 简写#   #content

将标签插入指定插槽内

<template v-slot:content='obj'><div>这是一段内容</div></template>     

<slot name='content' msg='success'  title='标题'></slot> 
obj中含有slot中的属性msg和title

私有自定义指令

directive:{
指令名称
 color:{
  调用指令自动执行bind方法
  第一次使用的时候才会触发bind方法
  bind(el,obj){
    obj中包含v-color='yellow'的值，yellow
    el.style.color='red'
    }
  dom更新的时候触发
 update(el,obj){
   el.style.color='#fff'
  }
 }
}

私有指令简写
directive:{
   color(el,obj){
   el.style.color='red'
  }
}

全局自定义指令

在main中定义
Vue.directive(‘名字’，(el,obj)=>{el.style.color=‘red’})

axios挂载在全局

不利于接口的复用
挂载在全局 Vue.prototype.$http=axiosthis.$http调用
设置请求根路径 axios.defaults.baseURL=‘请求根路径’

路由

import Vue from "vue";
import VueRouter, { RouteConfig } from "vue-router";
import HomeView from "../views/HomeView.vue";

// 将VueRouter座位vue的插件，类似中间件
Vue.use(VueRouter);

const routes: Array<RouteConfig> = [
  {
    path: "/",
    name: "home",
    component: HomeView,
  },
 // 动态路由
  {
    path: "/home/:id",
    name: "home",
    component: HomeView,
     // props传参，在组件props属性中正常使用
    props:true
  },
  {
    path: "/about",
    name: "about",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
    // 默认显示子路由tab1

    redirect: "/about/tab1",
    // 子路由
    children: [
      {
        /* 默认子路由 */
        path: "",
        component: () =>
          import(/* webpackChunkName: "about" */ "../views/AbcView.vue"),
      },
      {
        path: "tab1",
        component: () =>
          import(/* webpackChunkName: "about" */ "../views/AbcView.vue"),
      },
      {
        path: "tab2",
        component: () =>
          import(/* webpackChunkName: "about" */ "../views/AbcView.vue"),
      },
    ],

  },
];

// 创建路由的实例对象
const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

路由跳转

路由跳转要配合占位符使用

<router-view></router-view> 占位符
<router-link to="/about">About</router-link> 路由跳转

声明式导航与编程式导航

声明式导航  <route-link></route-link>   通过标签跳转
编程式导航  
$router.push({ path: '/register', query: { plan: 'private' } })   增加历史记录  /register?plan=private
router.push({ name: 'user', params: { username } }) // -> /user/eduardo
$router.replace({ path: '/register', query: { plan: 'private' } })   替换当前的页面，没有历史记录