Vue - Hello World 初体验-蒲公英云

Vue - Hello World 初体验

推荐：Vue汇总

Vue - Hello World 初体验

介绍

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

尝试Vue最简单的方法是使用Hello World例子。可以创建一个.html文件，然后通过如下方式引入Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者：

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

不推荐新手直接使用vue-cli，尤其是在你还不熟悉基于Node.js的构建工具时。

上面是摘自官网的原话。

代码

如果不用Vue来实现Hello World，即用原生Javascript来实现，可以这样来写：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Hello World</title>
    </head>
    <body>
        <div id="div"></div>
    </body>
</html>
<script> var dom = document.getElementById('div'); dom.innerHTML = 'Hello World'; // 或者 // dom.innerText = 'Hello World'; </script>

就是通过DOM来进行操作，innerHTML和innerText的区别自行百度。

使用Vue来实现，可以这样写：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Hello World</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="div">{
   {text}}</div>
    </body>
</html>
<script> var vue = new Vue({ el: '#div', data: { text: 'Hello World' } }) </script>

开一下VPN将Vue下载下来。

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

由下图可知，使用Vue来实现是成功了。
在这里插入图片描述
现在来介绍一下el属性。

类型：string或者Element。
限制：只在用new创建实例时生效。
详细：提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标。可以是CSS选择器，也可以是一个HTML Element实例。

可以是CSS选择器，即可以通过id（上面代码就是通过id来进行挂载）或者class来进行挂载，也可以是一个HTML Element实例，即通过标签名来进行挂载。

通过class来进行挂载。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Hello World</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div class="div">{
   {text}}</div>
    </body>
</html>
<script> var vue = new Vue({ el: '.div', data: { text: 'Hello World' } }) </script>

同样是可以的。
在这里插入图片描述
通过标签名来进行挂载。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Hello World</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div>{
   {text}}</div>
    </body>
</html>
<script> var vue = new Vue({ el: 'div', data: { text: 'Hello World' } }) </script>

同样是可以的。
在这里插入图片描述

但其实还是推荐通过id来进行挂载，因为每一个标签的id是唯一的，其他的两种方式对应的标签都有可能不唯一，这样可能会造成意想不到的后果。

而这里的data属性是一个对象，里面可以定义一些键值对key:value，然后通过{ {key}}这种方式就可以使用这个键值对了，其实还有很多种方式可以使用这些键值对（不同的应用场景下），这里先不介绍，之后的篇章用到了再进行介绍。

这里还没有看到Vue的方便之处，如果需要显示Hello World5秒后再显示Hello Kaven，用原生Javascript可以这样写：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Hello World</title>
    </head>
    <body>
        <div id="div">{
   {text}}</div>
    </body>
</html>
<script> var dom = document.getElementById('div'); dom.innerHTML = 'Hello World'; setTimeout(function () { dom.innerHTML = 'Hello Kaven'; },5000); </script>

很显然这样是正确的。
在这里插入图片描述

5秒后。
在这里插入图片描述
而用Vue来实现，不需要直接操作DOM：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Hello World</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="div">{
   {text}}</div>
    </body>
</html>
<script> var vue = new Vue({ el: '#div', data: { text: 'Hello World' } }) setTimeout(function () { vue.$data.text = 'Hello Kaven'; },5000); </script>