第一个Vue程序 el挂载点 data数据对象

最新推荐文章于 2024-07-25 09:51:39 发布

SunACong

最新推荐文章于 2024-07-25 09:51:39 发布

阅读量729

点赞数

分类专栏： Vue.js 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/qq_44808710/article/details/122637122

版权

Vue.js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文章目录

第一个Vue程序
el挂载点
data属性(数据对象)

第一个Vue程序

第一步：引入vue.js
<script src="./lib/vue.js"></script>
第二步：添加<div>标签
<div id="app">
   	{{message}}
</div>
第三步：挂载在Vue上
<script>
    var app = new Vue({
        el:'#app',
        data:{
            message:'奥特曼'
        }
    })
</script>

el挂载点

作用：设置Vue实例挂载（管理）的元素

vue实例的作用范围

Vue会管理el选项命中的元素及其内部的后代元素

是否可以选择其他选择器

可以选择，但是建议使用id选择器，id选择器是唯一的，class和标签都不具备唯一性

是否可以设置其他dom元素

可以使用其他标签，但是不能使用html和body标签

<body>
    {{message}}
    <div id="app" class="app">
        {{message}}
        <span>
            {{message}}
        </span>
    </div>
    <script>
        var app = new Vue({
            el:'#app', //id选择器
            // el:'.app', //class选择器
            // el:'div', //标签选择器
            data:{
                message:'奥特曼'
            }
        })
    </script>
</body>

效果图

在这里插入图片描述

data属性(数据对象)

Vue中用到的数据定义在data中
data中可以写复杂数据类型
渲染复杂类型数据是，遵守js的语法即可

<div id="app">
        {{message}}
        <h2>
            {{school.name}}----{{school.mobile}}
        </h2>
        <ul>
            <li> {{campus[0]}} </li> 
            <li> {{campus[1]}} </li> 
            <li> {{campus[2]}} </li> 
            <li> {{campus[3]}} </li> 
        </ul>
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'字符串',
                school:{
                    name:'黑马程序员',
                    mobile:'400-618-9090',
                },
                campus:["北京校区","上海校区","广州校区","深圳校区"]
                
            }
        })
    </script>

效果图

SunACong

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
第一个Vue程序 el挂载点 data数据对象

文章目录第一个Vue程序el挂载点vue实例的作用范围是否可以选择其他选择器是否可以设置其他dom元素data属性(数据对象)第一个Vue程序第一步：引入vue.js<script src="./lib/vue.js"></script>第二步：添加<div>标签<div id="app"> {{message}}</div>第三步：挂载在Vue上<script> var app = new Vue({
复制链接

扫一扫

专栏目录