课程链接

【黑马程序员vue前端基础教程-4个小时带你快速入门vue】

环境

  • Html 环境: Vscode + Live Server 插件

  • 在 Vscode 中新建一个 .html 文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!DOCTYPE html>               <!--约束，声明-->
    <html lang="zh_CN">           <!--html标签表示html的开始--><!--lang="zh_CN"表示中文-->
    <head>                        <!-- 表示头部信息，一般包含三部分内容，title标签，css样式，js代码 -->
        <meta charset="UTF-8">    <!--表示当前页面UTF-8字符集-->
        <title>Title</title>      <!--表示标题，标签页上显示的文字-->
    </head>
    <body>                        <!--body标签是整个html页面显示的主题内容-->
        Hello, HTML
    </body>
    </html>

    右键 Open with Live Server, 将会跳转到默认浏览器中运行 Html 代码

  • Tips: 使用 Windows 的分屏功能, 将 Vscode 和 Chrome 左右分屏可以更方便查看运行结果.

第一个 Vue 程序

vue2 起步

  • 引入 Vue
    创建一个 .html 文件, 在其中插入

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

  • 第一个 Vue 程序

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <!DOCTYPE html>
    <html lang="zh_CN">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>

    <body>
      <!--div是文本标签-->
      <div id="app">
        {{ message }}
      </div>

      <!-- 引入Vue开发环境版本 -->
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

      <!--使用script标签插入js代码-->
      <script>
        // new 一个 Vue 的实例
        var app = new Vue({
          el: '#app',   // el 是挂载点, # 是id选择器
          data: {
            message: 'Hello Vue!'
          }
        })
      </script>
    </body>
    </html>

挂载点和选择器

上面的第一个 Vue 程序中包含了一段 Javascript 程序

1
2
3
4
5
6
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

其中

1
el: '#app',

el 是 element 的缩写, 被称为 挂载点, 用于设置 Vue 实例挂载(管理)的元素, 标识 Vue 实例的作用范围.
# 是 id 选择器, #app 是指 id='app' 的元素(标签块).

除了 id 选择器, 还有

  • 类选择器: 点+类名
    类选择器通过标签的 class 属性来标识元素

    注意这里的 “类” 指的是分类, 不是面向对象中的 “类”

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    ...
    <body>
      <!--类名为app的元素-->
      <div class="app">
        {{ message }}
      </div>
      ...
      <script>
        var app = new Vue({
          //类选择器
          el: '.app',
          data: {
            message: 'Hello Vue!'
          }
        })
      </script>
    </body>
    ...

  • 标签选择器: 标签名
    标签选择器通过标签名来标识元素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    ...
    <body>
      <!--标签为div的元素-->
      <div>
        {{ message }}
      </div>
      
      <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

      <script>
        var app = new Vue({
          //标签选择器
          el: 'div',
          data: {
            message: 'Hello Vue!'
          }
        })
      </script>
    </body>
    ...

三种选择器中最常用的是 id 选择器, 因为通常 id 都是唯一表示的, 而类选择器和标签选择器都会标识出多个元素, 会造成语义不清晰.

注意事项
挂载元素可以是大部分 html 标签, 但是注意两点:

  • 挂载元素只能是双标签, 不能是单标签, 因为只有双标签中间可以嵌套内容(代码), 单标签不可以.

  • 不能挂载在 <html>...</html> 和 <body>...</body> 标签上, 否则没有效果, 并且会收到一个 Warning
    在 Chrome 浏览器中, 按 F12 选择 Console 可以查看 Warning 提示

    1
    [Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead.

数据对象

Vue 实例中另一个重要的属性是 data, 即 数据对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
...
<body>
  <div>
    <!--使用 {{}} 双花括号引用数据变量-->
    字符串: {{ message }} <br/>
    对象: {{student}} <br/>
    数组: {{fruits}} <br/>
    <!--使用 . 点访问对象属性-->
    对象属性: {{ student.name }}, {{ student.number }} <br/>
    <!--使用 [] 方括号访问数组元素, 下标从 0 开始-->
    数组元素: {{ fruits[0] }}, {{fruits[1]}}, {{fruits[2]}}
  </div>

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

  <script>
    var app = new Vue({
      el: 'div',
      data: {
        //字符串
        message: 'Hello Vue!',
        //对象
        student: {
          name: "xiaophai",
          number: "12345678"
        },
        //数组
        fruits: ["apple", "orange", "pear"]
      }
    })
  </script>
</body>
</html>
1
2
3
4
5
6
<!--运行结果-->
字符串: Hello Vue!
对象: { "name": "xiaophai", "number": "12345678" }
数组: [ "apple", "orange", "pear" ]
对象属性: xiaophai, 12345678
数组元素: apple, orange, pear
  • 使用 . 点访问对象的属性
  • 使用 [] 访问数组的元素, 下标从 [0] 开始

安装配置 Nodejs

安装 Nodejs
nodejs/download
使用下面命令查看是否安装成功, 以及环境变量配置正确

1
2
node -v
npm -v

运行第一个JavaScript程序
Vscode新建 xxx.js 文件, 输入以下代码并运行 (使用 Code Runner 插件, 或者按 F5)

1
(function name(params) {console.log("Hello world")})();

配置 npm 淘宝镜像源
使用下面命令可以查看当前 npm 下载源

1
npm config get registry

Note: 使用 npm config list 命令可以查看更多参数

更改为 Taobao 镜像源

  • 临时换源

    1
    npm --registry https://registry.npm.taobao.org install xxx

  • 设置默认源

    1
    npm config set registry https://registry.npm.taobao.org

安装 vue
Creating a Vue Application

使用 npm info vue 命令可以查看 vue 包的信息

使用 npm install vue -g 安装 vue, -g 参数表示全局安装

使用 npm list vue 可以查看 vue 的版本, 用于检查是否安装成功