【vue基础】黑马vue视频笔记（二）

文章目录

一、过滤器（vue2）
- （1）Filters过滤器概念
- （2）定义过滤器
- （3）私有过滤器和全局过滤器
- （4）其他
- （5）过滤器的注意点
二、watch 侦听器
- （1）什么是侦听器
- （2）侦听器的格式
三、计算属性
- （1）什么是计算属性
四、axios
- （1）axios 的基本使用
五、vue-cli 的使用

一、过滤器（vue2）

（1）Filters过滤器概念

过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式 v-bind 属性绑定。

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用，示例代码如下：

（2）定义过滤器

在创建 vue 实例期间，可以在 filters 节点中定义过滤器，示例代码如下：

const vm = new Vue({el: '#app',data: {message: 'hello vue.js'},// 过滤器函数，必须被定义到filters节点之下// 过滤器本质上是函数filters: {// 注意：过滤器函数形参中的val，永远都是‘管道符’前面的那个值capi(message) {// 字符串有charAt方法，这个方法接收索引值，表示从字符串中把索引对应字符取出来const first = message.charAt(0).toUpperCase();// 字符串const other = message.slice(1)// 强调：过滤器中，一定要有一个返回值return first + other;}}})

（3）私有过滤器和全局过滤器

在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。
如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：

// 全局过滤器，独立于每个vm实例之外
//  Vue.filter接收两个参数，第一个过滤器名字，第二个过滤器“处理函数”
Vue.filter('capi', (str) => {// 强调：过滤器中，一定要有一个返回值return str.charAt(0).toUpperCase() + str.slice(1) + '~';
})

（4）其他

1、过滤器可以串联地进行调用

过滤器可以串联地进行调用

2、过滤器传参

过滤器的本质是 JavaScript 函数，因此可以接收参数

（5）过滤器的注意点

要定义到 filters 节点下，本质是一个函数
在过滤器函数中，一定要有 return 值
在过滤器的形参中，可以获取到“管道符”前面待处理的那个值
如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”，调用的是”私有过滤器“

二、watch 侦听器

（1）什么是侦听器

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

<div id="app"><input type="text" name="" id="" value="" v-model="username">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>const vm = new Vue({el: '#app',data: {username: ''},watch: {username(newval, oldval) {console.log(newval, oldval);}}})

/判断用户名是否存在<div id="app"><input type="text" name="" id="" value="" v-model="username"></div><script src="./lib/jquery-v3.6.0.js"></script><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const vm = new Vue({el: '#app',data: {username: ''},watch: {username(newval, oldval) {// 调用jQuery中的ajax发起请求，判断newVal是否被占用if (newval === '') return$.get('https://www.escook.cn/api/finduser/' + newval, function (res) {console.log(res);})}}})</script>

（2）侦听器的格式

1、方法格式的侦听器

缺点1：无法在刚进入页面的时候，自动触发！！！
缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器！！！

2、对象格式的侦听器

好处1：可以通过 immediate 选项，让侦听器自动触发！！！（默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使用 immediate 选项。）

username: {// handler 是固定写法，表示当 username 的值变化时，自动调用 handler 处理函数handler(newval) {if (newval === '') return   $.get('https://www.escook.cn/api/finduser/' + newval, function (res) {console.log(res);})},// immediate默认值为false// immediate表示页面初次渲染好之后，就立即触发当前的 watch 侦听器immediate: true
}

好处2：可以通过 deep 选项，让侦听器深度监听对象中每个属性的变化！！！

// 定义对象格式的侦听器
info: {// handler 是固定写法，表示当 username 的值变化时，自动调用 handler 处理函数handler(newval) {if (newval.username === '') return$.get('https://www.escook.cn/api/finduser/' + newval, function (res) {console.log(res);})},// immediate默认值为false// immediate表示页面初次渲染好之后，就立即触发当前的 watch 侦听器immediate: true,//侦听器深度监听对象中每个属性的变化deep: true
}

三、计算属性

（1）什么是计算属性

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

<div id="app">R:<input type="text" v-model="r"><br /><br />G:<input type="text" v-model="g"><br /><br />B:<input type="text" v-model="b"><br /><br /><input type="button" value="确定" @click="show"><!-- <div class="box" :style="{background: `rgb(${r},${g},${b})`}"> --><div class="box" :style="{background: rgb}"><!-- {{`rgb(${r},${g},${b})`}} -->{{rgb}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>const vm = new Vue({el: '#app',data: {r: 255,g: 255,b: 255},// 所有的计算属性，都要定义到computed节点之下// 计算属性在定义的时候，要定义成“方法格式”computed: {rgb() { return `rgb(${this.r},${this.g},${this.b})` }},methods: {show() {console.log(this.rgb);}}})
</script>

特点：

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

好处：

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

四、axios

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

（1）axios 的基本使用

1、发起 GET 请求：

axios({// 请求方式method: 'GET',// 请求的地址url: 'http://www.liulongbin.top:3006/api/getbooks',// URL 中的查询参数params: {id: 1}}).then(function (result) {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',data: {name: 'zs',age: 20}})console.log(res)
})

五、vue-cli 的使用

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

1、安装和使用

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

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

刚开始学习自定义配置

2、 vue 项目的运行流程

在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。
其中：
① App.vue 用来编写待渲染的模板结构
② index.html 中需要预留一个 el 区域
③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中

3、 vue 项目中 src 目录的构成：

assets 文件夹：存放项目中用到的静态资源文件，例如：css 样式表、图片资源

components 文件夹：程序员封装的、可复用的组件，都要放到 components 目录下

main.js 是项目的入口文件。整个项目的运行，要先执行 main.js

App.vue 是项目的根组件。

【vue基础】黑马vue视频笔记（二）相关推荐

Java零基础学习全套视频笔记
Java零基础学习全套视频笔记一.Java基础 1.注释注释并不会被执行,是给我们写代码的人看的,防止项目结构代码太多忘记代码相关功能. 书写注释是一个非常好的习惯,平时写代码也一定要注意规范. ...
Vue基础6天实施笔记
Vue 基础课程课程介绍 Vue基础语法指令.过滤器.按键修饰符.生命周期.自定义指令.computed计算属性.watch监听器 axios.ES6模块化.组件.vue单文件组件.WebStor ...
Vue全家桶（一）：Vue基础+Vue-Cli+Vue组件化+过渡动画
目录 1.Vue概述 1.1 认识Vue 1.2 Vue的两核心 1.3 Vue的初体验 1.4 Vue的生命周期 2. Vue-CLI (Command Line Interface) 3. Vue ...
【Vue】黑马Vue入门到高级实战汇总
目录 v-text v-cloak 计算属性computed 计算属性双向绑定监听器watch Class与Style绑定v-bind 条件渲染v-if v-if 与 v-show 比较列表渲染 ...
vue基础一--vue结构
vue结构说明一.安装二.配置选项三.要组件配置四.创建对象四.完说明要求:要先安装vue 安装vue 配置选项根组件配置创建对象一.安装在线安装 <script src ...
【一天时间|vue基础】vue组件间通信
一天时间系列文章是博主精心整理的面试热点问题和难点问题,吸收了大量的技术博客与面试文章,总结多年的面试经历,带你快速并高效地审视前端面试知识.直击技术痛点,主动出击,精密打击,这才是面试拿到高薪的秘诀 ...
【Vue基础】Vue基础自测45题
Vue基础自测45题 1.什么是Vue?Vue的核心理念是什么? 2.什么是MVC和MVVM? 3.框架和库的区别? 4.插值表达式 5.vue指令界面防止闪烁 6.vue指令v-html和v-tex ...
Vue基础之Vue实例
构造器: 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的: 在实例化 Vue 时,需要传入一个选项对象,它可以包含数据.模板.挂载元素.方法.生命周期钩子等选项. ...
黑马Uni-App视频笔记（上）基础部分（含视频素材下载地址）
视频教学:https://www.bilibili.com/video/BV1BJ411W7pX 素材资料(转自B站视频评论区):https://pan.baidu.com/s/1Dkj5iuGRG6 ...
jQuery基础知识（黑马程序员前端基础必备教程视频笔记）
一.jQuery概述 1.JavaScript库即library,是一个封装好的特定的集合(方法和函数).从封装的一大堆函数的角度理解库.就是在个库中,封装了很多预先定义好的函数在里面,比如动画an ...