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

    代码成就万世基积沙镇海 梦想永在凌云意意气风发
  • 相关阅读:
    Python内置函数(22)——list
    Git在不同环境换行符设置
    Spring之AOP
    Spring之IOC
    Spring--框架简介
    git-远程协作
    git-SSH连接配置
    git-本地操作
    git简介
    浅谈Sql各种join的用法
  • 原文地址:https://www.cnblogs.com/ma1998/p/13727488.html
Copyright © 2011-2022 走看看