Vue 3 核心教程

// 数据变了，你手动找到元素，手动更新文字
var oee = 85;
$('#oee-value').text(oee);          // 手动改 DOM
$('#oee-bar').css('width', oee + '%'); // 手动改样式

// 数据又变了？再来一遍！
oee = 72;
$('#oee-value').text(oee);
$('#oee-bar').css('width', oee + '%');

const oee = ref(85)

// 模板里用 {{ oee }}，页面自动显示 85
// 数据一改，页面自动更新，不用碰 DOM！
oee.value = 72  // 就这一行，页面自动变了

import { ref } from 'vue'

// 创建一个响应式变量，初始值 85
const oee = ref(85)

// 读取：用 .value
console.log(oee.value)  // 85

// 修改：也用 .value → 页面自动更新
oee.value = 92

import { reactive } from 'vue'

// 创建一个响应式对象（像 Excel 的一行数据）
const machine = reactive({
  name: 'CNC-A01',
  status: '运行中',
  oee: 85,
  output: 1200
})

// reactive 不需要 .value，直接访问属性
machine.status = '停机'  // 页面自动更新
machine.oee = 0

<template>
  <div>
    <h2>{{ machineName }}</h2>
    <p>OEE: {{ oee }}%</p>
    <p>状态: {{ status === 'running' ? '运行中' : '停机' }}</p>
  </div>
</template>

<script setup>
const machineName = ref('CNC-A01')
const oee = ref(87.5)
const status = ref('running')
</script>

<!-- 完整写法 -->
<img v-bind:src="imageUrl" v-bind:alt="machineName" />

<!-- 简写（推荐，日常都用这个） -->
<img :src="imageUrl" :alt="machineName" />

<!-- 实际案例：动态进度条 -->
<div class="progress-bar"
     :style="{ width: oee + '%' }">
  {{ oee }}%
</div>

<!-- 动态 class -->
<span :class="{ 'text-green': status === 'running', 'text-red': status !== 'running' }">
  {{ status }}
</span>

<template>
  <!-- 完整写法 -->
  <button v-on:click="refreshData">刷新数据</button>

  <!-- 简写（推荐） -->
  <button @click="refreshData">刷新数据</button>

  <!-- 带参数 -->
  <button @click="selectMachine('CNC-A01')">选择 A01</button>

  <!-- 实时计数器 -->
  <p>已刷新 {{ count }} 次</p>
  <button @click="count++">+1</button>
</template>

<script setup>
const count = ref(0)
const refreshData = () => {
  count.value++
  console.log('数据已刷新')
}
const selectMachine = (id) => {
  console.log('选中:', id)
}
</script>

<template>
  <input v-model="searchText" placeholder="搜索设备..." />
  <p>搜索关键词: {{ searchText }}</p>

  <!-- 也可用于 select -->
  <select v-model="selectedLine">
    <option value="line1">产线 1</option>
    <option value="line2">产线 2</option>
  </select>
</template>

<script setup>
const searchText = ref('')
const selectedLine = ref('line1')
</script>

<template>
  <!-- v-if: 条件为 false 时，DOM 直接不存在 -->
  <div v-if="status === 'running'">🟢 运行中</div>
  <div v-else-if="status === 'warning'">🟡 警告</div>
  <div v-else>🔴 停机</div>

  <!-- v-show: 只是隐藏，DOM 一直在 -->
  <div v-show="showDetail">详细信息面板</div>
</template>

<script setup>
const status = ref('running')   // 显示 🟢 运行中
const showDetail = ref(true)     // 显示详细信息
</script>

<template>
  <table>
    <tr v-for="machine in machines" :key="machine.id">
      <td>{{ machine.id }}</td>
      <td>{{ machine.name }}</td>
      <td>
        <span :class="machine.status">{{ machine.status }}</span>
      </td>
      <td>{{ machine.oee }}%</td>
    </tr>
  </table>
</template>

<script setup>
const machines = ref([
  { id: 1, name: 'CNC-A01', status: '运行中', oee: 87.5 },
  { id: 2, name: 'CNC-A02', status: '运行中', oee: 92.1 },
  { id: 3, name: 'CNC-B01', status: '停机',   oee: 0 },
  { id: 4, name: '注塑-C01', status: '警告',   oee: 65.3 },
])
</script>

<!-- 一个 OEE 仪表盘卡片组件 -->
<template>
  <div class="oee-card">
    <h3>{{ title }}</h3>
    <!-- props 是父组件传进来的数据 -->
    <div class="gauge">{{ value }}%</div>
    <div class="bar" :style="{ width: value + '%' }"></div>
    <!-- 点击按钮，通知父组件 -->
    <button @click="handleClick">查看详情</button>
  </div>
</template>

<script setup>
// 1. Props = 输入参数（父组件传来的数据）
const props = defineProps({
  title: { type: String, required: true },
  value: { type: Number, default: 0 }
})

// 2. Emit = 输出事件（通知父组件）
const emit = defineEmits(['detail'])

const handleClick = () => {
  emit('detail', props.title)  // 把设备名传回给父组件
}
</script>

<template>
  <!-- 像调用函数一样使用组件，:value 传入数据 -->
  <OeeGauge title="可用率" :value="92" @detail="onDetail" />
  <OeeGauge title="表现率" :value="88" @detail="onDetail" />
  <OeeGauge title="质量率" :value="95" @detail="onDetail" />
</template>

<script setup>
import OeeGauge from './OeeGauge.vue'

const onDetail = (name) => {
  console.log('查看详情:', name)
}
</script>

export default {
  data() {
    return { oee: 85 }
  },
  computed: {
    oeeLevel() { return this.oee >= 85 ? '优秀' : '需改善' }
  },
  methods: {
    refresh() { this.oee = 90 }
  },
  mounted() { this.refresh() }
}

<script setup>
import { ref, computed, onMounted } from 'vue'

// 数据
const oee = ref(85)

// 计算属性
const oeeLevel = computed(() => oee.value >= 85 ? '优秀' : '需改善')

// 方法
const refresh = () => { oee.value = 90 }

// 生命周期
onMounted(() => refresh())
</script>

const oee = ref(87)
const quality = ref(95)

// computed = Excel 的公式，依赖变化自动重算
const totalOee = computed(() => {
  return ((oee.value * quality.value) / 100).toFixed(1)
})
// totalOee = 82.7（oee 或 quality 变了，自动更新）

import { ref, watch } from 'vue'

const oee = ref(85)

// 当 oee 变化时，触发回调
watch(oee, (newVal, oldVal) => {
  console.log(`OEE 从 ${oldVal} 变为 ${newVal}`)

  // 实际场景：OEE 低于阈值 → 发送告警
  if (newVal < 60) {
    sendAlert(`OEE 过低: ${newVal}%`)
  }
})

<script setup>
import { ref, onMounted, onUpdated, onUnmounted } from 'vue'

let timer = null
const oee = ref(0)

// ① onMounted：组件挂载后 → 开始获取数据
//    就像设备开机后，连上 MES 开始读数据
onMounted(() => {
  fetchOeeData()  // 首次加载 OEE 数据

  // 每 5 秒刷新一次（实时看板的核心！）
  timer = setInterval(() => {
    fetchOeeData()
  }, 5000)
})

// ② onUpdated：数据变化导致 DOM 更新后
onUpdated(() => {
  console.log('看板已更新，OEE:', oee.value)
})

// ③ onUnmounted：组件销毁前 → 清理定时器！
//    就像设备关机前要断开连接，否则会内存泄漏
onUnmounted(() => {
  clearInterval(timer)  // ⚠️ 必须清理！否则定时器永远在跑
  console.log('看板已关闭，定时器已清理')
})

const fetchOeeData = async () => {
  // 模拟从后端 API 获取数据
  oee.value = await getOeeFromApi()
}
</script>

<template>
  <div class="oee-dashboard">
    <h2>{{ machineName }} — OEE 看板</h2>

    <!-- 三个指标卡片 -->
    <div class="metrics">
      <MetricCard title="可用率" :value="availability" color="#7ee787" />
      <MetricCard title="表现率" :value="performance" color="#89dceb" />
      <MetricCard title="质量率" :value="quality" color="#d2a8ff" />
    </div>

    <!-- 综合得分 -->
    <div class="total-oee">
      <h3>综合 OEE: {{ totalOee }}%</h3>
      <span :class="oeeLevel === '优秀' ? 'green' : 'yellow'">
        {{ oeeLevel }}
      </span>
    </div>

    <!-- ECharts 仪表盘图表 -->
    <div ref="chartRef" class="chart" style="width: 100%; height: 300px;"></div>

    <!-- 手动刷新按钮 -->
    <button @click="refreshData">刷新数据</button>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

// ============ Props ============
const props = defineProps({
  machineName: { type: String, default: 'CNC-A01' }
})

// ============ 响应式数据 ============
const availability = ref(92)    // 可用率
const performance = ref(88)     // 表现率
const quality = ref(95)          // 质量率
const chartRef = ref(null)       // DOM 引用
let chartInstance = null
let timer = null

// ============ computed 计算属性 ============
const totalOee = computed(() => {
  return ((availability.value * performance.value * quality.value) / 10000).toFixed(1)
})

const oeeLevel = computed(() => {
  return totalOee.value >= 85 ? '优秀' : '需改善'
})

// ============ watch 侦听器 ============
// 数据变化 → 自动更新 ECharts 图表
watch(totalOee, () => {
  updateChart()
})

// ============ 方法 ============
const initChart = () => {
  chartInstance = echarts.init(chartRef.value)
  updateChart()
}

const updateChart = () => {
  if (!chartInstance) return
  chartInstance.setOption({
    series: [{
      type: 'gauge',
      data: [{ value: totalOee.value, name: 'OEE' }],
      detail: { formatter: '{value}%' }
    }]
  })
}

const refreshData = async () => {
  // 从后端 API 获取最新数据
  const data = await fetch(`/api/oee/${props.machineName}`)
  availability.value = data.availability
  performance.value = data.performance
  quality.value = data.quality
  // 数据变了 → computed 自动更新 → watch 自动更新图表 ✅
}

// ============ 生命周期 ============
onMounted(() => {
  initChart()
  refreshData()
  // 每 10 秒自动刷新（实时看板）
  timer = setInterval(refreshData, 10000)
})

onUnmounted(() => {
  clearInterval(timer)           // 清理定时器
  chartInstance.dispose()         // 销毁 ECharts 实例
})
</script>

// ============ Vue 3 ============
<template>
  <input v-model="name" />
  <p v-if="name">你好, {{ name }}!</p>
</template>
<script setup>
import { ref } from 'vue'
const name = ref('')
</script>

// ============ React ============
import { useState } from 'react'

function App() {
  const [name, setName] = useState('')
  return (
    <>
      <input value={name} onChange={e => setName(e.target.value)} />
      {name && <p>你好, {name}!</p>}
    </>
  )
}