vue基础的一些难点(总结)

你还犟
204 阅读2分钟

vue指令-v-model修饰符

目标: 让v-model拥有更强大的功能

  • 语法:
  • v-model.修饰符="vue数据变量"
    • .number   以parseFloat转成数字类型
    • .trim          去除首尾空白字符
    • .lazy           在失去焦点时触发更改而非inupt时

计算属性

1.计算属性有缓存，提高渲染性能
2.当你需要对现有的数据进行运算得到新的数据并渲染到页面时，则可以使用计算属性 常用写法

{
    data(){},
    methods: {}
    // 声明计算属性
    computed: {
        //属性名字（计算属性名称）
        //属性的值（计算属性处理函数）
        计算属性名1 () {
            // 对依赖的数据进行处理，且进行return
            return 
        }，
        计算属性名2 () {
            // 对依赖的数据进行处理，且进行return
            return 
        }
    }
}

使用

 <div id="app">
    <!-- 计算属性 和data类似-->
    <h3>{{计算属性名}}</h3>
  </div>

完整写法
get 是获取计算属性的值
set 是给计算属性赋值

computed: {
    "属性名": {
        set(值){
            
        },
        get() {
            return "值"
        }
    }
}

如果要给计算属性赋值 就使用set方法

vue过滤器

作用

过滤器的作用：转换格式, 把数据在显示之前做格式转换

定义的格式

{
    data(){},
    computed:{},
    methods:{},
    // 定义过滤器
    filters: {
      // 属性名称（过滤器名称）：属性的值（过滤器处理函数）
      myFilter:function(value,其它参数){
           return 过滤后的结果
      }
    }
}

使用的格式

// 不带参数
{{ msg | 过滤器}}
// 带参数
{{ msg | 过滤器(参数)}}

示例 带参数的过滤器 image.png

vue监听器

作用

可以监听数据（data/computed等）的值的改变。 数据的值有类型：基本数据类型，引用数据类型

语法

watch: {
     "被监听的属性名" (newVal, oldVal){
         
     }
 }

监听属性-深度监听和立即执行

watch: {
    "要监听的属性名": {
        immediate: true, // 立即执行
        deep: true, // 深度监听复杂类型内变化
        handler (newVal, oldVal) {
            
        }
    }
}

父传子

语法

  • 父组件中: <子组件 :自定义属性名1="属性值1" :自定义属性名2="属性值2" />
  • 子: props: ['自定义属性名1,自定义属性名2'] ---> 接收父组件传来的数据

图示

image.png

子传父

语法

  • 父组件中：< 子组件 @自定义事件名1="父methods函数1" @自定义事件名2="父methods函数2"/>
  • 子: this.$emit("自定义事件名1", 传值1) ---> 执行父methods里函数代码

图示

image.png

vue组件生命周期

四个阶段 八个钩子函数

  • 初始化 => 创建组件   => beforeCreate created
  • 挂载 => 渲染显示组件 =>  beforeMount mouted
  • 更新 => 修改了变量 => 触发视图刷新 => beforeUpdate updated
  • 销毁 => 切换页面 => 会把组件对象从内存删除 => beforeDestory destoryed
    1.webp

nextTick使用

因为数据变化而导致的dom更新是异步的
代码示例

<template>
  <div>
  <p id="num">数字: {{ count }}</p>
  <button @click="btn">点击+1, 观察打印</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        count: 0,
      };
    },
    methods: {
      btn() {
        this.count++; // 数字添加后, 异步更新DOM, 所以马上获取标签的值还是0
        console.log(document.getElementById('num').innerHTML); // 0
      }
    },
  };
</script>

props校验

普通格式： props: ["propA", "propB"]。没有类型检查

高阶格式：

props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }

动态组件

  • 多个组件使用同一个挂载点，并可以动态切换，这就是动态组件
  • 功能与tab栏切换相似

格式

<component :is="comName"></component>

注意点

  • is只能是动态属性=》:is="组件注册后的标签名字符串或data变量"
  • 不能直接拿注册标签名赋值使用

keep-alive组件

  • 是Vue内置的keep-alive组件, 可以让包裹的组件保存在内存中不被销毁
  • keep-alive里有两个生命周期函数，当组件在内被切换,它的activated(激活)和deactivated(失去激活状态)这两个生命周期钩子函数将会被对应执行。
<keep-alive>
    <!-- vue内置的组件component, 可以动态显示组件 -->
    <component :is="comName"></component>
</keep-alive>

keep-alive组件-指定缓存

语法

  1. include="组件名1,组件名2..."
  2. :include="['组件名1'， '组件名2']"
<keep-alive include="name1,name2">
    <!-- vue内置的组件component, 可以动态显示组件 -->
    <component :is="comName"></component>
</keep-alive>

注意：

  1. 匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)

具名插槽

插槽

在定义组件时，在template中用slot来占个坑 使用时，将组件之间的内容来填坑

格式

定义： <slot name="xxx">

使用： v-slot 也可以简写成 #

  • <template #xxx></template>;
  • <template v-slot:xxx></template>

图示

image.png

  1. 传入的标签可以分别派发给不同的slot位置
  2. v-slot一般跟template标签使用 (template是html5新出标签内容模板元素, 不会渲染到页面上, 一般被vue解析为内部标签)

子组件

<div class="container" >
    <slot name="one"></slot>
    <slot name="two"></slot>
</div>

父组件

<Pannel2>
    <template #one>
		<img src="../assets/mm.gif" alt="" />
    </template>
    <template v-slot:two>
		<span>我是文字哦</span>
    </template>
</Pannel2>

作用域插槽

语法

  • <slot name="插槽名" :自定义属性名1="属性值1" :自定义属性名2="属性值2" >
  • <template v-slot:插槽名="scope">

image.png

代码

子组件

<template>
  <div style="border:1px solid #ccc; margin:5px;padding:5px">
    <h2>子组件</h2>
    <!-- 给slot上补充自定义的属性 -->
    <slot name="content" :a="1" :b="2">
      默认内容
    </slot>
  </div>
</template>

<script>
export default {
}
</script>

父组件

<template>
  <div style="border:1px solid #ccc; margin:5px;padding:5px">
    <h1>45-插槽-作用域插槽</h1>


    <MyCom>
      <!-- 
        v-slot:插槽名="对象" 
      对象会自动接收这个插槽传递回来自定义属性
      -->
      <template v-slot:content="scope">
        <!-- <h1>自定义的内容，填坑, {{scope}}</h1> -->
        <h3>{{scope.a}}</h3>
        <p>{{scope.b}}</p>
      </template>
    </MyCom>
  </div>
</template>

<script>

// 父传子
//  1.传数据。 自定义属性    （父）  props(子)
//  2.传结构。 在组件中写内容（父）  slot (子)

import MyCom from './MyCom.vue'
export default {
  components: { MyCom }
}
</script>

<style scoped>
.content{
background-color: #ccc;
}
</style>

图示

image.png

自定义指令-基本使用

作用

扩展标签额外的功能

自定义指令-定义方式

 directives: {
    focus: { // 自定义指令名
        inserted(el){ // 固定配置项 - 当指令插入到标签自动触发此函数
            el.focus()
        }
    },
  },

自定义指令-传值和更新

需求: 定义color指令-传入一个颜色, 给标签设置文字颜色

main.js定义处修改一下

directives: {
  "color":{
    inserted(el, binding){ // 插入时触发此函数
      el.style.color = binding.value;
    },
    update(el, binding){ // 更新绑定的变量时触发此函数=》手动更新
      el.style.color = binding.value;
    }
  }
}

Direct.vue处更改一下

<p v-color="theColor" @click="changeColor">使用v-color指令控制颜色, 点击变蓝</p>

<script>
  data() {
    return {
      theColor: "red",
    };
  },
  methods: {
    changeColor() {
      this.theColor = 'blue';
    },
  },
</script>

自定义指令, 获取原生DOM, 自定义操作

页面跳转传参

页面跳转： 通过router-link切换路由，展示另一个页面

vue路由传参的方式

两种方式：

  1. query（查询字符串）传参。 适用场景：页面搜索
  2. params传参。 适用场景：详情页

query（查询字符串）传参 image.png

params传参 image.png

vuex中的五个内容

  1. state： 统一定义公共数据（类似于data(){return {a:1, b:2，xxxxxx}}）
  2. mutations ： 使用它来修改数据(类似于methods)
  3. getters： 类似于computed(计算属性，对现有的状态进行计算得到新的数据-------派生  )
  4. actions： 发起异步请求
  5. modules： 模块拆分

state

作用：用它来保存公共数据

语法格式

new Vuex.store({
  state() {
    return {
       属性名： 属性值 
    }
  }
})

使用公共数据

在组件中，通过this.$store.state.属性名来访问

在模板中，则可以省略this而直接写成： {{$store.state.属性名}}

mutations

作用：通过调用mutations来修改定义在state中的公共数据。

格式

new Vue.store({
  // 省略其他...
  mutations：{
    // 每一项都是一个函数，可以声明两个形参
  	mutation名1：function(state [, 载荷]) {
  
    },
    mutation名2：function(state [, 载荷]) {
  
    }
  }
})

每一项都是一个函数，可以声明两个形参：

  • 第一个参数是必须的，表示当前的state。在使用时不需要传入
  • 第二个参数是可选的，表示载荷，是可选的。在使用时要传入的数据

使用格式
this.$store.commit('mutation名', 实参)

getters

作用：在state中的数据的基础上，进一步对数据进行加工得到新数据。(与组件中computed一样) 例如: 计算总价

格式

new Vuex.store({
  // 省略其他...
  getters: {
    // state 就是上边定义的公共数据state
    getter的名字1: function(state) {
      return 要返回的值
    }
  }
})

使用格式

在组件中通过$store.getters.getter的名字来访问

actions

作用：发异步请求获取数据，调用mutations来保存数据，将整个ajax操作封装到Vuex的内部

格式

new Vuex.store({
  // 省略其他...
  actions: {
    // context对象会自动传入，它与store实例具有相同的方法和属性
    action的名字: function(context, 载荷) {
      // 1. 发异步请求, 请求数据
      
      // 2. commit调用mutation来修改数据
      
      // context.commit('mutation名', 载荷)
    }
  }
})

调用格式

在组件中通过this.$store.dispatch('actions的名字', 参数)来调用action

  • 要点：

    • action 内部可以发异步请求操作

    • action是间接修改state的：是通过调用 mutation来修改state

modules

作用：拆分模块，把复杂的场景按模块来拆开

格式

export default new Vuex.Store({
  modules: {
  	模块名1： {
    		// namespaced为true，则在使用mutations时，就必须要加上模块名
      	namespaced: true, 
  		  state: {},
  			getters: {},
  			mutations: {},
  			actions: {},
  			modules: {}
  	}，
    模块名2： {
        // namespaced不写，默认为false，则在使用mutations时，不需要加模块名
  		  state: {},
  			getters: {},
  			mutations: {},
  			actions: {},
         modules: {}
  	}  
  }
})
avatar
文章
阅读
粉丝