• vue 入门实例


    Hello Vue:

    使用Visual Studio Code 创建一个index.html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
    
    <!-- Vue实例的控制区域 -->
    <div id="app">
        <!-- 插值表达式 -->
        <p>{{ msg }}</p>
    </div>
    
    <!-- js部分 -->
    <script src="../lib/vue.js"></script>
    <script>
        // 创建Vue实例,这个new出来的对象就是MVVM中的vm调度者
        var vm = new Vue({
            el: '#app', // element的简写,表示我们当前new的这个Vue实例的区域
            data: {        // data中存放的是el中需要的数据
                msg: 'Hello Vue!'
            }
        });
    </script>
    
    </body>
    </html>

    解释:

    1、首先需要引入Vue.js

    2、声明Vue实例的控制区域,我们可以放在指定div中,或者body体;控制区域下使用的Vue语法就会被Vue识别到

    3、创建Vue实例,这个实例其实就是MVVM中的vm调度者

    4、el: 表示当时Vue实例的控制区域data: 存放当前Vue实例中所需的Model(数据)。其中的msg就是一个Vue的元素。

    5、在指定Vue实例区域下,展示我们已经声明的元素msg,使用:即可展示出来(其中msg是在Vue中声明的元素,如果未声明会报错)

  • 相关阅读:
    Android_自定义适配器
    Android_ListView
    Android_布局
    Android_基础控件
    Android_基础
    PHP框架_ThinkPHP数据库
    PHP框架_ThinkPHP基础
    PHP框架_Smarty_实现登录功能
    PHP框架_Smarty
    PHP文件上传
  • 原文地址:https://www.cnblogs.com/xiaofanblog/p/11435235.html
Copyright © 2020-2023  润新知