Vue学习笔记一:初识Vue
什么是Vue?
Vue就是一个渐进式的JavaScript框架。
为什么要学习前端框架?
我们要做前端,不可避免的要写HTML,要写JavaScript,但是自己一个一个打多麻烦啊,于是,前端之路有了以下的发展变化。
- 原生JavaScripts:各个浏览器的兼容性无法保证
- Jquery
- 前端引擎模板:表格1000条数据渲染不行
- 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的更多相关文章
- Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据
目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...
- Vue学习系列(一)——初识Vue.js核心
前言 vue.js是一套构建用户界面的渐进式框架,vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件. vue通过DOM事件操作和指令来进行视图层和模型层的相互通讯,会为每一 ...
- Vue学习笔记七:Vue中的样式
目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...
- vue学习笔记:在vue项目里面使用引入公共方法
首先新建一个文件夹:commonFunction ,然后在里面建立 一个文件common.js 建立好之后,在main.js里面引入这个公共方法 最后是调用这个公共方法 测试一下,我在公共方法里面写了 ...
- vue学习笔记-初始化一个vue项目(1)
1.cnpm install -g vue-cliUsage:vue init <template-name> <project-name> 2.我们一般使用webpack模版 ...
- vue学习笔记:Hello Vue
编写简单例子,了解下基本语法 <!DOCTYPE html> <html> <head> <meta charset="utf-8 "&g ...
- 【Vue 学习笔记 一、Vue开发环境搭建】
搭建Vue的开发环境 1.首先安装Nodejs (因为我的系统是Windows的所以就选择第一个了,这个看个人的开发环境) 下载好后,然后一路确定,如果有更改安装目录的需求,就自己切换安装目录,由于 ...
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- vue 学习笔记(二)
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
随机推荐
- Android项目实战登录&注册
由于项目中大部分界面都有一个后退键和一个标题栏,为避免代码冗杂以及便于利用,我们可以将后推荐和标题栏单独抽取出来定义一个标题栏布局,在 res/layout 目录下新建一个 Layout resour ...
- 一起学Android之Layout
本文简述在Android开发中布局的简单应用,属于基础知识,仅供学习分享使用. 概述 在Android UI开发中,布局类型主要有两种:LinearLayout(线性布局)和RelativeLayou ...
- Mysql 创建事件任务
DELIMITER $$ CREATE DEFINER=`root`@`%` EVENT `test` ON SCHEDULE EVERY 1 DAY STARTS '2019-02-12 00:00 ...
- Azure存储账户的日志分析方法
1.首先确认日志功能是否开启(日志文件根据存储账户的类型,按使用量收费 . 2.在存储账户-Usage(classic)-Metrics中查看突出流量的时间: 3.在Explorer中下载对应时间点的 ...
- python操作Excel、openpyxl 之图表,折线图、饼图、柱状图等
一.准备 需要模块: from openpyxl.workbook import Workbook from openpyxl.chart import Series,LineChart, Refer ...
- NodeJs之EXCEL文件导入导出MongoDB数据库数据
NodeJs之EXCEL文件导入导出MongoDB数据库数据 一,介绍与需求 1.1,介绍 (1),node-xlsx : 基于Node.js解析excel文件数据及生成excel文件. (2),ex ...
- python总结 + 部署简单项目 到生产
-> filter过滤:list(filter(lambda x: x[0].find('tmp') == -1, table_temp_r)) -> 自定义map:def map_for ...
- Linux(Ubuntu)使用日记------Mongodb的安装与使用
1.安装 Linux下安装mongodb还是比较容易的 直接使用apt-get安装即可,命令如下: sudo apt-get install mongodb 安装完成之后进行检验, “mongo sh ...
- hdu4843(NOI2000) 古城之谜 (trie树+DP)
Description 著名的考古学家石教授在云梦高原上发现了一处古代城市遗址.让教授欣喜的是在这个他称为冰峰城(Ice-Peak City)的城市中有12块巨大石碑,上面刻着用某种文字书写的资料,他 ...
- DS博客作业02--线性表
1.本周学习总结 1.1思维导图 1.2.谈谈你对线性表的认识及学习体会 这阶段学习学的是线性表,学习线性表的两种存储顺序-----链表和顺序表,体会了两者存储结构之间的区别,通过对顺序表,单链表,双 ...