什么是Vue.js

  • Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App，Vue语法也可以进行手机App的开发，需要借助Weex）
  • Vue.js 是前端的主流框架之一，和Angular.js、React.js一起，并成为前端三大主流框架！
  • Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于第三方库或既有项目整合。（Vue配套的第三方类库，可以整合起来做大型项目的开发）
  • 前端的主要工作？主要负责MVC中的V这一层；主要工作就是和界面打交道，来制作前端页面效果；

为什么要学习流行框架

  • 企业为了提高开发效率；在企业中，时间就是效率，效率就是金钱；

    • 企业中，使用框架，能够提高开发效率
  • 提高开发效率的发展历程：原声JS（各种浏览器存在兼容性问题） -> Jquery之类的类库（频繁操作dom元素，拼接dom） -> 前端模板引擎（数据更改整个页面都要重新渲染） -> Angular.js/ Vue.js（能够帮助我们减少不必要的DOM操作；提高渲染效率；双向数据绑定的概念【通过框架提供的指令，我们前端程序员只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了】）
  • 在Vue中，一个和核心的概念，就是让用户不再操作DOM元素，解放了用户的双手，让程序员可以更多的时间去关注业务逻辑；
  • 增强自己就业时候的竞争力
    • 人无我有，人有我优

框架和库的区别

  • 框架：是一套完整的解决方案；对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目

    • node中的express
  • 库（插件）：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求。
      1. 从Jquery 切换到 zepto
      1. 从 EJS 切换到 art-template

Node（后端）中的MVC与前端中MVVM之间的区别

  • MVC 是后端的分层开发概念
  • MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分Model，View，VM ViewModel

第一个Vue示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>01.Vue的基本代码</title>

</head>

<body>

<!--将来 new 的 Vue 实例，会控制这个元素中的所有内容-->

<!--Vue 实例所控制的这个元素区域，就是我们的 V-->

<div id="app">

    <p>{{msg}}</p>

</div>

<!--1. 导入Vue的包-->

<script src="lib/vue.js"></script>

<script>

    // 2. 创建一个Vue的实例

    // 当我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数

    // 注意：我们 new 出来的这个 vm 对象，就是我们 MVVM 中的VM调度者

    var vm = new Vue({

        el: '#app',  // 表示，当前我们new的这个Vue实例，要控制页面上的哪个区域

        // 这里的 data 就是 MVVM 中的 M，专门用来保存每个页面的数据

        data: {  // data 属性中，存放的是 el 中要用到的数据

            msg: '欢迎学习Vue'  // 通过 Vue 提供的指令，很方便的就把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们手动操作DOM元素了】

        }

    })

</script>

</body>

</html>

Vue系列教程（一）基础介绍的更多相关文章

  1. Git系列教程二 基础介绍

    一.存储方式 如果让我们设计一个版本控制系统,最简单的方式就是每做一次更改就生成一个新的文件. 这样的方式太占用空间,所以传统的版本控制系统都是保存一个文件的某个版本的全部内容以及其他版本相对于这个版 ...

  2. [js高手之路] vue系列教程 - 事件专题(4)

    本文主要讲解事件冒泡,事件绑定的简写,事件默认行为,按键码等一系列与事件相关的知识. 一.事件绑定的简写,@事件类型.  之前我的[js高手之路] vue系列教程 - vue的事件绑定与方法(2) 用 ...

  3. spring cloud系列教程第一篇-介绍

    spring cloud系列教程第一篇-介绍 前言: 现在Java招聘中最常见的是会微服务开发,微服务已经在国内火了几年了,而且也成了趋势了.那么,微服务只是指spring boot吗?当然不是了,微 ...

  4. [js高手之路] vue系列教程 - 实现留言板todolist(3)

    通过前面两篇文章的的学习,我们掌握了vue的基本用法. 本文,就利用这些基础知识来实现一个留言板, 老外把他称之为todolist. 第一步.使用bootstrap做好布局 <!DOCTYPE ...

  5. [js高手之路] vue系列教程 - vue的基本用法与常见指令(1)

    本系列课程选用vue的版本为1.0.21, 什么是vue? vue是由尤雨溪开发的一款基于MVVM的框架,M->模型,V->视图, 也就是说模型数据改变了,视图也跟着改变, 视图内容改变, ...

  6. Vue系列教程（三）之vue-cli脚手架的使用

    一.Vue-cli的环境准备 目的:(1)快速管理依赖 (2)确定项目结构 1.安装node.js Node.js是一个可以让前端运行在服务器上的一个工. 下载:https://nodejs.org/ ...

  7. Vue系列教程（一）之初识Vue

    一.Vue和MVVM Vue是一个渐进式的js框架,只注重视图层,结合了HTML+CSS+JS,非常的易用,并且有很好的生态系统,而且vue体积很小,速度很快,优化很到位. Vue技术周四MVVM开发 ...

  8. [js高手之路] vue系列教程 - 组件定义与使用上部(7)

    组件是vue框架比较核心的内容,那么什么是组件呢? 通俗点讲:组件是由一堆html, css, javascript组成的代码片段, 作用是为了实现模块的重用 组件的基本用法: <div id= ...

  9. [js高手之路] vue系列教程 - 绑定class与行间样式style(6)

    一.绑定class属性的方式 1.通过数组的方式,为元素绑定多个class <style> .red { color:red; /*color:#ff8800;*/ } .bg { bac ...

随机推荐

  1. dockerfile部署tomcat+jdk

    FROM centos: MAINTAINER www.ctnrs.com ENV VERSION= RUN yum install wget curl unzip iproute net-tools ...

  2. 【一起学源码-微服务】Nexflix Eureka 源码十二：EurekaServer集群模式源码分析

    前言 前情回顾 上一讲看了Eureka 注册中心的自我保护机制,以及里面提到的bug问题. 哈哈 转眼间都2020年了,这个系列的文章从12.17 一直写到现在,也是不容易哈,每天持续不断学习,输出博 ...

  3. 洛谷训练新手村之“BOSS战-入门综合练习1”题解

    P1478 陶陶摘苹果(升级版) 题目链接:https://www.luogu.com.cn/problem/P1478 题目大意:陶陶有s点体力值,每个苹果消耗体力值,问s体力值最多能摘多少苹果. ...

  4. Vue.js项目在apache服务器部署后，刷新404的问题

    原因是vue-router 使用了路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面. const router = n ...

  5. 原生js中call、apply、bind的区别和相同点

    结论: 相同点: 1.都是js原生方法,改变函数中的this指向 2.都可以传递参数,第一个参数为 把this指向到哪里去,即目标元素 不同点: 1.call和apply都是主动触发,绑定后自动执行, ...

  6. mysql 多主一从

    一.主服务器准备 1.1.环境准备 两台主机器ip分别为 100.100.100.105 (主1) 100.100.100.106(主2) 安装 mysql [root@centos ~]# yum ...

  7. MySQL/数据库 知识点总结

    书籍推荐 <SQL基础教程(第2版)> (入门级) <高性能MySQL : 第3版> (进阶) 文字教程推荐 SQL Tutorial (SQL语句学习,英文).SQL Tut ...

  8. DOCKER学习_017:Docker-Compose介绍

    dockers三驾马车 Docker Machine Docker Swarm Docker Compose 一 Docker Compose介绍 Docker Compose是一个定义和运行多容器应 ...

  9. 毒瘤养成记1: 如何卡hash

    各位毒瘤大家好, 最近模拟赛考了一道trie+主席树好题, 但大家都用hash水过了这道题(包括我), 为了测试一下新搭建的HEAT OJ的hack功能, 我将继续扮演毒瘤的角色, 用毒瘤的艺术形象努 ...

  10. spring boot部署中executable的系统服务

    首先在pom.xml 中添加spring boot插件,并设置 <plugins> <plugin> <groupId>org.springframework.bo ...