初识Vue框架 冷不防 2022-11-01 05:56 125阅读 0赞 ### 文章目录 ### * * 一、Vue是什么 * 二、Vue的安装 * * 1. 独立版本 * 2. 使用CDN方法 * 三、Vue起步 ## 一、Vue是什么 ## * Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。 * Vue 只关注视图层, 采用自底向上增量开发的设计。 * Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 ## 二、Vue的安装 ## ### 1. 独立版本 ### 在 Vue.js 的官网上直接下载 [vue.min.js ][vue.min.js] 并用 `<script>` 标签引入。 ### 2. 使用CDN方法 ### * Staticfile CDN(国内) : [https://cdn.staticfile.org/vue/2.2.2/vue.min.js][https_cdn.staticfile.org_vue_2.2.2_vue.min.js] * unpkg:[https://unpkg.com/vue/dist/vue.js][https_unpkg.com_vue_dist_vue.js], 会保持和 npm 发布的最新的版本一致。 * cdnjs : [https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js][https_cdnjs.cloudflare.com_ajax_libs_vue_2.1.8_vue.min.js] ## 三、Vue起步 ## 每个Vue应用都需要通过实例化Vue来实现,语法格式如下: var vm = new Vue({ // 选项 }) 以下为Vue实例,我们主要关注其构造器中的内容: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js" type="text/javascript" charset="utf-8"></script> <body> <div id="app"> <p>{ { message}}</p> <a href="#">{ { details()}}</a> </div> <script type="text/javascript"> // 创建一个 Vue 实例 var vm = new Vue({ // 对应 DOM 中的 id,意味着从接下来开始操作其内部(外部不受影响) el: "#app", // 定义数据对象 // data 用于定义属性,实例中有 message 属性 data: { message: "Hello" }, // methods 用于定义的函数,可以通过 return 来返回函数值。 // { { }} 用于输出对象属性和函数返回值。 methods: { details: function(){ return this.message + "Vue"; } } }) </script> </body> </html> 当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。 除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。 [vue.min.js]: https://vuejs.org/js/vue.min.js [https_cdn.staticfile.org_vue_2.2.2_vue.min.js]: https://cdn.staticfile.org/vue/2.2.2/vue.min.js [https_unpkg.com_vue_dist_vue.js]: https://unpkg.com/vue/dist/vue.js [https_cdnjs.cloudflare.com_ajax_libs_vue_2.1.8_vue.min.js]: https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
相关 初识VUE 一、什么是VUE Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScr 谁践踏了优雅/ 2024年03月30日 16:24/ 0 赞/ 6 阅读
相关 初识Flask框架 Flask简介 > Flask 是一个 Python 实现的 Web 开发微框架。Flask 自开发伊始就被设计为 可扩展 的框架。 > > Flask 有两个主要依赖 傷城~/ 2023年01月15日 08:11/ 0 赞/ 63 阅读
相关 初识Vue 上一节搭建了vue的简单项目的开发环境,这一节来说说Vue的基本使用 > 初识Vue: 1. 想让程序运行,必须要创建一个Vue实例,且传入配置对象(el) 2. 我不是女神ヾ/ 2022年09月13日 15:22/ 0 赞/ 142 阅读
相关 初识MVC框架 MVC框架 是一个框架模式,它使应用程序的输入、处理和输出分开。它可以使业务逻辑、数据、界面显示分离,使得耦合度大大降低,在这一方面与“三层”思想类似 r囧r小猫/ 2022年08月14日 03:44/ 0 赞/ 167 阅读
相关 初识vue vue 我们先认识一下什么是vue?其实就是用来构建用户界面的渐进式框架,vue指令就是操作DOM命令而准备的。安装或引用[vue][]你也可以查[开发文档][Link 小灰灰/ 2022年03月20日 13:00/ 0 赞/ 170 阅读
相关 初识VUE 一、什么是vue vue是一个渐进式的前端js框架。所谓渐进式框架,其实就是把框架分层。最核心的部分是视图层渲染,然后往外是组件机制,在这个基础上再加入路由机制、状态管理 深藏阁楼爱情的钟/ 2022年02月25日 12:50/ 0 赞/ 237 阅读
相关 Vue初识 渐进式JavaScript框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架的形式完成整个web前端项目 什么是Vue vue可 清疚/ 2021年11月29日 10:42/ 0 赞/ 264 阅读
相关 Vue初识 一. Vue的简单介绍 前端、django的重点简单描述: """ 1、BBS:前后台不分离的web项目 前台页面主要是通过后台逻 朱雀/ 2021年11月23日 00:32/ 0 赞/ 253 阅读
还没有评论,来说两句吧...