Vue概述

Vue是一款用于构建用户界面的渐进式的JavaScript框架。

官网：https://cn.vuejs.org/

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

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

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

Vue 快速入门

基于数据渲染除用户看到的界面——数据驱动视图

准备

• 引入Vue模块（官方提供）

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

• 准备元素（div），被Vue控制

数据驱动视图

• 准备数据

• 通过插值表达式渲染页面

<div id="app">
  <h1>{{ message }}</h1>
</div>
<script type="module">
  #引入vue模块
  import { createApp , ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
  creatApp({
    setup(){
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }) .munt("#app");
</script>

Vue常用指令

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

<p v-xxx="...">......</p>

v-for

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

语法：<tr v-for="(item,index) in items" :key="item.id"> {{ item }} </tr>

参数说明：

• items 为遍历的数组

• item 为遍历出来的元素

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

key：

• 作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用，提升渲染性能

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

插值表达式不能出现在标签内部

v-bind

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

• 语法：v-bind：属性名=“属性值” <img v-bind:src="item.image" width="30px">

• 简化： ：属性名=“属性值” <img :src="item.image" width="30px">

v-if & v-show

作用：这两类指令，都是用来控制远射的显示与隐藏的。

v-if

• 语法：v-if=“表达式”，表达式的值为 true显示；flase隐藏

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

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

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

<span v-if="gender == 1">男生</span>
<span v-else-if="gender == 2">女生</span>
<span v-else>未知</span>

v-show

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

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

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

<span v-show="gender == 1">男生</span>
<span v-show="gender == 2">女生</span>

v-model

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

• 语法：v-model=“变量名”

<input type="text" id="name" v-model="searchFrom.name">

<script>
  createApp({
    data(){
      return {
        //定义数据模型，采集员工搜索表单数据
        searchForm:{
          name:'',
          gender:'',
          job:''
        }
      }
    }
  }).mount('#container')
</scrip>

v-on

作用：为HTML变迁绑定事件（添加事件监听）

语法：

• v-on：事件名=“方法名”

• 简写为 @事件名=“...”

<div id="app">
  <button type="button" v-on:click="handle">点我</button>
  <button type="button" @click="handle">再点我</button>
</div>

const app = createApp({
  data(){
    //...
  },
    methods:{
      handel(){
        console.log('试试就试试');
      }
    },
}).mount("#app");

""