[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>

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-08-20 15:00:21 更:2021-08-20 15:02:37

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/23 9:13:24-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码