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

文章目录二、watch 侦听器三、计算属性四、axios 五、vue-cli 的使用
一、过滤器（vue2）（1）过滤器概念
过滤器（）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式 v-bind 属性绑定。
过滤器应该被添加在表达式的尾部，由“管道符”进行调用，示例代码如下：
（2）定义过滤器
在创建 vue 实例期间，可以在节点中定义过滤器，示例代码如下：
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）私有过滤器和全局过滤器
在节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。
如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：
// 全局过滤器，独立于每个vm实例之外//Vue.filter接收两个参数，第一个过滤器名字，第二个过滤器“处理函数”Vue.filter('capi', (str) => {// 强调：过滤器中，一定要有一个返回值return str.charAt(0).toUpperCase() + str.slice(1) + '~';})
（4）其他
1、过滤器可以串联地进行调用
过滤器可以串联地进行调用
2、过滤器传参
过滤器的本质是函数，因此可以接收参数
（5）过滤器的注意点要定义到节点下，本质是一个函数在过滤器函数中，一定要有值在过滤器的形参中，可以获取到“管道符”前面待处理的那个值如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”，调用的是”私有过滤器“ 二、watch 侦听器（1）什么是侦听器
watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

文章插图

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 开发的标准工具。它简化了程序员基于创建工程化的 Vue 项目的过程。
1、安装和使用
vue-cli 是 npm 上的一个全局包，使用 npm命令，即可方便的把它安装到自己的电脑上：npm-g @vue/cli
基于 vue-cli 快速生成工程化的 Vue 项目：
vue项目的名称
刚开始学习自定义配置
2、 vue 项目的运行流程
在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。
其中：
① App.vue 用来编写待渲染的模板结构

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

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