vue基础知识笔记02

最新推荐文章于 2024-05-17 16:06:33 发布

夏蝉不知雪

最新推荐文章于 2024-05-17 16:06:33 发布

阅读量39

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Skty_ywh/article/details/129925669

版权

vue

1.0、组件化的实际操作

就是拼积木，把组件组合在一起使用

引入组件：
<script>
    import 组件名 from '路径/组件名'
</script>

组件注册：
	export default {
        components:{ '自定义组件名':组件名 }   
    }

使用组件：
<template>
    <自定义组件名></自定义组件名>
    <自定义组件名 />
</template>

推荐：
<home-header></home-header>
<home-main></home-main>
<home-footer />

2.0 v-bind

把标签属性或 class 或 style 添加动态属性，让属性变为数据驱动

简写：

语法： <标签 v-bind:属性="表达式"></标签>

简写： <标签 :属性="表达式"></标签>

对class进行数据动态绑定

语法： <标签 v-bind:class="{class名:表达式，class名1：表达式}"></标签>
		class键值返回的结果如果为true就显示class名，如果为false就隐藏class名
	  <标签 v-bind:class="表达式"></标签> // 表达式需返回一个类名

简写： <标签 :class="表达式"></标签>

对style进行数据动态绑定

语法： <标签 v-bind:style="{color:'red'，background：表达式}"></标签>
	  <标签 v-bind:style="变量"></标签>

简写： <标签 :style="变量"></标签>

3.0 三个其他指令

v-pre

作用：让标签里的胡须Mustach表达式失效

<标签 v-pre>{{ message }}</标签>

v-once

作用：让标签李的胡须Mustach表达式只渲染一次

<标签 v-once>{{ message }}</标签>

v-cloak

作用：在页面没有渲染完毕时，会出现Mustach语法影响页面显示，v-cloak隐藏胡须表达式，是在CDN引入时才会出现的情况，脚手架搭建的项目不存在显示的情况，需要配合CSS样式使用

<style>
    [v-cloak]{
      display: none;
    }
</style>
<div id="app">
    <h1 v-cloak>{{message}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
    new Vue({
      el:'#app',
      data(){
        return {
          message:'我是指令v-cloak的展示内容'
        }
      }
  })
</script>

4.0 计算属性computed

配置选项，使用方法与methods是一样的，计算属性用于处理一堆逻辑运算，并且返回一个结果，直接只用这个函数名就相当于这个结果。

export default{
    methods:{},// 方法们  方法名()
    computed:{
        函数名(){
           // 有一堆逻辑运算
           return '结果'
        }
    } // 计算属性
    
}

特点：

1.直接使用函数名就等于是返回的结果 —>函数名

2.如果计算属性中依赖的数据发生改变，就会自动重新计算

3.依赖缓存，就是数据如果没有发生改变，就直接使用上一次的结果

配置选项 methods 与 computed两者之间区别：

1. methods 调用需要使用(), computed计算属性直接只用函数名
2. 两者写法都一样，都是方法，但是computed计算属性必须有一个返回值，但是methods不一定
3. 当数据没有发生改变，调用methdos每次都会重新计算代码，computed有依赖缓存，只会执行一次代码，之后就返回之前的结果

5.0 filters过滤器

用于处理页面显示格式的函数

<template>
    <div>
    	{{ message | 函数名 }}
    </div>	
</template>

export default{
    components:{},
    data(){
        return {
            message:数据
        }
    },
    methods:{},
    computed:{},
    filters:{
        函数名(参数){
            // 处理参数代码
            return '结果'
        }
    }
}

6.0 watch侦听器

用于监听数据的变化，数据发生改变，就会通知侦听器，进行相应代码的执行

export default{
    data(){
        return {
            msg:'xxx'
        }
    },
    methods:{},
    computed:{},
    filters:{},
    components:{},
    watch:{
        msg(newVal,oldVal){
            // newVal 变化后的新值
            // oldVal 变化前的值
            // 执行相应代码
        }
    }
    
}

computed（计算属性）和watch差异:

1.computed是计算一个新的属性，并将该属性挂载到Vue实例上，而watch是监听已经存在且已挂载到Vue实例上的数据，所以用watch同样可以监听computed计算属性的变化；

2.computed本质是一个惰性求值的观察者，具有缓存性，只有当依赖变化后，第一次访问computed值，才会计算新的值。而watch则是当数据发送变化便会调用执行函数；

3.从使用场景上来说，computed适用一个数据被多个数据影响，而watch使用一个数据影响多个数据