Vue基础入门(二）

binzhenliziyuan

已于 2022-06-09 22:19:21 修改

阅读量201

点赞数

分类专栏：前端框架Vue 文章标签： vue.js javascript 前端

于 2022-06-09 21:58:05 首次发布

本文链接：https://blog.csdn.net/qq_41555350/article/details/125200896

版权

前端框架Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Vue基础入门目录

一、过滤器vue3已经删除!!!

1.什么是过滤器（Filters）

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

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用，

2.代码展示

 // 过滤器函数，必须被定义到 filters 节点之下
  // 过滤器本质上是函数
  filters: {
    // 注意：过滤器函数形参中的 val，永远都是“管道符”前面的那个值
    capi(val) {
      // 字符串有 charAt 方法，这个方法接收索引值，表示从字符串中把索引对应的字符，获取出来
      // val.charAt(0)
      const first = val.charAt(0).toUpperCase()
      // 字符串的 slice 方法，可以截取字符串，从指定索引往后截取
      const other = val.slice(1)
      // 强调：过滤器中，一定要有一个返回值
      return first + other
    }
  }

3.私有过滤器和全局过滤器

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

// 使用 Vue.filter() 定义全局过滤器
//第一个参数是全局过滤器的名字，第二个参数是处理函数
    Vue.filter('capi', function (str) {
      const first = str.charAt(0).toUpperCase()
      const other = str.slice(1)
      return first + other + '~~~'
    })

4.过滤器的注意点

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

5.优化时间代码示例

使用dayjs.js使用文档

// 声明格式化时间的全局过滤器
    Vue.filter('dateFormat', function (time) {
      // 1. 对 time 进行格式化处理，得到 YYYY-MM-DD HH:mm:ss
      // 2. 把 格式化的结果，return 出去

      // 直接调用 dayjs() 得到的是当前时间
      // dayjs(给定的日期时间) 得到指定的日期
      const dtStr = dayjs(time).format('YYYY-MM-DD HH:mm:ss')
      return dtStr
    })

二、watch 侦听器

1.什么是 watch 侦听器

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

侦听器本质是个函数，要监听那个数据，就把它作为方法名，只要它发生了变化就会触发这个函数
注意传参时，新值在前，旧值在后。

2.侦听器的格式

2.1方法格式的侦听器

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

2.2对象格式的侦听器

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

3. immediate 选项

默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使用 immediate 选项。
示例代码如下:
在这里插入图片描述
immediate 选项的默认值是 false
immediate 的作用是：控制侦听器是否自动触发一次！

4. deep 选项

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

在这里插入图片描述

三、计算属性

1. 什么是计算属性

计算属性指的是通过一系列运算之后，最终得到一个属性值。

<!-- 在属性身上，: 代表  v-bind: 属性绑定 -->
<!-- :style 代表动态绑定一个样式对象，它的值是一个 {  } 样式对象 -->
<!-- 当前的样式对象中，只包含 backgroundColor 背景颜色 -->
<div class="box" :style="{ backgroundColor: `rgb(${r}, ${g}, ${b})` }">
  {{ `rgb(${r}, ${g}, ${b})` }}
</div>

这样做复用性很低，所以有了计算属性这个概念！

 methods: {
        // 点击按钮，在终端显示最新的颜色
        show() {
          console.log(this.rgb)
        }
      },
// 所有的计算属性，都要定义到 computed 节点之下
      // 计算属性在定义的时候，要定义成“方法格式”
      computed: {
        // rgb 作为一个计算属性，被定义成了方法格式，
        // 最终，在这个方法中，要返回一个生成好的 rgb(x,x,x) 的字符串
        rgb() {
          return `rgb(${this.r}, ${this.g}, ${this.b})`
        }
      }

这个动态计算出来的属性值可以被模板结构或 methods 方法使用。

2.特点：

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

3.好处：

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

四、axios

axios 是一个专注于网络请求的库！只负责发请求和拿数据
在后面的vue react都会用axios来请求数据
方法：导入库文件→调用axios方法返回值是 Promise 对象
→axios在请求到数据之后，在真正的数据之外，套了一层壳→data才是真实的数据→get传参用params，post传参用data

1.axios 的基本使用

1.1 发起 GET 请求：

 // 1. 调用 axios 方法得到的返回值是 Promise 对象
   axios({
     // 请求方式
     method: 'GET',
     // 请求的地址
     url: 'http://www.liulongbin.top:3006/api/getbooks',
     // URL 中的查询参数
     params: {
       id: 1
     }
   }).then(function (result) {
     console.log(result)
   })

1.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)
   })

1.3.重要-解构！！！

在这里插入图片描述

document.querySelector('#btnGet').addEventListener('click', async function () {
      // 解构赋值的时候，使用 : 进行重命名
      // 1. 调用 axios 之后，只要返回promise对象，使用 async/await 进行简化
      // 2. 使用解构赋值，从 axios 封装的大对象中，把 data 属性解构出来
      // 3. 把解构出来的 data 属性，使用 冒号 进行重命名，一般都重命名为 { data: res }
      const { data: res } = await axios({
        method: 'GET',
        url: 'http://www.liulongbin.top:3006/api/getbooks'
      })
   // 前面是服务器返回的真实数据，后面是列表数据
      console.log(res.data)
    })

2.基于axios.get和axios.post请求

<script>
    document.querySelector('#btnGET').addEventListener('click', async function () {
      /* axios.get('url地址', {
        // GET 参数
        params: {}
      }) */

      const { data: res } = await axios.get('http://www.liulongbin.top:3006/api/getbooks', {
        params: { id: 1 }
      })
      console.log(res)
    })

    document.querySelector('#btnPOST').addEventListener('click', async function () {
      // axios.post('url', { /* POST 请求体数据 */ })
      const { data: res } = await axios.post('http://www.liulongbin.top:3006/api/post', { name: 'zs', gender: '女' })
      console.log(res)
    })
  </script>

五、vue-cli 的使用

1.什么是单页面应用程序

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

2.什么是 vue-cli

vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。
引用自 vue-cli 官网上的一句话：
程序员可以专注在撰写应用上，而不必花好几天去纠结 webpack 配置的问题。
中文官网：https://cli.vuejs.org/zh/

3. 安装和使用

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

npm install -g @vue/cli

3.1在终端下运行如下的命令，创建指定名称的项目：

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

在这里插入图片描述

4.vue 项目中 src 目录的构成：

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

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

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

App.vue 是项目的根组件。

5. vue 项目的运行流程

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

main.js文件

// 导入 vue 这个包，得到 Vue 构造函数
import Vue from 'vue'
// 导入 App.vue 根组件，将来要把 App.vue 中的模板结构，渲染到 HTML 页面中
import App from './App.vue'

Vue.config.productionTip = false
// 创建 Vue 的实例对象
new Vue({
  // 把 render 函数指定的组件，替换掉|渲染到 HTML 页面中
  //render函数中 渲染的是哪个.vue组件，那么这个组件就叫做根组件
  render: h => h(App),
}).$mount('#app')

// Vue 实例的 $mount() 方法，作用和 el 属性完全一样！

六、vue组件

1. 什么是组件化开发

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

2. vue 中的组件化开发

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

3. vue 组件[UI结构的复用]的三个组成部分

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

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

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

3.1 template

vue 规定：每个组件对应的模板结构，需要定义到节点中。
注意：
 template 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素
 template 中只能包含唯一的根节点

3.2 script封装js业务逻辑-vue 组件中的 data 必须是函数

vue 规定：.vue 组件中的 data 必须是一个函数，不能直接指向一个数据对象，否则会导致多个组件实例共用同一份数据的问题，
请参考官方给出的示例：
https://cn.vuejs.org/v2/guide/components.html#data-必须是一个函数

<script>
// 默认导出。这是固定写法！
export default {
  // data 数据源
  // 注意：.vue 组件中的 data 不能像之前一样，不能指向对象。
  // 注意：组件中的 data 必须是一个函数
  data() {
    // 这个 return 出去的 { } 中，可以定义数据
    return {
      username: "admin",
    };
  },
methods:{
      chagneName(){
      // 在组件中， this 就表示当前组件的实例对象
      console.log(this)
      this.username = '哇哈哈'
      }
  }，
};
</script>

3.3 style-让 style 中支持 less 语法

<style> 标签上添加 lang=“less” 属性，即可使用 less 语法编写组件的样式

在这里插入图片描述

4.组件之间的父子关系

组件在被封装好之后，彼此之间是相互独立的，不存在父子关系在使用组件的时候，根据彼此的嵌套关系，形成了父子关系、兄弟关系

4.1 使用组件的三个步骤

App.vue 组件

步骤1：使用 import 语法导入需要的组件

// 1. 导入需要使用的 .vue 组件
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
import Test from '@/components/Test.vue'

步骤2：使用 components 节点注册组件

// 2. 注册组件
  components: {
    Left,
    Right,
    Test
  }

步骤3：以标签形式使用刚才注册的组件

  <Left></Left>

复习：路径中的@是在webpack.config.js中配置好的

想要导入文件时携带文件扩展名以及配置@的路径提示,先安装Path Autocomplete插件
再在settings.json里输入添加以下：
//左下角设置→右上角
//导入文件时是否携带文件的扩展名

//配置@的路径提示

"path-autocomplete.extensionOnImport": true,
"path-autocomplete.pathMappings": {
   "@":"${folder}/src"
 },

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

例如：
在组件 A 的 components 节点下，注册了组件 F。
则组件 F 只能用在组件 A 中；不能被用在组件 C 中。

4.3 注册全局组件

如果某个组件频繁被用到，重复注册会很麻烦，可以注册全局组件解决，只需注册一次，除了自己其他每个组件都可以直接使用。

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

5. 组件的 props是自定义属性

props 是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性！
它的语法格式如下：
//Count.vue 全局组件名为MyCount

count的值是：{{ init }}


<scrpit>
export default {
// props 是"自定义属性"，允许使用者通过自定义属性，为当前组件指定初始值
  // 自定义属性的名字，是封装者自定义的（只要名称合法即可）
  // props 中的数据，可以直接在模板结构中被使用
  // 注意：props 是只读的，不要直接修改 props 的值，否则终端会报错！
  // props: ['init'],
  props: {
    // 自定义属性A : { /* 配置选项 */ },
    // 自定义属性B : { /* 配置选项 */ },
    // 自定义属性C : { /* 配置选项 */ },
    init: {
      // 如果外界使用 Count 组件的时候，没有传递 init 属性，则默认值生效
      default: 0,
      // init 的值类型必须是 Number 数字
      type: Number,
      // 必填项校验
      required: true
    }
}
</script>

//Left.vue

<MyCount :init="9"></MyCount>
//使用的是v-bind属性绑定，此处的9是数值，字符串应该再加一层引号

//Right.vue

<MyCount :init="6"></MyCount>
//使用的是v-bind属性绑定，此处的6是数值，字符串应该再加一层引号

前面加v-bind就是js中的数字，不是字符型了

5.1 props 是只读的!!!

vue 规定：组件中封装的自定义属性是只读的，程序员不能直接修改 props 的值。否则会直接报错！！！！
在这里插入图片描述

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

 data() {
    return {
//this表示当前组件的实例
      // 把 props 中的 init 值，转存到 count 上
      count: this.init
    }
  },

5.2 props 的 default 默认值

在声明自定义属性时，可以通过 default 来定义属性的默认值。

export default {
  props: {  
    init: {
      // 如果外界使用 Count 组件的时候，没有传递 init 属性，则默认值生效
      default: 0,
      // init 的值类型必须是 Number 数字
      type: Number,
      // 必填项校验
      required: true
    }
  },