Vue 基础入门

最新推荐文章于 2024-09-23 22:03:38 发布

原创最新推荐文章于 2024-09-23 22:03:38 发布 · 339 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Vue基础篇 #什么是渐近式框架

Vue基础篇专栏收录该内容

27 篇文章

订阅专栏

本文介绍了Vue.js框架的基本概念，包括其渐进式特性、安装方法、数据绑定及响应式原理。通过实例展示了如何使用Vue进行数据渲染和组件开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前面的话

近年来，前端框架发展火热，新的框架和名词不停地出现在开发者眼前。目前来看，前端框架给开发者带来不小的便利，其中的3大框架Angular、React.以及Vue.。这些框架的产生保持了UI与状态（后端数据）的同步，使得开发者能从过去手动维护DOM状态的繁琐操作中解脱出来，尽可能地让DOM的更新操作是自动的，状态变化的时候就自动更新到正确的状态。3大框架中最容易上手的就是Vue

Vue 概述

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层，采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
在这里插入图片描述

下面来解释下，何为渐进式框架，如上图所示：

如果只使用Vue最基础的声明式渲染的功能，则完全可以把Vue当做一个模板引擎来使用　
　　
如果想以组件化开发方式进行开发，则可以进一步使用Vue里面的组件系统
　　
如果要制作SPA(单页应用)，则使用Vue里面的客户端路由功能

如果组件越来越多，需要共享一些数据，则可以使用Vue里的状态管理

如果想在团队里执行统一的开发流程或规范，则使用构建工具

所以，可以根据项目的复杂度来自主选择使用Vue里面的功能

Vue 安装

Vue.js有三种安装方式：

1、独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用

2、使用 CDN 方法

以下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。

Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js

unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。

cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

3、NPM 方法
这个前提要下载node.js npm包会自动随着Node.js一起下载：（小柒前面有一篇关于Nodejs文章,里面有关于NPM的详解）

执行这条命令：
npm install vue

获取Vue后，直接使用script标签引入即可使用

在这里插入图片描述

文本插值

对于Vue最简单的应用就是将其当作一个模板引擎，也就是采用模板语法把数据渲染进 DOM。

语法： {{ }}

数据绑定最常见的形式就是{{}} 双大括号的文本插值

  <div id="app">
        <p>{{ massage}}</p>
 </div>

massage可以说是一个变量，最终将显示真正的文本内容。

Vue 构造器

每个 Vue 应用都需要通过实例化 Vue 来实现。

var vm = new Vue({
  // 选项
})

通过一个例子来解释Vue实例对象里面的内容：

 <div id="app">
 		<p>{{name}}</p>
        <p>{{massage}}</p>
        <p>{{details()}}</p>
 </div>       
 <script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
        		name: "小柒",
          		massage: "hello Vue.js",
        },
        methods: {
            details: function() {
                return   this.name + this.massage;
            }
        }
    })
</script>

运行结果：
在这里插入图片描述

上面为Vue()构造函数传入了一个对象，对象中包括el和data,methods这三个参数。
　
[el]
用于提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标，代表所控制的哪一块HTML代码，上例中所挂载的是id为app的div元素。就好比
原生js中的document.getElementById(“app”).

[dada]
参数data表示Vue实例的数据对象

[methods]
表示Vue实例的方法对象