入门Vue2 02 基本语法和事件绑定

牟泉禹[Dark Cat]

已于 2022-07-29 13:33:51 修改

阅读量191

点赞数

分类专栏：学习笔记文章标签： Vue2

于 2022-07-28 05:27:11 首次发布

BY-牟泉禹/MuQuanyu

本文链接：https://blog.csdn.net/qq_52606908/article/details/126026464

版权

学习笔记专栏收录该内容

387 篇文章 11 订阅

订阅专栏

2.1 基本语法

在这里插入图片描述

v-bind 等被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的DOM 上应用特殊的响应式行为。 在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致。”

Vue 的判断语句
- v-if
- v-else
- v-else-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>No</h1>
</div>

<div id="app2">
    <h1 v-if="type==='A'">A</h1>
    <h1 v-else-if="type==='B'">B</h1>
    <h1 v-else>C</h1>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
<script>
    let vm = new Vue({
       el: "#app",
       data: {
           ok: true
       }
    });

    let vm2 = new Vue({
        el: "#app2",
        data: {
            type: 'A'
        }
    });
</script>
</body>
</html>

在这里插入图片描述
2. Vue 的循环语句

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h1 v-for="a in arr">{{a}}</h1>
  <h1 v-for="item in items">{{item.message}}</h1>
  <h1 v-for="(item, index) in items">下标：{{index}}</h1>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
<script>
  let vm = new Vue({
    el: "#app",
    data: {
      arr: [1,2,3,4,5],
      items: [
        {message: "A"},
        {message: "B"},
        {message: "C"}
      ]
    }
  });
</script>
</body>
</html>

在这里插入图片描述

2.2 事件绑定

首先在学习 Vue 的事件绑定之前，你得先去了解一些常用的事件。

这里推荐 jQuery API 中文文档去查询这些事件。

在这里插入图片描述
格式：v-on:事件名 = "vue设置的方法回调"

类似于Java8 提供的lambada 表达式。es6 箭头函数

箭头函数的 this 指的是父函数的 this 对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <button v-on:click="a">Click Me</button>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
<script>
    var vm = new Vue({
       el: "#app",
       data: {
           message: "Hello,event!"
       },
       methods: {
           a: () => {
               alert(this);
           }
       }
    });
</script>
</body>
</html>

在这里插入图片描述
你会发现它打印的这个 this 类型，是一个 window。也就是说它根本不是 vm 对象。那么 this.message 也肯定取不到值。

在这里插入图片描述
2. 正常的 function 写法

this 指向的就是自己本身的那个对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <button v-on:click="a">Click Me</button>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
<script>
    var vm = new Vue({
       el: "#app",
       data: {
           message: "Hello,event!"
       },
       methods: {
           a: function(){
               alert(this.message);
           }
       }
    });
</script>
</body>
</html>

在这里插入图片描述
这样的话，就肯定能取到我们 vm 里面定义的 data 了。

@click：v-on:click 的缩写形式。

<div id="app">
    <button @click="a">Click Me</button>
</div>

牟泉禹[Dark Cat]

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
入门Vue2 02 基本语法和事件绑定

v-bind等被称为指令。，以表示它们是Vue提供的特殊特性。可能你已经猜到了，在这里，该指令的意思是“将这个元素节点的title特性和Vue实例的message属性保持一致。”
复制链接

扫一扫

专栏目录

入门Vue2 02 基本语法和事件绑定

2.1 基本语法

2.2 事件绑定

“相关推荐”对你有帮助么？