Day2-实例挂载

最新推荐文章于 2024-09-15 17:15:28 发布

麻辣香猪シ

最新推荐文章于 2024-09-15 17:15:28 发布

阅读量48

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_51069588/article/details/133801100

版权

本文详细介绍了Vue中el挂载点的选择、data对象的使用方法，以及data的两种写法（对象式和函数式），强调了在组件化开发中使用函数式data的必要性，提醒避免使用箭头函数以保持Vue实例的正确this指向。

摘要由CSDN通过智能技术生成

1.el：挂载点

el是用来设置Vue实例挂载（管理）的元素
Vue会管理el选项命中的元素及其内部的后代元素
可以使用其他的选择器，但是建议使用ID选择器

可以使用其他的双标签，不能使用HTML和BODY

<body>
    <div id="app">
        {{message}}//插值表达式
    </div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
                message: "你好！"
            }
        })
    </script>
</body>

2.data:数据对象

Vue中用到的数据定义在data中
data中可以写复杂类型的数据

渲染复杂类型数据时，遵守js的语法即可

<body>
<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:"0370-681-9090"
                },
                campus:["北京校区","上海校区","深圳校区","郑州校区"]
            }
        })
    </script>
  <body/>

3.data与el的两种写法

el有两种写法：

new Vue时候配置el属性

<body>
    <script type="text/javascript">
    Vue.config.productionTip = false  //阻止vue在启动时生成生产提示
    new Vue({
        el: '#root',
        data: {
            name: '河南大学',
        }
    })
    </script>
</body>

先创建Vue实例，随后再通过v.$mount(‘#root’)指定el的值

<body>
    <script type="text/javascript">
        Vue.config.productionTip = false  //阻止vue在启动时生成生产提示
        const v = new Vue({
            // el:'#root',
            data: {
                name: '河南大学',
            }
        })
        v.$mount('#root')
    </script>
</body>

data有两种写法：

对象式

<body>
    <script type="text/javascript">
        Vue.config.productionTip = false  //阻止vue在启动时生成生产提示
        new Vue({
            el: '#root',
            data: {  //对象式
                name: '河南大学',
            }
        })
    </script>
</body>

函数式

<body>
    <script type="text/javascript">
        Vue.config.productionTip = false  //阻止vue在启动时生成生产提示
        new Vue({
            el: '#root',
            //data(){//简写
            data: function () {//函数式
                return {
                    name: '河南大学'
                }
            }
        })
    </script>
</body>