<!-- 文本插值 -->
<p>{{ message }}</p>

<!-- 原始 HTML（慎用，避免 XSS 攻击） -->
<p v-html="rawHtml"></p>

<!-- 动态属性 -->
<a :href="url">链接</a>

<img :src="imageUrl" :alt="description">

<input v-model="inputText" type="text">
<select v-model="selectedOption">
  <option value="A">选项A</option>
</select>

<div v-if="score >= 90">优秀</div>
<div v-else-if="score >= 60">及格</div>
<div v-else>不及格</div>

<div v-show="isVisible">显示/隐藏内容</div>

<ul>
  <li v-for="(item, index) in items" :key="item.id">
    {{ index }} - {{ item.name }}
  </li>
</ul>

<!-- 内联事件 -->
<button @click="counter += 1">点击+1</button>

<!-- 方法调用 -->
<button @click="handleClick">点击事件</button>

<!-- 事件修饰符 -->
<form @submit.prevent="onSubmit">阻止默认行为</form>
<a @click.stop="doSomething">阻止事件冒泡</a>

export default {
  methods: {
    handleClick(event) {
      console.log('点击事件', event.target);
    },
    onSubmit() {
      console.log('表单提交');
    }
  }
}

export default {
  data() {
    return { firstName: '张', lastName: '三' }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
}

export default {
  data() {
    return { count: 0 }
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`计数从 ${oldVal} 变为 ${newVal}`);
    }
  }
}

<!-- ChildComponent.vue -->
<template>
  <div>
    <h3>{{ title }}</h3>
    <button @click="sendMessage">传递消息</button>
  </div>
</template>

<script>
export default {
  props: ['title'],
  emits: ['message'],
  methods: {
    sendMessage() {
      this.$emit('message', '来自子组件的消息');
    }
  }
}
</script>

<template>
  <div>
    <ChildComponent 
      title="子组件标题" 
      @message="handleMessage"
    />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    handleMessage(msg) {
      console.log(msg); // 输出：来自子组件的消息
    }
  }
}
</script>

<!-- 点击事件 -->
<button v-on:click="handleClick">点击我</button>
<button @click="handleClick">简写形式</button>

<button @click="count += 1">计数：{{ count }}</button>

<button @click="sayHello">打招呼</button>

export default {
  methods: {
    sayHello() {
      alert('Hello Vue!')
    }
  }
}

<button @click="saySomething('你好')">说中文</button>
<button @click="saySomething('Bonjour')">说法语</button>

export default {
  methods: {
    saySomething(message) {
      alert(message)
    }
  }
}

<!-- 阻止表单默认提交 -->
<form @submit.prevent="onSubmit">
  <button type="submit">提交</button>
</form>

<!-- 阻止点击事件冒泡 -->
<div @click="parentClick">
  <button @click.stop="childClick">子按钮</button>
</div>

<!-- 按键修饰符 -->
<input @keyup.enter="submitForm" placeholder="按回车提交">

<button @click="handleEvent">获取事件对象</button>

export default {
  methods: {
    handleEvent(event) {
      console.log(event.target) // 获取触发元素
    }
  }
}

<button @click="handleArgs('参数', $event)">传递参数和事件</button>

export default {
  methods: {
    handleArgs(arg, event) {
      console.log(arg, event.clientX)
    }
  }
}

<button @[eventName]="handleDynamicEvent">动态事件</button>

export default {
  data() {
    return {
      eventName: 'click' // 可动态改为 'mouseover' 等
    }
  },
  methods: {
    handleDynamicEvent() {
      console.log('动态事件触发')
    }
  }
}

<a @click.stop.prevent="doSomething">同时阻止冒泡和默认行为</a>

<!-- Ctrl + 点击 -->
<div @click.ctrl="handleCtrlClick">Ctrl + 点击</div>

<!-- Alt + Enter -->
<input @keyup.alt.enter="clearInput">

<button @click.left="leftClick">左键</button>
<button @click.right="rightClick">右键</button>

<div>{{ news }}</div> <!-- 只能显示，不能修改 -->

<input v-model="docContent"> <!-- 既能显示，又能修改 -->

<input type="text" v-model="message">
<p>输入内容：{{ message }}</p>

<textarea v-model="content"></textarea>

<!-- 单个复选框（布尔值） -->
<input type="checkbox" v-model="isAgree"> 同意协议

<!-- 多个复选框（数组） -->
<input type="checkbox" value="vue" v-model="skills"> Vue
<input type="checkbox" value="react" v-model="skills"> React

<input type="radio" value="male" v-model="gender"> 男
<input type="radio" value="female" v-model="gender"> 女

<select v-model="selectedCity">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
</select>

<input 
  :value="message" 
  @input="message = $event.target.value"
>

<input v-model.lazy="message"> <!-- 在 input 失焦时更新 -->

<input v-model.number="age" type="number">

<input v-model.trim="username">

<input v-model="formData.username">
<input v-model="formData.password">

data() {
  return {
    formData: {
      username: '',
      password: ''
    }
  }
}

export default {
  data() {
    return { rawInput: '' }
  },
  computed: {
    formattedInput: {
      get() {
        return this.rawInput.toUpperCase()
      },
      set(value) {
        this.rawInput = value.toLowerCase()
      }
    }
  }
}

<input v-model="formattedInput">

<template>
  <!-- HTML 结构 -->
  <button class="my-btn" @click="handleClick">
    {{ buttonText }}
  </button>
</template>

<script>
export default {
  // 数据：控制按钮显示的文字
  data() {
    return {
      buttonText: "点我！"
    };
  },
  // 方法：点击按钮后的逻辑
  methods: {
    handleClick() {
      alert("按钮被点击了！");
    }
  }
};
</script>

<style scoped>  /* scoped 表示样式只在当前组件生效 */
.my-btn {
  background: blue;
  color: white;
  padding: 10px 20px;
}
</style>

<template>
  <div>
    <h1>我的第一个组件</h1>
    <!-- 使用自定义的按钮组件 -->
    <MyButton />
    <MyButton />  <!-- 可以重复使用 -->
  </div>
</template>

<script>
import MyButton from './MyButton.vue';  // 导入组件

export default {
  components: { MyButton }  // 注册组件
};
</script>

<!-- 父组件 App.vue -->
<template>
  <MyButton :text="parentText" />  <!-- 传递 text 属性 -->
</template>
<script>
export default {
  data() {
    return { parentText: "父组件传来的文字" };
  }
};
</script>

<!-- 子组件 MyButton.vue -->
<template>
  <button>{{ text }}</button>  <!-- 使用 props -->
</template>
<script>
export default {
  props: ['text']  // 声明接收的 props
};
</script>

<!-- 子组件 MyButton.vue -->
<button @click="$emit('btn-click', '传递的数据')">按钮</button>

<!-- 父组件 App.vue -->
<template>
  <MyButton @btn-click="handleClick" />
</template>
<script>
export default {
  methods: {
    handleClick(data) {
      console.log("子组件传来的数据：", data);
    }
  }
};
</script>

<!-- 子组件 MyCard.vue -->
<div class="card">
  <slot>默认内容（如果父组件不传内容，显示这里）</slot>
</div>

<!-- 父组件 App.vue -->
<MyCard>
  <h2>这是插入的内容</h2>
  <p>会替换子组件的 slot 标签</p>
</MyCard>

// main.js
import MyButton from './MyButton.vue';
Vue.component('MyButton', MyButton);  // 全局注册

<!-- App.vue -->
<script>
import MyButton from './MyButton.vue';

export default {
  components: { MyButton }  // 局部注册
};
</script>

<!-- 父组件 Parent.vue -->
<template>
  <div>
    <!-- 传递静态值或动态绑定 -->
    <ChildComponent :message="parentMessage" :count="100" />
  </div>
</template>

<script>
import ChildComponent from './Child.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      parentMessage: "Hello from Parent!"
    };
  }
};
</script>

<!-- 子组件 Child.vue -->
<template>
  <div>
    <!-- 使用 props -->
    <p>父组件消息：{{ message }}</p>
    <p>父组件给的数字：{{ count }}</p>
  </div>
</template>

<script>
export default {
  // 声明接收的 props（推荐用对象形式指定类型和默认值）
  props: {
    message: {
      type: String,    // 类型校验
      required: true   // 必传
    },
    count: {
      type: Number,
      default: 0       // 默认值
    }
  }
};
</script>

<!-- 子组件 Child.vue -->
<template>
  <button @click="handleClick">点我通知父组件</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 触发自定义事件，并传递数据
      this.$emit('child-click', { data: "子组件的数据" });
    }
  }
};
</script>

<!-- 父组件 Parent.vue -->
<template>
  <div>
    <!-- 监听子组件触发的事件 -->
    <ChildComponent @child-click="handleChildClick" />
  </div>
</template>

<script>
import ChildComponent from './Child.vue';

export default {
  components: { ChildComponent },
  methods: {
    // 接收子组件传递的数据
    handleChildClick(payload) {
      console.log("收到子组件的消息：", payload.data); // 输出：收到子组件的消息：子组件的数据
    }
  }
};
</script>

<!-- 父组件 -->
<ChildComponent v-model="parentValue" />

<!-- 等价于 -->
<ChildComponent :value="parentValue" @input="parentValue = $event" />

<!-- 子组件 -->
<template>
  <input :value="value" @input="$emit('input', $event.target.value)" />
</template>

<script>
export default {
  props: ['value']  // 必须接收名为 value 的 prop
};
</script>

<!-- 父组件 -->
<ChildComponent :title.sync="parentTitle" />

<!-- 等价于 -->
<ChildComponent :title="parentTitle" @update:title="parentTitle = $event" />

<!-- 子组件 -->
<button @click="$emit('update:title', '新标题')">修改标题</button>

npm install axios

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

// 语法：axios.get(url, [配置参数])
axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data); // 响应数据
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

// 语法：axios.post(url, 请求体数据, [配置参数])
axios.post('https://api.example.com/users', {
  name: 'John',
  age: 30
})
  .then(response => {
    console.log('创建成功:', response.data);
  })
  .catch(error => {
    console.error('创建失败:', error);
  });

// PUT 请求（更新数据）
axios.put('https://api.example.com/users/1', {
  name: 'Alice'
});

// DELETE 请求（删除数据）
axios.delete('https://api.example.com/users/1');

axios.defaults.baseURL = 'https://api.example.com'; // 统一设置根路径
axios.defaults.headers.common['Authorization'] = 'Bearer token123'; // 统一添加请求头

axios.get('/data', {
  params: { id: 1 },          // URL 参数（自动转为 ?id=1）
  headers: { 'X-Custom-Header': 'value' }, // 自定义请求头
  timeout: 5000               // 超时时间（毫秒）
});

axios.get('/data')
  .then(response => {
    // 处理成功响应
  })
  .catch(error => {
    if (error.response) {
      // 请求已发送，服务器返回了错误状态码（如 404）
      console.log('状态码:', error.response.status);
      console.log('错误数据:', error.response.data);
    } else if (error.request) {
      // 请求已发送，但未收到响应（如网络断开）
      console.log('未收到响应:', error.request);
    } else {
      // 其他错误（如配置错误）
      console.log('错误信息:', error.message);
    }
  });

axios.interceptors.request.use(config => {
  // 在发送请求前添加 Token
  config.headers.Authorization = 'Bearer token123';
  return config;
}, error => {
  return Promise.reject(error);
});

axios.interceptors.response.use(response => {
  // 对响应数据统一处理（如提取 data 字段）
  return response.data;
}, error => {
  // 统一处理错误
  alert('请求失败，请重试！');
  return Promise.reject(error);
});

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: []
    };
  },
  created() {
    axios.get('https://api.example.com/users')
      .then(response => {
        this.users = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  }
};
</script>

import axios from 'axios';

// 全局配置
axios.defaults.baseURL = 'https://api.example.com';

// 挂载到 Vue 原型（Vue2 用法）
Vue.prototype.$axios = axios;

// 在组件中直接使用
this.$axios.get('/users').then(...);

const formData = new FormData();
formData.append('file', file); // file 是 input[type=file] 的文件对象

axios.post('/upload', formData, {
  headers: { 'Content-Type': 'multipart/form-data' }
});

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText); // 手动解析 JSON
    console.log(data);
  } else if (xhr.status !== 200) {
    console.error('请求失败:', xhr.status);
  }
};
xhr.send();

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data); // 自动解析 JSON
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

axios.get('/data')
  .catch(error => {
    if (error.response) {
      console.log('服务器返回错误状态码:', error.response.status);
    } else if (error.request) {
      console.log('请求已发送但无响应:', error.request);
    } else {
      console.log('配置错误:', error.message);
    }
  });

export default {
  data() {
    return {
      price: 100,
      quantity: 5
    };
  },
  computed: {
    // 计算总价（依赖 price 和 quantity）
    total() {
      return this.price * this.quantity;
    }
  }
};

<p>总价：{{ total }}</p>  <!-- 输出：500 -->

computed: {
  // 过滤出价格大于 50 的商品
  filteredProducts() {
    return this.products.filter(product => product.price > 50);
  }
}

computed: {
  fullName: {
    get() {
      return this.firstName + ' ' + this.lastName;
    },
    set(newValue) {
      // 当修改 fullName 时，拆分并更新 firstName 和 lastName
      const names = newValue.split(' ');
      this.firstName = names[0];
      this.lastName = names[1] || '';
    }
  }
}

this.fullName = 'John Doe';  // 自动触发 setter

// 示例：根据用户输入过滤列表
data() {
  return {
    searchText: '',
    products: [
      { name: 'Apple', price: 10 },
      { name: 'Banana', price: 5 },
      { name: 'Orange', price: 8 }
    ]
  };
},
computed: {
  filteredProducts() {
    return this.products.filter(product => 
      product.name.toLowerCase().includes(this.searchText.toLowerCase())
    );
  }
}

<input v-model="searchText" placeholder="搜索商品">
<ul>
  <li v-for="product in filteredProducts" :key="product.name">
    {{ product.name }} - ￥{{ product.price }}
  </li>
</ul>

export default {
  data() {
    return {
      count: 0,
      userInput: ''
    };
  },
  watch: {
    // 监听 count 的变化
    count(newVal, oldVal) {
      console.log(`count 从 ${oldVal} 变为 ${newVal}`);
    },
    // 监听用户输入的变化（用于搜索联想）
    userInput(newVal) {
      this.fetchSearchResults(newVal); // 调用异步方法
    }
  },
  methods: {
    fetchSearchResults(query) {
      // 模拟 API 请求
      setTimeout(() => {
        console.log('搜索:', query);
      }, 300);
    }
  }
};

watch: {
  dataToWatch: {
    handler(newVal, oldVal) { /* 逻辑 */ },
    deep: true,      // 深度监听（对象内部变化）
    immediate: true  // 立即触发（初始化时执行一次）
  }
}

data() {
  return {
    user: { name: 'Alice', age: 25 }
  };
},
watch: {
  user: {
    handler(newVal) {
      console.log('用户信息变化:', newVal);
    },
    deep: true // 监听 user 对象所有属性的变化
  }
}

watch: {
  count: {
    handler(newVal) {
      console.log('初始值:', newVal); // 初始化时打印 count 的初始值
    },
    immediate: true
  }
}

watch: {
  email(newVal) {
    if (!this.validateEmail(newVal)) {
      this.error = '邮箱格式错误';
    } else {
      this.error = '';
    }
  }
}

watch: {
  '$route.params.id'(newId) {
    this.fetchData(newId); // 路由变化时重新请求数据
  }
}

watch: {
  'formData.username': {
    handler(newVal) {
      console.log('用户名变化:', newVal);
    }
  }
}

computed: {
  totalPrice() {
    return this.items.reduce((sum, item) => sum + item.price, 0);
  }
}

<!-- 模板中直接使用计算属性 -->
<p>{{ fullName }}</p>

watch: {
  searchText(newVal) {
    this.debouncedFetchResults(newVal); // 防抖后请求
  }
}

watch: {
  user: {
    handler(newVal) {
      console.log('用户信息变化:', newVal);
    },
    deep: true // 监听 user 对象所有属性
  }
}

<!-- 子组件：Card.vue -->
<div class="card">
  <slot>默认提示文字</slot> <!-- 这里是插槽位置 -->
</div>

<Card>
  <img src="cat.jpg"> <!-- 插入图片 -->
</Card>

<!-- 子组件：Layout.vue -->
<div class="layout">
  <slot name="header"></slot> <!-- 头部孔 -->
  <slot name="content"></slot> <!-- 内容孔 -->
  <slot name="footer"></slot> <!-- 底部孔 -->
</div>

<Layout>
  <template #header><h1>我是标题</h1></template>
  <template #content><p>我是正文...</p></template>
  <template #footer><button>提交</button></template>
</Layout>

<!-- 子组件：DataList.vue -->
<ul>
  <li v-for="item in items">
    <slot :item="item">默认 {{ item.name }}</slot>
  </li>
</ul>

<DataList :items="products">
  <template #default="{ item }"> <!-- 解构数据 -->
    {{ item.name }} - ￥{{ item.price }}
  </template>
</DataList>

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <!-- 触发自定义事件 -->
    <button @click="notifyParent">向父组件发送数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      // 触发名为 'custom-event' 的事件，并传递数据
      this.$emit('custom-event', { data: '来自子组件的数据' });
    }
  }
}
</script>

<!-- 父组件 ParentComponent.vue -->
<template>
  <div>
    <!-- 监听子组件的自定义事件 -->
    <child-component @custom-event="handleCustomEvent" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  methods: {
    // 处理子组件传递的数据
    handleCustomEvent(payload) {
      console.log('接收到子组件数据:', payload.data); // 输出：来自子组件的数据
    }
  }
}
</script>

<!-- 子组件 SlotComponent.vue -->
<template>
  <div>
    <!-- 定义作用域插槽，暴露数据给父组件 -->
    <slot :item="item" :onClick="handleClick"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return { item: { id: 1, name: '示例数据' } };
  },
  methods: {
    handleClick() {
      // 触发自定义事件
      this.$emit('item-clicked', this.item);
    }
  }
}
</script>

<!-- 父组件 ParentComponent.vue -->
<template>
  <slot-component>
    <!-- 接收子组件传递的作用域数据和方法 -->
    <template v-slot:default="slotProps">
      <button @click="slotProps.onClick">
        {{ slotProps.item.name }}
      </button>
    </template>
  </slot-component>
</template>

<script>
import SlotComponent from './SlotComponent.vue';

export default {
  components: { SlotComponent },
  methods: {
    // 监听子组件触发的自定义事件
    handleItemClicked(item) {
      console.log('点击的项:', item.name); // 输出：示例数据
    }
  }
}
</script>

// 创建事件总线（Event Bus）
// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

// 组件 A（触发事件）
EventBus.$emit('global-event', { data: '跨组件数据' });

// 组件 B（监听事件）
EventBus.$on('global-event', (payload) => {
  console.log(payload.data); // 输出：跨组件数据
});

# 全局安装（需要 Node.js >= 8.9）
npm install -g @vue/cli
# 或使用 yarn
yarn global add @vue/cli

# 验证安装
vue --version

# 交互式创建项目
vue create my-project

# 选择预设（默认或手动配置）
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features  # 手动选择特性（推荐）

cd my-project
npm run serve
# 访问 http://localhost:8080

my-project/
├── node_modules/     # 依赖包
├── public/           # 静态资源（直接复制到输出目录）
│   ├── index.html    # 主 HTML 文件
│   └── favicon.ico
├── src/              # 源码目录
│   ├── assets/       # 图片、字体等资源
│   ├── components/   # 组件
│   ├── views/        # 页面级组件
│   ├── router/       # 路由配置
│   ├── store/        # Vuex 状态管理
│   ├── App.vue       # 根组件
│   └── main.js       # 入口文件
├── .eslintrc.js      # ESLint 配置
├── babel.config.js   # Babel 配置
└── package.json      # 项目依赖和脚本

# 添加 Vue Router
vue add router

# 添加 Vuex
vue add vuex

# 添加 UI 库（如 Element UI）
vue add element-plus

# 启动可视化界面
vue ui

# 更新全局 CLI
npm update -g @vue/cli

# 更新项目本地依赖
npm update @vue/cli-service

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

webpack-demo/
├── src/
│   ├── index.js      # 入口文件
│   └── utils.js      # 工具模块
├── public/           # 静态资源
│   └── index.html    # HTML 模板
├── webpack.config.js # Webpack 配置文件
└── package.json

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development', // 开发模式
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'bundle.js', // 输出文件名
    path: path.resolve(__dirname, 'dist'), // 输出路径
  },
  plugins: [
    // 自动生成 HTML 并注入打包后的 JS
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ]
};