1. 犀牛前端部落首页
  2. Vue.js去哪儿

Vue2.5开发去哪儿网-Vue.js基础实现HelloWorld

首先我们打开Vue.js官网,进入到Vue.js安装 。需要注意的是Vue.js是不兼容IE8以下的浏览器的,因为IE8无法模拟 ECMAScript 5 特性。

当我们去学习使用Vue.js的时候,我们希望快速入门Vue.js的使用,因此我们采用使用script标签的方式,引入Vue.js。

我们使用的开发版本,该版本包含了所有的警告的提示信息。

下载好Vue.js开发版本文件后,我们可以创建一个开发目录在该开发目录下包含了两个文件,一个是index.html,一个是我们下载下来的Vue.js文件。

接下来我们在index.html创建一个基本的结构,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello World</title>
</head>
<body>
    <div id="app">
        
    </div>
</body>
</html>

接下来假设我们想在id为app显示文本内容为HelloWorld,原生的方式我们可以这样:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello World</title>
</head>
<body>
    <div id="app">

    </div>
    <script>
        var dom = document.getElementById('app');
        dom.innerHTML = 'HelloWorld';
    </script>
</body>
</html>

同样的功能,使用Vue.js我们可以这样写:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello World</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        {{content}}
    </div>
    <script>

        var app = new Vue({
            el: '#app',//Vue实例负责管理的区域
            data:{
                content: 'HelloWorld'//该数据,可以使用插值表达式调用
            }
        });

    </script>
</body>
</html>

Vue.js和原生DOM最大的区别就是,Vue.js不需要关注DOM的操作了,而是把精力关注在数据的管理上。

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/2710.html

发表评论

登录后才能评论