Vue之Vue的初体验

最新推荐文章于 2024-09-09 16:11:37 发布

U_yong

最新推荐文章于 2024-09-09 16:11:37 发布

阅读量182

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_44756582/article/details/106503574

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Vue的初体验

个人博客

https://www.boycharse.top

Vue系列

上一篇：无
下一篇：02-Vue的插值操作

前言

这个系列的博客是按照我学习vue的顺序来写的。视频教程是b站上coderwhy的vue教程。

Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。（来自官方）

Vue的安装

打开官网，点击起步
在这里插入图片描述
这里可以看到很多种安装方法，因为我们是新手，所以先采用最简单的。

下载开发版本的js文件

下载完成后，我们就可以获得一个vue.js文件，将它添加到我们的项目中并引入就可以使用了

HelloVue

下面我们开始编写我们的第一个Vue程序
在这里插入图片描述
在项目中引入vue文件，同时创建hellovue.html文件

编写以下代码

<!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">
      {{message}}
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const vue = new Vue({
      el: "#app",
      data: {
        message: "hello world",
      },
    });
  </script>
</html>

这里解释以下各部分代码，首先

<script src="../js/vue.js"></script>

这句代码引入了我们刚刚的vue.js文件，这样子我们就可以在项目中使用vue了。
接下来

  <script>
    const vue = new Vue({
      el: "#app",
      data: {
        message: "hello world",
      },
    });
  </script>

这里我们创建了一个Vue对象，同时给Vue的构造器传入了一个参数，这个参数是一个对象类型的。它有一个el属性，我们给它指定了一个字符串的值"#app"，我们可以看到这个写法很像css中的id选择器。接下来是一个data属性，data是一个对象，我们给这个对象指定为一个含有message属性的对象。
接下来我们再看body部分。

    <div id="app">
      {{message}}
    </div>

这是一个div元素，它的id是app，我们可以看到这里和我们刚刚给el赋的值是一样的，都是app，而在div中，有一个{{message}}的值。
我们运行一下程序：
在这里插入图片描述
可以看到这个值并不是刚刚写的{{message}}，而是我们写的js脚步中的vue对象的data对象的message对应的值。换句话说，就是用下图中红箭头指示的字符串去替换了{{message}}

相当于红色箭头所指的message:"hello world"就是{{message}},我们再来做个测试。
先看一下测试前我们网页的效果：
在这里插入图片描述
现在，我在控制台输入vue.message = “你好”;

我们可以看到，hello world变成了你好。
有人会疑惑了，我们刚刚定义的不是：

    const vue = new Vue({
      el: "#app",
      data: {
        message: "hello world",
      },
    });

按道理来说，这个message应该是data的成员，写法应该是vue.data.message，为什么你写vue.message？
这里我们可以这样子认为，data里面的成员被vue做了个代理，全都变成了vue的了，也就是说，写在data里的成员，我们都认为它是vue的成员，而不是data的成员（就是我们直接把它message看成vue的成员，而不是看成data的成员，用的时候就将它当成vue的成员来用，不要当成data的）。

Vue的简单案例

我们写一个简单的案例来体验一下Vue。
我们先写入一下代码:

<!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">
      <h2>0</h2>
      <button>+</button>
      <button>-</button>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script></script>
</html>

在这里插入图片描述
我们希望点击+的时候，它加1，点击-，就减1。
将原代码修改如下：

<!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">
      <h2>{{counter}}</h2>
      <button v-on:click="add">+</button>
      <button v-on:click="sub">-</button>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const vue = new Vue({
      el: "#app",
      data: {
        counter: 0,
      },
      methods: {
        add: function () {
          this.counter++;
        },
        sub: function () {
          this.counter--;
        },
      },
    });
  </script>
</html>

可能很多地方现在看不懂，以后的教程会解释。
先简单解释一下，和第一个程序很类似，我们这里将message改为了counter，并在add和sub中增加counter的值和减少counter的值，然后将这两个方法绑定给两个按钮。要注意,这里在methods中我们的add方法使用了this，这里和data类似，我们将写在methods中看作是vue的成员，而不是methods的成员，也就是vue.add而不是vue.methods.add，那么这里的this指的也是vue对象了，而我们说counter也是vue的属性，所以当我们调用add时，counter的值会加1。界面的值也会跟着改变。

注意

要注意的一点是,我们需要在el指定的元素中使用这种{{}}语法才有效。也就是下面这段代码是有效的：

<!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">
      <h2>{{counter}}</h2>
      <button v-on:click="add">+</button>
      <button v-on:click="sub">-</button>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const vue = new Vue({
      el: "#app",
      data: {
        counter: 0,
      },
      methods: {
        add: function () {
          this.counter++;
        },
        sub: function () {
          this.counter--;
        },
      },
    });
  </script>
</html>

而如果我们把div中id="app"去掉，它就没有效果了，如下：

<!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>
      <h2>{{counter}}</h2>
      <button v-on:click="add">+</button>
      <button v-on:click="sub">-</button>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const vue = new Vue({
      el: "#app",
      data: {
        counter: 0,
      },
      methods: {
        add: function () {
          this.counter++;
        },
        sub: function () {
          this.counter--;
        },
      },
    });
  </script>
</html>

在这里插入图片描述
这里{{counter}}会被原封不动的展示出来
去掉vue中的app同理。