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 ...
随机推荐
- 用npm安装git上的项目
直接通过 git 上项目的地址进行安装npm install git+https://github.com/sunxiaochuan/koatest.git 地址获取如下图:
- Powershell Linux正式版可用,启动名称有变
CentOS yum install powershell 但并没有powershell这个可执行文件.通过搜索可以发现在powershell目录里有pwsh可执行文件,那么以后就要用pwsh执行了. ...
- Elimination Game题解
Elimination Game 这道题目出于leetcode,题目虽然很简单但是很有趣,因为有趣才能称得上游戏吧! 0x00 题目介绍 简单介绍一下题目意思 给定一个数字N(N>0),一个列表 ...
- 【转】HTTP请求中的form data和request payload的区别
jQuery的ajax方法和post方法分别发送请求,在后台Servlet进行处理时结果是不一样的,比如用$.ajax方法发送请求时(data参数是一个JSON.stringify()处理后的字符串, ...
- 五 Struts 配置文件
一.struts.xml详解1.package:包 属性:name=命名 namespace=在action访问路径前面加的前缀 extends=继承另外的包 action:name=action的访 ...
- CentOS7.x安装MySQL5.7.25
mysql 5.7下载地址 社区版下载地址:https://dev.mysql.com/downloads/mysql/ 可能会有变动 找到5.7版本, 注:源码安装需要用到下面的包,可以先忽略,我安 ...
- ABP之session
ABP提供了一个IAbpSession接口,可以在不使用ASPNET的session的情况下获取当前用户和租户.IAbpSession还被ABP中的其他结构(如设置和授权系统)完全集成和使用. 注入s ...
- C#编程风格
开始实习之后,才发现自己是多么地菜.还有好多东西还要去学习. 公司很好,还可以帮你买书.有一天随口问了一下上司D,代码规范上面有什么要求.然后D在Amazon上面找到了这本书<C#编程风格(Th ...
- 安装Mediamanager 后Messenger后无法登录
安装MediaManager以后Messenger无法登录,提示无法连接服务,出现以下信息. 解决办法,进入控制面板,卸载"Microsoft URL Scan"程序,即可解决.
- Visual Studio Code扩展:
Auto Close TagAuto Rename TagBeautifyChinese (Simplified) Language Pack for Visual Studio CodeClass ...