过滤器（filter）、watch 侦听器 、计算属性 、axios、vue-cli 的使用 、vue组件化

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

过滤器filter、watch 侦听器 、计算属性 、axios、vue-cli 的使用 、vue组件化

1.过滤器filter

可以用在插在表达式中和v-bind属性绑定过滤器是一个函数{{message| capitalize}}添加在js表达式的尾部

过滤器的注意点

  1. 要定义到 filters 节点下本质是一个函数
  2. 在过滤器函数中一定要有 return 值
  3. 在过滤器的形参中可以获取到“管道符”前面待处理的那个值
  4. 如果全局过滤器和私有过滤器名字一致此时按照“就近原则”调用的是”私有过滤器“
  5. 过滤器中一定要有一个返回值
  6. 字符串中有charAt方法接收索引值表示字符串中吧索引值对应的字符获取出来
    <script>
        const vm = new Vue({
            el:'#app',
            data: {
                message: 'hello vue.js',
                info: 'title info'
            },
            // 过滤器函数必须被定义到filters节点之下
            // 过滤器本质上是函数
            filters: {   
                // 注意: 过滤器函数中的形参中的val永远是管道符前面的那个值
                //在filters节点下定义“过滤器”
                capitalize(str) {//把首字母转为大写的过滤器
                    // 字符串有charAt方法这个方法接收索引值表示从字符串中吧索引值对应的字符提取出来
                    // val.charAt(0)
                    const first = val.charAt(0).toUpperCase()
                    // 字符串的slice方法可以截取字符串从指定索引往后截取
                    const other = val.slice(1)
                    // 强调过滤器中一定要有一个返回值
                    return first + other
                }
            }
        })
    </script>

定义全局变量

// 使用Vue.filter() 定义全局过滤器
Vue.filter('capitalize', function(str) {
            // 字符串有charAt方法这个方法接收索引值表示从字符串中吧索引值对应的字符提取出来
            // val.charAt(0)
            const first = val.charAt(0).toUpperCase()
            // 字符串的slice方法可以截取字符串从指定索引往后截取
            const other = val.slice(1)
            // 强调过滤器中一定要有一个返回值
            return first + other      
})

2.watch 侦听器

侦听器的格式

  1. 方法格式的侦听器
  • 缺点1无法在刚进入页面的时候自动触发
  • 缺点2如果侦听的是一个对象如果对象中的属性发生了变化不会触发侦听器
<script>
        const vm = new Vue({
            el: '#app',
            data: {
                username: 'admin'
            },
            // 所有监听器都应该被定义到watch节点下
            watch: {
                username(newVal) {
                    if (newVal === '') return
                    // 1.调用jQuery中的ajax发起请求判断newVal是否被占用
                    $.get('https://www.escook.cn/api/finduser' + newVal, function(result) {
                        console.log(result);
                    })
                }
            }
        })
</script>
  1. 对象格式的侦听器
  • 好处1可以通过 immediate 选项让侦听器自动触发
  • 好处2可以通过 deep 选项让侦听器深度监听对象中每个属性的变化

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                username: 'admin'
            },
            // 所有监听器都应该被定义到watch节点下
            watch: {
                // 定义对象格式的侦听器
                username: {
                    //侦听器的处理函数
                    handler(newVal, oldVal) {
                        console.log(newVal, oldVal);
                    },
                    // immediate 选项的默认值是false
                    // immediate 的作用是 控制侦听器是否自动触发一次
                    immediate: true
                }
            }
        })
    </script>

  1. deep 选项

    如果 watch 侦听的是一个对象如果对象中的属性值发生了变化则无法被监听到。此时需要使用 deep 选 项代码示例如下

   const vm = new Vue({
   	el: '#app',
   	data: {
   		info: { username: 'admin' }
   
   },
   watch: {
   	'info.username': {
   		handler(newVal) {
   			console.log(newVal.username)
   			},
   			deep: true
   		}
   	}
   })
  1. 监听对象单个属性的变化
const vm = new Vue({
	el: '#app',
	data: {
		info: { username: 'admin' }

},
watch: {
	'info.username': {
		handler(newVal) {
			console.log(newVal)
			}
		}
	}
})

3.计算属性

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

style代表动态绑定一个样式对象它的值是一个{ }样式对象

<script>
        var vm = new Vue({
            el: '#app',
            data: {
                r: 0, g: 0, b: 0
            },
            //计算属性都要定义到computed节点之下
            // 计算属性在定义的时候要定义成“方法格式”
            computed: {
                // 返回出来是一个字符串

                rgb() { return `rgb(${this.r}, ${this.g}, ${this.b})`}
            }, 
            methods: {
                show() { consle.log(this.rgb) }
            }
        })
</script>

特点

  1. 定义的时候要被定义为“方法”
  2. 在使用计算属性的时候当普通的属性使用即可

好处

  1. 实现了代码的复用
  2. 只要计算属性中依赖的数据源变化了则计算属性会自动重新求值

4.axios

axios 是一个专注于网络请求的库

axios 的基本使用

在这里插入图片描述

  1. 发起 GET 请求

    document.querySelector('#btnGet).addEventListener('click', async function () {
const {data: res } = await axios({
    //解构赋值的时候使用 进行重命名
    //1.调用axios之后使用async/await进行简化
    //2.使用解构赋值从axios封装的大对象中 把data属性解构出来
    //3.把解构出来的data属性使用冒号进行重命名一般命名为{ data res}
  // 请求方式
  method: 'GET',
  // 请求的地址
  url: 'http://www.liulongbin.top:3006/api/getbooks',
  // URL 中的查询参数(get传参)
  params: {
    id: 1
  }
})
  console.log(result)
})

  2. 发起 POST 请求

    document.querySelector('#btnPost').addEventListener('click', async function () {
  // 如果调用某个方法的返回值是 Promise 实例则前面可以添加 await
  // await 只能用在被 async “修饰”的方法中可以直接输出数据结果
  const { data: res } = await axios({
    method: 'POST',  
    url: 'http://www.liulongbin.top:3006/api/post',
    //post传参
    data: {
      name: 'zs',
      age: 20
    }
  })

  console.log(res)
})

5.vue-cli 的使用

它简化了程序员基于webpack创建工程化的Vue项目的过程

  1. 在终端下运行如下的命令创建指定名称的项目

    vue cerate 项目的名称

在这里插入图片描述

  1. vue 项目中 src 目录的构成

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

  1. vue项目的运行流程

通过main.js把App.vue渲染到index.html的指定区域中
Vue实例的$mount()方法作用和el属性完全一样替换

6.vue组件化

  1. 组件化开发指的是根据封装的思想把页面上可重用的 UI 结构封装为组件从而方便项目的开发和维护。
  2. vue 中的组件化开发 vue 是一个支持组件化开发的前端框架。 vue 中规定组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。
  3. vue 组件的三个组成部分 每个 .vue 组件都由 3 部分构成分别是

template -> 组件的模板结构

script -> 组件的 JavaScript 行为

style -> 组件的样式

​ 其中每个组件中必须包含 template 模板结构而 script 行为和 style 样式是可选的组成部分

在这里插入图片描述

  1. 组件组件的父子关系

    组件在被封装后相互独立但是在使用组件中彼此成嵌套关系形成父子关系、兄弟关系

    4.1 使用组件的三个步骤①使用import语法导入需要的组件②使用components节点注册组件③以标签的形式来使用刚才注册的组件

    4.2 通过 components 注册的是私有子组件 例如 在组件 A 的 components 节点下注册了组件 F。 则组件 F 只能用在组件 A 中不能被用在组件 C 中

    4.3 注册全局组件 在 vue 项目的 main.js 入口文件中通过 Vue.component() 方法可以注册全局组件。示例代码如下
    在这里插入图片描述

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

export default {
//组件的自定义属性
props: ['自定义属性A', '', ''],
//组件的私有数据
data {
	return { }
	}
}

5.1 props 是只读的
vue 规定组件中封装的自定义属性是只读的程序员不能直接修改 props 的值。否则会直接报错

要想修改 props 的值可以把 props 的值转存到 data 中因为 data 中的数据都是可读可写的

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

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

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

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

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

5.4 props 的 required 必填项
在声明自定义属性时可以通过 required 选项将属性设置为必填项强制用户必须传递属性的值。示例代
码如下

export default {
	props: {
		init: {
			//值类型为Number数字
			type Number,
			//必填项校码
			required: true
}
}
}
  1. 组件之间的样式冲突问题
    默认情况下写在 .vue 组件中的样式会全局生效因此很容易造成多个组件之间的样式冲突问题。
    导致组件之间样式冲突的根本原因是
    ① 单页面应用程序中所有组件的 DOM 结构都是基于唯一的 index.html 页面进行呈现的
    ② 每个组件中的样式都会影响整个 index.html 页面中的 DOM 元素

6.1 思考如何解决组件样式冲突的问题
为每个组件分配唯一的自定义属性在编写组件样式时通过属性选择器来控制样式的作用域。
6.2 style 节点的 scoped 属性
为了提高开发效率和开发体验vue 为 style 节点提供了 scoped 属性从而防止组件之间的样式冲突问题

<style lang="less" scoped>

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

当使用第三方组件库的时候如果有修改第三方组件默认样式的需求需要用到/deep/

/deep/ h5 {
	color: blue;
}
阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
标签: vue
返回列表

上一篇：设备快线客户端软件V1.0用户手册

下一篇：【Linux】基本指令，拥抱Linux的第一步

“过滤器（filter）、watch 侦听器 、计算属性 、axios、vue-cli 的使用 、vue组件化” 的相关文章

Vue--》Vue3自定义组件以及新组件的使用讲解1年前 (2023-02-02)
[VueJsDev] 基础知识 - AutoNumber VsCode 插件开发1年前 (2023-02-02)
[VueJsDev] 基础知识 - CommonJs VS ES Module1年前 (2023-02-02)
Vue 3系列之01——开启第一个Vue.js 3应用1年前 (2023-02-02)
基于Vue 全家桶实现网易云音乐 WebApp1年前 (2023-02-02)
vue 入门和生命周期1年前 (2023-02-02)
【学Vue跟玩一样】什么是计算属性？什么使监视属性？1年前 (2023-02-02)
vue关于通过下标更改数组的理解1年前 (2023-02-02)
SpringBoot+VUE前后端分离项目学习笔记 - 【23 权限菜单 续】1年前 (2023-02-02)
ruoyi-vue版本框架（二）源码目录结构的讲解，与底层子项目的讲解1年前 (2023-02-02)

阿里云国际版