Vue学习笔记(一) 入门

1、安装

（1）通过 <script> 引入

  • 在学习过程中，可以使用最新的版本：
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
  • 在开发环境中，最好使用明确的版本（2.6.10 是目前最新的稳定版）：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
  • 在生产环境中，建议使用压缩的版本：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>

开发版本和生产版本的区别在于，开发版本包含完整的警告，而生产版本具有更快的速度

（2）通过 NPM 安装

在构建大型应用时，推荐使用 NPM 安装（在此之前，请确保你的电脑已配置好相关环境）：

> npm install vue

同时，Vue 还提供了一个官方 cli，可以快速搭建繁杂的脚手架

> npm install vue-cli

但是，由于新手刚刚入门的时候并不推荐使用 cli，所以这里先不作具体介绍

2、入门

每个 Vue 应用都是通过 new Vue() 创建的一个 Vue 实例开始的

var vm = new Vue({
  // 选项
})

一个简单的例子如下：

在没有任何说明的情况下，如果你能读懂下面的代码，那么这篇文章对你的帮助可能不大

但是如果你对代码中的某些地方感到疑惑，那么可以看看下面的注释帮助理解

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <p>{{ message }}</p>
        <p>{{ reversedMessage() }}</p>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                message: "Hello Vue"
            },
            methods: {
                reversedMessage: function () {
                    return this.message.split('').reverse().join('')
                }
            }
        })
    </script>
</body>

</html>

下面是添加注释之后的代码：

<!DOCTYPE html>
<html>

<head>
    <title>Demo</title>
    <!-- 引入 Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <!-- 通过 Mustache 语法（双大括号语法）实现数据绑定 -->
        <!-- 显示 message 数据 -->
        <p>{{ message }}</p>
        <!-- 显示 reversedMessage 函数的返回结果 -->
        <p>{{ reversedMessage() }}</p>
    </div>
    <script type="text/javascript">
        // 创建 Vue 实例，这有三个参数，分别是 el、data 和 methods
        var vm = new Vue({
            // el 是 Vue 实例的挂载目标，既可以是 CSS 选择器，也可以是 HTMLElement 实例
            // 这里的 '#app' 是 CSS 选择器，表明将 Vue 实例与 id 为 app 的 HTML 元素绑定起来
            // 以后的所有操作全部在指定的 HTML 元素内，HTML 元素外不受影响
            el: '#app',
            // data 是 Vue 实例的数据对象，既可以是 Object 类型，也可以是 Function 类型
            // 这里的 data 就是一个对象，而且一般而言 data 都应该是一个纯粹的对象
            // 但是在定义组件时，data 必须声明为返回一个初始数据对象的函数
            // 因为组件会被用来创建多个实例，若 data 为 Object，则所有实例将会共享同一个数据对象
            data: {
                message: "Hello Vue"
            },
            // methods 是 Vue 实例的方法，它可以是一个对象，并且对象中的每一项都是一个 method
            // 一般而言，方法中的 this 会自动绑定为 Vue 实例
            // 但是当使用箭头函数时，this 不会绑定为 Vue 实例，因为 this 绑定了父级作用域的上下文
            methods: {
                reversedMessage: function () {
                    // 由于 this 绑定为 Vue 实例，所以可以直接访问 data 对象中的属性 message
                    return this.message.split('').reverse().join('')
                }
            }
        })
        // Vue 实例代理 data 对象上的所有属性，也就是说我们可以通过 `vm.message` 进行访问
        console.log(vm.message)
        // methods 中的方法也混入到 Vue 实例中，即我们可以通过 `vm.reversedMessage()` 访问
        console.log(vm.reversedMessage())
    </script>
</body>

</html>

【 阅读更多 Vue 系列文章，请看 Vue学习笔记 】

posted @ 2019-07-17 09:11  半虹  阅读(239)  评论(0)  编辑  收藏  举报