vue => 什么意思_Vue入门教程-0 Vue介绍

最新推荐文章于 2024-07-24 10:11:39 发布

weixin_39771260

最新推荐文章于 2024-07-24 10:11:39 发布

阅读量259

点赞数

官方资源

Vue官方网站 Vue.js

！Vue官方教程介绍 — Vue.js

！！本文的官方视频教程：Vue.js 教程

Vue是什么？

Vue是一个前端网页js文件。里面提供了很多好用的功能，如果你的前端HTML页面包含了这个文件，你就可以非常方便的写很多非常灵活的Web页面。

Vue怎么用？

1 最简单的引入方法：文件包含

Vue既然是一个js文件，当然可以直接在HTML文件里包含，包含就可以用。而且包含的vue.js可是一个在线文件。浏览器会自动下载这个文件加载使用。就像下面这样:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

更多信息参考官方介绍

2 工程化的引入方法：vue-cli命令集

工程化现在是前端的主流开发方法，一行控制台命令，就可以创建一个完整的初始工程；一行命令就可以生成发布的包；一行命令就可以安装一个新的第三方包；

本文主要讲入门，也就是能不用工程的工具就不用工程的工具，我们就从一个HTML文件开始吧。

Vue Hello World

建议先安装Visual Studio Code来编写代码，会自动补全，很方便。

新建一个文本文件，重命名为 Vue Hello World.html（文件名随便取）。

把下面的代码复制粘贴进文本文件里去：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

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

  <script type="text/javascript">
    var app = new Vue({
      el: '#app', //vue会绑定到上面的<div id = 'app'> 这个HTML的元素上
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>

</html>

运行Vue代码

右键用浏览器打开上面的Vue Hello World.html文件，就会看到Vue运行的效果啦！

运行效果

解释：

1 上面代码的第6行包含的在线的vue.js文件，这让我们可以在第11行，第15~20行写Vue的代码。

2 第11行的

{{message}}

表示这里会显示message的值，这个message其实就是第18行的那个message。

3 第15行创建了一个Vue对象，这样Vue就可以工作了。但是还是需要一些初始化的工作来指定Vue的具体特性。

4 第16行的

 el: '#app'

上述代码的意思是将Vue对象绑定到HTML元素app身上。这样Vue就可以操作这个元素。

Vue只操作这一个元素能搞出啥动静吗？可以的。因为Vue假设我们的页面就这一个元素。所有的页面内容都是用这个元素的孩子，孙子节点创造出来的。所以Vue也是一个单元素单页面的程序。

有点不可思议吧！这也很容易理解，因为只有这样，我们写的后面的代码才可以都交给Vue去处理。让Vue接管所有前端页面的内容。

不然的话，哪里有独立于Vue的HTML代码，哪里就无法享受Vue的便捷性。

5 第17行的代码data是固定的，Vue必须要有这个成员。这个成员里的值如果被改变，界面上的内容会自动改变。这个是Vue的核心工作。也就是说，你改了内存数据，页面就会发现你改了（实际上是Vue在不定期扫描，或者说回调函数在执行），从而你就只需要操心内存数据就行了。

程序员就只需要写逻辑读写业务数据就行了。大大提高了生产力。

6 单向绑定、双向绑定

上面的message是单向绑定，也就是说，message在内存里被JavaScript代码修改了以后，界面上可以直接看到修改后的值。Vue还支持双向绑定。

比如你有一个文本输入框，这个文本框，这个文本框的内容可以绑定到一个Vue data的成员，这样你输入文本框，Vue的data里的数据就会变。更有意思的是，如果这个data成员又被绑定到页面其他控件，就会发现联动效果。这就更方便了。

下面的例子就显示了这种方便性：

代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
  <div id="app">
    <p>输入的内容是：{{ message }}</p>
    <input type="text" v-model="message"  placeholder="请输入...."></input>
  </div>

  <script type="text/javascript">
    var app = new Vue({
      el: '#app', //vue会绑定到上面的<div id = 'app'> 这个HTML的元素上
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>
</body>

</html>

试一下吧！

有意见和建议欢迎评论啊。我也很难一下子就写的很好，欢迎批评反馈。

这样可以帮到更多的人。