Vue基础

目录

简介

入门

一、准备Vue

        引入Vue模块：

二、Vue常用指令

        用户列表渲染

        v-for

        v-for的key

        v-bind

        v-if 

        v-show

        v-model

        v-on

---

简介

Vue是一种构建用户界面的渐进式javascript框架，官网为 Vue.js - 渐进式 JavaScript 框架 | Vue.js

框架：就是一套完整的项目解决方案，用于快速构建项目 。

优点：大大提升前端项目的开发效率 。

缺点：需要理解记忆框架的使用规则 。

入门

        一、准备Vue

        使用Vue的准备需要三步：

• 引入Vue模块（https://unpkg.com/vue@3/dist/vue.esm-browser.js）
• 创建Vue程序的应用实例，控制视图的元素
• 准备元素(div)，被Vue控制

        引入Vue模块：

        引入Vue.js时需要指定 type 为 module。

script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
......

        创建Vue程序的应用实例，控制视图的元素

createApp({
    data() {
      return {
        message: "Hello Vue!"
      }
    }
})

        准备元素(div)，交给Vue控制

<div id="app">
    <!-- 插值表达式⬇️ -->
    {{message}}
</div>

createApp({
    data() {
      return {
        message: "Hello Vue!"
      }
    }
}).mount('#app')

数据驱动视图：

        准备数据

        通过插值表达式渲染页面

二、Vue常用指令

        用户列表渲染

        将Vue响应的数据，渲染在用户界面中。

HTML标签上带有 v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能。

对被Vue管理的app内的标签可用，在哪个标签用就对哪个标签生效。

        v-for

        作用：列表渲染，遍历容器的元素或者对象的属性

        语法： v-for = "(item,index) in items"

参数说明：

items 为遍历的数组

item 为遍历出来的元素

index 为索引/下标，从0开始 ；可以省略，省略index的语法： v-for = "item in items"

<p v-for="content in contents"> {{content}}</p>

        遍历的数组，必须在data中定义； 要想让哪个标签循环展示多次，就在哪个标签上使用 v-for 指令。

        v-for的key

        作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用

        语法： v-for = "(item,index) in items" :key="唯一值"

注意点:

key的值只能是字符串 或 数字类型

key的值必须具有唯一性 推荐使用id作为key（唯一）

不推荐使用index作为key（会变化，不对应）

<p v-for="content in contents" :key="content.id"> {{content}}</p>

        v-bind

        作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。

        语法：v-bind:属性名="属性值"

        简化：:属性名="属性值"

        html

  <div id="app">
    <a v-bind:href="url">超链接1</a>
    <a :href="url">超链接2</a>
  </div>

        javascript

const app = createApp({
  data() {
      return {
        url: "http://www.baidu.com"
      }
  }
}).mount("#app");

        v-if 

        作用：这两类指令，都是用来控制元素的显示与隐藏的 v-if

        语法：v-if="表达式"，表达式值为 true，显示；false，隐藏

        原理：基于条件判断，来控制创建或移除元素节点（条件渲染）

        场景：要么显示，要么不显示，不频繁切换的场景

        其它：可以配合 v-else-if / v-else 进行链式调用条件判断

<!-- v-if 控制渲染或不渲染 -->
<span v-if="user.gender == 1">男</span>
<span v-else-if="user.gender == 2">女</span>
<span v-else>其他</span>

        v-show

        语法：v-show="表达式"，表达式值为 true，显示；false，隐藏

        原理：基于CSS样式display来控制显示与隐藏

        场景：频繁切换显示隐藏的场景

<!-- v-show 控制css样式中的display显示或隐藏 -->
<span v-show="user.job == 1">讲师</span>
<span v-show="user.job == 2">班主任</span>
<span v-show="user.job == 3">其他</span>

        v-model

        作用：在表单元素上使用，双向数据绑定。可以方便的 获取 或 设置 表单项数据

        语法：v-model="变量名"

        javascript

const app = createApp({
  data() {
      return {
         name: "Vue"
      }
  }
}).mount("#app");

        html

<input type="text" v-model="name">
<!-- 输入框内的内容与data内的name会同步，一方被修改另一方也会跟着修改。-->

        v-on

        作用：为html标签绑定事件（添加时间监听）

   语法：

        v-on:事件名="内联语句"

        v-on:事件名="函数名“

        简写为  @事件名="…"

        html

<div id="app">
  <input type="button" value="1" v-on:click="console.log('被点击了');">
  <input type="button" value="2" v-on:click="method">
  <input type="button" value="3" @click="method">
</div>

        javascript

  const app = createApp({
      data() {
        return {
          name: "Vue"
        }
      },
      methods: {
        method() {
          console.log('被点击了');
        }
      },
    }).mount("#app");

Vue的生命周期

生命周期：指一个对象从创建到销毁的整个过程。

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)。

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法(钩子)

 

const app = createApp({
     data() {
       return {
         message: "Hello Vue"
       }
     },

     //生命周期-钩子函数 mounted
     mounted() {
       console.log('Vue挂载完毕, 发送请求获取数据 ...');
     }

   }).mount("#app");