什么是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. 荣耀5.0以上手机(亲测有效)激活xposed框架的经验

    对于喜欢搞机的朋友而言,大多时候会使用到xposed框架及其种类繁多功能强悍的模块,对于5.0以下的系统版本,只要手机能获得Root权限,安装和激活xposed框架是非常简便的,但随着系统版本的不断迭 ...

  2. Java:配置环境(Mac)——Tomcat

    1.官网下载 2.把下载的文档解压,放到合适的路径下. 3.打开eclipse 4.在Apache文件夹下选择Tomcat的对应版本 5.选择刚才下载的文件 6.可以右键Start了

  3. LeetCode的刷题利器(伪装到老板都无法diss你没有工作)

    在工程效率大行其道的今天,如果不会写点代码以后也不容易在测试圈混下去.今天给大家推荐一个LeetCode的刷题利器,可以伪装到连你老板在这里走过去都无法确认你是在干活呢,还是在干活呢. LeetCod ...

  4. Linux学习历程——Centos 7 passwd命令

    一.命令介绍 passwd 命令用于修改用户密码,过期时间,认证信息等. 普通用户只能使用 passwd 命令修改自身的系统密码,而 root 管理员则有权限修改其他所有人的密码.更酷的是,root ...

  5. centos7安装docker并设置开机自启以及常用命令

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会有任何 ...

  6. pytest生成测试报告-4种方法

    1.生成resultlog文件 2.生成JunitXML文件 3.生成html测试报告 > pip install pytest-html     # 通过pip安装pytest-html 4. ...

  7. 013_针对单个pid的cpu/内存/io的资源占用统计

    #!/usr/bin/env python import sys import os import subprocess from decimal import Decimal from decima ...

  8. Node.js如何执行cmd

    最近正好因业务的一个需求需要研究如何根据vscode的插件名来下载对应的插件以解决之前将插件打包上传到服务器上面导致的延迟问题(插件体积小还好说,如果体积过大,即便是压缩打成zip包,如果同一时刻很多 ...

  9. C语言中printf,scanf,puts,%%等输出格式

    #include<stdio.h> int main(void){    int a;    printf("请输入一个整数,程序求取他的最后一位数字:");    s ...

  10. JS 设计模式六 -- 代理模式

    概念 为一个对象提供一个代用品或占位符,以便控制对它的访问. 当客户不方便直接访问一个对象的时候,需要提供一个替身对象来控制对这个对象的访问. 替身对象对请求做出一些处理之后, 再把请求转交给本体对象 ...