Vue的语法和实例教程

我就是我是好孩子啊

于 2024-05-21 15:35:40 发布

阅读量1.1k

点赞数 17

文章标签： vue.js 前端 javascript

from zhangxia

本文链接：https://blog.csdn.net/weixin_41442949/article/details/139086346

版权

Vue3中引入Element Plus

1、Element Plus简介
Element Plus是一个基于Vue.js 3.0的开源UI组件库，是Element UI的升级版。它提供了一套简单、易用且高效的组件，包括表单、表格、弹窗、日期选择器、分页、步骤条等常用组件。Element Plus不仅提供了基本的样式和功能，还提供了丰富的主题和自定义选项，可以轻松定制化组件样式和行为。
2、与Element Plus类似的其他组件库
除了Element Plus之外，还有许多其他的优秀的UI组件库可以选择，下面是一些类似Element Plus的组件库：
（1）Ant Design Vue
Ant Design Vue官网：https://www.antdv.com/components/overview-cn
Ant Design Vue是一个基于Vue.js的企业级UI组件库，提供了一系列高质量的组件和模板，具有易用性、高度可定制性、美观性等特点。
（2）Vuetify
Vuetify官网：https://vuetifyjs.com/en/components/all/
Vuetify是一个基于Vue.js的Material Design组件库，提供了丰富的UI组件和特效，可以快速创建美观、响应式的Web应用。
（3）Bootstrap Vue
Bootstrap Vue官网：https://bootstrap-vue.org/docs/components
Bootstrap Vue是一个基于Vue.js的Bootstrap组件库，提供了一系列响应式、易用、可扩展的组件和指令，可以快速构建美观的Web应用。
（4）PrimeVue
PrimeVue官网：https://primevue.org/installation
PrimeVue是一个基于Vue.js的UI组件库，提供了一系列功能丰富、易用、高度可定制的组件，包括表单、表格、图表等常用组件。
（5）Quasar
Quasar官网：https://quasar.dev/
Quasar是一个基于Vue.js的多平台UI组件库，支持Web、移动端、桌面端等多种平台，提供了一系列高质量、易用、可扩展的组件和工具。
这些组件库都有其独特的特点和优势，开发者可以根据自己的需求选择适合自己的组件库。
3、在Vue3中引入Element开发环境
（1）引入Element开发环境

npm install element-plus --save
npm i -D unplugin-auto-import
npm i -D unplugin-vue-components

（2）自动引入Element

npm install -D unplugin-vue-components unplugin-auto-import

（3）在配置文件中进行配置，本人使用的是Vit构建工具
如果使用Vite作为构建工具，配置文件为vite.config.js，配置方法如下：

import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],

  resolve: {
    alias: {
      "@": fileURLToPath(new URL("./src", import.meta.url)),
    },
  },

  server: {
    port: 8080,
  },
});

4、在Vue中引入Element Plus图标
（1）安装element-plus图标

npm install @element-plus/icons-vue

（2）Element Plus图标全局引入
main.js中增加下面的代码：

import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from "element-plus";
// 统一导入el-icon图标
import "element-plus/dist/index.css";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";

const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}

app.use(ElementPlus);
app.mount("#app");

（3）使用Element Plus带图标的组件

  <el-input v-model="user.name" class="w-50 m-2" placeholder="请输入姓名">
          <template #prefix>
            <el-icon class="el-input__icon">
              <search />
            </el-icon>
          </template>
        </el-input>

Vue3条件渲染指令（v-if、v-else、v-else-if、v-show、v-for）

条件渲染指令
1、v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。

2、v-else
可以使用 v-else 为 v-if 添加一个“else 区块”。

3、v-else-if
v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用。

4、v-show
可以用来按条件显示一个元素的指令是 v-show。

5、v-for
HelloWorld.vue参考源码

<template>
  <div id="app">
    <input type="text" v-model="stock"/>
    <p v-if='stock > 10'>库存为{{ stock }}</p>
    <p v-else-if='0 < stock && stock <= 5'>商品即将售馨</p>
    <p v-else>暂时没有库存</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const stock = ref(0)
</script>

2、案例根据条件显示不同的template标签
既想使用一个标签包裹需要需要的标签，又不想显示包裹标签，可以使用template标签
v-if == true显示
v-if == false隐藏
EG:

<template>
  <div id="app">
    <template v-if="flag">
      <h1 style="color:red">你真美</h1>
    </template>
    <template v-else>
      <input type="text" value="你真帅" style=" font-size:36px;color:blue; font-weight: 900;text-align: center;"/>
      <br><br>
    </template>
    <button @click="changeFlag">修改</button>
  </div>
</template>
    

<script setup lang="ts">
import { ref } from "vue";

const flag = ref(true)

function changeFlag() {
  flag.value = !flag.value
}
</script>

3、案例显示和隐藏dom节点
v-show == true 把dom节点显示
v-show == false 把dom节点隐藏(display:none)
参考代码:

<template>
  <div id="app">
    <p v-show="isShow">我会隐身</p>
    <button @click="isShow = !isShow">点击显示隐藏</button>
  </div>
</template>
    

<script setup lang="ts">
import { ref, watch } from "vue"
const isShow = ref(true)

</script>

4、案例使用v-for显示专业列表
参考代码

<template>
  <div id="app">
    <ul>
      <li v-for='item in majors'>{{ item }}</li>
    </ul>
  </div>
</template>
    

<script setup lang="ts">
const majors = ['计算机科学与技术', '数字媒体技术', '物联网工程', '软件工程', '网络工程', '人工智能']

</script>

<style>
ul {
  list-style: none;
}

li {
  list-style-type: square;
  list-style-position: outside;
  text-align: left;
  font-size: large;
  padding: 5px;
}
</style>

4、案例使用v-for显示专业列表
参考代码

<template>
  <div id="app">
    <ul>
      <li v-for='item in majors'>{{ item }}</li>
    </ul>
  </div>
</template>
    

<script setup lang="ts">
const majors = ['计算机科学与技术', '数字媒体技术', '物联网工程', '软件工程', '网络工程', '人工智能']

</script>

<style>
ul {
  list-style: none;
}

li {
  list-style-type: square;
  list-style-position: outside;
  text-align: left;
  font-size: large;
  padding: 5px;
}
</style>

5、案例使用v-for循环数字和字符
参考代码

<template>
  <div id="app">
    <ul>
      <li v-for="num in 5">{{ num }}</li>
    </ul>
    <p v-for="str in 'computer'">{{ str }}</p>
  </div>
</template>

6、案例使用v-for显示专业列表

<template>
  <el-select v-model="value" class="m-2" placeholder="Select" size="large">
    <el-option v-for="item in majors" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

// const value = ref('')
const value = ref('1')
const majors = [
  {
    value: '1',
    label: '计算机科学与技术',
  },
  {
    value: '2',
    label: '数字媒体技术',
  },
  {
    value: '3',
    label: '物联网工程',
  },
  {
    value: '4',
    label: '人工智能',
  },
  {
    value: '5',
    label: '软件工程',
  },
]
</script>

6、案例使用v-for显示专业列表
参考代码

<template>
  <el-select v-model="value" class="m-2" placeholder="Select" size="large">
    <el-option v-for="item in majors" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

// const value = ref('')
const value = ref('1')
const majors = [
  {
    value: '1',
    label: '计算机科学与技术',
  },
  {
    value: '2',
    label: '数字媒体技术',
  },
  {
    value: '3',
    label: '物联网工程',
  },
  {
    value: '4',
    label: '人工智能',
  },
  {
    value: '5',
    label: '软件工程',
  },
]
</script>

7、案例使用v-for完成todos案例

<script setup lang="ts">
import { ref, reactive } from 'vue'

const  id = ref(0)
const  newTodo = ref('')
// reactive作用：定义一个对象类型的响应式数据(基本数据类型用ref函数)
const  todos = reactive([
  { id: id.value++, text: '番茄炒蛋' },
  { id: id.value++, text: '醋溜土豆丝' },
  { id: id.value++, text: '香菇炒肉' }
])

function addTodo() {
  todos.push({ id: id.value++, text: newTodo.value })
  newTodo.value = ''
}
function removeTodo(index: number) {
  todos.splice(index, 1);
}
</script>

<template>
  <!-- @submit.prevent .prevent 表示提交以后不刷新页面, -->
  <form @submit.prevent="addTodo">
    <input v-model="newTodo" />
    <button>Add Todo</button>
  </form>
  <ul>
    <li v-for="(todo, index)  in todos" :key="todo.id">
      {{ todo.text }}
      <button @click="removeTodo(index)">删除</button>
    </li>
  </ul>
</template>

8、案例使用v-for表格中显示对象数组

<template>
  <table>
    <tr>
      <th>班级</th>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
    <tr v-for="(item,index ) in students" :key="index">
      <td>{{ item.grade }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.gender }}</td>
      <td>{{ item.age }}</td>
      <button v-on:click="del(index)">删除</button>
      <td></td>
    </tr>
  </table>
  <button @click="add">添加</button>
</template>

<script lang="ts" setup>
import { ref } from "vue";
let counter = 3

interface Student {
  grade: number
  name: string
  gender: string
  age: number
}

let students = ref<Student[]>([{
  grade: 1,
  name: '张三',
  gender: '男',
  age: 20
}, {
  grade: 2,
  name: '李四',
  gender: '女',
  age: 21
}]);


function add() {
  var student = {
    grade: counter++,
    name: '新人',
    gender: '女',
    age: 18
  }
  students.value.push(student);
}

function del(index: number) {
  students.value.splice(index, 1);
}
</script>