Vue介绍

一、前端发展史

​ 前端发展史按理说不能这样粗粗略的一带而过，发展史如果想写的话内容还是蛮多。但是咱的重点毕竟不在这块儿，有个基本了解即可。总之，大致经过了以下几个发展关键转折点。当然最后也添加了个人猜测。目前还没有不能代表不出现，有个预见未来的大胆想法也是很不错的哟。要用于预测未来才有机会创新嘛！

  • HTML、CSS、JavaScript
  • Ajax太发送异步请求
  • angular框架出现
  • React、Vue框架
  • 移动开发Android、IOS、web
  • 一套代码在各个平台上运行
  • 在不久的未来可能会出现统一天下

二、Vue介绍

1.Vue是什么？

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

如果你想在深入学习 Vue 之前对它有更多了解，我们制作了一个视频，带您了解其核心概念和一个示例工程。

如果你已经是有经验的前端开发者，想知道 Vue 与其它库/框架有哪些区别，请查看对比其它框架。

2.M-V-VM 架构思想

  • M 数据层(model) js
  • V 视图层(view) HTML、CSS
  • VM 数据层和视图层之间的一层(model view)
# 扩展以下VM吧！

VM是数据层和视图层之间的一层，不需要手动进行DOM操作了

作用：以后页面变、js变量就变；js变量变、页面就变

3.组件化开发、单页面应用

  • 组件化开发：以后都是写一个个组件，组件的组合成页面
  • 单页面应用：spa(single page application)，一个个的HTML页面

4.版本问题

  • 1.X：使用的已经比较少了
  • 2.X：目前使用频率最广的
  • 3.X：公司新项目会选择的
# 关于版本问题

首先1.X版本几乎不怎么用了，除非是老项目需要维护；

目前使用频率最广泛的2.X版本最后就是3.X版本出了很久了，

一些公司的新项目会选择使用；

3.X的语法有些差距的，

但是Vue3完全兼容Vue2，说明Vue3上可以写Vue2，但是官方不建议这么用。

三、第一个helloworld

1.了解开发前端的编辑器

  • my eclipse(eclipse)
  • idea(Java)
  • pycharm(Python)
  • goland(go)
  • phpstorm(php)
  • vscode开发
  • vim开发
  • subline text
  • Androidstadio

介绍了那么多编辑器，但是我们学习基于Vue2，用pycharm与Vue插件配合的模式学习。搞笑吧哈哈哈，纯粹是未来提高学习效率！

2.通过Vue打印出helloworld来演示初步使用规范

第一步：打开pycharm创建pure Python 项目



第二步：项目根目录下创建js目录，在js目录下建js文件，粘贴Vue原密码



第三步：在根目录创建一个HTML文件



第四步：在此文件写如下代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/vue.js"></script>  <!--第一步引入Vue源码-->

</head>

<body>

<!--第二步在body内写div标签，其实什么标签都可以-->

<div id="app">

    {{name}}

</div>

</body>

<script>

    // 配置项 key value的形式

    var vm = new Vue({

        el: '#app', //vue管理了这个div 以后在 div中可以写Vue的语法了

        data: {

            name: 'hello world',

            age: 19

        }

    })

</script>

</html>

最后展示以下效果吧！！

Vue的介绍的更多相关文章

  1. Vue.js介绍

    http://www.cnblogs.com/keepfool/p/5619070.html Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思 ...

  2. Vue filter介绍及详细使用

    Vue filter介绍及其使用 VueJs 提供了强大的过滤器API,能够对数据进行各种过滤处理,返回需要的结果. Vue.js自带了一些默认过滤器例如: capitalize 首字母大写 uppe ...

  3. vue之介绍

    vue的作者叫尤雨溪,中国人.自认为很牛逼的人物,也是我的崇拜之神. 关于他本人的认知,希望大家读一下这篇关于他的文章,或许你会对语言,技术,产生浓厚的兴趣.https://mp.weixin.qq. ...

  4. vue 之 介绍及简单使用

    浏览目录 vue的介绍 vue的使用 vue的介绍 简介 vue官网说:Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底 ...

  5. Vue的介绍及安装和导入

    08.27自我总结 Vue的介绍及安装和导入 本质就是封装一些js 一Vue的介绍 进式 JavaScript 框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式 ...

  6. 1. vue.js介绍

    1. 什么是vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助 ...

  7. vue框架介绍

    vue框架介绍 一.vue 概念 vue 是一种开发用户界面的渐进式开发框架.渐进式指的是:你可以将vue作为一部分嵌入到web应用中,带来丰富的交互体验 二.vue特点及常见开发中的高级功能 1.解 ...

  8. vue.JS 介绍

    vueJS 介绍 首先,vueJS 是我很早之前就想要接触学习的东西,但是呢,一直没时间,主要是在学校,事太多,没心思定下心来学习,我学生生涯的最后一个假期的第一天晚上,万事开头难,那就先写点儿什么东 ...

  9. 1-1 Vue的介绍

    简单介绍Vue Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易 ...

  10. [转]vue全面介绍--全家桶、项目实例

    慢慢了解vue及其全家桶的过程 原文http://blog.csdn.net/zhenghao35791/article/details/67639415 简介 “简单却不失优雅,小巧而不乏大匠”.  ...

随机推荐

  1. i春秋登录

    打开是个普普通通的表单提交网页 查看源码,没什么东西 抓包试试再 没找到什么有用的信息 尝试注入 用户名admin' or '1'='1 密码随便输 弹出密码错误 再试试admin' or '1'=' ...

  2. CPU cache知识 —— ARM架构cache结构和细节

    cache如何寻址 处理器访问cache时,cache电路会将CPU地址进行解码,分成3个部分,分别是: offset: 用于某个cache line -- 字抽取: index: 用于匹配某个cac ...

  3. MySQL锁，锁的到底是什么？

    MySQL锁系列文章已经鸽了挺久了,最近赶紧挤了挤时间,和大家聊一聊MySQL的锁. 只要学计算机,「锁」永远是一个绕不过的话题.MySQL锁也是一样. 一句话解释MySQL锁: MySQL锁是解决资 ...

  4. uni 结合vuex 编写动态全局配置变量 this.baseurl

    在日常开发过程,相信大家有遇到过各种需求,而我,在这段事件便遇到了一个,需要通过用户界面配置动态接口,同时,因为是app小程序开发,所以接口中涉及到了http以及websocket两个类型的接口. 同 ...

  5. MySQL进阶实战6，缓存表、视图、计数器表

    一.缓存表和汇总表 有时提升性能最好的方法是在同一张表中保存衍生的冗余数据,有时候还需要创建一张完全独立的汇总表或缓存表. 缓存表用来存储那些获取很简单,但速度较慢的数据: 汇总表用来保存使用grou ...

  6. 【Spark】Day02：Spark-Core：RDD概述、RDD编程（转换算子、Action）、序列化、依赖关系、持久化、数据读取保存、累加器、广播变量、top10、转化率

    总结:https://www.cnblogs.com/qingyunzong/p/8899715.html 一.RDD概述 1.引入:IO流 按行.按字节.字节缓冲 调用read方法读取流,均为惰性加 ...

  7. uniapp onLoad里面拿不到reject的参数

    在onLoad中直接调用自己用promise封装的请求 reject居然会收不到参数.. onLoad(){ this.$fetch(xxxx) .catch(err=>{ }) // 这里获取 ...

  8. 用openpyxl创建工作簿和工作表

    import osimport openpyxl #设置默认路径os.chdir(r'D:/openpyxl/') #创建工作簿变量 wb = openpyxl.Workbook() #创建工作表变量 ...

  9. 前端h5适配刘海屏和滴水屏

    前端适配苹果刘海屏,安卓刘海屏水滴瓶 其实w3c早就为我们提供了解决方法(CSS3新特性viewport-fit) 在w3c.org官方给出的关于圆形展示(Round display)的标准中, 提到 ...

  10. 常用 Git 命令行操作

    本文记录了一些常用 Git 命令行操作的具体使用方式 git clone git clone REPOSITORY_URL 拉取仓库,并使用仓库名作为本地文件名 git clone REPOSITOR ...