VUE2全家桶精讲

money + 100
money - 100
money * 10
money / 10 
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()

<h3>{{title}}<h3>

<p>{{nickName.toUpperCase()}}</p>

<p>{{age >= 18 ? '成年':'未成年'}}</p>

<p>{{obj.name}}</p>

<p>{{fn()}}</p>

1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p>  //如果在data中不存在 则会报错

2.支持的是表达式，而非语句，比如：if   for ...
<p>{{if}}</p>

3.不能在标签属性中使用 {{  }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>

  <div id="app">
    <h2>个人信息</h2>
	  // 既然指令是vue提供的特殊的html属性，所以咱们写的时候就当成属性来用即可
    <p v-text="uname">姓名：</p> 
    <p v-html="intro">简介：</p>
  </div> 

<script>
        const app = new Vue({
            el:'#app',
            data:{
                uname:'张三',
                intro:'<h2>这是一个<strong>非常优秀</strong>的boy<h2>'
            }
        })
</script>

 <div id="app">
   <div class="box">我是v-show控制的盒子</div>
   <div class="box">我是v-if控制的盒子</div>
 </div>

 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script>
   const app = new Vue({
     el: '#app',
     data: {
       flag: false
     }
   })
 </script>

  <div id="app">
    <p>性别：♂ 男</p>
    <p>性别：♀ 女</p>
    <hr>
    <p>成绩评定A：奖励电脑一台</p>
    <p>成绩评定B：奖励周末郊游</p>
    <p>成绩评定C：奖励零食礼包</p>
    <p>成绩评定D：惩罚一周不能玩手机</p>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        gender: 2,
        score: 95
      }
    })
  </script>

<div id="app">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button v-on:click="count++">+</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 100
      }
    })
  </script>

<div id="app">
    <button @click="change">切换显示隐藏</button>
    <h1 v-show="isShow">黑马程序员</h1>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isShow: true
      },
      methods: {
        change(){
          this.isShow = false
        }
      }
    })
  </script>

<style>
  .box {
    border: 3px solid #000000;
    border-radius: 10px;
    padding: 20px;
    margin: 20px;
    width: 200px;
  }
  h3 {
    margin: 10px 0 20px 0;
  }
  p {
    margin: 20px;
  }
</style>

<div id="app">
  <div class="box">
    <h3>小黑自动售货机</h3>
    <button @click="buyDrink(5)">可乐5元</button>
    <button @click="buyDrink(10)">咖啡10元</button>
    <button @click="buyDrink(8)">牛奶8元</button>
  </div>
      <p>银行卡余额：{{ money }}元</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      money: 100
    },
    methods: {
      buyDrink(price) {
        if (this.money >= price) {
          this.money -= price;
          console.log(`购买成功，花费${price}元`);
        } else {
          console.log('余额不足，无法购买');
        }
      }
    }
  });
</script>

<div id="app">
  <img v-bind:src="imgUrl" v-bind:title="msg" alt="">
  <img :src="imgUrl" :title="msg" alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      imgUrl: './imgs/10-02.png',
      msg: 'hello 波仔'
    }
  })
</script>

<div id="app">
  <button @click="previousImage" :disabled="currentIndex === 0">上一页</button>
  <div>
    <img :src="list[currentIndex]" alt="">
  </div>
  <button @click="nextImage" :disabled="currentIndex === list.length - 1">下一页</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      list: [
        './imgs/11-00.gif',
        './imgs/11-01.gif',
        './imgs/11-02.gif',
        './imgs/11-03.gif',
        './imgs/11-04.png',
        './imgs/11-05.png',
      ],
      currentIndex: 0
    },
    methods: {
      previousImage() {
        if (this.currentIndex > 0) {
          this.currentIndex--;
        }
      },
      nextImage() {
        if (this.currentIndex < this.list.length - 1) {
          this.currentIndex++;
        }
      }
    }
  });
</script>

<div v-for="(value, key, index) in object">{{ value }}</div>

<p v-for="item in 10">{{ item }}</p>

<div id="app">
  <h3>小黑的书架</h3>
  <ul>
    <li v-for="book in booksList" :key="book.id">
      <span>{{ book.name }}</span>
      <span>{{ book.author }}</span>
      <button @click="deleteBook(book.id)">删除</button>
    </li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      booksList: [
        { id: 1, name: '《红楼梦》', author: '曹雪芹' },
        { id: 2, name: '《西游记》', author: '吴承恩' },
        { id: 3, name: '《水浒传》', author: '施耐庵' },
        { id: 4, name: '《三国演义》', author: '罗贯中' }
      ]
    },
    methods: {
      deleteBook(id) {
        this.booksList = this.booksList.filter(book => book.id !== id)
      }
    }
  })
</script>

<ul>
  <li v-for="(item, index) in booksList" :key="item.id">
    <span>{{ item.name }}</span>
    <span>{{ item.author }}</span>
    <button @click="del(item.id)">删除</button>
  </li>
</ul>

<div id="app">
  账户：<input type="text" v-model="username"> <br><br>
  密码：<input type="password" v-model="password"> <br><br>
  <button @click="login">登录</button>
  <button @click="reset">重置</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      username: '',
      password: ''
    },
    methods: {
      login() {
        console.log('账户：', this.username);
        console.log('密码：', this.password);
      },
      reset() {
        this.username = '';
        this.password = '';
      }
    }
  })
</script>

<div id="app">
  <h3>小黑记事本</h3>
  <div class="form-group">
    <input type="text" v-model="content">
    <button @click="add">添加</button>
    <button @click="clear">清空</button>
  </div>
  <ul class="list-group">
    <li v-for="(item, index) in notes" class="list-group-item">
      <span>{{ item }}</span>
      <button @click="remove(index)">删除</button>
    </li>
  </ul>
  <div class="footer">总共有 {{ notes.length }} 条记录</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      content: '',
      notes: []
    },
    methods: {
      add() {
        if (this.content.trim()) {
          this.notes.push(this.content);
          this.content = '';
        }
      },
      remove(index) {
        this.notes.splice(index, 1);
      },
      clear() {
        this.notes = [];
      }
    }
  })
</script>

<div id="app">
  <h3>@keyup.enter  →  监听键盘回车事件</h3>
  <input v-model="username" type="text" @keyup.enter="handleEnter">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      username: ''
    },
    methods: {
      handleEnter() {
        console.log('回车事件触发');
        console.log('输入框的值：', this.username);
      }
    }
  })
</script>

<style>
  .father {
    width: 200px;
    height: 200px;
    background-color: pink;
    margin-top: 20px;
  }
  .son {
    width: 100px;
    height: 100px;
    background-color: skyblue;
  }
</style>

<div id="app">
  <h3>v-model修饰符 .trim .number</h3>
  姓名：<input v-model.trim="username" type="text"><br>
  年纪：<input v-model.number="age" type="text"><br>


  <h3>@事件名.stop     →  阻止冒泡</h3>
  <div @click="fatherFn" class="father">
    <div @click.stop="sonFn" class="son">儿子</div>
  </div>

  <h3>@事件名.prevent  →  阻止默认行为</h3>
  <a @click.prevent href="http://www.baidu.com">阻止默认行为</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      username: '',
      age: '',
    },
    methods: {
      fatherFn () {
        alert('老父亲被点击了')
      },
      sonFn (e) {
        alert('儿子被点击了')
      }
    }
  })
</script>

<div> :class = "对象/数组">这是一个div</div>

<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div>

<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div>

<style>
  .box {
    width: 200px;
    height: 200px;
    border: 3px solid #000;
    font-size: 30px;
    margin-top: 10px;
  }
  .pink {
    background-color: pink;
  }
  .big {
    width: 300px;
    height: 300px;
  }
</style>

<div id="app">
  <!-- 绑定对象 -->
  <div :class="{ 'box': true, 'pink': true }">黑马程序员</div>

  <!-- 绑定数组 -->
  <div :class="[ 'box', 'big' ]">黑马程序员</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {

    }
  })
</script>

 当我们点击哪个tab页签时，哪个tab页签就高亮

<style>
  * {
    margin: 0;
    padding: 0;
  }
  ul {
    display: flex;
    border-bottom: 2px solid #e01222;
    padding: 0 10px;
  }
  li {
    width: 100px;
    height: 50px;
    line-height: 50px;
    list-style: none;
    text-align: center;
  }
  li a {
    display: block;
    text-decoration: none;
    font-weight: bold;
    color: #333333;
  }
  li a.active {
    background-color: #e01222;
    color: #fff;
  }
</style>

<div id="app">
  <ul>
    <li v-for="(item, index) in list" :key="item.id" @click="changeTab(index)">
      <a :class="{ 'active': activeIndex === index }" href="#">{{ item.name }}</a>
    </li>
  </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      list: [
        { id: 1, name: '京东秒杀' },
        { id: 2, name: '每日特价' },
        { id: 3, name: '品类秒杀' }
      ],
      activeIndex: 0 // 默认高亮第一个页签
    },
    methods: {
      changeTab(index) {
        this.activeIndex = index; // 切换高亮的页签
      }
    }
  })
</script>

<div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>

<style>
  .box {
    width: 200px;
    height: 200px;
    background-color: rgb(187, 150, 156);
  }
</style>
<div id="app">
  <div class="box" :style="{ backgroundColor: boxColor }"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      boxColor: 'rgb(187, 150, 156)'
    }
  })
</script>

<style>
  .progress {
    height: 25px;
    width: 400px;
    border-radius: 15px;
    background-color: #272425;
    border: 3px solid #272425;
    box-sizing: border-box;
    margin-bottom: 30px;
  }
  .inner {
    height: 100%;
    border-radius: 10px;
    text-align: right;
    position: relative;
    background-color: #409eff;
    background-size: 20px 20px;
    box-sizing: border-box;
    transition: width 1s;
  }
  .inner span {
    position: absolute;
    right: -20px;
    bottom: -25px;
  }
</style>

<div id="app">
  <div class="progress">
    <div class="inner" :style="{ width: progress + '%' }">
      <span>{{ progress }}%</span>
    </div>
  </div>
  <button @click="setProgress(25)">设置25%</button>
  <button @click="setProgress(50)">设置50%</button>
  <button @click="setProgress(75)">设置75%</button>
  <button @click="setProgress(100)">设置100%</button>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      progress: 0
    },
    methods: {
      setProgress(value) {
        this.progress = value;
      }
    }
  })
</script>

输入框  input:text   ——> value
文本域  textarea	 ——> value
复选框  input:checkbox  ——> checked
单选框  input:radio   ——> checked
下拉菜单 select    ——> value
...

<style>
  textarea {
    display: block;
    width: 240px;
    height: 100px;
    margin: 10px 0;
  }
</style>

<div id="app">
  <h3>小黑学习网</h3>
  姓名：
  <input type="text" v-model="name"> 
  <br><br>
  是否单身：
  <input type="checkbox" v-model="single">
  <br><br>
  
  <!-- 
    前置理解：
      1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥
      2. value: 给单选框加上 value 属性，用于提交给后台的数据
    结合 Vue 使用 → v-model
  -->
  性别: 
  <input type="radio" name="gender" value="男" v-model="gender">男
  <input type="radio" name="gender" value="女" v-model="gender">女
  <br><br>
  
  <!-- 
    前置理解：
      1. option 需要设置 value 值，提交给后台
      2. select 的 value 值，关联了选中的 option 的 value 值
    结合 Vue 使用 → v-model
  -->
  所在城市:
  <select v-model="city">
    <option value="北京">北京</option>
    <option value="上海">上海</option>
    <option value="成都">成都</option>
    <option value="南京">南京</option>
  </select>
  <br><br>
  
  自我描述：
  <textarea v-model="description"></textarea> 
  <button @click="register">立即注册</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      name: '', // 保存姓名
      single: false, // 是否单身
      gender: '', // 保存性别
      city: '', // 保存所在城市
      description: '' // 保存自我描述
    },
    methods: {
      register() {
        console.log('姓名:', this.name);
        console.log('是否单身:', this.single);
        console.log('性别:', this.gender);
        console.log('所在城市:', this.city);
        console.log('自我描述:', this.description);
      }
    }
  })
</script>

<style>
  table {
    border: 1px solid #000;
    text-align: center;
    width: 240px;
  }
  th, td {
    border: 1px solid #000;
  }
  h3 {
    position: relative;
  }
</style>

<div id="app">
  <h3>小黑的礼物清单</h3>
  <table>
    <tr>
      <th>名字</th>
      <th>数量</th>
    </tr>
    <tr v-for="(item, index) in list" :key="item.id">
      <td>{{ item.name }}</td>
      <td>{{ item.num }}个</td>
    </tr>
  </table>

  <p>礼物总数：{{ total }}个</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      // 现有的数据
      list: [
        { id: 1, name: '篮球', num: 1 },
        { id: 2, name: '玩具', num: 2 },
        { id: 3, name: '铅笔', num: 5 },
      ]
    },
    computed: {
      total() {
        // 使用reduce方法计算总数
        return this.list.reduce((sum, item) => sum + item.num, 0);
      }
    }
  })
</script>

<style>
    table {
      border: 1px solid #000;
      text-align: center;
      width: 300px;
    }
    th,td {
      border: 1px solid #000;
    }
    h3 {
      position: relative;
    }
    span {
      position: absolute;
      left: 145px;
      top: -4px;
      width: 16px;
      height: 16px;
      color: white;
      font-size: 12px;
      text-align: center;
      border-radius: 50%;
      background-color: #e63f32;
    }
  </style>

<div id="app">
    <h3>小黑的礼物清单🛒<span>?</span></h3>
    <table>
      <tr>
        <th>名字</th>
        <th>数量</th>
      </tr>
      <tr v-for="(item, index) in list" :key="item.id">
        <td>{{ item.name }}</td>
        <td>{{ item.num }}个</td>
      </tr>
    </table>

    <p>礼物总数：{{ totalCount }} 个</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        // 现有的数据
        list: [
          { id: 1, name: '篮球', num: 3 },
          { id: 2, name: '玩具', num: 2 },
          { id: 3, name: '铅笔', num: 5 },
        ]
      },
      computed: {
        totalCount () {
          let total = this.list.reduce((sum, item) => sum + item.num, 0)
          return total
        }
      }
    })
  </script>

<div id="app">
    姓：<input type="text" v-model="firstName"> +
    名：<input type="text" v-model="lastName"> =
    <span>{{ fullName }}</span><br><br> 
    <button @click="changeName">改名卡</button>
  </div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: '刘',
      lastName: '备'
    },
    computed: {
      fullName: {
        get: function() {
          return this.firstName + this.lastName;
        },
        set: function(newName) {
          // 将新的fullName分解成firstName和lastName
          var names = newName.split(' ');
          this.firstName = names[0];
          this.lastName = names[1];
        }
      }
    },
    methods: {
      changeName: function() {
        // 模拟改名卡
        this.fullName = '关 羽';
      }
    }
  })
</script>

<div id="app">
  <!-- 页面标题 -->
  <h2>成绩管理系统</h2>
  <!-- 数据表格 -->
  <table>
    <!-- 表头 -->
    <thead>
      <tr>
        <th>姓名</th>
        <th>语文成绩</th>
        <th>数学成绩</th>
        <th>英语成绩</th>
        <th>操作</th>
      </tr>
    </thead>
    <!-- 学生列表 -->
    <tbody>
      <!-- 遍历students数组，将每个学生的信息渲染到表格中 -->
      <tr v-for="(student, index) in students" :key="index">
        <td>{{ student.name }}</td>
        <td>{{ student.chinese }}</td>
        <td>{{ student.math }}</td>
        <td>{{ student.english }}</td>
        <td>
          <a href="#" @click="deleteStudent(index)">删除</a>
        </td>
      </tr>
    </tbody>
    <!-- 统计数据 -->
    <tfoot>
      <!-- 总分 -->
      <tr>
        <th>总分</th>
        <th>{{ totalScore.chinese }}</th>
        <th>{{ totalScore.math }}</th>
        <th>{{ totalScore.english }}</th>
        <th></th>
      </tr>
      <!-- 平均分 -->
      <tr>
        <th>平均分</th>
        <th>{{ averageScore.chinese }}</th>
        <th>{{ averageScore.math }}</th>
        <th>{{ averageScore.english }}</th>
        <th></th>
      </tr>
    </tfoot>
  </table>

  <!-- 添加学生的表单 -->
  <!-- 使用v-model指令绑定表单元素到data中的newStudent对象上，实现双向数据绑定 -->
  <div>
    <label>姓名:</label>
    <input type="text" v-model.trim="newStudent.name" required>
    <label>语文成绩:</label>
    <input type="number" v-model.number="newStudent.chinese" required>
    <label>数学成绩:</label>
    <input type="number" v-model.number="newStudent.math" required>
    <label>英语成绩:</label>
    <input type="number" v-model.number="newStudent.english" required>
    <!-- 使用v-bind指令绑定添加按钮的disabled状态到isInvalid计算属性上，实现表单验证功能 -->
    <button @click="addStudent" :disabled="isInvalid">添加</button>
  </div>
</div>

<!-- 引入Vue.js库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
  el: '#app',
  data: {
    students: [
      { name: '张三', chinese: 80, math: 90, english: 85 },
      { name: '李四', chinese: 75, math: 85, english: 90 },
      { name: '王五', chinese: 85, math: 95, english: 80 }
    ],
    newStudent: {
      name: '',
      chinese: null,
      math: null,
      english: null
    }
  },
  computed: {
    // 计算属性：计算每个科目的总分
    totalScore: function() {
      return {
        chinese: this.getSubjectTotal('chinese'),
        math: this.getSubjectTotal('math'),
        english: this.getSubjectTotal('english')
      };
    },
    // 计算属性：计算每个科目的平均分
    averageScore: function() {
      return {
        chinese: this.getSubjectAverage('chinese'),
        math: this.getSubjectAverage('math'),
        english: this.getSubjectAverage('english')
      };
    },
    // 计算属性：判断表单是否填写完整
    isInvalid: function() {
      return (
        !this.newStudent.name ||
        this.newStudent.chinese === null ||
        this.newStudent.math === null ||
        this.newStudent.english === null
      );
    }
  },
  methods: {
    // 删除学生信息
    deleteStudent: function(index) {
      this.students.splice(index, 1);
    },
    // 添加新学生
    addStudent: function() {
      this.students.push({ ...this.newStudent });
      // 清空表单数据
      this.newStudent = {
        name: '',
        chinese: null,
        math: null,
        english: null
      };
    },
    // 辅助方法：计算某个科目的总分
    getSubjectTotal: function(subject) {
      return this.students.reduce((total, student) => {
        return total + student[subject];
      }, 0);
    },
    // 辅助方法：计算某个科目的平均分
    getSubjectAverage: function(subject) {
      const total = this.getSubjectTotal(subject);
      return total / this.students.length || 0;
    }
  }
});
</script>

**监视数据变化**，执行一些业务逻辑或异步操作

data: { 
  words: '苹果',
  obj: {
    words: '苹果'
  }
},

watch: {
  // 该方法会在数据变化时，触发执行
  数据属性名 (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  },
  '对象.属性名' (newValue, oldValue) {
    一些业务逻辑 或 异步操作。 
  }
}

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 18px;
  }
  #app {
    padding: 10px 20px;
  }
  .query {
    margin: 10px 0;
  }
  .box {
    display: flex;
  }
  textarea {
    width: 300px;
    height: 160px;
    font-size: 18px;
    border: 1px solid #dedede;
    outline: none;
    resize: none;
    padding: 10px;
  }
  textarea:hover {
    border: 1px solid #1589f5;
  }
  .transbox {
    width: 300px;
    height: 160px;
    background-color: #f0f0f0;
    padding: 10px;
    border: none;
  }
  .tip-box {
    width: 300px;
    height: 25px;
    line-height: 25px;
    display: flex;
  }
  .tip-box span {
    flex: 1;
    text-align: center;
  }
  .query span {
    font-size: 18px;
  }

  .input-wrap {
    position: relative;
  }
  .input-wrap span {
    position: absolute;
    right: 15px;
    bottom: 15px;
    font-size: 12px;
  }
  .input-wrap i {
    font-size: 20px;
    font-style: normal;
  }
</style>

<div id="app">
  <!-- 条件选择框 -->
  <div class="query">
    <span>翻译成的语言：</span>
    <select v-model="selectedLang">
      <option value="italy">意大利</option>
      <option value="english">英语</option>
      <option value="german">德语</option>
    </select>
  </div>

  <!-- 翻译框 -->
  <div class="box">
    <div class="input-wrap">
      <textarea v-model="words"></textarea>
      <span><i @click="translateText">⌨️</i>文档翻译</span>
    </div>
    <div class="output-wrap">
      <div class="transbox">{{ translatedText }}</div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      words: '', // 输入的待翻译文本
      selectedLang: 'italy', // 选择的目标语言
      translatedText: '' // 翻译后的文本
    },
    methods: {
      translateText() {
        // 构建请求参数对象
        const params = {
          words: this.words.trim(),
          lang: this.selectedLang
        };

        // 发送GET请求
        axios
          .get('https://applet-base-api-t.itheima.net/api/translate', { params })
          .then(response => {
            // 请求成功，更新翻译后的文本
            this.translatedText = response.data.data;
          })
          .catch(error => {
            // 请求失败，输出错误信息
            console.error(error);
          });
      }
    }
  });
</script>

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 18px;
  }
  #app {
    padding: 10px 20px;
  }
  .query {
    margin: 10px 0;
  }
  .box {
    display: flex;
  }
  textarea {
    width: 300px;
    height: 160px;
    font-size: 18px;
    border: 1px solid #dedede;
    outline: none;
    resize: none;
    padding: 10px;
  }
  textarea:hover {
    border: 1px solid #1589f5;
  }
  .transbox {
    width: 300px;
    height: 160px;
    background-color: #f0f0f0;
    padding: 10px;
    border: none;
  }
  .tip-box {
    width: 300px;
    height: 25px;
    line-height: 25px;
    display: flex;
  }
  .tip-box span {
    flex: 1;
    text-align: center;
  }
  .query span {
    font-size: 18px;
  }

  .input-wrap {
    position: relative;
  }
  .input-wrap span {
    position: absolute;
    right: 15px;
    bottom: 15px;
    font-size: 12px;
  }
  .input-wrap i {
    font-size: 20px;
    font-style: normal;
  }
</style>

<div id="app">
  <!-- 条件选择框 -->
  <div class="query">
    <span>翻译成的语言：</span>
    <select v-model="selectedLang">
      <option value="italy">意大利</option>
      <option value="english">英语</option>
      <option value="german">德语</option>
    </select>
  </div>

  <!-- 翻译框 -->
  <div class="box">
    <div class="input-wrap">
      <textarea v-model="words"></textarea>
      <span><i @click="translateText">⌨️</i>文档翻译</span>
    </div>
    <div class="output-wrap">
      <div class="transbox">{{ translatedText }}</div>
    </div>
  </div>
</div>

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

<script>
    // 接口地址：https://applet-base-api-t.itheima.net/api/translate
    // 请求方式：get
    // 请求参数：
    // （1）words：需要被翻译的文本（必传）
    // （2）lang： 需要被翻译成的语言（可选）默认值-意大利
    // -----------------------------------------------

    const app = new Vue({
      el: '#app',
      data: {
         //words: ''
         obj: {
          words: ''
        },
        result: '', // 翻译结果
        // timer: null // 延时器id
      },
      // 具体讲解：(1) watch语法 (2) 具体业务实现
      watch: {
        // 该方法会在数据变化时调用执行
        // newValue新值, oldValue老值（一般不用）
        // words (newValue) {
        //   console.log('变化了', newValue)
        // }

        'obj.words' (newValue) {
          // console.log('变化了', newValue)
          // 防抖: 延迟执行 → 干啥事先等一等，延迟一会，一段时间内没有再次触发，才执行
          clearTimeout(this.timer)
          this.timer = setTimeout(async () => {
            const res = await axios({
              url: 'https://applet-base-api-t.itheima.net/api/translate',
              params: {
                words: newValue
              }
            })
            this.result = res.data.data
            console.log(res.data.data)
          }, 300)
        }
      }
    })
</script>

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-size: 14px;
    font-family: '微软雅黑';
  }

  ul {
    list-style: none;
  }

  #app {
    width: 970px;
    margin: 30px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 3px;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  }

  h1 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .clearfix::after {
    content: '';
    display: table;
    clear: both;
  }

  .cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    margin-bottom: 20px;
  }

  .cart-header label {
    cursor: pointer;
    margin-right: 10px;
  }

  .cart-header h2 {
    font-size: 20px;
    font-weight: bold;
  }

  .cart-header .btn-del-all {
    cursor: pointer;
    color: #f00;
    text-decoration: underline;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }

  th, td {
    text-align: center;
    vertical-align: middle;
  }

  thead {
    background-color: #f5f5f5;
  }

  tbody tr:nth-child(odd) {
    background-color: #e9e9e9;
  }

  .cart-item {
    height: 130px;
    display: flex;
    padding: 10px 10px 10px 20px;
  }

  .cart-item td {
    width: 15%;
  }

  .cart-item td:first-child {
    width: 5%;
  }

  .cart-item input[type="checkbox"] {
    margin-right: 10px;
  }

  .cart-item .goods-pic {
    width: 60px;
    height: 60px;
    border-radius: 2px;
    overflow: hidden;
    margin-right: 10px;
  }

  .cart-item .goods-pic img {
    width: 100%;
    height: auto;
  }

  .cart-item .goods-name {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .cart-item .goods-price {
    font-size: 18px;
  }

  .cart-item .num-input {
    width: 80px;
    height: 28px;
    border: 1px solid #ddd;
    text-align: center;
    outline: none;
    font-size: 14px;
  }

  .cart-item .btn-del {
    cursor: pointer;
    color: #f00;
    text-decoration: underline;
    margin-left: 10px;
  }

  .cart-total {
    margin-top: 20px;
    height: 40px;
    line-height: 40px;
    text-align: right;
    font-size: 16px;
    font-weight: bold;
  }

  .cart-total span:first-child {
    margin-right: 10px;
  }

  .cart-btn {
    margin-top: 20px;
    text-align: right;
  }

  .cart-btn button {
    width: 120px;
    height: 40px;
    border-radius: 2px;
    outline: none;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 20px;
  }

  .cart-btn button:first-child {
    background-color: #f00;
    color: #fff;
    border: 1px solid #f00;
  }

  .cart-btn button:last-child {
    background-color: #1589f5;
    color: #fff;
    border: 1px solid #1589f5;
  }
</style>

<div id="app">
  <div class="cart-header clearfix">
    <label for="select-all">
      <input type="checkbox" id="select-all" v-model="allChecked">
      全选
    </label>
    <h2>购物车</h2>
    <span class="btn-del-all" v-on:click="deleteAllCheckeds">删除选中商品</span>
  </div>
  <table>
    <thead>
      <tr>
        <th></th>
        <th>商品信息</th>
        <th>单价(元)</th>
        <th>数量</th>
        <th>小计(元)</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <template v-for="(item, index) in cartData">
        <tr class="cart-item clearfix">
          <td><input type="checkbox" v-model="item.checked"></td>
          <td class="clearfix">
            <div class="goods-pic"><img :src="item.imgUrl" alt=""></div>
            <div class="goods-name">{{ item.name }}</div>
          </td>
          <td>{{ item.price }}</td>
          <td>
            <button class="minus" v-on:click="changeCount(index, -1)">-</button>
            <input type="number" class="num-input" v-model="item.count">
            <button class="plus" v-on:click="changeCount(index, 1)">+</button>
          </td>
          <td>{{ item.count * item.price }}</td>
          <td><span class="btn-del" v-on:click="deleteItem(index)">删除</span></td>
        </tr>
      </template>
    </tbody>
  </table>
  <div class="cart-total">
    <span>已选择 {{ checkedCount }} 件商品</span>
    <span>总价：{{ totalPrice }}元</span>
  </div>
  <div class="cart-btn">
    <button v-on:click="deleteAllItems">清空购物车</button>
    <button v-on:click="submitOrder" :disabled="checkedCount === 0">结算</button>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      // 购物车数据
      cartData: [],
      // 全选状态
      allChecked: false
    },
    mounted() {
      // 初始化购物车数据
      this.cartData = JSON.parse(localStorage.getItem('cartData')) || [
        { 
          id: 1, 
          name: '商品1', 
          price: 100, 
          count: 1, 
          imgUrl: 'https://picsum.photos/id/100/120/120', 
          checked: false 
        },
        { 
         id: 2, 
         name: '商品2', 
         price: 200, 
         count: 1, 
         imgUrl: 'https://picsum.photos/id/200/120/120', 
         checked: false 
        },
        { 
         id: 3, 
         name: '商品3', 
         price: 300,
         count: 1, 
         imgUrl: 'https://picsum.photos/id/300/120/120', 
         checked: false 
        }
      ];
    },
    computed: {
      // 计算已选中的商品数量
      checkedCount() {
        return this.cartData.filter(item => item.checked).length;
      },
      // 计算总价
      totalPrice() {
        return this.cartData.reduce((total, item) => {
          if (item.checked) {
            total += item.price * item.count;
          }
          return total;
        }, 0);
      }
    },
    methods: {
      // 删除某个商品
      deleteItem(index) {
        this.cartData.splice(index, 1);
      },
      // 修改商品数量
      changeCount(index, step) {
        const item = this.cartData[index];
        item.count += step;
        if (item.count <= 0) {
          item.count = 1;
        }
      },
      // 清空购物车
      deleteAllItems() {
        this.cartData = [];
      },
      // 删除选中的商品
      deleteAllCheckeds() {
        _.remove(this.cartData, item => item.checked);
      },
      // 提交订单
      submitOrder() {
        alert('结算成功');
      }
    },
    watch: {
      // 监听cartData变化，并将其保存到本地存储
      cartData: {
        handler: function(newValue) {
          localStorage.setItem('cartData', JSON.stringify(newValue));
        },
        deep: true
      }
    }
  });
</script>

<div id="app">
  <h3>{{ title }}</h3>
  <div>
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      count: 100,
      title: '计数器'
    },
    // 1. 创建阶段（准备数据）
    beforeCreate() {
      console.log('beforeCreate');
    },

    // 2. 挂载阶段（渲染模板）
    mounted() {
      console.log('mounted');
    },

    // 3. 更新阶段(修改数据 → 更新视图)
    beforeUpdate() {
      console.log('beforeUpdate');
    },
    updated() {
      console.log('updated');
    },

    // 4. 卸载阶段
    beforeDestroy() {
      console.log('beforeDestroy');
    }
  })
</script>

 <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .news {
      display: flex;
      height: 120px;
      width: 600px;
      margin: 0 auto;
      padding: 20px 0;
      cursor: pointer;
    }
    .news .left {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-right: 10px;
    }
    .news .left .title {
      font-size: 20px;
    }
    .news .left .info {
      color: #999999;
    }
    .news .left .info span {
      margin-right: 20px;
    }
    .news .right {
      width: 160px;
      height: 120px;
    }
    .news .right img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  </style>

 <div id="app">
    <ul>
      <li class="news">
        <div class="left">
          <div class="title">5G商用在即，三大运营商营收持续下降</div>
          <div class="info">
            <span>新京报经济新闻</span>
            <span>2222-10-28 11:50:28</span>
          </div>
        </div>
        <div class="right">
          <img src="http://ajax-api.itheima.net/public/images/0.webp" alt="">
        </div>
      </li>

      <li class="news">
        <div class="left">
          <div class="title">5G商用在即，三大运营商营收持续下降</div>
          <div class="info">
            <span>新京报经济新闻</span>
            <span>2222-10-28 11:50:28</span>
          </div>
        </div>
        <div class="right">
          <img src="http://ajax-api.itheima.net/public/images/0.webp" alt="">
        </div>
      </li>

      <li class="news">
        <div class="left">
          <div class="title">5G商用在即，三大运营商营收持续下降</div>
          <div class="info">
            <span>新京报经济新闻</span>
            <span>2222-10-28 11:50:28</span>
          </div>
        </div>
        <div class="right">
          <img src="http://ajax-api.itheima.net/public/images/0.webp" alt="">
        </div>
      </li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    // 接口地址：http://hmajax.itheima.net/api/news
    // 请求方式：get
    const app = new Vue({
      el: '#app',
      data: {
        list: []
      },
      created() {
        axios.get('http://hmajax.itheima.net/api/news')
          .then(response => {
            this.list = response.data;
          })
          .catch(error => {
            console.log(error);
          });
      }
    });
  </script>

<script>
  const app = new Vue({
  el: '#app',
  data: {
    list: []
  },
  mounted() {
    axios.get('http://hmajax.itheima.net/api/news')
      .then(response => {
        this.list = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
});
</script>

<style>
  html,
  body {
    height: 100%;
  }
  .search-container {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
  }
  .search-container .search-box {
    display: flex;
  }
  .search-container img {
    margin-bottom: 30px;
  }
  .search-container .search-box input {
    width: 512px;
    height: 16px;
    padding: 12px 16px;
    font-size: 16px;
    margin: 0;
    vertical-align: top;
    outline: 0;
    box-shadow: none;
    border-radius: 10px 0 0 10px;
    border: 2px solid #c4c7ce;
    background: #fff;
    color: #222;
    overflow: hidden;
    box-sizing: content-box;
    -webkit-tap-highlight-color: transparent;
  }
  .search-container .search-box button {
    cursor: pointer;
    width: 112px;
    height: 44px;
    line-height: 41px;
    background-color: #ad2a27;
    border-radius: 0 10px 10px 0;
    font-size: 17px;
    box-shadow: none;
    font-weight: 400;
    border: 0;
    outline: 0;
    letter-spacing: normal;
    color: white;
  }
  body {
    background: no-repeat center /cover;
    background-color: #edf0f5;
  }
</style>

<div class="container" id="app">
  <div class="search-container">
    <img src="https://www.itheima.com/images/logo.png" alt="">
    <div class="search-box">
      <input type="text" v-model="words" ref="inputElement"><!-- 在 input 元素上添加 ref 属性 -->
      <button @click="search">搜索一下</button><!-- 点击按钮时触发 search 函数 -->
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      words: ''
    },
    mounted() {
      this.$refs.inputElement.focus(); // 在 mounted 阶段获取焦点
    },
    methods: {
      search() {
        // 执行搜索操作
        console.log('搜索关键词：', this.words);
      }
    }
  })
</script>

 <!-- CSS only -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
/>
<style>
  .red {
    color: red!important;
  }
  .search {
    width: 300px;
    margin: 20px 0;
  }
  .my-form {
    display: flex;
    margin: 20px 0;
  }
  .my-form input {
    flex: 1;
    margin-right: 20px;
  }
  .table > :not(:first-child) {
    border-top: none;
  }
  .contain {
    display: flex;
    padding: 10px;
  }
  .list-box {
    flex: 1;
    padding: 0 30px;
  }
  .list-box  a {
    text-decoration: none;
  }
  .echarts-box {
    width: 600px;
    height: 400px;
    padding: 30px;
    margin: 0 auto;
    border: 1px solid #ccc;
  }
  tfoot {
    font-weight: bold;
  }
  @media screen and (max-width: 1000px) {
    .contain {
      flex-wrap: wrap;
    }
    .list-box {
      width: 100%;
    }
    .echarts-box {
      margin-top: 30px;
    }
  }
</style>
<div id="app">
  <div class="contain">
    <!-- 左侧列表 -->
    <div class="list-box">

      <!-- 添加资产 -->
      <form class="my-form">
        <input type="text" class="form-control" placeholder="消费名称" v-model="newExpense.name" />
        <input type="text" class="form-control" placeholder="消费价格" v-model.number="newExpense.price" />
        <button type="button" class="btn btn-primary" @click="addExpense">添加账单</button>
      </form>

      <table class="table table-hover">
        <thead>
          <tr>
            <th>编号</th>
            <th>消费名称</th>
            <th>消费价格</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(expense, index) in expenses" :key="expense.id">
            <td>{{ index + 1 }}</td>
            <td>{{ expense.name }}</td>
            <td :class="{ 'red': expense.price > 100 }">{{ expense.price }}</td>
            <td><a href="javascript:;" @click="deleteExpense(expense.id)">删除</a></td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="4">消费总计： {{ totalExpense }}</td>
          </tr>
        </tfoot>
      </table>
    </div>
    
    <!-- 右侧图表 -->
    <div class="echarts-box" id="main"></div>
  </div>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      expenses: [], // 存储消费数据
      newExpense: { name: '', price: 0 }, // 新增消费表单数据
      chart: null, // echarts实例
    },
    computed: {
      totalExpense() {
        // 计算消费总额
        return this.expenses.reduce((total, expense) => total + expense.price, 0);
      }
    },
    methods: {
      getExpenses() {
        // 发送请求获取消费数据
        axios.get('/api/expenses')
          .then(response => {
            this.expenses = response.data;
            this.renderChart();
          })
          .catch(error => {
            console.log(error);
          });
      },
      addExpense() {
        // 添加消费
        if (this.newExpense.name !== '' && this.newExpense.price > 0) {
          axios.post('/api/expenses', this.newExpense)
            .then(response => {
              this.newExpense.name = '';
              this.newExpense.price = 0;
              this.getExpenses(); // 重新获取消费数据并渲染
            })
            .catch(error => {
              console.log(error);
            });
        }
      },
      deleteExpense(id) {
        // 删除消费
        axios.delete(`/api/expenses/${id}`)
          .then(response => {
            this.getExpenses(); // 重新获取消费数据并渲染
          })
          .catch(error => {
            console.log(error);
          });
      },
      renderChart() {
        // 渲染图表
        if (this.chart === null) {
          // 初始化echarts实例
          this.chart = echarts.init(document.getElementById('main'));
        }
        
        const option = {
          // 配置图表选项
          series: [
            {
              name: '消费统计',
              type: 'pie',
              data: this.expenses.map(expense => ({
                name: expense.name,
                value: expense.price
              }))
            }
          ]
        };

        // 更新图表
        this.chart.setOption(option);
      }
    },
    mounted() {
      // 页面加载时获取消费数据并渲染
      this.getExpenses();
    }
  });
</script>

 组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。

 好处：便于维护，利于复用 → 提升开发效率。

 组件分类：普通组件、根组件。

  比如：下面这个页面，可以把所有的代码都写在一个页面中，但是这样显得代码比较混乱，难易维护。咱们可以按模块进行组件划分

// 导入需要注册的组件
import 组件对象 from '.vue文件路径'
import HmHeader from './components/HmHeader'

export default { // 局部注册
  components: {
   '组件名': 组件对象,
    HmHeader:HmHeaer,
    HmHeader
  }
}

<template>
  <div class="hm-header">
    我是hm-header
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-header {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  background-color: #8064a2;
  color: white;
}
</style>

<template>
  <div class="hm-main">
    我是hm-main
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-main {
  height: 400px;
  line-height: 400px;
  text-align: center;
  font-size: 30px;
  background-color: #f79646;
  color: white;
  margin: 20px 0;
}
</style>

<template>
  <div class="hm-footer">
    我是hm-footer
  </div>
</template>

<script>
export default {

}
</script>

<style>
.hm-footer {
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 30px;
  background-color: #4f81bd;
  color: white;
}
</style>

<template>
  <div class="app">
    <header>
      <hm-header/>
    </header>
    <main>
      <hm-main/>
    </main>
    <footer>
      <hm-footer/>
    </footer>
  </div>
</template>

<script>
  import HmHeader from './HmHeader.vue';
  import HmMain from './HmMain.vue';
  import HmFooter from './HmFooter.vue';

  export default {
    name: 'App',
    components: { HmHeader, HmMain, HmFooter }
  }
</script>

<style>
  .app {
    display: flex;
    flex-direction: column;
    height: 100vh;
  }

  header {
    flex-shrink: 0;
  }

  main {
    flex-grow: 1;
  }

  footer {
    flex-shrink: 0;
  }
</style>

// 导入需要全局注册的组件
import HmButton from './components/HmButton'
Vue.component('HmButton', HmButton)

<template>
  <button class="hm-button">通用按钮</button>
</template>

<script>
export default {

}
</script>

<style>
.hm-button {
  height: 50px;
  line-height: 50px;
  padding: 0 20px;
  background-color: #3bae56;
  border-radius: 5px;
  color: white;
  border: none;
  vertical-align: middle;
  cursor: pointer;
}
</style>

<template>
  <div class="base-one">
    BaseOne
  </div>
</template>

<script>
export default {

}
</script>
<style scoped>
</style>

<template>
  <div class="base-one">
    BaseTwo
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
</style>

<template>
  <div id="app">
    <BaseOne></BaseOne>
    <BaseTwo></BaseTwo>
  </div>
</template>

<script>
import BaseOne from './components/BaseOne'
import BaseTwo from './components/BaseTwo'
export default {
  name: 'App',
  components: {
    BaseOne,
    BaseTwo
  }
}
</script>

<template>
  <div class="base-count">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      count: 100,
    }
  },
}
</script>

<style>
.base-count {
  margin: 20px;
}
</style>

<template>
  <div class="app">
    <BaseCount></BaseCount>
  </div>
</template>

<script>
import BaseCount from './components/BaseCount'
export default {
  components: {
    BaseCount,
  },
}
</script>

<style>
</style>

<template>
  <div class="app">
    <BaseProgress :w="width"></BaseProgress>
  </div>
</template>

<script>
import BaseProgress from './components/BaseProgress.vue'
export default {
  data() {
    return {
      width: 30,
    }
  },
  components: {
    BaseProgress,
  },
}
</script>

<style>
</style>

<template>
  <div class="base-progress">
    <div class="inner" :style="{ width: w + '%' }">
      <span>{{ w }}%</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    w: {
      type: Number,
      required: true
    }
  }
}
</script>

<style scoped>
.base-progress {
  height: 26px;
  width: 400px;
  border-radius: 15px;
  background-color: #272425;
  border: 3px solid #272425;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.inner {
  position: relative;
  background: #379bff;
  border-radius: 15px;
  height: 25px;
  box-sizing: border-box;
  left: -3px;
  top: -2px;
}
.inner span {
  position: absolute;
  right: 0;
  top: 26px;
}
</style>

props: {
  校验的属性名: {
    type: 类型,  // Number String Boolean ...
    required: true, // 是否必填
    default: 默认值, // 默认值
    validator (value) {
      // 自定义校验逻辑
      return 是否通过校验
    }
  }
},

<script>
export default {
  // 完整写法（类型、默认值、非空、自定义校验）
  props: {
    w: {
      type: Number,
      //required: true,
      default: 0,
      validator(val) {
        // console.log(val)
        if (val >= 100 || val <= 0) {
          console.error('传入的范围必须是0-100之间')
          return false
        } else {
          return true
        }
      },
    },
  },
}
</script>

<template>
  <div class="base-count">
    <button @click="decrement">-</button>
    <span>{{ count }}</span>
    <button @click="increment">+</button>
  </div>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      required: true
    }
  },
  methods: {
    decrement() {
      // 在子组件内部通过 $emit 触发一个自定义事件，通知父组件减少 count
      this.$emit('decrement')
    },
    increment() {
      // 在子组件内部通过 $emit 触发一个自定义事件，通知父组件增加 count
      this.$emit('increment')
    }
  }
}
</script>

<style>
.base-count {
  margin: 20px;
}
</style>

<template>
  <div class="app">
    <BaseCount :count="count" @decrement="decrementCount" @increment="incrementCount"></BaseCount>
  </div>
</template>

<script>
  import BaseCount from './components/BaseCount.vue'
  export default {
    data() {
      return {
        count: 100,
      }
    },
    methods: {
      decrementCount() {
        this.count--
      },
      incrementCount() {
        this.count++
      }
    },
    components: {
      BaseCount,
    },
  }
</script>

<style>
</style>

<template>
  <div class="app">
    <todo-header @add-todo="addTodoItem"></todo-header>
    <todo-main :todos="todos" @delete-todo="deleteTodoItem"></todo-main>
    <todo-footer :todos="todos" @clear-todos="clearAll"></todo-footer>
  </div>
</template>

<script>
import TodoHeader from './components/TodoHeader.vue';
import TodoMain from './components/TodoMain.vue';
import TodoFooter from './components/TodoFooter.vue';

export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data() {
    return {
      todos: JSON.parse(localStorage.getItem('todos') || '[]'),
    };
  },
  methods: {
    addTodoItem(newTodoItem) {
      this.todos.unshift({
        id: Date.now(),
        content: newTodoItem,
        completed: false,
      });
    },

    deleteTodoItem(todoId) {
      this.todos = this.todos.filter((item) => item.id !== todoId);
    },

    clearAll() {
      if (this.todos.length === 0) return;
      this.todos = [];
    },
  },
  watch: {
    todos: {
      handler(newTodos) {
        localStorage.setItem('todos', JSON.stringify(newTodos));
      },
      deep: true,
    },
  },
};
</script>

<style scoped>
/* 样式省略 */
</style>

<template>
  <div class="todo-header">
    <input type="text" class="todo-input" placeholder="请输入任务" v-model="newTodoItem" @keyup.enter="addTodo"/>
    <button class="add-btn" @click="addTodo">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodoItem: '',
    }
  },
  methods: {
    addTodo() {
      if (!this.newTodoItem.trim()) return;
      this.$emit('add-todo', this.newTodoItem);
      this.newTodoItem = '';
    }
  }
}
</script>

<style scoped>
/* 样式省略 */
</style>

<template>
  <div class="todo-main">
    <ul class="todo-list">
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" class="todo-checkbox" v-model="todo.completed">
        <label class="todo-label" :class="{ 'completed': todo.completed }">{{ todo.content }}</label>
        <span class="delete-btn" @click="deleteTodoItem(todo.id)">删除</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    todos: {
      type: Array,
      required: true,
    }
  },
  methods: {
    deleteTodoItem(todoId) {
      this.$emit('delete-todo', todoId);
    }
  }
}
</script>

<style scoped>
/* 样式省略 */
</style>

<template>
  <div class="todo-footer">
    <span class="total-count">总任务数：{{ todos.length }}</span>
    <button class="clear-btn" @click="clearAll">清空</button>
  </div>
</template>

<script>
export default {
  props: {
    todos: {
      type: Array,
      required: true,
    },
  },
  methods: {
    clearAll() {
      this.$emit('clear-todos');
    }
  },
}
</script>

<style scoped>
/* 样式省略 */
</style>

import Vue from 'vue'
const Bus = new Vue()
export default Bus

created () {
  Bus.$on('sendMsg', (msg) => {
    this.msg = msg
  })
}

Bus.$emit('sendMsg', '这是一个消息')

import Vue from 'vue'
const Bus  =  new Vue()
export default Bus

<template>
  <div class="base-a">
    我是A组件（接收方）
    <p>{{ msg }}</p>  
  </div>
</template>

<script>
import Bus from '../utils/EventBus'

export default {
  data() {
    return {
      msg: '',
    }
  },
  created() {
    Bus.$on('message', (msg) => this.receiveMessage(msg))
  },
  methods: {
    receiveMessage(msg) {
      this.msg = msg
    },
  },
}
</script>

<style scoped>
.base-a {
  width: 200px;
  height: 200px;
  border: 3px solid #000;
  border-radius: 3px;
  margin: 10px;
}
</style>

<template>
  <div class="base-b">
    <div>我是B组件（发布方）</div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
import Bus from '../utils/EventBus'

export default {
  methods: {
    sendMessage() {
      Bus.$emit('message', 'Hello, BaseA!')   // 发送消息
    },
  },
}
</script>

<style scoped>
.base-b {
  width: 200px;
  height: 200px;
  border: 3px solid #000;
  border-radius: 3px;
  margin: 10px;
}
</style>

<template>
  <div class="app">
    <BaseA></BaseA>
    <BaseB></BaseB> 
  </div>
</template>

<script>
import BaseA from './components/BaseA.vue'
import BaseB from './components/BaseB.vue' 
export default {
  components:{
    BaseA,
    BaseB
  }
}
</script>

<style>

</style>

export default {
  provide () {
    return {
       // 普通类型【非响应式】
       color: this.color, 
       // 复杂类型【响应式】
       userInfo: this.userInfo, 
    }
  }
}

export default {
  inject: ['color','userInfo'],
  created () {
    console.log(this.color, this.userInfo)
  }
}

<template>
  <div id="app" >
    <input v-model="msg" type="text">

    <input :value="msg" @input="msg = $event.target.value" type="text">
  </div>
</template>

<template>
  <div class="app">
    <input type="text" v-model="msg1" />
    <br />
    <input type="text" v-model="msg2" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg1: '',
      msg2: '',
    }
  },
}
</script>

<style>
</style>

<template>
  <div class="app">
    <BaseSelect v-model="selectId"></BaseSelect>
    <p>当前选择的城市为：{{ selectedCity }}</p>
  </div>
</template>

<script>
import BaseSelect from './components/BaseSelect.vue';

export default {
  data() {
    return {
      selectId: '102',
      cityOptions: [
        { value: '101', label: '北京' },
        { value: '102', label: '上海' },
        { value: '103', label: '武汉' },
        { value: '104', label: '广州' },
        { value: '105', label: '深圳' },
      ],
    };
  },
  computed: {
    selectedCity() {
      const option = this.cityOptions.find(
        (item) => item.value === this.selectId
      );
      return option ? option.label : '';
    },
  },
  components: {
    BaseSelect,
  },
};
</script>

<style>
</style>

<template>
  <div>
    <select v-model="selected">
      <option
        :value="option.value"
        v-for="(option, index) in options"
        :key="index"
      >
        {{ option.label }}
      </option>
    </select>
  </div>
</template>

<script>
export default {
  props: {
    value: String,
    options: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    selected: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
};
</script>

<style>
</style>

<template>
  <input type="text" :value="value" @input="$emit('input', $event.target.value)" />
</template>

<script>
export default {
  props: {
    value: String // 通过props接收父组件传递的value值
  }
}
</script>

<template>
  <div>
    <ChildComponent v-model="data" />
    <p>当前数值：{{ data }}</p>
  </div>
</template>

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

  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        data: '' // 初始化数据
      }
    }
  }
</script>

//.sync写法
<BaseDialog :visible.sync="isShow" />
--------------------------------------
//完整写法
<BaseDialog 
  :visible="isShow"
  @update:visible="isShow = $event"
/>

props: {
  visible: Boolean
},

this.$emit('update:visible', false)

<template>
  <div class="app">
    <button @click="openDialog">退出按钮</button>
    <BaseDialog :isShow.sync="isShow"></BaseDialog>
  </div>
</template>

<script>
import BaseDialog from './components/BaseDialog.vue'
export default {
  data() {
    return {
      isShow: false,
    }
  },
  components: {
    BaseDialog,
  },
  methods: {
    openDialog() {
      this.isShow = true;
    }
  }
}
</script>

<style>
</style>

<template>
  <div class="base-dialog-wrap" v-show="visible">
    <div class="base-dialog">
      <div class="title">
        <h3>温馨提示：</h3>
        <button class="close" @click="closeDialog">x</button>
      </div>
      <div class="content">
        <p>你确认要退出本系统么？</p>
      </div>
      <div class="footer">
        <button @click="confirm">确认</button>
        <button @click="closeDialog">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    visible: Boolean,
  },
  methods: {
    closeDialog() {
      this.$emit('update:visible', false);
    },
    confirm() {
      // 执行确认操作
      // ...
      this.closeDialog();
    }
  }
}
</script>

<style scoped>
.base-dialog-wrap {
  width: 300px;
  height: 200px;
  box-shadow: 2px 2px 2px 2px #ccc;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 10px;
}
.base-dialog .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #000;
}
.base-dialog .content {
  margin-top: 38px;
}
.base-dialog .title .close {
  width: 20px;
  height: 20px;
  cursor: pointer;
  line-height: 10px;
}
.footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 26px;
}
.footer button {
  width: 80px;
  height: 40px;
}
.footer button:nth-child(1) {
  margin-right: 10px;
  cursor: pointer;
}
</style>

<div ref="chartRef">我是渲染图表的容器</div>

mounted () {
  console.log(this.$refs.chartRef)
}

<template>
  <div class="app">
    <button @click="toggleChart">切换图表显示</button>
    <BaseChart ref="chartRef"></BaseChart>
  </div>
</template>

<script>
import BaseChart from './components/BaseChart.vue'
export default {
  components: {
    BaseChart
  },
  methods: {
    toggleChart() {
      this.$refs.chartRef.toggleChart();
    }
  }
}
</script>

<style>
</style>

<template>
  <div class="base-chart-box" ref="baseChartBox"></div>
</template>

<script>
// yarn add echarts 或者 npm i echarts
import * as echarts from 'echarts'

export default {
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.baseChartBox)
      // 绘制图表
      myChart.setOption({
        title: {
          text: 'ECharts 入门示例',
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      })
    },
    toggleChart() {
      var myChart = echarts.getInstanceByDom(this.$refs.baseChartBox);
      myChart.setOption({
        series: [
          {
            data: [Math.random() * 10, Math.random() * 10, Math.random() * 10, Math.random() * 10, Math.random() * 10, Math.random() * 10]
          }
        ]
      });
    }
  }
}
</script>

<style scoped>
.base-chart-box {
  width: 400px;
  height: 300px;
  border: 3px solid #000;
  border-radius: 6px;
}
</style>

<template>
  <div class="app">
    <div v-if="isShowEdit">
      <input type="text" v-model="editValue" ref="inp" />
      <button>确认</button>
    </div>
    <div v-else>
      <span>{{ title }}</span>
      <button @click="editFn">编辑</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '大标题',
      isShowEdit: false,
      editValue: '',
    }
  },
  methods: {
    editFn() {
        // 显示输入框
        this.isShowEdit = true  
        // 获取焦点
        this.$refs.inp.focus() 
    }  },
}
</script>

this.$nextTick(() => {
  this.$refs.inp.focus()
})

yarn add vue-router@3.6.5

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter()

new Vue({
  render: h => h(App),
  router:router
}).$mount('#app')

// 路由的使用步骤 5 + 2
// 5个基础步骤
// 1. 下载 v3.6.5
// yarn add vue-router@3.6.5
// 2. 引入
// 3. 安装注册 Vue.use(Vue插件)
// 4. 创建路由对象
// 5. 注入到new Vue中，建立关联


import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

const router = new VueRouter()

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

<div class="footer_wrap">
  <a href="#/find">发现音乐</a>
  <a href="#/my">我的音乐</a>
  <a href="#/friend">朋友</a>
</div>
<div class="top">
  <router-view></router-view>
</div>

  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/friend">朋友</router-link>
    </div>
    <div class="top">
      <!-- 路由出口 → 匹配的组件所展示的位置 -->
      <router-view></router-view>
    </div>
  </div>

const router = new VueRouter({
  routes: [...],
  linkActiveClass: "类名1",
  linkExactActiveClass: "类名2"
})

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    ...
  ], 
  linkActiveClass: 'active', // 配置模糊匹配的类名
  linkExactActiveClass: 'exact-active' // 配置精确匹配的类名
})

<template>
  <div id="app">
    <div class="link">
      <router-link to="/home">首页</router-link>
      <router-link to="/search">搜索页</router-link>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.link {
  height: 50px;
  line-height: 50px;
  background-color: #495150;
  display: flex;
  margin: -8px -8px 0 -8px;
  margin-bottom: 50px;
}
.link a {
  display: block;
  text-decoration: none;
  background-color: #ad2a26;
  width: 100px;
  text-align: center;
  margin-right: 5px;
  color: #fff;
  border-radius: 5px;
}
</style>

<template>
  <div class="home">
    <div class="logo-box"></div>
    <div class="search-box">
      <input type="text">
      <button>搜索一下</button>
    </div>
    <div class="hot-link">
      热门搜索：
      <router-link :to="{ path: '/search', query: { keywords: '黑马程序员', type: 'video' } }">热门搜索1</router-link>
      <router-link :to="{ path: '/search', query: { keywords: '前端培训', type: 'article' } }">热门搜索2</router-link>
      <router-link :to="{ path: '/search', query: { keywords: '如何成为前端大牛', type: 'book' } }">热门搜索3</router-link>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
.logo-box {
  height: 150px;
  background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {
  display: flex;
  justify-content: center;
}
.search-box input {
  width: 400px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #c4c7ce;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.search-box input:focus {
  border: 2px solid #ad2a26;
}
.search-box button {
  width: 100px;
  height: 36px;
  border: none;
  background-color: #ad2a26;
  color: #fff;
  position: relative;
  left: -2px;
  border-radius: 0 4px 4px 0;
}
.hot-link {
  width: 508px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto;
}
.hot-link a {
  margin: 0 5px;
}
</style>

<template>
  <div class="search">
    <p>搜索关键字: {{ keywords }}</p>
    <p>搜索类型: {{ type }}</p>
    <p>搜索结果: </p>
    <ul>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
      <li>.............</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Search',
  data () {
    return {
      keywords: '',
      type: ''
    }
  },
  created () {
    // 获取路由参数
    this.keywords = this.$route.query.keywords || ''
    this.type = this.$route.query.type || ''
  }
}
</script>

<style>
.search {
  width: 400px;
  height: 240px;
  padding: 0 20px;
  margin: 0 auto;
  border: 2px solid #c4c7ce;
  border-radius: 5px;
}
</style>

import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/search', component: Search }
  ]
})

export default router

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

const router = new VueRouter({
  routes: [
 	...
    { path: '/search/:words?', component: Search }
  ]
})

{ path: 匹配路径, redirect: 重定向到的路径 },
比如：
{ path:'/' ,redirect:'/home' }

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/home'},
 	 ...
  ]
})

import NotFind from '@/views/NotFind'

const router = new VueRouter({
  routes: [
    ...
    { path: '*', component: NotFind } //最后一个
  ]
})

<template>
  <div>
    <h1>404 Not Found</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

...
import NotFound from '@/views/NotFound'
...

// 创建了一个路由对象
const router = new VueRouter({
  routes: [
     ...
    { path: '*', component: NotFound }
  ]
})

export default router

const router = new VueRouter({
    mode:'histroy', //默认是hash
    routes:[]
})

//简单写法
this.$router.push('路由路径')

//完整写法
this.$router.push({
  path: '路由路径'
})

{ name: '路由名', path: '/path/xxx', component: XXX },

this.$router.push({
  name: '路由名'
})

//简单写法
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
//完整写法
this.$router.push({
  path: '/路径',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

//简单写法
this.$router.push('/路径/参数值')
//完整写法
this.$router.push({
  path: '/路径/参数值'
})

this.$router.push({
  name: '路由名字',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

this.$router.push({
  name: '路由名字',
  params: {
    参数名: '参数值',
  }
})

this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
this.$router.push({
  path: '/路径',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

this.$router.push('/路径/参数值')
this.$router.push({
  path: '/路径/参数值'
})

this.$router.push({
  name: '路由名字',
  query: {
    参数名1: '参数值1',
    参数名2: '参数值2'
  }
})

this.$router.push({
  name: '路由名字',
  params: {
    参数名: '参数值',
  }
})

...
import Layout from '@/views/Layout.vue'
import ArticleDetail from '@/views/ArticleDetail.vue'
...


const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout
    },
    {
      path: '/detail',
      component: ArticleDetail
    }
  ]
})

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout,
      children:[
        //children中的配置项 跟一级路由中的配置项一模一样
        {path:'xxxx',component:xxxx.vue},
        {path:'xxxx',component:xxxx.vue},
      ]
    }
  ]
})

<template>
  <div class="h5-wrapper">
    <div class="content">
      <router-view></router-view>
    </div>
  ....
  </div>
</template>

...
import Article from '@/views/Article.vue'
import Collect from '@/views/Collect.vue'
import Like from '@/views/Like.vue'
import User from '@/views/User.vue'
...

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout,
      redirect: '/article',
      children:[
        {
          path:'/article',
          component:Article
        },
        {
          path:'/collect',
          component:Collect
        },
        {
          path:'/like',
          component:Like
        },
        {
          path:'/user',
          component:User
        }
      ]
    },
    ....
  ]
})

<template>
  <div class="h5-wrapper">
    <div class="content">
      <!-- 内容部分 -->
      <router-view></router-view>
    </div>
    <nav class="tabbar">
      <a href="#/article">面经</a>
      <a href="#/collect">收藏</a>
      <a href="#/like">喜欢</a>
      <a href="#/user">我的</a>
    </nav>
  </div>
</template>

....
    <nav class="tabbar">
      <router-link to="/article">面经</router-link>
      <router-link to="/collect">收藏</router-link>
      <router-link to="/like">喜欢</router-link>
      <router-link to="/user">我的</router-link>
    </nav>

<style>
   a.router-link-active {
      color: orange;
    }
</style>

请求地址: https://mock.boxuegu.com/mock/3083/articles
请求方式: get

 data() {
    return {
      articelList: [],
    }
  },
  async created() {
    const {  data: { result: { rows } }} = await axios.get('https://mock.boxuegu.com/mock/3083/articles')
    this.articelList = rows
  },

<template>
  <div class="article-page">
    <div class="article-item" v-for="item in articelList" :key="item.id">
      <div class="head">
        <img :src="item.creatorAvatar" alt="" />
        <div class="con">
          <p class="title">{{ item.stem }}</p>
          <p class="other">{{ item.creatorName }} | {{ item.createdAt }}</p>
        </div>
      </div>
      <div class="body">
        {{item.content}}
      </div>
      <div class="foot">点赞 {{item.likeCount}} | 浏览 {{item.views}}</div>
    </div>
  </div>
</template>

<template>
  <div class="article-page">
    <div class="article-item" 
      v-for="item in articelList" :key="item.id" 
      @click="$router.push(`/detail?id=${item.id}`)">
     ...
    </div>
  </div>
</template>

  created(){
    console.log(this.$route.query.id)
  }

...
  {
      path: '/detail/:id',
      component: ArticleDetail
  }

<div class="article-item" 
     v-for="item in articelList" :key="item.id" 
     @click="$router.push(`/detail/${item.id}`)">
       ....
 </div>

  created(){
    console.log(this.$route.params.id)
  }

<template>
  <div class="article-detail-page">
    <nav class="nav"><span class="back" @click="$router.back()">&lt;</span> 面经详情</nav>
     ....
  </div>
</template>

 请求地址: https://mock.boxuegu.com/mock/3083/articles/:id
 请求方式: get

 data() {
    return {
      articleDetail:{}
    }
  },
  async created() {
    const id = this.$route.params.id
    const {data:{result}} = await axios.get(
      `https://mock.boxuegu.com/mock/3083/articles/${id}`
    )
    this.articleDetail = result
  },

<template>
  <div class="article-detail-page">
    <nav class="nav">
      <span class="back" @click="$router.back()">&lt;</span> 面经详情
    </nav>
    <header class="header">
      <h1>{{articleDetail.stem}}</h1>
      <p>{{articleDetail.createAt}} | {{articleDetail.views}} 浏览量 | {{articleDetail.likeCount}} 点赞数</p>
      <p>
        <img
          :src="articleDetail.creatorAvatar"
          alt=""
        />
        <span>{{articleDetail.creatorName}}</span>
      </p>
    </header>
    <main class="body">
      {{articleDetail.content}}
    </main>
  </div>
</template>

<template>
  <div class="h5-wrapper">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<template>
  <div class="h5-wrapper">
    <keep-alive :include="['LayoutPage']">
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

npm i @vue/cli -g

vue create hm-exp-mobile

Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
> Manually select features     选自定义

  3.x
> 2.x

npm run serve

import Vue from 'vue'
import App from './App.vue'

import './styles/index.less'
import router from './router'
Vue.config.productionTip = false

new Vue ( {
  render: h => h(App),
  router
}).$mount('#app')

// 当保存的时候，eslint自动帮我们修复错误
"editor.codeActionsOnSave": {
    "source.fixAll": true
},
// 保存代码，不自动格式化
"editor.formatOnSave": false

{
    "window.zoomLevel": 2,
    "workbench.iconTheme": "vscode-icons",
    "editor.tabSize": 2,
    "emmet.triggerExpansionOnTab": true,
    // 当保存的时候，eslint自动帮我们修复错误
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },
    // 保存代码，不自动格式化
    "editor.formatOnSave": false
}

vue create vuex-demo

|-components
|--Son1.vue
|--Son2.vue
|-App.vue

<template>
  <div id="app">
    <h1>根组件</h1>
    <input type="text" v-model="sharedData">
    <Son1 :sharedData="sharedData" :incrementData="incrementData"></Son1>
    <hr>
    <Son2 :sharedData="sharedData" :decrementData="decrementData"></Son2>
  </div>
</template>

<script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'
import { mapMutations } from 'vuex'

export default {
  name: 'app',
  data: function () {
    return {
      sharedData: ''
    }
  },
  components: {
    Son1,
    Son2
  },
  methods: {
    ...mapMutations(['increment', 'decrement']),
    incrementData() {
      this.increment()
    },
    decrementData() {
      this.decrement()
    }
  }
}
</script>

<style>
#app {
  width: 600px;
  margin: 20px auto;
  border: 3px solid #ccc;
  border-radius: 3px;
  padding: 10px;
}
</style>

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'

Vue.config.productionTip = false

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  }
})

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

<!-- Son1.vue -->
<template>
  <div class="box">
    <h2>Son1 子组件</h2>
    从vuex中获取的值: {{ sharedData }}
    <br>
    <button @click="incrementData">值 + 1</button>
  </div>
</template>

<script>
export default {
  name: 'Son1Com',
  props: ['sharedData', 'incrementData']
}
</script>

<style lang="css" scoped>
.box{
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>

<!-- Son2.vue -->
<template>
  <div class="box">
    <h2>Son2 子组件</h2>
    从vuex中获取的值: {{ sharedData }}
    <br />
    <button @click="decrementData">值 - 1</button>
  </div>
</template>

<script>
export default {
  name: 'Son2Com',
  props: ['sharedData', 'decrementData']
}
</script>

<style lang="css" scoped>
.box {
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>

yarn add vuex@3 或者 npm i vuex@3

![image.png](https://cdn.nlark.com/yuque/0/2023/png/34278134/1697596631907-abe0aa37-c3c2-4908-ab0e-b79b0ae874f2.png#averageHue=%23262628&clientId=u7cc8e6b7-cfbc-4&from=paste&height=303&id=u8f4760e8&originHeight=454&originWidth=582&originalType=binary&ratio=1.5&rotation=0&showTitle=false&size=60317&status=done&style=none&taskId=u31d43686-52df-4a3d-979b-f32abe95598&title=&width=388)

// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)

// 创建仓库 store
const store = new Vuex.Store()

// 导出仓库
export default store

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

created(){
  console.log(this.$store)
}

// 创建仓库 store
const store = new Vuex.Store({
  // state 状态, 即数据, 类似于vue组件中的data,
  // 区别：
  // 1.data 是组件自己的数据, 
  // 2.state 中的数据整个vue项目的组件都能访问到
  state: {
    count: 101
  }
})

获取 store：
 1.Vue模板中获取 this.$store
 2.js文件中获取 import 导入 store


模板中：     {{ $store.state.xxx }}
组件逻辑中：  this.$store.state.xxx
JS模块中：   store.state.xxx

<h1>state的数据 - {{ $store.state.count }}</h1>

<h1>state的数据 - {{ count }}</h1>

// 把state中数据，定义在组件内的计算属性中
  computed: {
    count () {
      return this.$store.state.count
    }
  }

//main.js

import store from "@/store"

console.log(store.state.count)

import { mapState } from 'vuex'

mapState(['count'])

count () {
    return this.$store.state.count
}

  computed: {
    ...mapState(['count'])
  }

 <div> state的数据：{{ count }}</div>

button @click="handleAdd">值 + 1</button>


methods:{
	 handleAdd (n) {
      // 错误代码(vue默认不会监测，监测需要成本)
       this.$store.state.count++
      // console.log(this.$store.state.count) 
    },
}

const store  = new Vuex.Store({
  state: {
    count: 0
  },
  // 定义mutations
  mutations: {

  }
})

mutations: {
    // 方法里参数 第一个参数是当前store的state属性
    // payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷
    addCount (state) {
      state.count += 1
    }
  },

this.$store.commit('addCount')

// mutations
mutations: {
  incrementByFive(state) {
    state.count += 5;
  }
}

// mutations
mutations: {
  changeTitle(state, newTitle) {
    state.title = newTitle;
  }
}

<!-- App.vue -->
<template>
  <div id="app">
    <h1>{{ title }}</h1>
    <button @click="incrementByFive">+5</button>
    <button @click="changeTitle('New Title')">Change Title</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  computed: {
    count() {
      return this.$store.state.count;
    },
    title() {
      return this.$store.state.title;
    }
  },
  methods: {
    incrementByFive() {
      this.$store.commit('incrementByFive');
    },
    changeTitle(newTitle) {
      this.$store.commit('changeTitle', newTitle);
    }
  }
}
</script>

mutations: {
  ...
  addCount (state, count) {
    state.count = count
  }
},

handle ( ) {
  this.$store.commit('addCount', 10)
}

this.$store.commit('addCount', {
  count: 10
})

    <button @click="subCount(1)">值 - 1</button>
    <button @click="subCount(5)">值 - 5</button>
    <button @click="subCount(10)">值 - 10</button>

    export default {
        methods:{
             subCount (n) { 
                this.$store.commit('addCount', n)
        },
        }
    }

mutations:{
    subCount (state, n) {
      state.count -= n
    },
}

<input :value="count" @input="handleInput" type="text">

export default {
  methods: {
    handleInput (e) {
      // 1. 实时获取输入框的值
      const num = +e.target.value
      // 2. 提交mutation，调用mutation函数
      this.$store.commit('changeCount', num)
    }
  }
}

mutations: {
   changeCount (state, newCount) {
      state.count = newCount
   }
},

import  { mapMutations } from 'vuex'
methods: {
    ...mapMutations(['addCount'])
}

methods: {
      // commit(方法名, 载荷参数)
      addCount () {
          this.$store.commit('addCount')
      }
 }

<button @click="addCount">值+1</button>

mutations: {
  changeCount (state, newCount) {
    state.count = newCount
  }
}


actions: {
  setAsyncCount (context, num) {
    // 一秒后, 给一个数, 去修改 num
    setTimeout(() => {
      context.commit('changeCount', num)
    }, 1000)
  }
},

setAsyncCount () {
  this.$store.dispatch('setAsyncCount', 666)
}

import { mapActions } from 'vuex'
methods: {
   ...mapActions(['changeCountAction'])
}

//mapActions映射的代码 本质上是以下代码的写法
//methods: {
//  changeCountAction (n) {
//    this.$store.dispatch('changeCountAction', n)
//  },
//}

<button @click="changeCountAction(200)">+异步</button>

state: {
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}

  getters: {
    // getters函数的第一个参数是 state
    // 必须要有返回值
     filterList:  state =>  state.list.filter(item => item > 5)
  }

<div>{{ $store.getters.filterList }}</div>

computed: {
    ...mapGetters(['filterList'])
}

 <div>{{ filterList }}</div>

const state = {
  userInfo: {
    name: 'zs',
    age: 18
  }
}

const mutations = {}

const actions = {}

const getters = {}

export default {
  state,
  mutations,
  actions,
  getters
}

const state = {
  theme: 'dark'
  desc: '描述真呀真不错'
}

const mutations = {}

const actions = {}

const getters = {}

export default {
  state,
  mutations,
  actions,
  getters
}

import user from './modules/user'
import setting from './modules/setting'

const store = new Vuex.Store({
    modules:{
        user,
        setting
    }
})

const state = {
  userInfo: {
    name: 'zs',
    age: 18
  },
  myMsg: '我的数据'
}

const mutations = {
  updateMsg (state, msg) {
    state.myMsg = msg
  }
}

const actions = {}

const getters = {}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

$store.state.user.userInfo.name

...mapState('user', ['userInfo']),
...mapState('setting', ['theme', 'desc']),

const getters = {
  // 分模块后，state指代子模块的state
  UpperCaseName (state) {
    return state.userInfo.name.toUpperCase()
  }
}

<!-- 测试访问模块中的getters - 原生 -->
<div>{{ $store.getters['user/UpperCaseName'] }}</div>

computed:{
  ...mapGetters('user', ['UpperCaseName'])
}

const mutations = {
  setUser (state, newUserInfo) {
    state.userInfo = newUserInfo
  }
}

const mutations = {
  setTheme (state, newTheme) {
    state.theme = newTheme
  }
}

<button @click="updateUser">更新个人信息</button> 
<button @click="updateTheme">更新主题色</button>


export default {
  methods: {
    updateUser () {
      // $store.commit('模块名/mutation名', 额外传参)
      this.$store.commit('user/setUser', {
        name: 'xiaowang',
        age: 25
      })
    }, 
    updateTheme () {
      this.$store.commit('setting/setTheme', 'pink')
    }
  }
}

<button @click="setUser({ name: 'xiaoli', age: 80 })">更新个人信息</button>
<button @click="setTheme('skyblue')">更新主题</button>

methods:{
// 分模块的映射
...mapMutations('setting', ['setTheme']),
...mapMutations('user', ['setUser']),
}

const actions = {
  setUserSecond (context, newUserInfo) {
    // 将异步在action中进行封装
    setTimeout(() => {
      // 调用mutation   context上下文，默认提交的就是自己模块的action和mutation
      context.commit('setUser', newUserInfo)
    }, 1000)
  }
}

<button @click="updateUser2">一秒后更新信息</button>

methods:{
    updateUser2 () {
      // 调用action dispatch
      this.$store.dispatch('user/setUserSecond', {
        name: 'xiaohong',
        age: 28
      })
    },
}

<button @click="setUserSecond({ name: 'xiaoli', age: 80 })">一秒后更新信息</button>

methods:{
  ...mapActions('user', ['setUserSecond'])
}

 // **...mapState、...mapGetters放computed中；**

//  **...mapMutations、...mapActions放methods中；**

...mapXxxx(**'模块名'**, ['数据项|方法']),

...mapXxxx(**'模块名'**, { 新的名字: 原来的名字 }),

vue create vue-cart-demo

export default {
  namespaced: true,
  state () {
    return {
      list: []
    }
  },
}

import Vuex from 'vuex'
import Vue from 'vue'

import cart from './modules/cart'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    cart
  }
})

export default store

yarn global add json-server 或 npm i json-server  -g

json-server  --watch  index.json

yarn add axios

import axios from 'axios'

export default {
  namespaced: true,
  state () {
    return {
      list: []
    }
  },
  mutations: {
    updateList (state, payload) {
      state.list = payload
    }
  },
  actions: {
    async getList (ctx) {
      const res = await axios.get('http://localhost:3000/cart')
      ctx.commit('updateList', res.data)
    }
  }
}

import { mapState } from 'vuex'

export default {
  name: 'App',
  components: {
    CartHeader,
    CartFooter,
    CartItem
  },
  created () {
    this.$store.dispatch('cart/getList')
  },
  computed: {
    ...mapState('cart', ['list'])
  }
}

<!-- 商品 Item 项组件 -->
<cart-item v-for="item in list" :key="item.id" :item="item"></cart-item>

<template>
  <div class="goods-container">
    <!-- 左侧图片区域 -->
    <div class="left">
      <img :src="item.thumb" class="avatar" alt="">
    </div>
    <!-- 右侧商品区域 -->
    <div class="right">
      <!-- 标题 -->
      <div class="title">{{item.name}}</div>
      <div class="info">
        <!-- 单价 -->
        <span class="price">￥{{item.price}}</span>
        <div class="btns">
          <!-- 按钮区域 -->
          <button class="btn btn-light">-</button>
          <span class="count">{{item.count}}</span>
          <button class="btn btn-light">+</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CartItem',
  props: {
    item: Object
  },
  methods: {

  }
}
</script>

<!-- 按钮区域 -->
<button class="btn btn-light" @click="onBtnClick(-1)">-</button>
<span class="count">{{item.count}}</span>
<button class="btn btn-light" @click="onBtnClick(1)">+</button>

onBtnClick (step) {
  const newCount = this.item.count + step
  if (newCount < 1) return

  // 发送修改数量请求
  this.$store.dispatch('cart/updateCount', {
    id: this.item.id,
    count: newCount
  })
}

async updateCount (ctx, payload) {
  await axios.patch('http://localhost:3000/cart/' + payload.id, {
    count: payload.count
  })
  ctx.commit('updateCount', payload)
}

mutations: {
  ...,
  updateCount (state, payload) {
    const goods = state.list.find((item) => item.id === payload.id)
    goods.count = payload.count
  }
},

getters: {
  total(state) {
    return state.list.reduce((p, c) => p + c.count, 0);
  },
  totalPrice (state) {
    return state.list.reduce((p, c) => p + c.count * c.price, 0);
  },
},

<template>
  <div class="footer-container">
    <!-- 中间的合计 -->
    <div>
      <span>共 {{total}} 件商品，合计：</span>
      <span class="price">￥{{totalPrice}}</span>
    </div>
    <!-- 右侧结算按钮 -->
    <button class="btn btn-success btn-settle">结算</button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'CartFooter',
  computed: {
    ...mapGetters('cart', ['total', 'totalPrice'])
  }
}
</script>