Vue学习笔记(一) 入门

时间 2019-11-12

标签 vue 学习笔记入门繁體版

原文原文链接

一、安装

（1）经过 <script> 引入javascript

在学习过程当中，可使用最新的版本：

<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>

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

（2）经过 NPM 安装vue

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

> npm install vue

同时，Vue 还提供了一个官方 cli，能够快速搭建繁杂的脚手架vue-cli

> npm install vue-cli

可是，因为新手刚刚入门的时候并不推荐使用 cli，因此这里先不做具体介绍shell

二、入门

每一个 Vue 应用都是经过 new Vue() 建立的一个 Vue 实例开始的npm

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

一个简单的例子以下：app

在没有任何说明的状况下，若是你能读懂下面的代码，那么这篇文章对你的帮助可能不大函数

可是若是你对代码中的某些地方感到疑惑，那么能够看看下面的注释帮助理解学习

<!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学习笔记】