第二天：Vue基础语法

最新推荐文章于 2024-10-11 11:30:08 发布

khazix__

最新推荐文章于 2024-10-11 11:30:08 发布

阅读量264

点赞数 1

分类专栏：前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/silence_ox/article/details/113810121

版权

前端专栏收录该内容

6 篇文章

订阅专栏

1、计算属性的setter和getter

每个计算属性都有setter和getter

一般来说用到setter较少，都不希望数据被改动，所以只用getter时也有缩写

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h2>{{fullName}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'Lebron',
      lastName: 'James'
    },
    computed: {
      fullName: {
        set: function (newValue) {
          const names = newValue.split(' ');
          this.firstName = names[0];
          this.lastName = names[1];
        },
        get: function () {
          return this.firstName + ' ' + this.lastName;
        }
      }
    }
  })
</script>
</body>
</html>

不用setter方法时，便可使用缩写，如下：

fullName: function () {
        return this.firstName + ' ' + this.lastName;
      }

计算属性和methods的对比

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--1、直接拼接：语法过于繁琐-->
  <h2>{{firstName}} {{lastName}}</h2>
  <!--2、使用methods方法-->
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <!--3、通过computed-->
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      firstName: 'Lebron',
      lastName: 'James'
    },
    computed: {
      fullName: function () {
        return this.firstName + ' ' + this.lastName;
      }
    },
    methods: {
      getFullName: function () {
        return this.firstName + ' ' + this.lastName;
      }
    }
  })
</script>
</body>
</html>

在上述代码中，getFullName()方法被调用了四次，而fullName只被调用了一次。
计算属性会进行缓存，如果多次使用只会调用一次。
在多次使用的情况下，使用计算属性的性能更高。

2、v-on的基本使用

作用：绑定事件监听器
缩写：@
这里我们用一个监听按钮的点击事件，来简单看看v-on的使用

  <button v-on:click="counter++">+</button>
  <button @click="counter--">-</button>

v-on参数传递问题

当通过methods中定义方法，以供@click调用时，需要注意参数问题：
情况一：如果该方法不需要额外参数，那么方法后的()可以不添加
但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去。
情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!--1、事件调用的方法没有参数-->
  <button @click="btn1Click()">按钮1</button>
  <button @click="btn1Click">按钮1</button>

  <!--2、在事件定义时，写函数时省略了小括号，但是方法本身是需要参数的-->
  <button @click="btn2Click(123)">按钮2</button>
  <button @click="btn2Click">按钮2</button>

  <!--3、在方法定义时，我们需要event对象，同时又需要其他参数-->
  <button @click="btn3Click">按钮3</button>
  <button @click="btn3Click(123,$event)">按钮3</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      counter: 0,
      EVENT: 'whyCode'
    },
    methods: {
      btn1Click() {
        console.log('btn1Click');
      },
      btn2Click(abc) {
        console.log(abc,'--------');
      },
      btn3Click(abc,event){
        console.log('++++++',abc,event);
      }
    }
  })
</script>
</body>
</html>

在这里插入图片描述

v-on的修饰符

在某些情况下，我们拿到event的目的可能是进行一些事件处理。
Vue提供了修饰符来帮助我们方便的处理一些事件：
1、.stop:调用了event.stopPropagation().
2、.prevent:调用了event.preventDefault().
3、.{keyCode|keyAlias}:只当事件是从特定键触发时才能触发回调.
4、.native:监听组件根元素的原生事件.
5、.once:只触发一次回调.

3、条件判断

v-if、v-else-if、v-else

这三个指令与JavaScript的条件语句if、else、else if类似。
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件。

v-if后面的条件为false时，对应的元素以及其子元素不会渲染。也就是根本不会有对应的标签出现在DOM中。

案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <h2 v-if="score>=90">优秀</h2>
  <h2 v-else-if="score>=80">良好</h2>
  <h2 v-else-if="score>=60">及格</h2>
  <h2 v-else>不及格</h2>

  <h1>{{result}}</h1>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      score: 99
    },
    computed: {
      result() {
        let showMessage = '';
        if (this.score >= 90) {
          showMessage = '优秀';
        }else if (this.score >= 80){
          showMessage = '良好';
        }else if (this.score >= 60){
          showMessage = '及格';
        }else{
          showMessage = '不及格';
        }
        return showMessage;
      }
    }
  })
</script>
</body>
</html>

4、v-show的基本使用

<div id="app">
  <h2 v-if="isShow" id="aaa">{{message}}</h2>
  <h2 v-show="isShow" id="bbb">{{message}}</h2>
</div>

v-if和v-show的区别

v-if:当条件为false时，包含v-if指令的元素根本就不会存在于DOM中，而v-show只是给我们的元素添加了一个行内样式：display:none

开发中如何选择

当需要在显示与隐藏之间切片很频繁时，使用v-show；当只有一次切换时，通过使用v-if。开发中，使用v-if中更多。

5、v-for遍历数组及对象

遍历数组

1）在遍历的过程中，没有使用索引值（下标值）

<ul>
    <li v-for="item in names">{{item}}</li>
  </ul>

2）在遍历的过程中，获取索引值

<ul>
    <li v-for="(item,index) in names">
      {{index+1}}.{{item}}
    </li>
  </ul>

遍历对象

1）在遍历对象的过程中，如果只是获取一个值，那么获取到的是value

 <ul>
    <li v-for="item in info">{{item}}</li>
 </ul>

2）获取key和value的值

  <ul>
    <li v-for="(value,key) in info">{{key}}-{{value}}</li>
  </ul>

3）获取key、value和index的值

   <ul>
    <li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li>
  </ul>

6、v-model的基本使用和原理

表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。
Vue中使用v-model指令来实现表单元素和数据的双向绑定。

v-model原理

v-model其实是一个语法糖，它的背后本质上是包含两个操作：
1、v-bind绑定一个value属性
2、v-on指令给当前元素绑定input事件。

<input type="text" v-model="message">
等同于
<input type="text" :value="message" @input="message = $event.target.value">

v-model与常见标签的案例

下面是v-model与radio结合的案例：

<body>
<div id="app">
  <label for="male">
    <input type="radio" id="male" name="sex" value="男" v-model="sex">男
  </label>
  <label for="female">
    <input type="radio" id="female" name="sex" value="女" v-model="sex">女
  </label>
  <h2>您选择的性别是：{{sex}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      sex: ''
    }
  })
</script>
</body>

下面是v-model和checkbox结合的案例：

<body>
<div id="app">
  <!--1、checkbox单选框-->
  <label for="agree">
    <input type="checkbox" id="agree" v-model="isAgree">同意协议
    <h2>您选择的是:{{isAgree}}</h2>
    <button :disabled="!isAgree"></button>
  </label>

  <!--2、checkbox多选框-->
  <input type="checkbox" value="篮球" v-model="hobbies">篮球
  <input type="checkbox" value="足球" v-model="hobbies">足球
  <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
  <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
  <h2>您的爱好是：{{hobbies}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      isAgree: true, //对应单选框
      hobbies: []  //对应多选框
    }
  })
</script>
</body>

下面是v-model和select结合的案例：

<body>
<div id="app">
  <!--选择单个-->
  <select name="abc" v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="哈密瓜">哈密瓜</option>
    <option value="火龙果">火龙果</option>
    <option value="车厘子">车厘子</option>
  </select>
  <h2>您选择的水果是：{{fruit}}</h2>

  <!--选择多个-->
  <select name="abc" v-model="fruits" multiple>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="哈密瓜">哈密瓜</option>
    <option value="火龙果">火龙果</option>
    <option value="车厘子">车厘子</option>
  </select>
  <h2>您选择的水果是：{{fruits}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      fruit: '苹果',
      fruits: []
    }
  })
</script>
</body>