Vue 快速入门

原创已于 2022-08-29 14:57:16 修改 · 700 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Vue

于 2022-04-14 20:35:48 首次发布

本文介绍了Vue框架的基础，包括其特点如响应式数据驱动和简化DOM操作。重点讲解了如何创建第一个Vue程序，el挂载点的选择，以及data数据对象的使用。通过实例展示了如何在不同选择器下挂载Vue实例和管理复杂数据结构。

1. Vue简介

需要遵守Vue框架的指定规则才能使用。。

特点：（1）JavaScript框架（2）简化DOM操作（3）响应式数据驱动

2. 第一个Vue程序

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 基础</title>
</head>
     <!-- 导入开发版本   Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<body>
    <div id="app">
        <!-- 取值表达式 -->
        {{  message }}
    </div>
</body>

<script>
    // new Vue实例
    var app = new Vue({
        el:"#app",
        data:{
            message:"Hello Vue!"
        }
    })
</script>

</html>

关于Vue实例作用范围

（1）id选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>el 挂载点</title>
</head>
     <!-- 导入开发版本   Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<body>
    {{  message }}
    <div id="app">
        {{  message }}
        <span>{{  message }}</span>
    </div>
</body>

<script>
    // new Vue实例
    var app = new Vue({
        el:"#app",    // 在el命中元素的内部可以进行多层嵌套 ---  完成取值 
        data:{
            message:"元气满满的夜晚！"
        }
    })
</script>

</html>

（2）类选择器

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>el 挂载点</title>
</head>
     <!-- 导入开发版本   Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<body>
    {{  message }}
    <div id="app" class="app">
        {{  message }}
        <span>{{  message }}</span>
    </div>
</body>

<script>
    // new Vue实例
    var app = new Vue({
//        el:"#app",    // 在el命中元素的内部可以进行多层嵌套 ---  完成取值
          el:".app",
        data:{
            message:"元气满满的夜晚！"
        }
    })
</script>

</html>

3.el : 挂载点

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

Vue 实例的作用范围是什么呢？

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

是否可以使用其他的选择器？

可以使用其他的选择器，但是建议使用ID选择器

是否可以设置其它的dom元素呢？

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

4.data：数据对象

Vue中用到的数据定义在data中

data中可以写复杂类型的数据

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>data 数据对象</title>
</head>
     <!-- 导入开发版本   Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<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>
</body>

<script>
    // new Vue实例
    var app = new Vue({
        el:"#app",        // 在el命中元素的内部可以进行多层嵌套 ---  完成取值
        data:{
            message:"元气满满的夜晚！",
            school:{
                name:"中国科学院",
                mobile:"400-123-569"
            },
            campus:["北京校区","西安校区","上海校区","青岛校区"]
        }
    })
</script>

</html>

标签

#vue.js