Vue基础语法复习

最新推荐文章于 2023-03-09 17:00:00 发布

lhrdlp

最新推荐文章于 2023-03-09 17:00:00 发布

阅读量450

点赞数 2

分类专栏： vue

本文链接：https://blog.csdn.net/lhrdlp/article/details/108175217

版权

vue 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

1.插值语法

1.1 Mustache

如何将data中的文本数据，插入到HTML中呢？

可以通过Mustache语法(也就是双大括号)。
Mustache: 胡子/胡须.

我们可以像下面这样来使用，并且数据是响应式的
在这里插入图片描述

1.2 v-once

但是，在某些情况下，我们可能不希望界面随意的跟随改变
这个时候，我们就可以使用一个Vue的指令

v-once:

该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)
该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。

1.3 v-html

某些情况下，我们从服务器请求到的数据本身就是一个HTML代码,如果我们直接通过{{}}来输出，会将HTML代码也一起输出。

但是我们可能希望的是按照HTML格式进行解析，并且显示对应的内容。

如果我们希望解析出HTML展示

可以使用v-html指令

1.4 v-text

v-text作用和Mustache比较相似：都是用于将数据显示在界面中
v-text通常情况下，接受一个string类型

1.5 v-pre

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法。
比如下面的代码：

第一个h2元素中的内容会被编译解析出来对应的内容
第二个h2元素中会直接显示{{message}}

1.6 v-cloak

不需要表达式

用法：

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

示例：

[v-cloak] {
  display: none;
}
<div v-cloak>
  {{ message }}
</div>

不会显示，直到编译结束。
在这里插入图片描述

2.绑定属性 v-bind

2.1 v-bind

前面介绍的几个命令都是将我们的数据插入到模板当中,有时候我们需要的是动态的决定渲染的数据,这个应该怎么办呢??
比如:

比如动态绑定a元素的href属性
比如动态绑定img元素的src属性

这个时候，我们可以使用v-bind指令：
作用：动态绑定属性
缩写：:
预期：any (with argument) | Object(without argument)
参数：attrOrProp (optional)

下面就来具体的分析一下v-bind的使用

v-bind用于绑定一个或者多个属性值,或者想另外一个组件传递props值

那么在平时的开发中,有哪些属性需要动态绑定呢??

比如图片的链接src
网站的链接href
动态绑定一些类,样式等

<!-- 绑定一个 attribute -->
<img v-bind:src="imageSrc">

<!-- 动态 attribute 名 (2.6.0+) -->
<button v-bind:[key]="value"></button>

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 动态 attribute 名缩写 (2.6.0+) -->
<button :[key]="value"></button>

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- 绑定一个全是 attribute 的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- 通过 prop 修饰符绑定 DOM attribute -->
<div v-bind:text-content.prop="text"></div>

<!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component>

<!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component>

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

比如通过Vue实例中的data绑定元素的src和href，代码如下：
在这里插入图片描述

v-bind有一个对应的语法糖，也就是简写方式
在开发中，我们通常会使用语法糖的形式，因为这样更加简洁。
简写方式如下：

2.1.1 v-bind绑定class

很多时候，我们希望动态的来切换class，比如：

当数据为某个状态时，字体显示红色。
当数据另一个状态时，字体显示黑色。

绑定class有两种方式：

对象语法
数组语法

使用对象语法的基本示例:

用法一：直接通过{}绑定一个类
<h2 :class="{'active': isActive}">Hello World</h2>

用法二：也可以通过判断，传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：如果isActive和isLine都为true，那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

使用数组语法示例

绑定方式：数组语法

数组语法的含义是:class后面跟的是一个数组。

用法一：直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>

用法二：也可以传入多个值
<h2 :class=“[‘active’, 'line']">Hello World</h2>

用法三：和普通的类同时存在，并不冲突
注：会有title/active/line三个类
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>

用法四：如果过于复杂，可以放在一个methods或者computed中
注：classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

在开发中个人更推荐使用对象语法.

动态绑定类名小例子

在这里插入图片描述
有如上图所示的一个列表,我们需要实现的是默认情况下第一个的颜色为橘色,点击哪个哪个的颜色就变成橘色

  <style>
    .actived{
      color : orangered
    }
  </style>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
  <div id="app">
    <ul v-for = '(item,index) in movies'>
      <li :class = '{actived :currentIndex === index}' @click = 'changeColor(index)'>{{item}}</li>
    </ul>
  </div>
  <script>
    const app = new Vue({
      el : '#app',
      data : {
        movies : ['海蒂和爷爷','小鞋子','亲爱的','被光抓走的人'],
        currentIndex : 0,
      },
      methods: {
        changeColor(index) {
          this.currentIndex = index;
        }
      }
    })
  </script>

这里有一个很简单第一次接触却不容易想到的思路,在我们的data中定义一个变量currentIndex默认为0 ,默认情况下index也为0 ,所以就可以设置默认情况下第一个就会显示橘色,然后设置了点击事件,点击的时候把当前项目的下标传过去,然后给我们自己的currentIndex重新赋值,这样就可以实现我们想要的效果了.
在这里插入图片描述

2.1.2 v-bind绑定style

我们可以利用v-bind:style来绑定一些CSS内联样式。

在写CSS属性名的时候，比如font-size
我们可以使用驼峰式 (camelCase) fontSize 或短横线分隔 (kebab-case，记得用单引号括起来) ‘font-size’

绑定class有两种方式：

对象语法
数组语法

绑定方式一对象语法示例

:style="{color: currentColor, fontSize: fontSize + 'px'}"
//style后面跟的是一个对象类型
//对象的key是CSS属性名称
//对象的value是具体赋的值，值可以来自于data中的属性

绑定方式二数组语法示例

<div v-bind:style="[baseStyles, overridingStyles]"></div>
//style后面跟的是一个数组类型
//多个值以，分割即可

3.事件监听 v-on

在前端开发中，我们需要经常和用于交互。

这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等
在Vue中如何监听事件呢？使用v-on指令

v-on介绍
作用：绑定事件监听器
缩写：@
预期：Function | Inline Statement | Object
参数：event

这里，我们用一个监听按钮的点击事件，来简单看看v-on的使用

下面的代码中，我们使用了v-on:click="counter++”
另外，我们可以将事件指向一个在methods中定义的函数

<div id="app">
   <h2>{{counter}}</h2>
   <button v-on:click = 'increament'>点击+1</button>
   <button v-on:click = 'discreament'>点击-1</button>
  </div>
  <script>
    const app = new Vue({
      el : '#app',
      data : {
        counter : 1,
      },
      methods: {
        increament() {
          this.counter += 1;
        },
        discreament() {
          this.counter -= 1;
        }
      }
    })
  </script>

在这里插入图片描述

3.1 v-on 的语法糖

v-on:click可以写成@click
在这里插入图片描述

3.2 事件修饰符

在某些情况下，我们拿到event的目的可能是进行一些事件处理。
Vue提供了修饰符来帮助我们方便的处理一些事件：

.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

4.条件判断

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

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

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

我们来做一个简单的小案例：

用户再登录时，可以切换使用用户账号登录还是邮箱地址登录。
类似如下情景：

<div id="app">
    <span v-if="isUser">
      <label for="username">用户账号</label>
      <input type="text" id="username" placeholder="用户账号">
    </span>
    <span v-else>
      <label for="email">用户邮箱</label>
      <input type="text" id="email" placeholder="用户邮箱">
    </span>
    <button @click="isUser = !isUser">切换类型</button>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isUser: true
      },
    })
  </script>

小问题：

如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。
但是按道理讲，我们应该切换到另外一个input元素中了。
在另一个input元素中，我们并没有输入内容。
为什么会出现这个问题呢？

问题解答：

这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。

解决方案：

如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key
并且我们需要保证key的不同

在这里插入图片描述

4.2 v-show

v-show的用法和v-if非常相似，也用于决定一个元素是否渲染：

v-if和v-show对比

v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？
v-if当条件为false时，压根不会有对应的元素在DOM中。
v-show当条件为false时，仅仅是将元素的display属性设置为none而已。

开发中如何选择呢？

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

<div id="app">
    <button @click = 'change'>点击切换隐藏显示</button>
    <h2 v-show = 'isShow'>我可以显示也可以隐藏哦</h2>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        isShow: true
      },
      methods: {
        change() {
          this.isShow = !this.isShow;
        }
      }
    })
  </script>

在这里插入图片描述

5. 循环遍历 v-for

5.1 v-for遍历数组

当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。
v-for的语法类似于JavaScript中的for循环。

格式如下：item in items的形式。

我们来看一个简单的案例：
如果在遍历的过程中不需要使用索引值

v-for="movie in movies"

依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie

如果在遍历的过程中，我们需要拿到元素在数组中的索引值呢？
语法格式：

v-for=(item, index) in items

其中的index就代表了取出的item在原数组的索引值。

 <div id="app">
    <ul v-for = 'item in movies'>
      <li>{{item}}</li>
    </ul>
    -------------------
    <ul v-for = '(item,index) in movies'>
      <li>{{index+1}}.{{item}}</li>
    </ul>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        movies : ['只有芸知道','大话西游','幸福来敲门','疯犬少年的天空']
      },
      methods: {
        change() {
          this.isShow = !this.isShow;
        }
      }
    })
  </script>

在这里插入图片描述

5.2 v-for遍历对象

v-for可以用户遍历对象：

比如某个对象中存储着你的个人信息，我们希望以列表的形式显示出来。

  <div id="app">
    <ul >
      <li v-for = '(value,key,index) in info'>
        {{index}} {{key}}-{{value}}
      </li>
    </ul>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        info : {
          name : 'why',
          age : 18,
          sex : '女'
        }
      },
    })
  </script>

在这里插入图片描述

5.3 组件的key属性

官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性。
为什么需要这个key属性呢（了解）？

这个其实和Vue的虚拟DOM的Diff算法有关系。
这里我们借用React’s diff algorithm中的一张图来简单说明一下：

当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点

我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的。
即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？

所以我们需要使用key来给每个节点做一个唯一标识

Diff算法就可以正确的识别此节点
找到正确的位置区插入新的节点。

所以一句话，key的作用主要是为了高效的更新虚拟DOM。

6.表单绑定 v-model

6.1 v-model的基本使用

表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。

Vue中使用v-model指令来实现表单元素和数据的双向绑定.

看下面的示例代码:

<div id="app">
    <input type="text" v-model = 'message'>
    <h2>{{message}}</h2>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message :' '
      },
    })
  </script>

在这里插入图片描述

案例的解析：

当我们在输入框输入内容时
因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变。
当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变。

所以，通过v-model实现了双向的绑定。

6.2 v-model的实现原理

v-model其实是一个语法糖，它的背后本质上是包含两个操作：

v-bind绑定一个value属性
v-on指令给当前元素绑定input事件

也就是说下面的代码等同于下面的代码:

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

6.3 v-model radio

存在多个单选框

<div id="app">
    <label for="male">
      <input type="radio" id="male" value="男" v-model="sex">男
    </label>
    <label for="female">
      <input type="radio" id="female" value="女" v-model="sex">女
    </label>
    <h2>您选择的性别是: {{sex}}</h2>
  </div>
  <script>
  //默认情况下显示女性
    const app = new Vue({
      el: '#app',
      data: {
        sex: '女'
      },
    })
  </script>

6.4 v-model checkbox

选框分为两种情况：单个勾选框和多个勾选框

单个勾选框：
- v-model即为布尔值。
- 此时input的value并不影响v-model的值。
多个复选框：
- 当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。
- 当选中某一个时，就会将input的value添加到数组中。

单选框案例:
我们经常会见到一种的情况,那就是在注册软件时需要勾选同意用户协议,只有同意了,才能点击下一步,否则不可以进行下一步,下面就展示一个简单的类似功能的案例

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

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

在这里插入图片描述
多选框案例:

<div id='app'>
    <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>

    <label v-for="item in originHobbies" :for="item">
      <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
    </label>
  </div>

  <script>
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊',
        isAgree: false, // 单选框
        hobbies: [], // 多选框,
        originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
      }
    })
  </script>

在这里插入图片描述

6.5 v-model：select

和checkbox一样，select也分单选和多选两种情况。
单选：只能选中一个值。

v-model绑定的是一个值。
当我们选中option中的一个时，会将它对应的value赋值到fruit中

多选：可以选中多个值。

v-model绑定的是一个数组。
当选中多个值时，就会将选中的option对应的value添加到数组fruits中

<div id="app">
  <!--1.选择一个-->
  <select name="abc" v-model="fruit">
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
  </select>
  <h2>您选择的水果是: {{fruit}}</h2>

  <!--2.选择多个-->
  <select name="abc" v-model="fruits" multiple>
    <option value="苹果">苹果</option>
    <option value="香蕉">香蕉</option>
    <option value="榴莲">榴莲</option>
    <option value="葡萄">葡萄</option>
  </select>
  <h2>您选择的水果是: {{fruits}}</h2>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      fruit: '香蕉',
      fruits: []
    }
  })
</script>

6.6 修饰符

lazy修饰符：

默认情况下，v-model默认是在input事件中同步输入框的数据的。

也就是说，一旦有数据发生改变对应的data中的数据就会自动发生改变。

lazy修饰符可以让数据在失去焦点或者回车时才会更新：

number修饰符：

默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。

但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。

number修饰符可以让在输入框中输入的内容自动转成数字类型

trim修饰符：

如果输入的内容首尾有很多空格，通常我们希望将其去除

trim修饰符可以过滤内容左右两边的空格

<div id="app">
  <!--1.修饰符: lazy-->
  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>


  <!--2.修饰符: number-->
  <input type="number" v-model.number="age">
  <h2>{{age}}-{{typeof age}}</h2>

  <!--3.修饰符: trim-->
  <input type="text" v-model.trim="name">
  <h2>您输入的名字:{{name}}</h2>
</div>

<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊',
      age: 0,
      name: ''
    }
  })
</script>