前言

用Vue已经有一段时间，但是之前因为赶项目，所以只是大概学了一下Vue，便开始开发了。在工作中总是会遇到各种问题，最近打算系统的学习一下Vue, 把Vue学习笔记都记录在这里。

Vue-Hello World

  • Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
  • vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

安装Vue

Vue的安装主要有2种形式，一种是通过CDN的方式引用，另一种则是通过下载对应的文件，然后引用。这里我用的是第二种形式。

进入官网https://cn.vuejs.org/v2/guide/installation.html

选择开发版本

把解压好的文件，放进项目文件夹的js文件夹中。

新建一个HTML文件，并且在里面引用

1
<script type="text/javascript" src="js/vue.js"></script>

Hello World

在HTML文件的body块中，创建一个标签,用于填充数据

1
2
3
<div id="app">
    <div>{{msg}}</div>
</div>

使用vm的语法做功能,并且把Vue提供的数据填充到标签里面

1
2
3
4
5
var vm = new Vue({
        el: '#app',
        data: {
            msg: "Hello World"
    }})

打开网页，查看结果

完整的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app">
    <div>{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">

    var vm = new Vue({
        el: '#app',
        data: {
            msg: "Hello World"
    }})

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