Vue2.x-3.x从入门到精通完整详细学习笔记day02
Vue2.x-3.x从入门到精通完整详细学习笔记day02 ---过滤器，watch 侦听器，计算属性，axios，Vue-cli
学习笔记目录：
更新中…
目录
过滤器
过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”（就是我们的“ | ”）进行调用
过滤器的注意点
-
要定义到 filters 节点下，本质是一个函数
const vm = new Vue({ //固定写法，选择要控制的区域 el: "#app", // 要渲染到页面上的数据 data: { message: "hello Vue!" }, // 过滤器函数，必须定义在filters节点之下 // 过滤器本质上就是一个函数 filters: { //实现字符串的首字母大写---的函数capi // 形式参数中的值就是咱们管道符之前的值 capi(val) { // 字符串的charAt方法，这个方法的返回值是字符串在指定索引位置处的字符 const first = val.charAt(0).toUpperCase(); // 字符串的slice方法：可以截取一个字符串从指定的索引位置开始（包括所指定的字符串）到最后的字符串内容 const other = val.slice(1); return first + other; } } }) -
在过滤器函数中，一定要有 return 值（因为我们在使用插值表达式调用过滤器的时候，最终显示的就是过滤器的返回值）
<p>message 的值是 {{message|capi}} </p> //----------------------------------------------- data:{ message:'hello Vue!' }, filters:{ capi(){ return 'abc' } } //------------------------------ //显示的结果是 message的值是 abc -
在过滤器的形参中，可以获取到“管道符”前面待处理的那个值
-
如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”，调用的是”私有过滤器“而不是全局过滤器
全局过滤器额定义方式：
//全局过滤器---独立于每一个vm实例之外 //Vue.filter()方法接收两个参数 // 第一个参数：是全局过滤器的名字 // 第二个参数：是全局过滤器额"处理函数（该函数中的参数就是接收到的管道符前面的数据--也就是要进行过滤的数据）" Vue.filter('capi', (str) => { // 字符串的charAt方法，这个方法的返回值是字符串在指定索引位置处的字符 const first = str.charAt(0).toUpperCase(); // 字符串的slice方法：可以截取一个字符串从指定的索引位置开始（包括所指定的字符串）到最后的字符串内容 const other = str.slice(1); return first + other; }) -
在我们正常使用的时候，我们一般也都是使用全局过滤器（代码复用），私有过滤器很少用的（需要注意的是：要这个Vue的全局过滤器生效，那么使用过滤器的标签就必须在 Vue 实例的控制范围之内（也就是说它本身或者其外面的标签被选择并创建 Vue 实例了！））
连续使用多个过滤器
示例代码如下：
<p>message 的值是 {{message|capi|max}} </p> //----------------------------------------- //过程是：capi先对message操作，之后是max过滤器对 capi对message操作的返回值 进行操作过滤器传参
- 单个过滤器传参
//arg1和arg2是传递给过滤器filterA的两个参数 <p>message 的值是 {{ message | filterA(arg1,arg2) }} </p> //过滤器处理函数的形参列表中： // 第一个参数：永远都是管道符前面的待处理的值（不会被覆盖） // 从第二个参数开始，才是调用过滤器是调用过程传递过来的arg1和arg2参数 Vue.filter('filterA',(msg,arg1,arg2)=>{ //过滤器的代码片段 })- 多个过滤器传参
//arg1和arg2是传递给过滤器filterA的两个参数 <p>message 的值是 {{ message | filterA(param1) | filterB(arg1,arg2) }} </p> Vue.filter('filterA',(msg,param1)=>{ //过滤器的代码片段 return firstReturn; }) //过滤器处理函数的形参列表中： // 第一个参数：永远都是管道符前面的待处理的值（不会被覆盖） // 从第二个参数开始，才是调用过滤器是调用过程传递过来的arg1和arg2参数 Vue.filter('filterB',(firstReturn,arg1,arg2)=>{ //过滤器的代码片段 })
过滤器的兼容性
过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。
在企业级项目开发中：
-
如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能
-
如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能
具体的迁移指南，请参考 vue 3.x 的官方文档 给出的说明：
watch 侦听器
watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。
使用的代码案例如下：
const vm = new Vue({
el: '#app',
data: { username: '' },
watch: {
// 侦听器本质上是一个函数，要监视哪一个数据的变化，就把数据名作为方法名即可
// 监听username的值的变化
// newVal是“变化后的新值”，oldVal是 “变化之前的值”
// 新值在前，旧值在后(如果就需要一个新值，我们可以就只传入一个参数newVal,如果不需要使用相应的新值和旧值，我们可以直接不传参数)
username(newVal, oldVal) {
// Example:判断一个用户名是否可用
//如果输入框中的值为空，我们就 不发送请求了
if (newVal === '') return;
// 调用jQuery中的Ajax请求，判断newVal是否被占用
$.get('https://www.escook.cn/api/finduser/' + newVal, function(result) {
console.log(result);
})
}
}
})
侦听器的格式
-
方法格式的侦听器
- 好处：方法格式的监听器写法比较简单，是我们在平常写代码的时候需要优先考虑的，如果没有特殊的需求，
- 缺点1：无法在刚进入页面的时候，自动触发！！！
- 缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器！！！
//比如下面的这个使用方法的格式监听username的变化
data:{
username:'',
info:{user:''}
},
watch: {
//缺点一体现
username(newVal, oldVal) {
//监测大数据变化的时候要执行的函数体
console.log(newVal,oldVal);
},
//缺点二体现
info(newVal){
//并不会根据对象的成员的变化而相应
console.log(newVal)
},
//-------根据我们个人的需要来选取下面的这两种改善方式：
//缺点二的改善方式1-----比如：我们要监听的是对象info的成员user:(我们可以直接使用单引号，然后里面写上 对象.监听的属性(){} 即可，如下：)(这种方法得到的"新值"是更新后的相应属性的值)
'info.user'(newVal){
console.log(newVal)
}
//缺点二的改善方式2-----使用对象格式的侦听器来监听相应数据的变化（这个方法得到的“新值”是整个obj对象）
}
-
对象格式的侦听器
- 好处1：可以通过 immediate 选项，让侦听器自动触发（在进入页面的时候自动触发一次侦听器）！！！
- 好处2：可以通过 deep 选项，让侦听器深度监听对象中每个属性的变化！！！
//比如下面的这个使用对象的格式监听username的变化
data:{
username:'',
info:{user:''}
},
watch: {
//好处一体现
username: {
handler(newVal, oldVal) {
//监听到变化之后执行的函数体
console.log(newVal, oldVal)
},
// immediate用来设置是否在打开页面的时候就立即刷新（默认值是false）
// true表示打开页面的时候立即刷新
// false表示的是打开的时候不会立即刷新（为false的时候的功能和我们使用方法格式的监听器的功能类似）
immediate: true
},
//好处二体现
info: {
handler(newVal) {
console.log(newVal)
},
//开启深度监听，只要对象中任何一个属性发生变化，都会触发“对象的侦听”
deep: true
}
}
计算属性
计算属性指的是通过一系列运算之后，最终得到一个属性值。这个动态计算出来的属性值可以被模板结构或 methods 方法使用。
（这里面我们使用的时候需要注意的一个就是 反引号字符串调用变量，使用 ${变量} 进行字符串拼接）
特点：
- 定义的时候，要被定义为“方法”
- 在使用计算属性的时候，当普通的属性使用即可
- 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算
好处：
- 实现了代码的复用
- 只要计算属性中依赖的数据源变化了，则计算属性会自动重新求值！
<div id="app">
<div>
<span>R：</span>
<input type="text" v-model.number="r">
</div>
<div>
<span>G：</span>
<input type="text" v-model.number="g">
</div>
<div>
<span>B：</span>
<input type="text" v-model.number="b">
</div>
<hr>
<!-- 专门用户呈现颜色的 div 盒子 -->
<!-- 在属性身上：代表 v-bind 属性绑定 -->
<!-- :style 代表动态绑定一个样式对象，他的值是一个{ } 样式对象 -->
<!-- 在当前的样式对象中，只包含 backgroundColor 样式-->
<!-- 字符串中使用或者说调用变量：${变量} （字符串需要使用 =！=反引号=！= 包含!!!!）-->
<div class="box" :style="{backgroundColor:rgb}">
{{ rgb }}
</div>
<button @click="show">按钮</button>
</div>
//===========================================
var vm = new Vue({
el: '#app',
data: {
// 红色
r: 0,
// 绿色
g: 0,
// 蓝色
b: 0
},
methods: {
// 点击按钮，在终端显示最新的颜色
show() { console.log(this.rgb) }
},
// 所有的计算属性，都要定义到 computed 节点之下
// 计算属性在定义的时候，要定义成方法的格式
// 虽然是在定义的时候定义成的是方法格式，但是当我们打印出来的Vue实例的时候，
// 会发现我们以方法的形式定义的计算属性会以Vue实例对象的一个属性来展现（该属性的值是计算属性的方法形式的函数体的返回值）
// 比如说下面的这个就是 vm.rgb => 'rgb(r,g,b)' (其中的r,g,b指的都是data里面的属性值)
computed: {
//rgb作为一个计算属性，要返回一个生成好的rgb(x,x,x)字符串
// rgb:function(){}
rgb() {
//注意这里面的额这个反引号的使用！！！
return ` rgb( ${this.r} , ${this.g} , ${this.b} ) `
}
}
});
axios
axios 是一个专注于网络请求的库！
axios 的基本使用
我们需要知道的是：axios请求得到的数据会对原来的真实数据进行一个包装！！！
具体包装内容如下：！！！
比如：
接口服务器中的数据为
{
status:'', msg:'',data[]
}
axios请求到数据数据之后，在真正的数据之外会套一层壳，得到的数据如下：
{
config:[],
data:[接口服务器中的真实数据],
headers:{},
request:{},
status:xxx,
statusText:''
}
所以我们在使用 axios的时候最关心的是结果对象的data属性里面的内容（响应得到的接口服务器中的真实数据）
- 发起 GET 请求：
axios({
// 请求方式
method: 'GET',
// 请求的地址
url: 'http://www.liulongbin.top:3006/api/getbooks',
//------get传参使用params,post传参使用data
// URL 中的查询参数（传参）
params: { id: 1 },
//请求体数据
//data:{}
//.then 是用来指定请求成功之后的回调函数的；形参中的 result 是请求成功之后的结果（Promise对象）
}).then(function (result) {
console.log(result)
})
- 发起 POST 请求：
document.querySelector('#btnPost').addEventListener('click', async function () {
const { data: res } = await axios({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/post',
data: {
name: 'zs',
age: 20
}
})
console.log(res)
})
- 如果调用某个方法的返回值是 Promise 实例，则该方法前面可以添加 await！
await 只能用在被 async “修饰”的方法中
document.querySelector('#btn').addEventListener('click',async function(){
const result =await axios({...})
})
-
如果使用
-
const result =await axios({…}),系统会打印出axois包装后的数据(注意并不是真正的数据)，而不是Promise对象了
-
const {data} =await axios({…}),系统会将等号右边得到的axios包装后的数据对象解构返回对象的 data
-
使用下面的这种方法的话，就可以直接将等号右边得到的axios包装后的数据解构返回对象的 data 并将该返回的data重命名为 res，（这里我们使用的是解构赋值）
document.querySelector('#btn').addEventListener('click',async function(){
const {data:res} =await axios({...})
})
解构赋值的时候，使用“ ：”进行重命名
- 调用axios之后，使用async/await进行简化（简化了后面的then）
- 使用解构赋值，从 axios 封装的大对象中，把 data 属性给解构出来
- 把解构出来的 data 属性，使用冒号进行重命名，一般都是重新命名为 { data : res }
直接使用 axios.get 和 axios.post 发送请求
语法格式如下：
//1.GET请求
axios.get('url地址',{
//get传参
params: { get参数}
})
//--------------------------------
//2.POST请求
axios.post('url地址',{ post请求体参数 })
使用案例：
<button id="btnGet">直接发起GET请求</button>
<button id="btnPost">直接发起POST请求</button>
<script src="./lib//axios.js"></script>
<script>
document.querySelector('#btnGet').addEventListener('click', async function() {
const { data: res } = await axios.get('www.baidu.com', {
params: { id: 1 }
});
console.log(res.data)
})
document.querySelector('#btnPost').addEventListener('click', async function() {
const { data: res} = await axios.post('www.baidu.com', {id: 1 });
console.log(res.data)
})
</script>
在我们平常使用的时候，一般都是使用下面的这种形式（两种直接实现的方式，我们根据具体的情况使用）
const { data: res } = await axios({...});
console.log(res.log)
Vue-cli
我们先了解一个概念：单页面应用程序
单页面应用程序（英文名：Single Page Application）简称 SPA，顾名
思义，指的是一个 Web 网站中只有唯一的一个 HTML 页面，所有的功能
与交互都在这唯一的一个页面内完成。
什么是 vue-cli
vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。
引用自 vue-cli 官网上的一句话：
程序员可以专注在撰写应用上，而不必花好几天去纠结 webpack 配置的问题。
4. vue 项目的运行流程
在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。
其中：
① App.vue 用来编写待渲染的模板结构
② index.html 中需要预留一个 el 区域
③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中
vue-cli 的安装和使用
vue-cli 是 npm 上的一个全局包，使用 npm install 命令，即可方便的把它安装到自己的电脑上：
npm install -g @vue/cli
使用
- 在终端下运行如下的命令，创建指定名称的项目：(名称尽量不要有空格和英文)
vue cerate 项目的名称
-
这中间会有一个预设的选择：Vue2，Vue3 和自定义（建议初学者选择）
-
我们可以选择 版本，Babel, CSS-pre-processors(css预处理器)，Linter /Formater（严格标准化，比如字符串使用单引号还是双引号，行末时候要有空格之类的，不按照这个规范的话，就会报错！！！）
-
这第一次的话，我们可以就选择三项：版本，Babel, CSS-pre-processors(css预处理器)
-
里面还有一个选项就是，
//你想把插件，Babel，Elist这之类的文件的配置文件放在哪里呢？ where do you prefer placing config for Babel,..,etc?(Use arrow keys) //下面有两个选项-----1，放到一个单独的文件里面(我们这第一次的话，默认是选中第一项的，如果都放在package.json文件里面的话，这个文件里面的内容就会很多，也会很乱的！不是很有利于我们的开发) 2.放在 package.json里面 in dedicated config files in package.json -
选项，我们是否保存我们上面选中的所有选项，保存成一个预设，以方便我们后面的创建项目（根据个人选择哈）
-
尤其注意：在最后一步进行项目创建的过程中，千万不要用鼠标在窗口里面乱选，否则将会被我们冻结这个创建项目的过程（导致创建暂停）-----解决方案，轻轻点击窗口的长边缘，ctrl+c，即可恢复创建！！
-
创建完成之后，他会提示如何运行我们创建的项目（一般是两个步骤，我们依次进行即可）
-
vue 项目中 src 目录的构成：
assets 文件夹：存放项目中用到的静态资源文件，例如：css 样式表、图片资源 components 文件夹：程序员封装的、可复用的组件，都要放到 components 目录下 main.js 是项目的入口文件。整个项目的运行，要先执行 main.js App.vue 是项目的根组件。（定义我们所看到的UI结构） -
public
- favicon.ico 运行项目的小图标
- index.html 首页
-
node_modules 相关的一些包文件
学习笔记目录：
更新中…
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)