快速入门Vue.js

2021-07-04 00:06

阅读:553

标签:实例   app   mvvm   替换   example   log   钩子   输出   快速入门   

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

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

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

    body>
        
        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各个组成部分的过程的过程。

  1. 定义View
  2. 定义Model
  3. 创建一个Vue实例或"ViewModel",它用于连接View和Model

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

在这个示例中,选项对象el属性指向View,el: ‘#app‘表示该Vue实例将挂载到

...
这个元素;data属性指向Model,data: exampleData表示我们的Model是exampleData对象。
Vue.js有多种数据绑定的语法,最基础的形式是文本插值,使用一对大括号语法,在运行时{{ message }}会被数据对象的message属性替换,所以页面上会输出"Hello World!"。

快速入门Vue.js

标签:实例   app   mvvm   替换   example   log   钩子   输出   快速入门   

原文地址:http://www.cnblogs.com/ls1949/p/7122911.html


评论


亲,登录后才可以留言!