[JavaScript知识库] 学习Vue的第一天

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 学习Vue的第一天 -> 正文阅读

[JavaScript知识库]学习Vue的第一天

vue程序步骤

<div id="app">
    <!-- 大括号表示插值表达式，模板的语法 -->
       {{ message }} 
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            // #id选择器，选择id为app的元素
            data:{
                message:"hello Vue!"
            }
        })
    </script>

创建vue实例对象，设置el属性和data属性
用简洁的模板语法把数据渲染到页面上去

开发环境版本，包含了有帮助的命令行警告

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

el挂载点

<body>
    {{message}}
    <div id="app" class="app">
    <!-- 大括号表示插值表达式，模板的语法 -->
       {{ message }} 
       <span>
           {{ message }}
       </span>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            // #id选择器，选择id为app的元素
            // el:".app",
            //类选择器
            // el:"div",
            //标签选择器
            data:{
                message:"hello Vue!"
            }
        })
    </script>
</body>

data：数据对象

    <div id="app">
    <!-- 大括号表示插值表达式，模板的语法 -->
       {{ message }} 
       <h2>
           {{ school.name }} {{ school.mobile }}
       </h2>
       <ul>
           <li>{{ campus[0] }}</li>
           <li>{{ campus[3] }}</li>
       </ul>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            // #id选择器，选择id为app的元素
            data:{
                message:"你好小黑！",
                school:{
                    name:"黑马程序员",
                    mobile:"400-618-9090"
                },
                campus:["北京校区","上海校区","广州校区","深圳校区"]
            }
        })
    </script>