Vue入门学习-CSDN博客

本文链接：https://blog.csdn.net/weixin_45853776/article/details/106623152

Vue简介

1.JS框架
2.简化dom操作
3.响应式数据驱动

Vue官方文档：https://cn.vuejs.org

第一个vue程序（结合live server插件实时浏览器显示）

导入开发版本的vue库

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

设置vue实例对象，设置el属性和data属性。
保存数据，显示在浏览器上。

 <body>
    <div id="app">
        {{message}} 
    </div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"hellow vue!"
        }
    })
</script>
</body>

el挂载点：el挂载点是用来设置vue实例管理的元素，el所标识的对象内部，用两个大括号包围的内容，会被vue中设置对应的内容替换。

vue会管理el命中的元素及其内部的元素
只能是双标签才会生效（除和），因为单标签里写不了两个大括号那种格式
el标记的时候可以使用许多选择器（但是建议使用id选择器，因为id一般都是设置成唯一）

<body>
    {{message}}

    <div id="app" class="app">
        {{message}}
        <span>{{message}}</span>
    </div>
    <!-- 引入vue的包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            // el:"#app",
            el:"div",
            data:{
                message:"测试el"
            }
        })
    </script>
</body>

data：vue要用的数据，定义在data中。

data中的复杂类型数据，使用时只需要符合其对应语法即可

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

    <div id="d1" class="a">
        
        {{school.name}}<br>
        {{school.addres}}

        <ul>
            <li>{{arr[0]}}</li>
            <li>{{arr[2]}}</li>
        </ul>

    </div>


    <script>
        var vue = new Vue({
            el:"#d1",
            data:{
                school:{
                    name:"北京大学",
                    addres:"北京市-海淀区"
                },
                arr:["光华管理学院","法学院","医学院"]
            }
        })
    </script>
</body>