VUE（二）

watch 侦听器

什么是watch侦听器

watch侦听器允许开发者监视数据的变化，从而针对数据的变化作特定的操作。
语法格式如下：

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

immediate 选项

默认情况下，组件在初次加载完毕后不会调用watch侦听器。如果下让wathc侦听器立即被调用，则需要使用 immediate 选项。示例代码如下：

watch:{
    username:{
        handler:async function(newVal){
            if(newVal === '')return 
            const {data:res} = await axios.get('http://www.escook.cn/api/finduser'+newVal)
            console.log(res)
        },
        immediate:true
    }
}

侦听器格式

  1. 方法侦听器
    • 缺点1：无法在刚进入页面的时候，自动触发。
    • 缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器。
  2. 对象格式的侦听器
    • 好处1：可以通过 immediate选项，让侦听器自动触发。
    • 好处2：可以通过deep选项，让侦听器深度监听对象中每个属性的变化。

监听对象单个属性的变化

如果只想监听对象中单个属性的变化，则需要使用括号将属性名括起来,例如：

watch{
    'info.username':{
        // 逻辑代码
    }
}

计算属性

计算属性指的是通过一系列运算之后，最终得到一个属性值。
这个动态计算出来的属性值可以被模板结构或methods方法使用。示例代码如下：

var 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)}
        }
    }
})
所有的计算属性，都要定义到 computed 节点之下，计算属性在定义的时候，要定义成“方法格式”

计算属性的特点：

  1. 定义的时候，要被定义为“方法”

  2. 在使用计算属性的时候，当普通的属性使用即可
    好处：

  3. 实现了代码的复用

  4. 只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值

axios

axios是一个专注于网络请求的库
在后面的Vue、React课程中都会用到axios来请求数据。
中文官网地址：http://www.axios-js.com/
英文官网地址：http://www.npmjs.com/package/axios

axios 的基础语法

axios 的基本语法如下：

axios({
    method:'请求的类型',
    url:'请求的URL地址'
}).then((result)=>{
    // .then 用来指定请求成功之后的回调函数
    // 形参中的result是请求成功之后的结果
})

axios发起GET请求

代码如下所示：

axios：({
    method:'GET',
    url: 'http://www.127.0.0.1:8080/get',
    // URL 中的查询参数
    params:{
        id:1
    }
}).then(function(result){
    console.log(result)
})

axios发起POST请求

代码如下所示：

// async/await结合axios进行使用
aysnc function aysncTask(){
    // 结构赋值，获取对象中的data对象,并且重命名为res
    const { data:res } = await axios({
        method:'POST',
        url:'http://127.0.0.1:8080/api/post',
        data:{
            name:"zhangsan",
            age:20
        }
    })
}

单页面应用程序

什么是单页面应用程序

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

vue-cli

什么是 vue-cli

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

引用自 vue-cli 官网上的一句话：
程序员可以专注在撰写应用上，而不必花好几天去纠结webpack配置的问题。

中文官网：https://cli.vuejs.org/zh/


安装和使用

vue-cli 是 npm 上的一个全局包，使用 npm install 命令，即可方便的把它安装到自己的电脑上：

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的指定区域中。

其中：

  • ① App.vue 用来编写待渲染的模板结构

  • ② index.html 中需要预留一个el区域

  • ③ main.js 把App.vue 渲染到了 index.html 所预留的区域中

什么是组件化开发

组件化开发指的是：根据封装的思想，把页面上可重用的UI结构封装为组件，从而方便项目的开发和维护。

vue中的组件化开发

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

vue 组件的三个组成部分

每个.vue组件都由3部分构成，分别是：

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

vue 组件

组件之间的父子关系

组件在被封装好之后，彼此之间是相互独立的，不存在父子关系

在使用组件的时候，根据彼此的嵌套关系，形成了父子关系、兄弟关系

使用组件的三个步骤

  • 步骤一：使用import语法导入需要的组件
import Left from '@/components/Left.vue'

  • 步骤二：使用components节点注册组件
export default{
    components:{
        Left
    }
}

  • 步骤三：以标签的形式使用刚才注册的组件
<div calss='box'>
    <Left></Left>
</div>
<br>

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

例如：
在组件A的componets节点下，注册了组件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(){
    return{
        count:this.init // 把this.init 的值转存到 count
    }
}

props 的 default 默认值

在声明自定义属性时，可以通过default来定义属性的默认值。示例代码如下：

export default{
    props:{
        init:{
            default:0
        }
    }
}

props 的type值类型

在声明自定义属性时，可以通过type来定义属性的值类型。示例代码如下：

export default:{
    props:{
        init:{
            default:0,
            type:Number
        }
    }
}

props 的 required 必填项

在声明自定义属性时，可以通过required来规定某一项属性为必填项。示例代码如下：

export defualt:{
    props:{
        init:{
            default:0,
            type:Number,
            required:true
        }
    }
}

组件之间的样式冲突问题

默认情况下，写在.vue组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突的问题。

导致组件之间样式冲突的根本原因是：

  • ① 单页面应用程序中，所有组件的DOM结构，都是基于唯一的 index.html 页面进行呈现的

  • ② 每个组件中的样式，都会影响整个index.html页面中的DOM元素

解决办法：
在样式标签中添加 scoped 属性，如下所示：

<style lang='less' scoped>
    ...样式...
</style>

当我们使用第三方组件库时，组件的某个样式属性不符合需求时，就需要进行修改，但是直接修改源码又不合适，那么这时就需要通过其父组件来对其样式进行覆盖。
那么这时又引发了一个问题，为样式标签添加scope后无法通过父组件修改子组件默认属性值。
解决办法：在选择器前面声明一个 /deep/如下所示：

/deep/ .box{
    ...样式...
}
posted @ 2022-06-02 23:28  maplerain  阅读(23)  评论(0)  编辑  收藏  举报