zoukankan      html  css  js  c++  java
  • vue学习01 第一个vue程序

    vue学习01

    第一个vue程序

    1. 引入环境版本,cdn网络引用或者本地js应用
    2. html的结构,一般是div
    3. 创建vue实例
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <!-- 开发环境版本,包含了有帮助的命令行警告 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <div id="app">
            {{message}}
            <h2>{{student.name}} {{student.Email}}</h2>
            <h2>我们家乡的高中:</h2>
            <li>
                <ol>{{campus[0]}}</ol>
                <ol>{{campus[1]}}</ol>
            </li>
        </div>
        
        <script>
            var app = new Vue({
                el:"#app",
                data: {
                    message:"你好,小飞",
                    student:{
                        name:"小飞",
                        Email:"mwf1998@qq.com"
                    },
                    campus:["尉氏三中洧川校区","尉氏三中南校区"],
                }
            })
        </script>
    </body>
    </html>
    

    效果图:

    image-20200925000811621

    代码成就万世基积沙镇海 梦想永在凌云意意气风发
  • 相关阅读:
    hdu-2612-Find a way
    poj-1426-Find The Multiple
    POJ-2251-Dungeon Master
    树的遍历
    前序和中序+后序和中序
    哈夫曼树
    平衡二叉树
    队列和优先队列
    1213
    1163
  • 原文地址:https://www.cnblogs.com/ma1998/p/13727488.html
Copyright © 2011-2022 走看看