笔记来自于黑马程序员课程

引用站外地址
黑马程序员Vue全套视频教程
从vue2.0到vue3.0一套全覆盖，前端学习核心框架教程

推荐安装的 VScode 中的 Vue 插件

  1. Vue 3 Snippets：https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets
  2. Vetur：https://marketplace.visualstudio.com/items?itemName=octref.vetur

什么是 vue

  1. 构建用户界面
    • 用 vue 往 html 页面中填充数据，非常的方便
  2. 框架
    • 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！
    • 要学习 vue，就是在学习 vue 框架中规定的用法！
    • vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库
    • 只有把上面老师罗列的内容掌握以后，才有开发 vue 项目的能力！

vue 的两个特性

  1. 数据驱动视图：

    • 数据的变化会驱动视图自动更新
    • 好处：程序员只管把数据维护好，那么页面结构会被 vue 自动渲染出来！

  2. 双向数据绑定：

    在网页中，form 表单负责采集数据，Ajax 负责提交数据。

    • js 数据的变化，会被自动渲染到页面上
    • 页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到 js 数据中

注意：数据驱动视图和双向数据绑定的底层原理是 MVVM（Mode 数据源、View 视图、ViewModel 就是 vue 的实例）

vue 指令

1. 内容渲染指令

  1. v-text 指令的缺点：会覆盖元素内部原有的内容！
  2. {{ }} 插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！
  3. v-html 指令的作用：可以把带有标签的字符串，渲染成真正的 HTML 内容！

2. 属性绑定指令

注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！

  • 在 vue 中，可以使用 v-bind: 指令，为元素的属性动态绑定值；

  • 简写是英文的 :

  • 在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：

    1
    <div :title="'box' + index">这是一个 div</div>

3. 事件绑定

  1. v-on: 简写是 @

  2. 语法格式为：

    1
    2
    3
    4
    5
    6
    7
    8
    <button @click="add"></button>

    methods: {
       add() {
    			// 如果在方法中要修改 data 中的数据，可以通过 this 访问到
    			this.count += 1
       }
    }

  3. $event 的应用场景：如果默认的事件对象 e 被覆盖了，则可以手动传递一个 $event。例如：

    1
    2
    3
    4
    5
    6
    7
    8
    <button @click="add(3, $event)"></button>

    methods: {
       add(n, e) {
    			// 如果在方法中要修改 data 中的数据，可以通过 this 访问到
    			this.count += 1
       }
    }

  4. 事件修饰符：

    • .prevent

      1
      <a @click.prevent="xxx">链接</a>

    • .stop

      1
      <button @click.stop="xxx">按钮</button>

4. v-model 指令

  1. input 输入框
    • type=“radio”
    • type=“checkbox”
    • type=“xxxx”
  2. textarea
  3. select

5. 条件渲染指令

  1. v-show 的原理是：动态为元素添加或移除 display: none 样式，来实现元素的显示和隐藏
    • 如果要频繁的切换元素的显示状态，用 v-show 性能会更好
  2. v-if 的原理是：每次动态创建或移除元素，实现元素的显示和隐藏
    • 如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时 v-if 性能更好

在实际开发中，绝大多数情况，不用考虑性能问题，直接使用 v-if 就好了！！！

v-if 指令在使用的时候，有两种方式：

  1. 直接给定一个布尔值 true 或 false

    1
    <p v-if="true">被 v-if 控制的元素</p>

  2. 给 v-if 提供一个判断条件，根据判断的结果是 true 或 false，来控制元素的显示和隐藏

    1
    <p v-if="type === 'A'">良好</p>

过滤器

过滤器的注意点

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

watch 侦听器

侦听器的格式

  1. 方法格式的侦听器
    • 缺点1：无法在刚进入页面的时候，自动触发！！！
    • 缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器！！！
  2. 对象格式的侦听器
    • 好处1：可以通过 immediate 选项，让侦听器自动触发！！！
    • 好处2：可以通过 deep 选项，让侦听器深度监听对象中每个属性的变化！！！

计算属性

特点：

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

好处：

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

axios

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

axios 的基本使用

  1. 发起 GET 请求：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    axios({
      // 请求方式
      method: 'GET',
      // 请求的地址
      url: 'http://www.liulongbin.top:3006/api/getbooks',
      // URL 中的查询参数
      params: {
        id: 1
      }
    }).then(function (result) {
      console.log(result)
    })

  2. 发起 POST 请求：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    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 的使用

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

    1
    vue cerate 项目的名称

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

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