Vue基础

Vue定义

• 补充知识：
  • Web前端开发三大框架
    • Angular.js
    • React.js
    • Vue.js
  • 其中：Vue.js的使用和关注在三大框架中略微胜出，且热度仍在递增。
• Vue定义：
  • 是一套用于构建用户界面的JavaScript框架，使基于网页的前端应用程序开发更为方便。
• Vue官方说明文档：
  • https://cn.vuejs.org/guide/introduction.html

Vue框架的使用

• Vue.js文件的引入
  • 从Vue官网中下载Vue.js文件
  • 将Vue.js文件放置在和个人.html文件同一文件夹下
  • 在个人.html文件中，通过外链式方式、在src属性中引入Vue.js文件
    • <script src="Vue.js"></script>
• Vue框架的使用
  • 语法：实例化一个Vue对象
    • var  Vue对象变量名 = new Vue({
      • // 选项(如下)
    • });
  • 选项：
    • 挂载点
      • el：'CSS选择器或HTML元素'，
    • 数据源
      • data：{
        • 键：值
      • },
    • 函数方法
      • methods{
        • 函数名1( 形参 ){
          • 代码块 }
        • 函数名2( 形参 ){
          • 代码块 }

        • ……

      • }
    • 计算
      • computed：{
        • 函数名(形参){
          • 代码块
          • return 返回值
        • }
      • }
    • 侦听器
      • watch：{
        • 方法一：以函数的形式监听
          • 侦听对象( 更新后的值，更新前的值 ){
            • console.log(更新后的值)
            • console.log(更新前的值)
          • }
        • 方法二：普通监听
          • 侦听对象：{
            • //当侦听对象发生变化时,handler函数将被调用
            • handler(更新后的值，更新前的值){
              • console.log(更新后的值)
              • console.log(更新前的值)
            • }
          • }
        • 方法三：深度监听(deep)
          • //deep：可用于对对象或数组内部的属性进行监听
          • 侦听对象：{
            • //当侦听对象发生变化时,handler函数被调用
            • //下述默认形参名，可随意指定
            • handler( 默认形参名 ){
              • console.log(默认形参名.键名)
            • }，
            • //开启侦听器
            • deep：true，
            • //控制侦听器自动触发一次监听(默认为false)
            • immediate: true
          • }
      • }
  • 补充：在一个Vue实例化对象中：
    • this：等价于Vue实例化对象
    • this.属性名：等价于Vue实例对象中的属性
      • 例如：引用Vue实例化对象中的数据属性，并使其值自增
        • this.键名++

Vue五大指令

• 内容渲染指令(插举法)
  • {{ 键名 }}
• 双向绑定指令
  • v-model属性
• 事件绑定指令
  • @click属性
• 条件渲染指令
  • v-if属性：根据条件的真假(True、False)，对标签进行显示和隐藏。
    • 当条件为True时，显示标签元素。反之则隐藏。
  • v-show属性：【同v-if属性的功能】
  • v-if与v-show区别：
    • v-show：基于CSS样式的display属性对none值的设定(即diaplay：none)来隐藏和显示元素
    • v-if：通过删除和添加标签元素来显示和隐藏元素
• 列表渲染指令
  • v-for属性：用于对数据或对象的遍历(输出)
    • 可对数据源中的每个元素循环遍历、并分别生成相应的元素。

补充：API接口

• API：应用程序接口
  • API(即接口)：是前端调用后端数据的一个通道，通过通道，可以访问到后端的数据，但又无需调用其源代码。
• 接口相当于函数
  • 前端调用后端提供的API接口，输入该API所需的参数信息后，在后端执行完函数，在将输出的结果返回前端。
  • (即Axios提供了发送请求和处理响应数据的API接口，用于与后端的API接口进行通信。Axios的API接口让开发者可以方便地在前端代码中发送请求，并处理后端返回的数据。)
  • 综上，Axios提供了一种简单的API接口方式来访问后端API接口，并不是自己提供了后端API接口。
    • 补充：后端的API接口定义了前端可以发送的请求类型、请求参数和请求格式，以及后端将如何处理这些请求并返回响应数据。

axios

• axios：是一个用于发送各种类型的HTTP请求的JavaScript库
  • 提供了简单易用的API接口，可以发送各种类型的请求(如 GET、POST、PUT、DELETE等),并处理响应数据。
• 用途：
  • Axios负责将前端的请求发送到后端，然后接收来自后端的响应数据。
• axios引入方式
  • 本地包axios.js导入
    • <script src="axios.js"></script>
    • 注意：此时axios.js与当前.html文件需在同一文件夹下。
  • 以cdn方式引入
    • <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
• axios的书写语法
  • 书写在script标签中
  • <script>
    • axios({
      • method : '请求方式',        // 发送get请求或post请求【默认为GET】
      • url :  ' http://IP地址 : xx端口/ xx接口 ',
      • data :  {
        • // data：一般用于作为post请求中被发送的数据
        • 键：值，
        • ……  }
      • params : {
        • // params：一般用于作为get请求中被发送的数据
        • 键：值，
        • ……  }
      • }).then((res) => {  
        • // 处理成功状态的结果
      • }).catch((error) => {
        • // 处理错误状态的结果  })
  • </script>