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 ...
随机推荐
- 源码浅谈(二):java中的 Integer.parseInt(String str)方法
这个方法是将字符串转换为整型 一.parseInt方法 ,可以看到默认又调用了parseInt(s,10) , 第二个参数为基数,默认10 ,当然也可以自己设置 public static int ...
- Android为TV端助力 电影栏目移动到底部或者顶部时抖动动画
1 移动到底部上下抖动ObjectAnimator animatorX = ObjectAnimator.ofFloat(holder.itemView,"translationX" ...
- APICloud Studio2新建应用报错和检出错误
今天心血来潮,闲暇时间想做个移动应用app,听一哥们说APICloud开发app很方便,就查询了一下,看了之后简直就是热血沸腾,我感觉正是我一直要找的工具 信心满满的开始着手使用,看了一下介绍我选择了 ...
- C# 获取当前服务器域名
"http://"是协议名 "www.test.com"是域名 "aaa"是站点名 "bbb.aspx"是页面名(文件名 ...
- Django的URL调度
1.URLconf (URL configuration):(Django版本1.11.20,其它版本可能各有差异.) 在Django中Python后端与前端URL进行交互,是通过一个名为urlcon ...
- 【原】无脑操作:HTML5 + CSS + JavaScript实现比赛排程
1.背景:朋友请帮忙做一个比赛排程软件 2.需求: ① 比赛人数未知,可以通过文本文件读取参赛人员名称: ② 对参赛人员随机分组,一组两人,两两PK,如果是奇数人数,某一个参赛人员成为幸运儿自动晋级: ...
- windows10+VS+CUDA+cuDNN+TensorFlow-gpu环境搭建(问题及解决)
TensorFlow-gpu环境需要CUDA+cuDNN+python,CUDA又需要VS,所以,,,环境越来越大哈哈. 1.主要环境: Python 3.6 CUDA9.0 Cudann7.0 Te ...
- timers模块
timers模块 var timers = require('timers'); function A() { //将A对象注册到定时器里 timers.enroll(); //进行激活,如果不激活, ...
- MySQL 常用语句总结
用一个表更新另一个表 UPDATE table1 t1, table2 t2 SET t1.field1 = t2.field1, t1.field2 = t2.field2 WHERE t1.fie ...
- 小功能 HTML标签状态改变
在编写程序得时候根据不同的业务需求会改变相应的标签的状态 今天介绍一下<a>标签状态的改变 当前业务场景为需要A标签的样式 即保留A标签的原有样式 在鼠标悬停得时候鼠标状态呈销售状 都知道 ...