什么是Vue?

Vue就是一个渐进式的JavaScript框架。

为什么要学习前端框架?

我们要做前端,不可避免的要写HTML,要写JavaScript,但是自己一个一个打多麻烦啊,于是,前端之路有了以下的发展变化。

  1. 原生JavaScripts:各个浏览器的兼容性无法保证
  2. Jquery
  3. 前端引擎模板:表格1000条数据渲染不行
  4. Vue/Angular之类的框架

接下来详细的介绍一下上面的4部分。

首先,原生JavaScript的缺点是各个浏览器的兼容性无法保证。于是出现了Jquery

Jquery解决了浏览器兼容性的问题,但是操作DOM很麻烦

前端引擎模板解决了操作DOM的问题,但是渲染的时候会重复渲染,我举个例子,列表里面有数据1,3,2,4我要排序,前端引擎肯定会重新排序,但是1和4是不需要动的呀,这还是4条数据,假如1000条,1万条呢?而且,前端模板在处理一些复杂度高的情况下还是很麻烦。框架,就很好的解决了这个问题。

Vue的核心概念就是用户不在操作dom,Vue的数据双向绑定让开发人员只专注于业务。

当然框架也是有缺点的,对项目的入侵性比较大,例如你项目使用的框架是Vue,你做了一半了,突然想换成React,Angular,这当然是很麻烦的,几乎相当于重头构建了

MVC,MVP 和 MVVM

这三种模式需要了解一下,我就不写了,推荐看阮一峰的博客MVC,MVP 和 MVVM

我们的Vue,就是MVVM模式

最简单的入门小案例

下载Vue.js

使用Vue的方式有很多种,比如Vue.js,脚手架等,我先使用Vue.js,后面再讲脚手架的事情。

在官网下载https://cn.vuejs.org/v2/guide/installation.html

推荐使用这个开发版本。

新建文件结构

我是这样新建文件夹存放文件的

我新建了一个Vue文件夹,然后内部有两个文件夹,lib放js文件,html放html文件。然后把Vue文件夹拖到VS Code里面,对,我的编辑器使用的VS Code

写一个html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title> <script type="text/javascript" src="../lib/vue-2.6.10.js"></script> </head>
<body> <div id="app">
{{ msg }}
</div> <script>
var vm=new Vue({
el: '#app',
data: {
msg: '许嵩哈哈哈'
}
})
</script> </body>
</html>

运行

运行这里,讲一个插件view-in-browser,记住,有-的,还有一个同名但是没有-的不好用,认准这个,好用

然后就可以在html文件上右键,使用浏览器打开了。你可以看到

可笑的小报错

我在引入js的时候啊,只能自己手打,于是我少打了.我是这样引入Vue.js的

<script type="text/javascript" src="/lib/vue-2.6.10.js"></script>

可以看到,我没有加 .. 因为我的html文件在html文件夹下,所以加.是代表当前,..才是父一级目录,学过Linux的熟悉这个。我忘了加 .. 于是造成了下面这个可笑的报错

Vue和MVVM

说了,Vue就是MVVM模式的,怎么解释?

我把上面HTML中的Vue部分摘出来,注释里讲解一下

 <!-- 这个div就是MVVM中的V,View -->
<div id="app">
{{ msg }}
</div> <script>
// 这个vm就是MVVM中的VM,ViewModel
var vm=new Vue({
el: '#app',
// 这个data就是MVVM中的M,Model
data: {
msg: '许嵩哈哈哈'
}
})
</script>

防盗链接:本博客由蜀云泉发表

Vue学习笔记一:初识Vue的更多相关文章

  1. Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

  2. Vue学习系列(一)——初识Vue.js核心

    前言 vue.js是一套构建用户界面的渐进式框架,vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件. vue通过DOM事件操作和指令来进行视图层和模型层的相互通讯,会为每一 ...

  3. Vue学习笔记七:Vue中的样式

    目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...

  4. vue学习笔记:在vue项目里面使用引入公共方法

    首先新建一个文件夹:commonFunction ,然后在里面建立 一个文件common.js 建立好之后,在main.js里面引入这个公共方法 最后是调用这个公共方法 测试一下,我在公共方法里面写了 ...

  5. vue学习笔记-初始化一个vue项目(1)

    1.cnpm install -g vue-cliUsage:vue init <template-name> <project-name> 2.我们一般使用webpack模版 ...

  6. vue学习笔记:Hello Vue

    编写简单例子,了解下基本语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8 "&g ...

  7. 【Vue 学习笔记 一、Vue开发环境搭建】

    搭建Vue的开发环境 1.首先安装Nodejs  (因为我的系统是Windows的所以就选择第一个了,这个看个人的开发环境) 下载好后,然后一路确定,如果有更改安装目录的需求,就自己切换安装目录,由于 ...

  8. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  9. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  10. vue 学习笔记(二)

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

随机推荐

  1. linux下mysql配置文件位置

    在/usr/share/mysql/ 中找到my.cnf的配置文件,拷贝其中的my-huge.cnf 到 /etc/ 并命名为my.cnf

  2. 移动端click延迟和tap事件

    一.click等事件在移动端的延迟 click事件在移动端和pc端均可以触发,但是在移动端有延迟现象. 1.背景 由于早期移动设备浏览网页时内容较小,为了增强用户体验,苹果公司专门为移动设备设计了双击 ...

  3. C# 内插字符串与字符串复合格式

    var name = "Tom"; ; string aa = string.Format("name:{0},age:{1}", name, age);//字 ...

  4. fastjson SerializerFeature详解

  5. goodbye 2018, hello 2019

    纵使不愿意,终究还是到了岁末. 2018 ​ 即将过去的一年,已经完成的事情自己做得不足.年初计划要做的几件事情都做了,感觉没有尽力去做好. 工作 ​ 16年毕业之后到今年,算是真正意义上完成从学生时 ...

  6. Vue-cli在webpack内使用雪碧图(响应式)

    先执行install cnpm install webpack-spritesmith 文件位置 build\webpack.dev.conf.js 添加内容: const SpritesmithPl ...

  7. Loj #2331. 「清华集训 2017」某位歌姬的故事

    Loj #2331. 「清华集训 2017」某位歌姬的故事 IA 是一名会唱歌的女孩子. IOI2018 就要来了,IA 决定给参赛选手们写一首歌,以表达美好的祝愿.这首歌一共有 \(n\) 个音符, ...

  8. npm基本操作(安装,搭建环境,打包)

    Nodejs(npm)环境安装: npm的安装配置(从nodejs网站上安装npm): Windows安装Nodejs操作步骤如下: 64 位安装包下载地址 : https://nodejs.org/ ...

  9. css子元素添加绝对定位,不添加top、left会有影响吗???

    子元素设置absolue,不设置top以及left值会有什么影响呢? 代码如下: .parent { width: 500px; height: 500px;   overflow: hidden; ...

  10. pyecharts使用

    安装 pyecharts 兼容 Python2 和 Python3.目前版本为 0.1.2 pip install pyecharts 入门 首先开始来绘制你的第一个图表 from pyecharts ...