Vue学习之路-第二篇

已于 2023-12-15 14:19:38 修改
阅读量448 收藏 6
点赞数 4
文章标签： vue.js 学习 javascript 前端
于 2023-12-15 13:50:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/longsri98/article/details/135014766
版权

Vue学习之路-第二篇

一、指令修饰符

什么是指令修饰符？

所谓指令修饰符就是通过“.”指明一些指令后缀 不同的后缀封装了不同的处理操作 —> 简化代码

按键修饰符

@keyup.enter —>当点击enter键的时候才触发
代码演示：

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

v-model修饰符

  • v-model.trim —>去除首位空格
  • v-model.number —>转数字

事件修饰符

  • @事件名.stop —> 阻止冒泡
  • @事件名.prevent —>阻止默认行为
  • @事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为
 <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="username" type="text"><br>
    年纪：<input v-model="age" type="text"><br>

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

    <h3>@事件名.prevent  →  阻止默认行为</h3>
    <a @click 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) {
          // e.stopPropagation()
          alert('儿子被点击了')
        }
      }
    })
  </script>

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/index.css" />
    <title>记事本</title>
</head>
<body>
    <section id="app">
        <!-- 输入框 -->
        <header class="header">
          <h1>记事本</h1>
          <input @keyup.enter="addData" placeholder="请输入任务" class="new-todo" v-model="name" />
          <button class="add" @click="addData" >添加任务</button>
        </header>
        <!-- 列表区域 -->
        <section class="main">
          <ul class="todo-list">
            <li class="todo" v-for="(item,index) in list" :key="item.id">
              <div class="view">
                <span class="index">{{index+1}}</span> <label>{{item.name}}</label>
                <button class="destroy" @click="delData(item.id)"></button>
              </div>
            </li>
          </ul>
        </section>
        <!-- 统计和清空 -->
        <footer class="footer">
          <!-- 统计 -->
          <span class="todo-count">合 计:<strong> {{this.list.length}} </strong></span>
          <!-- 清空 -->
          <button class="clear-completed" @click="clear">
            清空任务
          </button>
        </footer>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                name:'',
                list:[
                    {id:1,name:"跑步五公里"},
                    {id:2,name:"跳绳3000次"},
                    {id:3,name:"骑行20公里"}
                ]
            },
            methods:{
                addData(){
                    if(this.name.trim()===''){
                        alert("请先输入内容！")
                        return
                    }
                    this.list.unshift({
                        id:this.list.length+1,
                        name:this.name
                    });
                    this.name = ''
                },
                delData(id){
                    this.list = this.list.filter(item => item.id!==id);
                },
                clear(){
                    this.list = ''
                }
            }
        })
    </script>
</body>
</html>

css

html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: #fff;
}
button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 100%;
  vertical-align: baseline;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.4em;
  background: #f5f5f5;
  color: #4d4d4d;
  min-width: 230px;
  max-width: 550px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
}

:focus {
  outline: 0;
}

.hidden {
  display: none;
}

#app {
  background: #fff;
  margin: 180px 0 40px 0;
  padding: 15px;
  position: relative;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
#app .header input {
  border: 2px solid rgba(175, 47, 47, 0.8);
  border-radius: 10px;
}
#app .add {
  position: absolute;
  right: 15px;
  top: 15px;
  height: 68px;
  width: 140px;
  text-align: center;
  background-color: rgba(175, 47, 47, 0.8);
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  border-radius: 0 10px 10px 0;
}

#app input::-webkit-input-placeholder {
  font-style: italic;
  font-weight: 300;
  color: #e6e6e6;
}

#app input::-moz-placeholder {
  font-style: italic;
  font-weight: 300;
  color: #e6e6e6;
}

#app input::input-placeholder {
  font-style: italic;
  font-weight: 300;
  color: gray;
}

#app h1 {
  position: absolute;
  top: -120px;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 60px;
  font-weight: 100;
  text-align: center;
  color: rgba(175, 47, 47, 0.8);
  -webkit-text-rendering: optimizeLegibility;
  -moz-text-rendering: optimizeLegibility;
  text-rendering: optimizeLegibility;
}

.new-todo,
.edit {
  position: relative;
  margin: 0;
  width: 100%;
  font-size: 24px;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1.4em;
  border: 0;
  color: inherit;
  padding: 6px;
  box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.new-todo {
  padding: 16px;
  border: none;
  background: rgba(0, 0, 0, 0.003);
  box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
}

.main {
  position: relative;
  z-index: 2;
}

.todo-list {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
}

.todo-list li {
  position: relative;
  font-size: 24px;
  height: 60px;
  box-sizing: border-box;
  border-bottom: 1px solid #e6e6e6;
}

.todo-list li:last-child {
  border-bottom: none;
}

.todo-list .view .index {
  position: absolute;
  color: gray;
  left: 10px;
  top: 20px;
  font-size: 22px;
}

.todo-list li .toggle {
  text-align: center;
  width: 40px;
  /* auto, since non-WebKit browsers doesn't support input styling */
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 0;
  border: none; /* Mobile Safari */
  -webkit-appearance: none;
  appearance: none;
}

.todo-list li .toggle {
  opacity: 0;
}

.todo-list li .toggle + label {
  /*
		Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
		IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
	*/
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-position: center left;
}

.todo-list li .toggle:checked + label {
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
}

.todo-list li label {
  word-break: break-all;
  padding: 15px 15px 15px 60px;
  display: block;
  line-height: 1.2;
  transition: color 0.4s;
}

.todo-list li.completed label {
  color: #d9d9d9;
  text-decoration: line-through;
}

.todo-list li .destroy {
  display: none;
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  width: 40px;
  height: 40px;
  margin: auto 0;
  font-size: 30px;
  color: #cc9a9a;
  margin-bottom: 11px;
  transition: color 0.2s ease-out;
}

.todo-list li .destroy:hover {
  color: #af5b5e;
}

.todo-list li .destroy:after {
  content: '×';
}

.todo-list li:hover .destroy {
  display: block;
}

.todo-list li .edit {
  display: none;
}

.todo-list li.editing:last-child {
  margin-bottom: -1px;
}

.footer {
  color: #777;
  padding: 10px 15px;
  height: 20px;
  text-align: center;
  border-top: 1px solid #e6e6e6;
}

.footer:before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 50px;
  overflow: hidden;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6,
    0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6,
    0 17px 2px -6px rgba(0, 0, 0, 0.2);
}

.todo-count {
  float: left;
  text-align: left;
}

.todo-count strong {
  font-weight: 300;
}

.filters {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  right: 0;
  left: 0;
}

.filters li {
  display: inline;
}

.filters li a {
  color: inherit;
  margin: 3px;
  padding: 3px 7px;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 3px;
}

.filters li a:hover {
  border-color: rgba(175, 47, 47, 0.1);
}

.filters li a.selected {
  border-color: rgba(175, 47, 47, 0.2);
}

.clear-completed,
html .clear-completed:active {
  float: right;
  position: relative;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
}

.clear-completed:hover {
  text-decoration: underline;
}

.info {
  margin: 50px auto 0;
  color: #bfbfbf;
  font-size: 15px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  text-align: center;
}

.info p {
  line-height: 1;
}

.info a {
  color: inherit;
  text-decoration: none;
  font-weight: 400;
}

.info a:hover {
  text-decoration: underline;
}

/*
	Hack to remove background from Mobile Safari.
	Can't use it globally since it destroys checkboxes in Firefox
*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .toggle-all,
  .todo-list li .toggle {
    background: none;
  }

  .todo-list li .toggle {
    height: 40px;
  }
}

@media (max-width: 430px) {
  .footer {
    height: 50px;
  }

  .filters {
    bottom: 10px;
  }
}

二、v-bind对样式控制的增强-操作class

为了方便开发者进行样式控制， Vue 扩展了 v-bind 的语法，可以针对 class 类名 和 style 行内样式 进行控制 。
1.语法：

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

2.对象语法：

当class动态绑定的是对象时，键就是类名，值就是布尔值，如果值是true，就有这个类，否则没有这个类

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

适用场景：一个类名，来回切换
3.数组语法：

当class动态绑定的是数组时 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

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

使用场景:批量添加或删除类
4.练习：

 <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">绑定对象</div>
    <!--绑定数组-->
    <div class="box">绑定数组</div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      }
    })
  </script>

三、v-bind对有样式控制的增强-操作style

1.语法

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

2.代码练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>
</head>

<body>
    <div id="app">
        <div class="box" :class="{pink:this.flag, big:true}">你好！</div>
        <div class="box" :class="['pink']">你好！</div>
        
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el:'#app',
            data:{
                flag:false
            }
        })
    </script>

</body>
</html>

四、v-model在其他表单元素的使用

1.讲解内容：

常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值

它会根据 控件类型 自动选取 正确的方法 来更新元素

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

2.代码准备

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app">
        性别：
            <input type="radio" v-model='sex' name="sex" value="1">男
            <input type="radio" v-model="sex" name="sex" value="2">女
            <br><br>
        所在城市
            <select v-model="city">
                <option value="101">杭州</option>
                <option value="102">上海</option>
                <option value="103">北京</option>
                <option value="104">广州</option>
            </select>    
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                city:"",    
                sex:""
            }
        })
    </script>
</body>
</html>

五、computed计算属性

1.概念

基于现有的数据，计算出来的新属性。 依赖的数据变化，自动重新计算。

2.语法

  1. 声明在 computed 配置项中，一个计算属性对应一个函数
  2. 使用起来和普通属性一样使用 {{ 计算属性名}}

3.注意

  1. computed配置项和data配置项是同级的
  2. computed中的计算属性虽然是函数的写法，但他依然是个属性
  3. computed中的计算属性不能和data中的属性同名
  4. 使用computed中的计算属性和使用data中的属性是一样的用法
  5. computed中计算属性内部的this依然指向的是Vue实例

4.代码准备

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table {
          border: 1px solid #000;
          text-align: center;
          width: 240px;
        }
        th,td {
          border: 1px solid #000;
        }
        h3 {
          position: relative;
        }
      </style>
</head>
<body>
    
    <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>
        礼物总数：{{totalCount}} 个
        <hr>
        姓：<input type="text" v-model="fristName">+名：<input type="text" v-model="lastName">= {{fullName}} 
        <br>
        <button @click="changeName()">改名卡</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                fristName:"",
                lastName:"",
                list:[
                    {id:1,name:"项链",num:3},
                    {id:2,name:"衣物",num:1},
                    {id:3,name:"耳机",num:3},
                    {id:4,name:"书本",num:5},
                    {id:5,name:"玩具",num:6}
                ]
            },
            methods:{
              changeName(){
                this.fullName = '马小超'
              }  
            },
            // 相对于methods方法 最大的优点在于它具备缓存特性，一次计算多次使用。
            computed:{
                totalCount(){
                    //sum 对应0，0为初始值，sum为每次计算后的值。
                    //item 为数据
                    return this.list.reduce((sum,item)=>sum+item.num,0);
                },
                // 计算属性完整写法：
                // 计算属性名:{
                //     get(){
                //     },
                //     set(){
                //     }
                // }
                fullName:{
                    get(){
                        return this.fristName + this.lastName
                    },
                    set(value){
                        this.fristName = value.slice(0,1)
                        this.lastName = value.slice(1)
                    }
                }
            }
        })
    </script>
</body>
</html>

computed计算属性 VS methods方法

1.computed计算属性

作用：封装了一段对于数据的处理，求得一个结果

语法：

  1. 写在computed配置项中
  2. 作为属性，直接使用
    • js中使用计算属性： this.计算属性
    • 模板中使用计算属性：{{计算属性}}

2.methods计算属性

作用：给Vue实例提供一个方法，调用以处理业务逻辑。

语法：

  1. 写在methods配置项中
  2. 作为方法调用
    • js中调用：this.方法名()
    • 模板中调用 {{方法名()}} 或者 @事件名=“方法名”

3.计算属性的优势

  1. 缓存特性（提升性能）

    计算属性会对计算出来的结果缓存，再次使用直接读取缓存，

    依赖项变化了，会自动重新计算 → 并再次缓存

  2. methods没有缓存特性

  3. 通过代码比较

<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>

4.总结

1.computed有缓存特性，methods没有缓存

2.当一个结果依赖其他多个值时，推荐使用计算属性

3.当处理业务逻辑时，推荐使用methods方法，比如事件的处理函数

计算属性的完整写法

既然计算属性也是属性，能访问，应该也能修改了？

  1. 计算属性默认的简写，只能读取访问，不能 “修改”
  2. 如果要 “修改” → 需要写计算属性的完整写法
    完整写法代码演示
 <div id="app">
    姓：<input type="text" v-model="firstName"> +
    名：<input type="text" v-model="lastName"> ={{allName}}
    <span></span><br><br> 
    <button>改名卡</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: {
		 allName() {
		  let name = this.firstName+this.lastName
          return name
        }
      },
      methods: {

      }
    })
  </script>

六、watch侦听器（监视器）

1.作用：

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

2.语法：

  1. watch同样声明在跟data同级的配置项中

  2. 简单写法： 简单类型数据直接监视

  3. 完整写法：添加额外配置项

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

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

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>
</head>
<body>
    <div id="app">
        <!-- 条件选择框 -->
        <div class="query">
          <span>翻译成的语言：</span>
          <select v-model="obj.lang">
            <option value="italy">意大利</option>
            <option value="english">英语</option>
            <option value="german">德语</option>
          </select>
        </div>
  
        <!-- 翻译框 -->
        <div class="box">
          <div class="input-wrap">
            <textarea v-model="obj.words"></textarea>
            <span><i>⌨️</i>文档翻译</span>
          </div>
          <div class="output-wrap">
            <div class="transbox">{{ result }}</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:"小咪",lang:""},
                result:""
            },
            watch:{
            // 复杂监视使用deep:true，复杂类型的深度监视，通俗讲就是如果属性多，一个个监视很麻烦，可以使用它一次性监视多个
                obj:{
                    deep:true,
                    immediate:true,
                    handler(newValue){
                    clearTimeout(this.timer)
                    this.timer = setTimeout(async () => {
                        const res = await axios({
                            url:'https://applet-base-api-t.itheima.net/api/translate',
                            params:newValue
                        })
                        this.result=res.data.data
                    },1000)
                    }
                }

            }
        })
    </script>
</body>
</html>

总结

watch侦听器的写法有几种？

  watch:{
               // console.log('变化了', newValue)
            // 防抖: 延迟执行 → 干啥事先等一等，延迟一会，一段时间内没有再次触发，才执行
                 words(newValue,oldValue){
                //     // console.log("变化了：",newValue,oldValue)
                    clearTimeout(this.timer)
                    this.timer = setTimeout(async () => {
                        const res = await axios({
                            url:'https://applet-base-api-t.itheima.net/api/translate',
                            params:{
                                words:newValue
                            }
                        })
                        console.log(res.data.data)
                        this.obj=res.data.data
                    },1000)
                },
                //简单写法
                'student.age'(newValue,oldValue){
                    console.log("变化了：",newValue,oldValue)
                }
            }
奇迹般
关注
【前端 - Vue】之 Keep-Alive缓存组件使用语法及原理解析，超详细！
共同学习，共同成长
06-01 2397
keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。本篇讲解Keep-Alive缓存组件使用语法及原理解析，超详细！
新手小白学习vue之旅:vue-element-admin入门
biubiubiu小婧的博客
08-11 3581
这是自己写的第一篇有关于计算机方面的文章，先简单说明一下自己的情况，一名在校大学生，误打误撞的选择了计算机专业，前期是专科生，后期通过考试进入本科学习，现阶段即将不如大四。后面无考研想法，准备找工作，不爱学习，对计算机专业的知识掌握少之又少，喜欢追剧，不喜欢研究代码，奈何没有放弃计算机从头学习其它专业的勇气，现如今只能慢慢学习计算机，争取让自己找到一份工作。为什么要写博客呢，因为怕自己后面忘记了，我的一个很大缺点，容易忘东西，前面刚学会的代码，知识，过个一两个月就开始模糊，又要从头开始。所以准备记下来，等忘
Vue基础知识总结(二)：进阶篇
程序员阿红的博客
03-30 1536
Vue基础知识总结(二)：进阶篇 1.0 MVVM模式 MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式。 MVVM模式将页面,分层了 M 、V、和VM ,解释为： Model: 负责数据存储 View: 负责页面展示 View Model: 负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示 <body> <div id="app"> <!-- View 视图部分 --> <h
vue组件传值的13种方式
热门推荐
dan_seek的博客
10-19 5万+
vue组件传值 不写这篇文章，我自己都不知道我知道的vue组件传值的方式竟然有13种之多，其实静下来想想，常用的也有五六种。 1、父组件传给子组件 在子组件里定义一个props,即props:[‘msg’]，msg可以是对象也可以是基本数据类型 如果你想定义一个默认值，即 props:{msg: {type: String, default: ‘hello world’}}, 需要注意的是这种传值是...
div,section,article,aside 区分
War__Tiger的博客
10-18 1470
section：含义是区，块。里面必须包含一个标题，如果一个网页分区比较明确可以使用section。举例：报纸 section不能代替div。在没有明确的区块划分（没有标题）的情况下最好用div，如果用了section的话需要设置样式，最好在section中设置一个div，然后给这个div设置样式以及脚本。最好不要直接在section上设置样式和脚本 section和article可以互相嵌套。article的含义是一篇完整的文章。一篇完整的文章就需要有标题有内容，有结尾，所以当你写的页面包含这些.
vue 全局组件开发页面引用
周家大小姐
10-23 307
创建src\components\SectionTitle\index.vue <template> <div class="section-title"> <slot> <span class="text">{{ text }}</span> </slot> </div> </template> <script> export default {
vue项目 路由的构建
weixin_46337813的博客
03-23 120
layout.vue (相当于移动端的 tarbar ) <template> <section class="app-main"> <transition name="fade-transform" mode="out-in"> <keep-alive :include="cachedViews"> <router-view :key="key" /> </keep-alive&gt.
Vue学习---插槽篇
weixin_53027472的博客
09-27 1173
Vue插槽是一个重要的知识点，本篇文章将告诉你什么是插槽，插槽的三个种类：普通插槽，具名插槽，作用域插槽。
vue html-loader,Vue + Webpack + Vue-loader学习教程之相关配置篇
weixin_39534100的博客
06-24 884
前言之前已经介绍过了Vue + Webpack + Vue-loader的相关功能介绍，大家可以点击这篇文章了解详情。下面就来看看相关配置篇，感兴趣的可以参考学习。使用预处理器在 Webpack 中，所有的预处理器需要和一个相应的加载器一同使用。vue-loader 允许你用其它的 Webpack 加载器去处理 Vue 组件一部分代码。它会根据 lang 属性自动用适当的加载器去处理。CSS例如，...
Vue.js第二天学习笔记（vue-router）
11-28
本篇学习笔记主要介绍如何在Vue项目中配置和使用`vue-router`。 首先，确保已经通过npm安装了必要的依赖包，包括`vue`, `vue-router`和`vue-resource`。在终端运行以下命令： ```bash npm install vue vue-router ...
vue插槽使用
打屁屁的小痘痘
11-22 718
一. 概述 网上找了很多资料，讲解的都比较乱，发现博主的这个文章，归纳整理的很清晰，使用转载过来记录学习一下。 二. 注意事项 如果在子组件中不定义分发内容的出口slot，即使在使用子组件时候，里面书写内容了也会被抛弃。 // app.vue <template> <section> <my-list> <h...
何时使用section标签
goodgirl1991的专栏
01-10 7220
本文内容转自链接：https://www.zhihu.com/question/20227599/answer/16314207 一个section通常由内容和标题组成，通常不推荐那些没有标题的内容用section，在HTML 5 Outliner这个网站可以检测没有标题的section，section的作用是对页面上的内容进行分块，如各个有标题的版块、功能区或对文章进行分段，不要与有自己完
Vue 使用中的小技巧
weixin_33929309的博客
04-22 391
在vue的使用过程中会遇到各种场景，当普通使用时觉得没什么，但是或许优化一下可以更高效更优美的进行开发。下面有一些我在日常开发的时候用到的小技巧，在下将不定期更新~ 1. 多图表resize事件去中心化 1.1 一般情况 有时候我们会遇到这样的场景，一个组件中有几个图表，在浏览器resize的时候我们希望图表也进行resize，因此我们会...
Vue-cli 配置代理服务
li_aoqi的博客
10-27 2167
Vue-cli 配置代理服务 方法一： 在vue.config.js中添加如下配置： devServer:{ proxy: "http://localhost:5000" } 说明： 优点：配置简单，请求资源时直接发给前端（8080）即可。 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源） 方法二： 编写vue.config.js配置具体代理规则： module.exports = {
浅记录小白学习vue问题
zhanghuahuapoi的博客
08-29 1993
小白学习vue记录的疑问点
详解 Vue & Vuex 实践
weixin_34223655的博客
01-29 151
详解 Vue & Vuex 实践翻译自Vue + Vuex — Getting started，承接自2017 Vue.js 2快速入门指南，从属于Web 前端入门与工程实践。 随着应用复杂度的增加，我们需要考虑如何进行应用的状态管理，将业务逻辑与界面交互相剥离，详细讨论参考笔者的2016-我的前端之路:工具化与工程化。Vue 为...
vue入门基础的各个基本表达式
dailingroom的博客
01-05 2244
今天新开启Vue学习： Vue的el挂载点只能支持双标签而不能支持双标签 不要挂在body上 三个问题： Vue实力的作用范围是什么呢？ Vue会管理el选项命中的元素及其内部的后代元素 是否可以使用其他的选择器？ 可以使用其他的选择器，但是建议使用ID选择器 是否可以设置其他的dom元素呢？ 可以使用其他的双标签，但是不要使用html和body Vue使用复杂类型的数据： 1.当写 这样的数据类型的数据时，用点取，例如school.name,取出来的是‘黑马程序员’这个信息 2.当写的是 ，这是数组类型
vue-插槽使用
是一座岛
05-30 8262
一. 概述 项目开发中想封装一个好用的列表组件，思考到怎么在一个组件中实现不同的样式和细微差别呢，想到了vue插槽功能符合我的预想。遇到了一个问题入坑了
vue实现点击页面侧边导航节点页面滚动到对应section(段落)部分
树上骑个猴的博客
01-22 1763
效果图： index.html(假设该页面要实现点击导航实现滚动功能) <template> <div> <info-line /> <div> <el-row type="flex" justify="center"> <el-col :span="23"> <div class="container-page-main"> &
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值