vue新建文件夹_从零单排vue第一课--Hello World

最新推荐文章于 2024-04-12 17:08:10 发布

weixin_39633134

最新推荐文章于 2024-04-12 17:08:10 发布

阅读量659

点赞数

文章标签： vue新建文件夹

写在前面的话

Vue的学习需要大家有一点HTML和JavaScript的基础，不需要太深入，只要达到入门的水平即可。JavaScript主要要学习基础部分和面向对象部分，建议大家看看W3CSchool的教程或者阮一峰的教程。这是我的学习笔记，本人才疏学浅，只为与大家分享，学习笔记主要是按照vue的官方文档以及慕课网购买的Dell老师的仿去哪儿网的vue课程做的记录。

W3cschool：https://www.w3school.com.cn/js/index.asp

阮一峰JavaScript教程：http://javascript.ruanyifeng.com/

阮一峰ES6新特性教程：http://es6.ruanyifeng.com/

另外，编辑器我使用的是HBuildX和Sublime Text3

上手第一个Vue程序--Hello World

1.安装vue

https://cn.vuejs.org/v2/guide/installation.html

在vue官网里，可以看到安装方法有很多种。初学者先通过script的方式引入vue，下载开发版vue，并跟随我，在电脑中新建一个vue文件夹，把下载好的vue.js文件拷贝到vue文件夹中，新建一个html文件。

2.编写代码

在html文件中编写如下代码：

 1<!DOCTYPE html>
 2<html lang="en">
 3    <head>
 4        <meta charset="utf-8">
 5        <title>Hello World</title>
 6    <script src="vue.js"></script>
 7    </head>
 8    <body>
 9    <div id="app">
10      {{content}}
11    </div>
12      <script>
13        var app = new Vue({
14          el: '#app',
15          data: {
16            content: 'hello world'
17          }
18        })
19      </script>
20    </body>
21</html>

运行结果：

在浏览器中显示hello world

代码解析：

第6行代码，使用script标签引入vue.js
第9-11行代码，创建了一个id为app的div标签
第12-19行代码，在script标签内，写了一段vue语法的代码。代码的意思是，创建了一个Vue实例对象，该对象中有两个属性：el和data。el属性的作用是将vue绑定到id为app的DOM中，data的作用是定义了一个content字符串，内容为hello world。
回头看9-11行代码，有一个{{content}}，这就意味着将vue中的content内容输出到这里，将数据绑定到dom中了。如果content内容改变，这里输出也会改变。

与传统JS代码的区别？

1 var dom = document.getElementById('app');
2 dom.innerHtml = 'hello world'

传统的js代码总是在操作DOM
而vue呢？封装了抽象了DOM操作，让你只关注视图和数据，以及如何绑定它们

weixin_39633134

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue新建文件夹_从零单排vue第一课--Hello World

写在前面的话Vue的学习需要大家有一点HTML和JavaScript的基础，不需要太深入，只要达到入门的水平即可。JavaScript主要要学习基础部分和面向对象部分，建议大家看看W3CSchool的教程或者阮一峰的教程。这是我的学习笔记，本人才疏学浅，只为与大家分享，学习笔记主要是按照vue的官方文档以及慕课网购买的Dell老师的仿去哪儿网的vue课程做的记录。W3cschool：https:/...
复制链接

扫一扫