Vue快速入门

Vue.js基础快速入门

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue简介

三个特点

  1. JavaScript框架 (框架功能更为强大，使用时必须遵守它的规则)
  2. 简化DOM操作 (Vue会自动操作使用特殊语法修饰的DOM元素)
  3. 响应式数据驱动 (页面是由数据来生成的，当数据改变时页面也会同步更新)

第一个Vue程序

导入Vue.js

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

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

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

{ }叫做差值表达式，可以理解成模板的语法，作用就是把数据跟页面结构关联起来

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

el: '#app', //#号是id选择器，跟HTML中id为app的div关联起来

小结

  • 导入开发板本的Vue.js
  • 创建Vue实例对象，设置el属性和data属性
  • 使用简洁的模板语法把数据渲染到页面上

el: 挂载点

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

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

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

  • ​ 可以使用其他的选择器，但是建议使用id选择器

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

  • ​ 可以使用其他双标签，但不能使用HTML和body

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>
        </ul>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: "HealthBody",
                school: {
                    name: "焦虑烧麦 ",
                    mobile: "400-300-123",
                },
                campus: ["人大", "建筑", "设计"]
            }
        })
    </script>
</body>

img

posted @ 2021-04-20 14:13  焦虑烧麦  阅读(53)  评论(0)    收藏  举报