1. Vue.js起步

1.简介

Vue.js(读音 /vjuː/, 类似于 view)
是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动

2.特点

2.1响应的数据绑定/响应式编程

Vue.js 的核心是一个响应的数据绑定系统,它让数据与 DOM 保持同步非常简单。在使用 jQuery 手工操作 DOM时,我们的代码常常是命令式的、重复的与易错的。 Vue.js 拥抱数据驱动的视图概念。通俗地讲,它意味着我们在普通 HTML 模板中使用特殊的语法将 DOM“绑定”到底层数据。一旦创建了绑定,DOM 将与数据保持同步。 每当修改了数据,DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了,不必与 DOM更新搅在一起。这让我们的代码更容易撰写、理解与维护。

2.2组件化

组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。 在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

3.Vue.js起步

3.1使用 Vue.js有两种方式:

  • 通过引入CDN后直接使用或者下载后使用
  • 使用命令行工具CLI搭建脚手架去编写对应的内容

3.2引入CDN方式

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
3.2.1第一个起步界面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Vue.js快速起步</title>
        <!-- 通过CDN引入Vue -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <body>
        <!-- vue-app根容器 -->
        <div id="app">
            <!-- 渲染显示HTML代码 -->
            <h2>{{message}}</h2>
        </div>
        <script>
            // 实例化Vue对象
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!'
                }
            })
        </script>
    </body>
</html>
3.2.1注意点:
  • el代表element,指需要获取的元素,一定是html中的根容器元素。
  • data用于数据的存储,可以设置对应的数据,data的值也是一个对象,类型可以是字符串、number、对象、数组。
  • 花括号在这里是模板语法。如果data类型是字符串,花括号可以直接获取到相关数据的值,而且这个花括号是不会写入DOM结构的。因为Vue是将拥有的内容放在虚拟DOM中,通过DOM操作再把需要的值插入到真实DOM中。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1.Vue.js是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其...
    1只念旧的兔子阅读 403评论 0 1
  • 1 Vue.js是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。...
    蜜思1013阅读 592评论 0 0
  • 什么是Vue.js? Vue.js,读音 /vjuː/,和view发音几乎一样,可见重心是在视图(view)层上的...
    katrina_Lee阅读 1,520评论 3 12
  • Vue.js是一个构建数据驱动的 web 界面的库,主要特点是响应的数据绑定和组合的视图组件,只聚焦于视图层。因此...
    FlyElephant阅读 331评论 0 0
  • 1 Vue.js是什么 简单小巧的渐进式技术栈,可以一步一步、有阶段性地来使用Vue.js,不必一开始就使用所有的...
    陶然然_niit阅读 564评论 0 6

友情链接更多精彩内容