vue学习笔记（二）

发表于 | 分类于 ， | 阅读数

事件修饰符

当一个点击事件嵌套在多个标签中时，它会以冒泡方式出发各标签的点击函数。
.stop用来阻止冒泡的发生
1.HTML结构

1
2
3
4
5
6
7
8
<div @click='method1' id='app'>
    <input value='test' type='button' @click='method2'>
</div>
(以上代码,若点击button会出发两个点击函数)
(以下代码,则不会)
<div @click='method1' id='app'>
    <input value='test' type='button' @click.stop='method2'>
</div>

2.Vue实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var vm = new Vue({
    el: "app",
    data: {},
    methods: {
        method1()
        {
            alert('点击了div');
        }
        method2()
        {
            alert('点击了button');
        }
    }
})

.prevent用来阻止默认发生事件,如地址跳转
1.HTML结构

1
2
3
<div id='app'>
    <a href="http://desperadoccy.club:521/" @click.prevent='test'>秘密网址</a>
</div>

2.Vue实例

1
2
3
4
5
6
7
8
9
10
var vm = new Vue({
    el: "app",
    data: {},
    methods: {
        test
        {
            alert('点击了链接,却没有跳转');
        }
    }
})

余下的几个事件修饰符就不一一举例了

  • .stop 阻止冒泡
  • .prevent 阻止默认事件
  • .capture 添加事件侦听器时使用事件捕获模式
  • .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
  • .once 事件只触发一次

    v-model

    v-model用来实现双向绑定,即model和view的绑定
    1.HTML结构
    1
    2
    3
    <div id='app'>
        <input type="text" v-bind:value="msg"> 
    </div>

2.Vue实例

1
2
3
4
5
6
var vm = new Vue({
    el: "app",
    data: {
        msg: 'v-bind可以实现v和m的数据同步'
    }
})

在Vue中使用样式

使用class样式

  1. 数组

    1
    <h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>

  2. 数组中使用三元表达式

    1
    <h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>

  3. 数组中嵌套对象

    1
    <h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>

  4. 直接使用对象

    1
    <h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>

使用内联样式

  1. 直接在元素上通过 :style 的形式，书写样式对象

    1
    <h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>

  2. 将样式对象，定义到 data 中，并直接引用到 :style 中

    • 在data上定义样式：

      1
      2
      3
      data: {
              h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
      }

    • 在元素中，通过属性绑定的形式，将样式对象应用到元素中：

      1
      <h1 :style="h1StyleObj">这是一个善良的H1</h1>

  3. 在 :style 中通过数组，引用多个 data 上的样式对象

    • 在data上定义样式：

      1
      2
      3
      4
      data: {
              h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
              h1StyleObj2: { fontStyle: 'italic' }
      }

    • 在元素中，通过属性绑定的形式，将样式对象应用到元素中：

      1
      <h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>

Vue指令之v-for和key属性

  1. 迭代数组
1
2
3
<ul>
  <li v-for="(item, i) in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li>
</ul>
  1. 迭代对象中的属性
1
2
3
4

<!-- 循环遍历对象身上的属性 -->

   <div v-for="(val, key, i) in userInfo">{{val}} --- {{key}} --- {{i}}</div>
  1. 迭代数字
1
2

<p v-for="i in 10">这是第 {{i}} 个P标签</p>

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

关于鸽子

由于科创相关前端已经完成了，暂时用不到vue了，所以就咕咕咕了！我还会回来的！

教学视频

B站黑马视频: https://www.bilibili.com/video/av50680998