Vue2-基础(二)

6次阅读
没有评论

共计 3463 个字符,预计需要花费 9 分钟才能阅读完成。

watch 侦听器

watch 侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作

const vm = new Vue({
    el: '#app',
    data: {
        username: ''
    },
    watch: {
        // 监听 username 的变化
        // newVal 是 “变化后的新值”,oldVal 是 “变化之前的旧值”
        username(newVal, oldVal) {
            console.log(newVal, oldVal)
        }
    }
})

immediate 选项

默认情况下,组件在初次加载完毕后不会调用 watch 侦听器,如果想让 watch 侦听器立即被调用,则需要使用 immediate 选项:

watch: {
    // 定义对象格式的侦听器
    username: {
        // handler 是固定写法,表示当前 username 的值变化时,自动调用 handler 处理函数
        handler(newVal, oldVal) {
            if(newVal === '') return
            axios({
                method: 'GET',
                url: 'https://www.escook.cn/api/finduser/' + newVal,
                data: {}
               }).then(res => {
                    console.log(res)
                    console.log(res.data.message)
               })
        },
        // 表示页面初次渲染好之后,就立即触发当前的 watch 侦听器
        immediate: true
    }
}

deep 选项

如果 watch 侦听的是一个对象,如果对象中的属性发生了变化,则无法被监听到,此时需要使用 deep 选项:

const vm = new Vue({
    el: '#app',
    data: {
        info: {
            username: 'admin'
        }
    },
    watch: {
        info: {
            handler(newVal) {
                console.log(newVal)
            },
        deep: true
        }
    }
})

监听对象单个属性变化

如果只想监听对象中单个属性的变化,则可以按照以下方式定义 watch 侦听器:

const vm = new Vue({
    el: '#app',
    data: {
        info: {
            username: 'admin'
        }
    },
    watch: {
        'info.username': {
            handler(newVal) {
                console.log(newVal)
            }
        }
    }
})

计算属性

计算属性指的是通过一系列运算之后,最终得到一个属性值

这个动态计算出来的属性值可以被模板结构或 methods 方法使用:

const vm = new Vue({
    el: '#app',
    data: {
       r: 0,
       g: 0,
       b: 0
    },
    computed:{
        rgb() {
            return `rgb(${this.r}, ${this.g}, ${this,b})`
        }
    },
    methods: {
        show() {
            console.log(this.rgb)
        }
    }
})

计算属性特点:
虽然计算属性在声明的时候被定义为方法,但是计算属性的本质是一个属性
计算属性会缓存计算的结果,只有计算属性依赖数据变化时才会重新进行运算

vue-cli

vue-cli 是 Vue.js 开发的标准工具,它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程

单页面应用程序

单页面应用程序(Single Page Application)简称 SPA,顾名思义,指的是一个 Web 网站中只有唯一的一个 HTML 页面,所有的功能与交互都在这唯一的一个页面内完成

安装和使用 vue-cli

vue-cli 是 npm 上的一个全局包

npm install -g @vue/cli

基于 vue-cli 快速生成工程化的 Vue 项目

vue create 项目名称

Vue 项目中 src 目录的构成

  • assets 文件夹:存放项目中用到的静态资源文件,例如:css、图片资源
  • components 文件夹:程序员封装的、可复用的组件,都有放到 components 目录下
  • main.js 是项目的入口文件,整个项目的运行,要先执行 main.js
  • App.vue 是项目的跟组件

Vue 项目的运行流程

在工程化的项目中,vue 要做的事情很单纯:通过 main.js 把 App.vue 渲染到 index.html 指定区域中

其中

  1. App.vue 用来编写待渲染的模板解构
  2. index.html 中需要预留一个 el 区域
  3. main.js 把 App.vue 渲染到了 index.html 所预留的区域中

vue 组件

vue 是一个支持组件化开发的前端框架
vue 中规定:组件后缀名是 .vue,之前接触到的 App.vue 文件本质上就是一个 vue 组件

vue 组件的三个组成部分

  • template -> 组件的模板结构
  • script -> 组件的 Javascript 行为
  • style -> 组件的样式

组件之间的父子关系

Vue2-基础(二)
  • 组件在被封装好之后,彼此之间是相互独立的,不存在父子关系
  • 在使用组件的时候,根据彼此的嵌套关系,形成了父子关系、兄弟关系

使用组件的三个步骤

Vue2-基础(二)
  1. 使用 import 语法导入需要的组件
  2. 使用 components 节点注册组件
  3. 以标签形式使用刚才注册的组件

通过 components 注册的是私有子组件

在组件 A 的components 节点下,注册了组件 F

则组件 F 只能用在组件 A 中,不能被用在组件 C 中

注册全局组件

在 vue 项目中的 main.js 入口文件,通过 Vue.component() 方法,可以注册全局组件:

// 导入需要全局注册的组件
import Count from '@/components/Count.vue'

// 参数1:字符串格式,表示组件的 “注册名称”
// 参数2:需要被全局注册的那个组件
Vue.component('MyCount', Count)

组件 props

props 是组件的自定义属性,在封装通用组件的时候,合理的使用 props 可以极大的提高组件的复用性

export default {
    // 组件的自定义属性
    props: ['自定义属性A', '自定义属性B', '其他自定义属性...'],

    // 组件的私有数据
    data() {
        return { }
    }
}

props 是只读的

vue 规定组件中封装的自定义属性是只读的,程序员不能直接修改 props 的值,否则会直接报错
想要修改 props 的值,可以把props 的值转存到 data 中,因为 data 中的数据是可读可写的

props: ['init'],
data() {
    // 把 this.init 的值转存到 count
    count: this.init
}

propsdefault 默认值

在声明自定义属性时,可以通过 default 来定义属性的默认值:

export default {
    props: {
        init: {
            // 用 default 属性定义属性的默认值
            default: 0
        }
    }
}

propstyep 类型

在声明自定义属性时,可以通过 type 来定义属性的值类型:

export default {
    props: {
        init: {
            // 用 default 属性定义属性的默认值
            default: 0,
            // 用 type 属性定义的值类型
            // 如果传递过来的值不符合此类型,则会在终端报错
            tyep: Number
        }
    }
}

propsrequired 必填项

在声明自定义属性时,可以通过 required 选项,将属性设置为必填项,强制用户必须传递属性的值:

export default {
    props: {
        init: {
            // init 的默认值
            default: 0,
            // 值类型为 Number 数字
            tyep: Number,
            // 必须项校验
            required: true
        }
    }
}

组件之间样式冲突问题

默认情况下,写 .vue 组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题,导致组件之间样式冲突的原因是:

  1. 单页面应用程序中,所有组件的 DOM 结构,都是基于唯一的 index.html 页面进行呈现的
  2. 每个组件中的样式,都会影响整个 index.html 页面的 DOM 元素

style 节点的 scoped 属性

为了提高开发效率和开发体验,vue 为 style 节点提供了 scoped 属性,从而防止组件之间的样式冲突问题:

<style lang="less" secped>

</style>

/deep/ 样式穿透

如果当前组件的 style 节点添加了 scoped 属性,则当前组件的样式对其子组件是不生效的,如果想让某些样式对子组件生效,可以使用 /deep/ 深度选择器

<style lang="less" secped>
    .title {
        color: skyblue; // 不加 /deep/ 时,生成的选择器格式为 .title[data-v-3c83f0b7]
    }

    /deep/ .title {
        color: skyblue; // 加上 /deep/ 时,生成的选择器格式为 [data-v-3c83f0b7] .title
    }
</style>

正文完
 0
qiaofugui.cn
版权声明:本站原创文章,由 qiaofugui.cn 于2024-05-21发表,共计3463字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码