快速入门Vue.js

Posted 2020-09-26

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了快速入门Vue.js相关的知识，希望对你有一定的参考价值。

了解一门编程语言，Hello World是我们的罗马之路。

这段代码在画面上输出"Hello World!"。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <!--这是我们的View-->
        <div id="app">
            {{ message }}
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        // 这是我们的Model
        var exampleData = {
            message: ‘Hello World!‘
        }

        // 创建一个 Vue 实例或 "ViewModel"
        // 它连接 View 与 Model
        new Vue({
            el: ‘#app‘,
            data: exampleData
        })
    </script>
</html>

使用Vue的过程就是定义MVVM各个组成部分的过程的过程。

定义View
定义Model
创建一个Vue实例或"ViewModel"，它用于连接View和Model

在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。

在这个示例中，选项对象的el属性指向View，el: ‘#app‘表示该Vue实例将挂载到<div id="app">...</div>这个元素；data属性指向Model，data: exampleData表示我们的Model是exampleData对象。
Vue.js有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时{{ message }}会被数据对象的message属性替换，所以页面上会输出"Hello World!"。

以上是关于快速入门Vue.js的主要内容，如果未能解决你的问题，请参考以下文章

vue.js快速入门~组件入门~

Vue.js——60分钟组件快速入门

Vue.js—组件快速入门以及Vue路由实例应用

Vue.js——60分钟组件快速入门（上篇）