Vue.js学习笔记

Vue简介

Vue.js是一个JavaScript框架，主要功能是简化dom操作、响应式数据驱动

（一）第一个Vue程序

（二）软件工具

VScode、内部插件live server

（三）编码

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

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

1、导入开发版本的Vue.js

2、创建Vue实例对象，设置el属性和data属性

3、使用简洁的模板语法把数据渲染到页面上

<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:"Hello Vue!"
            }
        })
    </script>
</body>
（四）el：挂载点
1、Vue实例的作用范围是什么？
作用范围是el命中的元素及其内部的后代元素，外部的无效。
2、是否可以使用其他的选择器？
可以使用其他的选择器（class，id，dom等）但是建议使用id选择器。
3、是否可以设置其他的dom元素呢？
可以使用其他的双标签。但不可以使用html和body，建议挂载在div上。
（五）data：数据对象
Vue中用到的数据定义在data中，data中可以写复杂类型的数据，渲染复杂类型数据时，遵守js的语法即可。
var app = new Vue({
            el:"#app",
            data:{
                message:"Hello Vue!",
                school:{
                    name:"黑马程序员",
                    mobile:"400-823-823"
                },
                campus:["北京","上海"]
            }
})
posted @ 2020-12-03 15:41  悠闲的黑猪  阅读(58)  评论(0)    收藏  举报